2022.3 broke paper elements about lovelace-fan-xiaomi

[ian-craig]

Okay, I've created a branch boilerplate-card which I hope is a working version of master refactored onto the boilerplate-card template.

This is admittedly a pretty huge change, so I'd like you to take a look and poke around with it in your dev environment to give some feedback before I even publish a PR (and the diff won't be useful anyway).

Major conceptual changes:

1. Adds a lot of tooling: rollup, typescript, prettier, eslint, etc. These are all very standard in the OSS community, are well documented, and I've found them good to work with as I did the refactor so I see this an improvement.
2. Lit-HTML manages the component lifecycle, and should trigger updates when config or any of the related entities are changed (instead of every time we get a new hass)
3. Rendering is now functional, and we never directly access DOM elements to modify them (the render() function just runs again with new state, and Lit-HTML takes care of applying necessary updates to the DOM). This means all of the logic for showing the state of entities is in the render() function using html template syntax, and so are references to all the click callbacks.

This is a good video to check out if you're not familiar with any of these patterns. https://www.youtube.com/watch?v=Io6JjgckHbg

And note I've also added a Contributing section in the Readme with instructions on how to start a watch/devserver build and attach that to Home Assistant so you don't need to copy files around.

The built JS is now in the /dist directory (not committed), and is split into separate files for the view and editor. This was just the format set up in boilerplate-card, but we could change it to a single output file if you'd prefer. I don't have much insight into the deployment process so I'll defer to you on that stuff. I did include (and have tested) their GitHub Actions which build these files and attach them to releases.

[ikaruswill]

@ian-craig could I get your help with this?

[ian-craig]

I am travelling for the next week and a half, so am unlikely to get much time before then, but I am happy to help after.

It sounds like the best solution may be for us to move to the boilerplate card, as we use other ha-* elements which are officially unsupported and may also break in future updates. That's not a small change though, and comes with a lot more tooling which would be helpful but would also likely take a little time to get used to. What are your thoughts on that?

[ikaruswill]

Sure, it does sound like the way forward. I've been looking at the boilerplate card as well, and it does look like significant change is required, but regardless, I'm down for this change even if it takes some time. I will definitely need your expertise here given my limited knowledge of javascript.

I'm currently refactoring the code to make it more modular and portable which should help with our move to the boilerplate card.

Have a good trip!

[ikaruswill]

@ian-craig Thanks for the work and the resources, I'll go familiarize myself with those patterns tonight. Really appreciate it!

[ikaruswill]

Update: I've been prepping for a trip overseas lately so haven't had the chance to look at it. Will try to take a look at it whenever possible within the next week. 🙏

[ian-craig]

@ikaruswill I've posted this refactor as PR #95. It'd be good to get that in before doing too many other fixes/refactors as they're certain to conflict. I'll do another pass of testing and make sure recent changes have been included before we complete that PR, but I'm keen to hear your feedback on the overall setup.

[ikaruswill]

@ian-craig Thanks for waiting, I've merged your PR.
I tried your steps as detailed in the Contributing section, but because my HA is on HTTPS, I'm unable to load mixed content since npm run start serves over HTTP.

I think we'll need to come up with a way to develop for people running HA under HTTPS. 🤔

[ian-craig]

The simplest way would just be to go back to copying manually, and rollup should be outputting the builds still to do that.

If you want a better dev inner loop we can add the devcerts package and pass the cert to rollup-plugin-serve's https config. I can probably take a look at that over the weekend if you want to go that direction.

[ikaruswill]

Sure, having the devcerts would be great.

Out of curiosity how does that work though? It's self-signed right? If so then wouldn't browsers complain and refuse to load the resource again?

[ian-craig]

Created PR #96 for easier https inner loop.

I think we can close this issue, unles you wanted to hold off for some more testing?

[ikaruswill]

Back from being away, thanks let's close this one!