Skip to content

Releases: oddcelot/lit-devtools

v0.24.0

Choose a tag to compare

@github-actions github-actions released this 25 Oct 18:09
c492b5d

Your components now describe themselves: the plugin writes a Custom Elements
Manifest from your sources, in the build, the dev server or from
lit-devtools manifest, and the details pane reads more of what a component
declares, dispatches and inherits. A language server brings the same
knowledge to your editor, and @oddsquad/lit-devtools installs the plugin,
the server and its Oxlint rules as one package. Nothing needs action to
upgrade.

Added

  • Generate a Custom Elements Manifest from your components. Set
    manifest: true and vite build emits custom-elements.json beside the
    bundle, the dev server serves it live, and write keeps a copy in the
    project for editors and Storybook, with no separate analyzer to set up.
  • lit-devtools manifest writes a Custom Elements Manifest from the
    command line.
    It reads every script under src and writes
    custom-elements.json, ready for a prepublishOnly script or CI. It uses
    your Vite config's aliases, and in a project without one resolves imports
    the way Node and TypeScript do, tsconfig.json paths included.
  • A language server for Lit components. @oddsquad/lit-language-server
    completes your components' tags, attributes, properties and events in
    templates, shows their docs on hover, types event handlers and reports one
    that doesn't fit its event, in Zed or any LSP editor. Configure it with
    litPlugin({languageServer}).
  • Install everything as @oddsquad/lit-devtools. One package brings the
    plugin (@oddsquad/lit-devtools/vite, /astro), the language server and
    the Oxlint rules (/oxlint); the separate packages stay for a project that
    wants one part.
  • Components inherit docs from the library elements they extend. A
    component built on, say, Web Awesome's badge now lists the badge's
    properties, slots and events in the details pane, read from Web Awesome's
    own Custom Elements Manifest.
  • Components show the events they dispatch, even without @fires. An
    event your class sends with this.dispatchEvent(new CustomEvent('pick'))
    now appears under Events in the details pane, typed CustomEvent.
  • The manifest says what each event carries. An event dispatched as
    new CustomEvent('add-to-cart', {detail: {id: this.productId}}) is listed
    as CustomEvent<{id: string}>, also when a @fires tag documents it
    without a type.
  • Component docs read @attr, @prop, @default and @tag. JSDoc
    written for the Custom Elements Manifest analyzer now shows in the details
    pane: attributes and properties the code doesn't declare, defaults it
    doesn't initialize, and the tag of a class registered elsewhere.
  • Components show the defaults their constructor sets. A
    this.variant = 'neutral' in the constructor now shows as the default of
    variant in the details pane, even when the property comes from a library
    base class such as Web Awesome's.
  • Vanilla custom elements show their observed attributes. An element
    that lists static observedAttributes = ['mode'] now shows mode under
    Attributes in the details pane, described by an @attr tag if it has one.

Oxlint plugin 0.1.0

Choose a tag to compare

@github-actions github-actions released this 25 Oct 22:25
61105c9

The first release: the problems the Lit language server shows in your editor
can now fail a lint run. It reads your components the way the server does,
from your sources and your dependencies' Custom Elements Manifests, with the
same settings, and reports through Oxlint's own severities and comments.

Added

  • Fail a lint run on the problems the editor shows. Extend
    configs.recommended from @oddsquad/oxlint-plugin-lit in
    oxlint.config.ts, or Vite+'s lint, and a handler that doesn't fit its
    event or a broken css template fails Oxlint, at the editor's severities.
  • Rules named so they don't clash. lit-devtools/event-type and
    lit-devtools/css sit next to eslint-plugin-lit's lit/ rules; turn one
    off in rules or silence a line with // oxlint-disable-next-line.

Language server 0.2.0

Choose a tag to compare

@github-actions github-actions released this 25 Oct 18:09
c492b5d

Templates now lead somewhere: go to a component's source from any tag,
attribute, property or event, and find every template that uses it. The same
completion, docs and navigation work in JSX, Astro and MDX. The problems it
reports can also fail a lint run, through @oddsquad/oxlint-plugin-lit.

