Efforts to modernize and localize the frontend are moving full speed. This blog post will touch upon the upcoming features for Home Assistant 0.71 which should hit the beta channel today and is planned for a release a week from now.

Improved Custom Panel support​

Custom panels allow developers to build panels that will plug into the Home Assistant user interface, with the same possibilities like our other panels like history, map etc. The Home Assistant frontend will manage authentication and the subscription for states of the backend, the panel only has to take care of displaying the data and can offer users option to control things (calling services etc).

This support has been around for a while, but last week we've spend some time polishing our support and have three new additions:

First new feature is that we now allow importing a panel from a JavaScript URL. This is going to be the preferred way to distribute panels moving forward. This also means that you can refer to a panel hosted externally. The user will have to approve before external panels get loaded. It's still possible for users to host it locally (and no approval is needed) by copying the panel to <config dir>/www/your-panel.js and use /local/your-panel.js as the url.

Second new feature is that we can now embed your panel in an iFrame. This allows panel developers to not have to worry about including duplicate web components and it makes it possible to develop React-based panels. In the past, React-based panels didn't work because React doesn't work well inside Shadow DOM (more info).

Third new feature is that we now make a starter kit available to start developing React based panels! The kit contains everything that is needed to start developing React-based panels and share them with the community. Let us know what you're building!

Custom UI: <state-info> and <ha-relative-time>​

If you're building custom UI, odds are that you're using either <state-info> and <ha-relative-time>. Although not officially supported as external facing API, we still want to give a heads up that it's going to be needed to pass the hass object in.

This is necessary because <ha-relative-time> can now be localized thanks to c727 in #1241

With the release of Home Assistant 0.70, we've migrated the build pipeline for our frontend from being based on HTML imports to ES module imports (more on this later). One of the effects of this is that we're no longer using the window object to share classes, data and utilities with other pieces of code.

This might impact you if you dependend on some of this. Examples are Polymer (window.Polymer) or one of our utilitity functions that used to be available as window.hassUtil, window.HAWS or window.hassMixins.

To give developers time to migrate, we're adding a temporary legacy support layer that will expose some of our internals again on the window object. We've already added window.Polymer, window.Polymer.Element and window.Polymer.html. If you're using other specific things from the window object, please let us know.

Th legacy support layer will no longer be included in releases happening after July 2018.