Skip to content

v0.7.0

Choose a tag to compare

@github-actions github-actions released this 29 Sep 18:14
· 336 commits to main since this release
5488b9c

Hot-patching covers two cases it used to get wrong: components with native
#private members, which threw, and child elements whose parent template you
edit, which lost their state. The standalone lit-devtools dev server also
gets pages to feed it: one script tag connects any page running Lit, whether
Vite serves it or not, directly or through a proxy. Two fixes ride along:
open-in-editor links lose a stray slash, and the timeline no longer misses the
first component's connect and disconnect.

Added

  • Components with #private fields keep hot-patching. Editing an element
    that uses native #private fields or methods now updates it in place and
    keeps its private state, instead of throwing "Cannot read private member".
    Set hmr.privateFields: false to keep real brand checks in dev.
  • Child components keep their state when you edit the parent. Changing the
    template a child element sits in no longer resets its @state and
    #private fields; hmr.childState: 'reuse' keeps the original element
    where it has no bindings, and 'reset' restores the old behaviour. The
    DevTools Settings tab can switch the mode live; the next edit uses it.
  • Pages outside Vite can feed the standalone panel. lit-devtools dev now
    prints a <script src=".../lit-devtools.js"> tag; a page that loads it shows
    its component tree, inspector and timeline in the panel, even when Vite
    doesn't serve it or it's reached through a proxy or tunnel. Pages on
    localhost connect on any port, and --allow-origin admits others, with *
    for any subdomain (--allow-origin 'https://*.webcontainer-api.io' for
    StackBlitz). HMR, source locations and open-in-editor still need Vite.

Fixed

  • Open-in-editor links use the documented URL form. Links to VS Code,
    Cursor, Zed and Windsurf no longer carry a double slash before absolute
    paths like /Users/....
  • The timeline records the first component's connect and disconnect. On a
    page with no Lit element when the DevTools runtime starts, the first
    component defined afterwards now shows its connectedCallback and
    disconnectedCallback events like the rest.