Added

  • Go to a component's source, and find where it's used. Go to
    implementation or definition on a tag, attribute, .property or @event
    in a template opens the class, field or dispatch that declares it, in a
    base class when it's inherited; find references lists every template and
    HTML file that uses it.
  • Lit components in JSX, Astro and MDX. Tags, props and events complete,
    show their docs and lead to their source in .jsx and .tsx files, Astro
    templates and MDX, reading size="small", onsubmit-start={fn} and
    Solid's on:/prop: the way React 19, Preact, Solid and Astro do.

v0.23.0

Choose a tag to compare

@github-actions github-actions released this 24 Oct 17:10
2d7b4d2

The Components panel now shows what a component keeps to itself: its
#private fields, readable and editable under the dev server, and the custom
states, form value and validity of a form-associated element. The tree no
longer has a Live switch; it stays live, holds still under the pointer and
paces itself on busy pages. The panel's rows, colours and fields got easier
to read and hit, and the docs run the examples live beside the panel. Nothing
needs action to upgrade.

Added

  • The Components panel shows and edits a component's #private fields.
    Under the dev server, a Private section after State lists each native
    #private field as #name with its live value. A string, number or
    boolean has the same edit button as a property, kept as an override you can
    switch off, pin across reloads or remove, and the component re-renders with
    it. Agents read them through lit_component-details and set them through
    lit_set-prop. They come from the hmr.privateFields rewrite, so turning
    that off hides them.
  • The Components details show custom states and form values. An element
    that calls attachInternals() gets an Internals section with the states
    :state() matches, the value it last passed to setFormValue(), and its
    validity and validation message, kept live as they change. Agents read the
    same through lit_component-details.
  • Try the examples live in the docs. The Demos page opens flame, Web
    Awesome, Fernhouse, CSS, Tailwind, Forms and the tutorial's app running in
    your browser with the DevTools panel under them, with nothing to boot and a
    zoom control; StackBlitz is one switch away for editing their files.

Changed

  • The live component tree keeps up with busy pages without slowing them.
    A page that changes constantly still gets a fresh tree every so often,
    rebuilds space themselves out by how long the last one took, and none run
    while the Timeline is recording.
  • The Components toolbar sets Pick apart from the switches. Pick is a
    crosshair beside the tag filter, and Flash and Anatomy, which stay on until
    you turn them off, sit together as one group at the right.
  • Tree and list rows are easier to hit. Rows in the component tree and
    the timeline list are 24px tall, the minimum target size WCAG asks for.
  • Element references and functions no longer share a colour. Tags and
    element refs are teal, functions stay blue, in both colour schemes.

Fixed

  • A link to a component opens its details even before the page is ready.
    Opening the panel on #tab=components&component=N before the page
    connected, or before its components defined, no longer shows "This element
    is no longer in the page" for an element that is there.
  • Settings' About shows the page's Lit even when opened first. A panel
    opened on the Settings tab before the page connected said "lit: not
    detected" until the tab was reopened; it now lists the page's Lit packages
    as soon as the page connects.
  • Disabled fields no longer pass for empty ones. A disabled select or
    input is dimmed, filled and dash-outlined with a not-allowed cursor, and the
    tags of a multi-select read as live rather than greyed out.
  • The Lit tab's footer buttons work in a narrow panel. A long notice no
    longer covers its own "Don't show again" or "Not now": the text is cut
    short instead, and shows whole when you hover it.

Removed

  • The Components tab's Live toggle is gone; the tree is always live. It
    stays still while the pointer is over it, so the row under the pointer does
    not move, and catches up when the pointer leaves. A tree paused in an
    earlier version comes back live.

v0.22.0

Choose a tag to compare

@github-actions github-actions released this 24 Oct 10:34
b3c92d3

The Lit DevTools now run in any server. createLitDevtools() serves the
panel from your app's own origin, without Vite or a second port, and docks it
in a drawer along the bottom of the page. An Elysia example puts it next to
server rendering on Bun, and a forms example shows form-associated elements
with :state(). The panel takes its colours, type and code font from the Lit
Design System, and agents can read the docs as Markdown. Nothing needs action
to upgrade.

Added

  • The Lit DevTools in any server. createLitDevtools() from
    @oddsquad/vite-plugin-lit/devframe gives a server without Vite (Elysia,
    Hono, Bun.serve, a SvelteKit or Next.js route) one request handler for the
    panel, its page script and its RPC on the app's own origin, with no
    lit-devtools dev process or second port.
  • The panel docks in the page. With createLitDevtools(), a Lit button in
    the corner opens the panel in a resizable drawer along the bottom of the
    page, and picking an element opens it there instead of in another tab. It
    reopens as you left it; pass dock: false to keep it a tab.
  • An Elysia example, without Vite. A guestbook that Elysia renders on Bun
    with @lit-labs/ssr, streams, hydrates and keeps live over a WebSocket,
    with a form that works before it hydrates. It shows the hydration traps to
    avoid, attaches the standalone Lit DevTools, and builds into a single
    executable.
  • A forms example. A text field, a switch and a star rating extend one
    FormControl base class and work in a plain <form>: they submit with
    FormData, block submit while invalid, reset, and follow a disabled
    fieldset. Each shows what it is doing as :state() custom states for CSS to
    style on.
  • Every docs page has a Markdown copy. Append index.md to a page's
    address, follow its rel="alternate" link, or send Accept: text/markdown
    to get the page as Markdown, with Link headers pointing to llms.txt and the
    sitemap.
  • An agent skill for the plugin. Agents that read Agent Skills Discovery
    find it at /.well-known/agent-skills/ on the docs site: setup, CSS
    delivery, hot-patch failures and the DevTools MCP server in one file.
  • A setup prompt for coding agents. The Installation page has a prompt to
    copy into your agent; it installs the plugin, adds it to the Vite config and
    registers the types, then lists what it changed.
  • Browser agents can search and read the docs through WebMCP. In a
    browser with WebMCP, the docs offer search_docs, read_docs_page and
    open_docs_page tools.

Changed

  • The panel takes the Lit Design System's theme. Its colours, focus ring,
    motion and type scale come from the same tokens as the docs, in both colour
    schemes. Corners stay square; pills, status dots and the Timeline's layer
    chips are round.
  • The panel sets code in Lilex. Values, source locations, timings and the
    Timeline's lanes use the Lilex monospace instead of the system one.
  • The Updates count no longer looks like an error. The number on the
    Updates tab is blue instead of red; the orange count on Components still
    flags Lit warnings.
  • A lighter split between the tree and the details. The divider in the
    Components view is a hairline that lights up blue under the pointer, and is
    just as easy to drag.
  • The docs moved to vite-plugin-lit.oddsquad.dev. Links in the DevTools
    panel, the README and the extension listing point there, and the old
    oddcelot.github.io/vite-plugin-lit/ addresses redirect.

