Fix/lit migration#6
Merged
Merged
Conversation
Add lit ^3.3.2 as a dependency and @rollup/plugin-node-resolve ^16.0.3 as a dev dependency. Switch rollup output format from iife to esm and add the resolve plugin so lit can be bundled from node_modules. Enable experimentalDecorators in tsconfig for LitElement decorator support.
Convert SpanPanelElement from vanilla HTMLElement to LitElement: - Use reactive properties (@Property, @State) and declarative templates - Replace innerHTML-based rendering with lit-html template - Remove all recovery workarounds (health check interval, renderWithRecovery, recoverIfNeeded, renderTabWithTimeout) — LitElement survives HA's WebSocket reconnection lifecycle natively - Remove module-level recovery code from panel/index.ts - Use @CustomElement decorator for registration instead of manual define - Use declarative event delegation on tab-content container - Schedule imperative tab renders via updateComplete
Convert SpanPanelCard from vanilla HTMLElement to LitElement with @CustomElement decorator, @property/@State decorators, and lit html templates for the outer shell. Inner card content remains imperatively rendered via innerHTML (hybrid approach) since renderers return HTML strings. Simplify index.ts to use decorator-based registration for the card while keeping manual registration for the editor.
There was a problem hiding this comment.
Pull request overview
This PR migrates the SPAN panel and card implementation to Lit/LitElement to improve Home Assistant frontend compatibility (notably around lifecycle behavior during reconnect/backgrounding).
Changes:
- Migrate
span-panelandspan-panel-cardfrom vanillaHTMLElementrendering toLitElementwith decorators and reactive state. - Switch Rollup output format from IIFE to ESM and add module resolution for bundling Lit.
- Bump version to
0.9.1and document the migration/build changes in the changelog.
Reviewed changes
Copilot reviewed 8 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Enables experimentalDecorators for Lit decorators. |
| src/panel/span-panel.ts | Rewrites the HA panel as a LitElement and converts imperative event wiring/rendering to Lit templates + lifecycle hooks. |
| src/panel/index.ts | Switches to side-effect import to register the panel element. |
| src/index.ts | Switches to side-effect import to register the card element. |
| src/constants.ts | Bumps CARD_VERSION to 0.9.1. |
| src/card/span-panel-card.ts | Rewrites the Lovelace card as a LitElement and reworks discovery/render lifecycle. |
| rollup.config.mjs | Adds node-resolve and changes outputs to ESM. |
| package.json | Bumps package version and adds lit + node-resolve dependency. |
| package-lock.json | Lockfile updates for new deps/version bump. |
| dist/span-panel-card.js | Updated bundled distribution artifact. |
| CHANGELOG.md | Adds 0.9.1 entry describing the migration and build changes. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrate to the LitElement framework for HA compatibility