@litsx/babel-plugin-transform-litsx-scoped-elements

Automatically wires the Litsx element mixins for LitElement classes so components can use locally registered custom elements through a shared static elements contract in both shadow DOM and light DOM paths.

What it does

• Finds JSX tags that correspond to imported components and rewrites them to kebab-case custom elements.
• Injects a static elements map with the detected components.
• Wraps shadow DOM components in ShadowDomElementsMixin, which bridges elements to @open-wc/scoped-elements.
• Wraps ^lightDom() components in LightDomElementsMixin, which uses the light DOM registry runtime.
• Adds the required runtime-infrastructure import only when at least one element dependency is discovered, keeping untouched classes minimal.
• Updates matching closing tags and leaves unrelated JSX nodes unchanged.
• Detects scoped usage inside html tagged template literals as well, ensuring templates converted by the JSX plugin still register components.

Install

npm install --save-dev @litsx/babel-plugin-transform-litsx-scoped-elements
# or
yarn add --dev @litsx/babel-plugin-transform-litsx-scoped-elements

Usage

{
  "plugins": ["@litsx/babel-plugin-transform-litsx-scoped-elements"]
}

Example

Input

import { LitElement, html } from "lit";
import FancyButton from "./FancyButton.js";

class MyElement extends LitElement {
  render() {
    return <FancyButton label="Click" />;
  }
}

Output (simplified)

import { ShadowDomElementsMixin } from "@litsx/litsx/runtime-infrastructure";
import { LitElement, html } from "lit";
import FancyButton from "./FancyButton.js";

class MyElement extends ShadowDomElementsMixin(LitElement) {
  static elements = {
    "fancy-button": FancyButton,
  };

  render() {
    return html`<fancy-button label="Click"></fancy-button>`;
  }
}

Notes

• Imported and locally declared sibling components can both be collected into static elements.
• Classes that already wrap the superclass with another mixin still work; the plugin nests the Litsx elements mixin around the existing expression.
• The helper pairs nicely with other LitSX transforms such as the JSX-to-template and function-to-class plugins.