New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom UI & Panels: Modules & dependencies #1157

Closed
balloob opened this Issue May 12, 2018 · 13 comments

Comments

Projects
None yet
5 participants
@balloob
Member

balloob commented May 12, 2018

When we switch to Polymer 3, we're no longer using HTML imports or the global scope to make functions available to other parts of the code base. Instead, we're using JS modules and functions are imported directly by the code that uses it.

I want to propose that we deprecate HTML-based custom UI and replace it with JS module custom UI. This will be easier to bundle up for users, meaning they can include their own dependencies, including Polymer.

Following plan:

When we release Polymer 3

  • Announce deprecation
  • Add a support layer to keep custom UI working that depends on global objects (we need to expose Polymer on window).

Soon thereafter

  • Add support for JS-based custom UI

2 months later

  • Remove support for HTML-based custom UI (no longer expose window.Polymer)
@andrey-git

This comment has been minimized.

Contributor

andrey-git commented May 12, 2018

What is the upside of exposing window.Polymer? Authors need to update their code anyway.

@balloob

This comment has been minimized.

Member

balloob commented May 12, 2018

We need to expose it to support HTML imports support. I am assuming, and correct me if I'm wrong, that custom UI doesn't bundle polymer and expects it on the window object. Polymer imported via es modules will not expose itself on the window object.

@andrey-git

This comment has been minimized.

Contributor

andrey-git commented May 12, 2018

Depending on implementation it might need Polymer for v1-2 hybrid or PolymerElement for v2

@balloob

This comment has been minimized.

Member

balloob commented May 12, 2018

We'll keep both around until we remove the HTML support

@balloob

This comment has been minimized.

Member

balloob commented May 19, 2018

There was some confusion in the chat because we only expose Polymer on the window object. All other things (like utilities, mixins) are no longer available. This is on purpose.

We should limit the API that we expose to custom UI such that the frontend can evolve without breaking the expectations of custom UI.

Our API to custom UI should be:

  • You give HASS a web component name and url for HASS to load it
  • Loading that url will define specified web component
  • HASS will instantiate your web component and set hass and stateObj as properties.

Custom UI can use any framework they want. They are not limited to Polymer. In fact, the Polymer team is actively suggesting to no longer use Polymer templates. Instead, they suggest you use their new Lit Element (source)

@andrey-git

This comment has been minimized.

Contributor

andrey-git commented May 20, 2018

Disclosure: my code also gets ha polymer elements via customElements.get and tweaks their prototype to achieve advanced features, like user-supplied js templating.

I'm aware this is brittle, but this allows the advanced tweaking.

@balloob balloob changed the title from Custom UI: Modules & dependencies to Custom UI & Panels: Modules & dependencies May 20, 2018

@balloob

This comment has been minimized.

Member

balloob commented May 20, 2018

I am down to add hassUtils back in the legacy layer. Which methods are people using? Note that HAWS is also no longer available. Were people using that? (the helpers have been moved into the polymer repo)

@balloob

This comment has been minimized.

Member

balloob commented May 21, 2018

I've added window.Polymer.html back in #1202

@ptc

This comment has been minimized.

ptc commented Aug 19, 2018

I'm missing hassUtil.relativeTime

@fanaticDavid

This comment has been minimized.

Contributor

fanaticDavid commented Sep 1, 2018

I agree with @ptc : it would be great to have hassUtil.relativeTime back through Custom UI.

@balloob

This comment has been minimized.

Member

balloob commented Sep 4, 2018

We can do that, but it requires the input of the localize function too. Why not copy the 20 lines into your project?

@cgarwood

This comment has been minimized.

Contributor

cgarwood commented Oct 18, 2018

Is there anything left to do with this issue?

@balloob balloob closed this Oct 19, 2018

@balloob

This comment has been minimized.

Member

balloob commented Oct 19, 2018

Not removing window.Polymer until the last Polymer element is removed from the initial load.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment