{"action":"created","issue":{"url":"https://api.github.com/repos/home-assistant/home-assistant-polymer/issues/1188","repository_url":"https://api.github.com/repos/home-assistant/home-assistant-polymer","labels_url":"https://api.github.com/repos/home-assistant/home-assistant-polymer/issues/1188/labels{/name}","comments_url":"https://api.github.com/repos/home-assistant/home-assistant-polymer/issues/1188/comments","events_url":"https://api.github.com/repos/home-assistant/home-assistant-polymer/issues/1188/events","html_url":"https://github.com/home-assistant/home-assistant-polymer/issues/1188","id":324501051,"number":1188,"title":"JS based custom panels","user":{"login":"balloob","id":1444314,"avatar_url":"https://avatars3.githubusercontent.com/u/1444314?v=4","gravatar_id":"","url":"https://api.github.com/users/balloob","html_url":"https://github.com/balloob","followers_url":"https://api.github.com/users/balloob/followers","following_url":"https://api.github.com/users/balloob/following{/other_user}","gists_url":"https://api.github.com/users/balloob/gists{/gist_id}","starred_url":"https://api.github.com/users/balloob/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/balloob/subscriptions","organizations_url":"https://api.github.com/users/balloob/orgs","repos_url":"https://api.github.com/users/balloob/repos","events_url":"https://api.github.com/users/balloob/events{/privacy}","received_events_url":"https://api.github.com/users/balloob/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-18T17:59:30Z","updated_at":"2018-05-18T22:11:21Z","closed_at":null,"author_association":"MEMBER","body":"Custom panels based on HTML imports are deprecated (we're removing all HTML imports).\r\n\r\nIn it's place we want to add JS-based panels. However, this has 1 big downside compared to HTML imports: since it's 1 big script (instead of many small script tags), defining a web component that already exists will result in an exception and stop the importing of the panel.\r\n\r\nThis isn't the first time that we are fighting with duplicate web components. We've had, and solved, the same problem for Hass.io by running it in an iframe. Inside the iframe panels still have access to the `hass` object and can fire events to open/close the sidebar. It works by making the parent web component `setProperties` function available on the `window` object, which then is accessed by the Hass.io panel inside Home Assistant:\r\n\r\n - [`src/panels/hassio/ha-panel-hassio.js`](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/panels/hassio/ha-panel-hassio.js) - renders iframe and passes info down\r\n - [`/hassio/src/hassio-app.js`](https://github.com/home-assistant/home-assistant-polymer/blob/master/hassio/src/hassio-app.js) - renders inside iframe, forwards info\r\n\r\nSo to add JS based custom panels, I want to suggest we generalize the Hass.io approach.\r\n\r\n - Create a new JS mini-app to be embedded in iframe that instantiates web component and connects to main HASS\r\n - Add `/static/custom_panel.html` that renders the mini-app\r\n - Add a new panel type \"custom\" that renders iframe with the HTML. Add `?es5` if it's an ES5 based custom panel\r\n - Make external panels that register with the frontend.py expose themselves as type: custom.\r\n - Pass data to the iframe via [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage):\r\n   - panel url: string\r\n   - web component name: string\r\n   - config: object"},"comment":{"url":"https://api.github.com/repos/home-assistant/home-assistant-polymer/issues/comments/390346014","html_url":"https://github.com/home-assistant/home-assistant-polymer/issues/1188#issuecomment-390346014","issue_url":"https://api.github.com/repos/home-assistant/home-assistant-polymer/issues/1188","id":390346014,"user":{"login":"balloob","id":1444314,"avatar_url":"https://avatars3.githubusercontent.com/u/1444314?v=4","gravatar_id":"","url":"https://api.github.com/users/balloob","html_url":"https://github.com/balloob","followers_url":"https://api.github.com/users/balloob/followers","following_url":"https://api.github.com/users/balloob/following{/other_user}","gists_url":"https://api.github.com/users/balloob/gists{/gist_id}","starred_url":"https://api.github.com/users/balloob/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/balloob/subscriptions","organizations_url":"https://api.github.com/users/balloob/orgs","repos_url":"https://api.github.com/users/balloob/repos","events_url":"https://api.github.com/users/balloob/events{/privacy}","received_events_url":"https://api.github.com/users/balloob/received_events","type":"User","site_admin":false},"created_at":"2018-05-18T22:11:21Z","updated_at":"2018-05-18T22:11:21Z","author_association":"MEMBER","body":"I don't want to put the burden on authors to maintain custom panels that will work for each version of Home Assistant. Another pain point is that if a custom panel defines a web component, and then a built-in panel is loaded after that and also defines that component, our panel breaks because `customElements.define()` will raise ([this proposal will solve that, but it's still in draft](https://gist.github.com/justinfagnani/d67d5a5175ec220e1f3768ec67a056bc)).\r\n\r\nI think that not putting it in an iframe will:\r\n - make it complicated to do it right, or easy to do it wrong\r\n - puts the update burden on the users\r\n\r\nThe idea would be that custom panel authors would not have to know about that it runs in an iframe. It will just work."}}
{"actor":{"display_login":"balloob"}}