Skip to content

v0.20.0

Choose a tag to compare

@github-actions github-actions released this 18 Oct 13:16
· 535 commits to main since this release
2e3529f

The plugin now runs in Astro. lit() server-renders and hydrates Lit
components with no other renderer, and litDevtools() brings hot patching and
the Lit panel, opened from Astro's dev toolbar. The Components tab reads
hydration as a state and stops labelling other libraries' elements. The
DevTools now warn when the Lit Inspector extension and the plugin share a page,
and both work there. Nothing needs action to upgrade.

Watch the 0.20.0 release video, 44 seconds

Added

  • The plugin runs in Astro, with the Lit panel in the dev toolbar. Add
    litDevtools() from @oddsquad/vite-plugin-lit/astro to your integrations:
    Lit components hot-patch in place, hydrated or not, and the Lit logo in
    Astro's dev toolbar opens the panel on the page you are on.
    LIT_PLUGIN_TIMELINE=false turns the panel off, and the timeline option
    wins over it.
  • Lit components render and hydrate in Astro with no other renderer.
    lit() from @oddsquad/vite-plugin-lit/astro server-renders Lit
    components, hydrates them with their array and object props, keeps a
    defer-hydration you wrote until you remove it, and needs no hydrate imports
    in your pages. Components nested in another's shadow root hydrate after a
    view transition too.
  • Resize the Lit window in Astro's dev toolbar. Drag the grip in its top
    corner to make it bigger or smaller; the size sticks across page loads, and a
    double click on the grip resets it. The window lines up with where the
    toolbar is docked.
  • The DevTools warn when two runtimes share a page. With the Lit Inspector
    extension enabled on a dev server that already runs the plugin, the console
    and the Components tab now say that two runtimes are loaded and that the
    extension should be off for that site, instead of the picker silently doing
    nothing.

Changed

  • Hydration state reads as a state. A server-rendered component that has
    hydrated is now marked hydrated instead of SSR, and deferred, not
    hydrated
    and hydrated show as pills in the Components tree and details,
    with a drop icon that is empty until the element hydrates and filled once it
    has.
  • Custom elements from other libraries sit in the tree unmarked. The muted
    not Lit chip is gone from their rows and the details head, so wrappers like
    Astro's islands no longer crowd the tree with labels; the details pane still
    says why they have no properties.
  • A component that never upgraded shows one chip, not two. One the server
    rendered was marked both not upgraded and not hydrated, as if hydration
    were still coming; it now carries only not upgraded, whose tooltip says it
    still shows the HTML the server sent.

Fixed

  • The Lit Inspector extension works on a dev server that runs the plugin.
    Enabled for such a site, Pick did nothing and threw in the console, and Vite
    DevTools lost the page. The extension's runtime now serves the page and the
    plugin's shares it, so both panels show the tree and Pick works from either.
  • The link printed with the DevTools code opens the Lit panel. Without the
    Vite DevTools hub, the #devframe_otp link in the terminal opened your app
    instead of the panel at /__lit/, so you had to type the code; it now opens
    the panel, approved.
  • The Lit panel connects on StackBlitz without Vite DevTools. In a
    WebContainer the panel the plugin serves at /__lit/ used to be refused by
    its own socket and never show the page; it now admits StackBlitz's origins.