Fixed

  • A re-created child keeps its own listeners and lookups. When a parent
    edit makes Lit re-create a child, #private arrow-function listeners and
    fields the child sets in connectedCallback, such as a form it looks up,
    stay the new element's instead of being overwritten by the old one's.
  • Dark outlines and nulls are legible. In the dark scheme, unchecked
    switches, inputs and outlined buttons have a visible outline, and null
    values in the Properties view no longer fade into the background.
  • The ./build and ./astro/* exports have types on JSR. JSR no longer
    warns that these entry points have no type declarations, and installing the
    package from JSR types them like the others.

v0.21.0

Choose a tag to compare

@github-actions github-actions released this 19 Oct 19:08
1ef593e

Lit Inspector now opens sources in your editor: on a page a Vite dev server
serves, even without the plugin, a component's defined and rendered
links open the file. Locations read shorter everywhere, by package and
version or relative to the project, and a library's component names the
module its manifest gives. The panel also follows sites that swap in a new
page body, such as webawesome.com. Nothing needs action to upgrade.

Added

  • The extension opens sources in your editor on a Vite dev server. On a
    page Vite serves, with or without the plugin, the defined and
    rendered links open the file in your editor instead of only in Chrome's
    Sources panel, and work in Firefox too. They use the plugin's endpoint when
    it serves one, else Vite's own /__open-in-editor, under the page's base.
    When the extension can't tell where the project is on disk, the bottom of
    the Lit tab says so and offers Set project folder… for the site.

Changed

  • Locations in dependencies name the package. A component from a
    package reads as its name, version and path inside it, such as
    @awesome.me/webawesome 3.14.0 › dist/chunks/chunk.js:11, instead of five
    lines of pnpm store path; the full path is in the tooltip.
  • A package's component names its module. When the package ships a Custom
    Elements Manifest, defined reads as the module and class it names, such
    as components/card/card.js (WaCard), instead of a bundler chunk. That
    holds in the Vite panel and, for a manifest read from the site, in the
    extension.
  • Project files read relative to the project. A location given as an
    absolute path, such as Astro's for an element in .astro markup, reads
    src/pages/basics.astro:26, in the Vite panel and in the extension on a
    Vite dev server; the full path is in the tooltip.

Fixed

  • The panel follows sites that swap in a new page body. On a site that
    navigates with Turbo Drive, such as webawesome.com, the Components tree
    updates as you follow links, and the hover outline, update flashes and
    element picker keep working.
  • Lit components with a closed shadow root show their children. The
    Components tree lists what such a component renders, and Live follows
    changes inside it, as the anatomy view already did.
  • Elements written in .astro markup show where they are rendered. The
    rendered link, the source overlay and timeline events now point at the
    .astro file and line, where before those elements had no location at all.
  • The extension finds a decorated component on a Vite dev server. On a
    page Vite serves without the plugin, defined pointed at the compiler's
    decorate helper instead of the file that declares the class.

v0.20.1

Choose a tag to compare

@github-actions github-actions released this 19 Oct 05:54
088825f

A patch of fixes: the Lit tab in Firefox DevTools works again after opening
blank since 0.19.0, server-rendered elements hydrate with the source overlay
on, and closing a panel tab always clears what it drew. Nothing needs action
to upgrade.

Fixed

  • The Lit tab works in Firefox DevTools again. Since 0.19.0 it opened
    blank in Firefox; it now shows the site's status and the inspector once the
    site is enabled.
  • Server-rendered Lit elements hydrate with the source overlay on. An
    element whose template renders another custom element no longer re-renders
    in the browser with a warning about an edit that never happened, in Astro or
    any other server rendering.
  • Closing a panel tab always clears what it drew on the page. The anatomy
    overlay, outline and Live mode no longer outlive a panel tab that closed too
    fast to say so, or crashed.
  • The panel stops filling the console with warnings. Opening it no longer
    prints Web Awesome's size="small" is deprecated warnings, and a panel in a
    tab of its own, at /__lit/ or in Firefox's DevTools, no longer warns that
    the in-page channel has no handshake targets.

v0.20.0

Choose a tag to compare

@github-actions github-actions released this 18 Oct 13:16
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.

v0.19.0

Choose a tag to compare

@github-actions github-actions released this 17 Oct 10:49
31d23be

Lit rendered on the server with @lit-labs/ssr now works with the plugin:
edits hot-patch hydrated components and reach the next server render, shared
sheets arrive styled, and the Components tab shows where hydration stands. A
new SSR example covers dev, production builds and StackBlitz. Lit Inspector
gains a Lit tab in the Elements panel and reads Custom Elements Manifests from
more places, and the DevTools flag double renders. Nothing needs action to
upgrade.

Watch the 0.19.0 release video, 46 seconds

Added

  • Server-rendered Lit works in the dev server. With @lit-labs/ssr in
    your Vite server, an edit patches hydrated components in place and the next
    server render uses the new code instead of failing because the tag is
    already defined. A ?css-sheet renders into the declarative shadow root, so
    the page arrives styled, and its edits restyle hydrated components. A
    defer-hydration component edited before it wakes renders the new template,
    and a page whose HTML predates an edit renders that component once in the
    browser instead of failing to hydrate. The new SSR guide shows the setup, and
    Troubleshooting covers the dock's socket in middleware mode.
  • The Components tab shows hydration state. A server-rendered component
    is marked deferred while defer-hydration holds it back, not hydrated
    until its first update, and SSR the moment it hydrates, in the tree and the
    details pane.
  • An SSR example, on StackBlitz too. Open it from the README or the docs'
    Demos page: the counter arrives as server HTML, hydrates, and keeps its
    count through an edit, with the DevTools dock connected.
  • Server-rendered pages in production builds, with the Lit panel. The SSR
    guide and example cover a production build served without Vite: shared
    ?css-sheet styles arrive inlined, and the Lit panel attaches through
    lit-devtools dev with each element's hydration state.
  • The Lit panel works without Vite DevTools. With timeline: true and no
    DevTools(), the dev server serves the panel at /__lit/ and prints its
    address, instead of only warning that the panel never mounted.
  • A Lit tab in the Elements panel. The browser extension adds a Lit tab to
    the Elements sidebar, beside Styles and Computed, showing the properties,
    state, slots, parts and source links of the Lit element you select there.
  • Double renders are flagged. An update that a component's own previous
    update scheduled, usually because updated() set a property, is marked
    re-rendered in the Updates tab and 2× in the Timeline list, and
    lit_update-summary reports it as selfCaused. The Components tab's
    Warnings count how many times the recording shows an element re-rendering
    itself, also under a production build.
  • The Components tab counts dispatched events. With the Custom events
    layer on, a Dispatched section lists how many times the selected element
    dispatched each event type during the recording.
  • Properties show which class declared them. For a component that extends
    a base class or uses mixins, the Properties and State tables group their
    rows under the declaring class, the element's own first.
  • Component docs include members from your mixins. For a component
    written as extends Sized(Base), the Components tab lists what your
    project's Sized mixin adds, marked as inherited from it, and still reaches
    Base past a package mixin such as SignalWatcher.
  • Agents can set component properties. The new lit_set-prop tool sets a
    reactive property, or a field inside the object it holds, on a live element
    and answers with the element's details afterwards. Agent edits land as
    overrides in the panel, where you can switch them off or clear them.
  • Lit Inspector can pause on an update or a property change. Arm update
    or render on the selected element, or the pause toggle on one of its
    properties, and the page stops in the debugger when it happens.
  • Lit Inspector finds more Custom Elements Manifests. When a page links
    none, the Lit tab looks for every custom-elements.json beside the page's
    scripts and offers them, so Web Awesome's docs show component documentation
    with one click. Manifests on another site, such as a CDN, work once Chrome
    is granted access to it, through an Allow access button for a linked one.
  • Choose the manifests Lit Inspector reads. The Settings tab's Component
    docs section lists the page's linked manifests, the ones found and the ones
    you add by URL, such as /dist/custom-elements.json. Each can be switched
    off, ignored and reset, or moved up and down; the first switched-on one that
    describes a component supplies its docs.
  • The extension shows where an element is rendered. On a page without the
    Vite plugin, the details pane's rendered row names the template tag that
    created an element, found by the template's text in the page's sources, and
    in Chrome a click opens it in the Sources panel.
  • Read component docs without hovering. Turn on "inline descriptions"
    under Components in the Settings tab, and every documented property,
    attribute, slot and part shows its description under its row.
  • unoSheet() works with presetWind4. Pass preflights: true to keep
    Wind4's theme variables and @property rules in the shared sheet; drop the
    reset at the preset with presetWind4({preflights: {reset: false}}).
  • Context consumers waiting for a provider say so. A subscribing consumer
    that no provider has answered yet reads "waiting for a provider" instead of
    linking to a provider that never answered it, and links as soon as a
    ContextRoot replays its request.

Changed

  • The Settings tab no longer lists env var names. Hints name the plugin
    option alone, the reset button reads "Reset overrides", and a value set from
    the environment still shows its "(env)" badge.

Fixed

  • Hiding the panel clears what it drew on the page. Collapsing the dock,
    closing DevTools with the browser extension, or closing a panel opened as
    its own tab now takes down the anatomy overlay, hover outline and
    breakpoints and stops Live, instead of leaving them until the page reloads.
    The overlay comes back when the dock opens again.
  • Slotted context consumers link to the right provider. A consumer
    slotted into a component whose shadow tree provides the context now links to
    that provider, instead of to none or to one further out.
  • A provider's details follow a value set directly. Setting a context
    provider's value with setValue, without its host updating, refreshes the
    selected provider's row right away instead of on its next update.
  • A component whose constructor threw is no longer called "not Lit". The
    Components tab marks it not upgraded and says its constructor probably
    threw, instead of claiming another library defined it.
  • The Anatomy "not rendered" list follows the page. A light child added
    with a slot name the element doesn't have, or renamed to one, shows up
    without reselecting the element.
  • The Updates tab's equal-content badge shows its icon again. The badge
    that flags a property changed to a new reference with equal content rendered
    as a bare number.
  • lit-devtools mcp finds dev servers behind your own HTTP server. When
    Vite runs in middleware mode with your server passed in, the plugin
    registers that server's real port instead of probing 5173 and warning that
    discovery is unavailable.

v0.18.0

Choose a tag to compare

@github-actions github-actions released this 14 Oct 21:59
8d91718

Shared stylesheets now work with utility frameworks: UnoCSS utilities become
one adopted sheet through unoSheet(), and Tailwind v4 classes you add in dev
reach a ?css-sheet with their shadows, rings and gradients intact. Builds got
leaner: vite build no longer loads the dev tooling, and what the CSS queries
emit carries no HMR code. The Components tab gains a Request update button, and
the console gets $lit and Store as global variable. Nothing needs action to
upgrade.

Watch the 0.18.0 release video, 46 seconds

Added

  • UnoCSS utilities can be one shared sheet across shadow roots.
    unoSheet() from @oddsquad/vite-plugin-lit/uno writes the utilities your
    source uses to a .css file; import it with ?css-sheet and every component
    adopts the same CSSStyleSheet, swapped in place when a new class shows up.
  • A Tailwind example. Three components share Tailwind v4 utilities as one
    adopted sheet, each counting its renders: change the brand colour and
    everything recolours in place, add a class and the shared sheet gains it,
    with shadows, rings and gradients working inside shadow roots.
  • Production builds can leave the dev tooling out entirely. Use litCss()
    from @oddsquad/vite-plugin-lit/build for vite build and HMR, the source
    overlay and DevTools are never imported into the build; it keeps the CSS
    queries, css literal minification and cssSheetBuild.
  • Request update from the Components tab. A button beside the tag name
    calls requestUpdate() on the selected element, and the Updates and Timeline
    tabs name the DevTools as that update's cause.
  • $lit in the console is the selected component. Like $0 in Elements,
    it returns the element selected in the Components tab, in every host, so you
    can call its methods or read its fields directly.
  • Store a property as a global variable. A button on each Properties,
    State and Instance row puts the live value in temp1, temp2… on the page
    and logs it in the console, so you can work with the object itself instead
    of its preview.

Changed

  • Builds carry no dev code, with no config change. With plain
    litPlugin(), vite build no longer imports HMR, the source overlay or the
    DevTools panel, and a ?css-sheet or ?hmr-url import compiles without the
    hot-swap callback and the dev-server fetch rewrite. urlSheet() and
    devCacheBust() fold their dev branches away when minified.
  • Edits and overrides show up as the update's cause. Updates you cause by
    editing or overriding a property in the Components tab now read "after edit
    in DevTools" or "after override in DevTools" in the Updates and Timeline
    tabs, instead of having no cause.
  • ?css-sheet on virtual:uno.css now tells you what to do instead.
    Importing a virtual CSS module with ?css-sheet or ?hmr-url warns that
    there is no file behind it and points to unoSheet(), instead of failing
    later with an error that doesn't mention the query.

Fixed

  • @property rules in a ?css-sheet now apply inside shadow roots.
    Browsers ignore @property in a shadow root, so properties a shared sheet
    registered had no initial value there, and utilities built on them
    (Tailwind's shadows, rings, transforms and gradients) rendered nothing. The
    plugin now registers them on the document as well, and a build only ships
    that code for sheets that have such a rule.
  • Tailwind classes you add in dev reach the shared ?css-sheet. A class
    written in a component now lands in the sheet every adopter shares and swaps
    in place; before, only edits to the CSS file itself did. In dev the sheet is
    built from the file's ?inline text, so it no longer waits on a fetch
    either.
  • Component docs stay current. Changing a component's JSDoc updates its
    About, property and event descriptions on the next hot patch, and a Custom
    Elements Manifest an analyzer rewrites shows up within a second or so, both
    without selecting another tag and coming back.
  • Sites that enforce Trusted Types keep working with the extension on. On
    a page whose CSP allows only Lit's own lit-html policy, enabling Lit
    Inspector stopped the page's components from rendering. The injected runtime
    no longer creates that policy, and its picker no longer needs one.
  • Rendered at links into index.html open the right line. In Chrome's
    extension, an element written in index.html now opens that file at its
    line in the Sources panel, instead of Vite's inline-script module at the top.
  • SVG files on an enabled site open cleanly. Viewing an .svg file
    directly on a site where Lit Inspector is on no longer logs a
    configure is not a function error.
  • Unminified builds no longer print your project's absolute path. With
    build.minify: false, a ?css-sheet or ?hmr-url import's region comment
    named the css file by its full path on disk; it now names it relative to the
    project root.