@fluixi/web-components 0.0.0-stage → 1.0.0-alpha.100

package/dist/element.js

@@ -0,0 +1,681 @@
+var _a;
+/**
+ * The custom element itself: lifecycle on Fluixi's existing ownership model.
+ *
+ * `HTMLReactiveElement` is a real class, authored the way the platform defines elements:
+ * `class X extends HTMLReactiveElement`, callbacks as methods, `customElements.define`.
+ * What it adds is the reactive part. Declared props are signals behind accessors, and the
+ * first connect runs `render()` once inside one `createRoot` scope; bindings update after
+ * that and `dispose` takes the whole subtree down.
+ *
+ * Visibility is deliberate. The platform callbacks are public because the browser calls
+ * them. `render`, `emit`, `targets`, `renderRoot`, `internals` and `authoredChildren` are
+ * protected: they are for the element's own code, not its consumers. The engine's state is
+ * in `#private` fields, private at runtime and not only to TypeScript.
+ *
+ * `insert` rather than `render`: `render` clears its container going in and again coming
+ * out (@fluixi/dom runtime.ts), which for a light-DOM element would delete the author's own
+ * children before the component ever saw them.
+ */
+import { closeReactiveScope, effect, getOwner, openReactiveScope, root, runWithOwner, withReactiveScope, } from '@fluixi/reactive/signal';
+import { HYDRATION_KEY, hydrateChildren, insert, isAppHydrationPending, isServer, setKeyScope, whenAppHydrated } from '@fluixi/dom';
+import { createPropStates, observedFrom, } from './props.js';
+import { defineCustomElement } from './registry.js';
+import { createDispatch } from './events.js';
+import { createTargets } from './targets.js';
+import { applyStyles } from './styles.js';
+import { announceOwner, consumeContext, provideContext } from './context.js';
+/** Where `@fluixi/dom`'s hydration hands a server-rendered element its owner. Kept in step. */
+const OWNER_KEY = Symbol.for('fluixi.owner');
+/** Where @fluixi/dom keeps a server node's props, and where it looks for the element renderer. */
+const SERVER_PROPS = Symbol.for('fluixi.serverProps');
+const ELEMENT_RENDERER = Symbol.for('fluixi.serverElementRenderer');
+/** Each element class's own server render, so the copy of this package that defined it does the work. */
+const RENDER_ON_SERVER = Symbol.for('fluixi.renderOnServer');
+/** Tells @fluixi/dom's page hydration that this element's children are its own, adopted already. */
+const OWNS_CONTENT = Symbol.for('fluixi.ownsContent');
+/** Marks content an element rendered on the server, and carries the props that have no attribute. */
+const SSR_ATTRIBUTE = 'data-fx-ssr';
+const SSR_PROPS_ATTRIBUTE = 'data-fx-props';
+/**
+ * Whether a value comes back from JSON as it went in: primitives, arrays, and objects with no
+ * prototype but Object's. A class instance serialises without its methods and getters, so a
+ * Zod schema carried this way reached the client as an object with no `shape`, and the element
+ * read that until hydration assigned the real one. Such values wait for hydration instead.
+ */
+function isPlainData(value, seen = new Set()) {
+    if (value === null)
+        return true;
+    switch (typeof value) {
+        case 'string':
+        case 'number':
+        case 'boolean':
+            return true;
+        case 'object':
+            break;
+        default:
+            return false;
+    }
+    const object = value;
+    if (seen.has(object))
+        return false;
+    seen.add(object);
+    const proto = Object.getPrototypeOf(object);
+    if (Array.isArray(object))
+        return object.every((item) => isPlainData(item, seen));
+    if (proto !== Object.prototype && proto !== null)
+        return false;
+    return Object.values(object).every((item) => isPlainData(item, seen));
+}
+/**
+ * `HTMLElement` in a browser. On a server there is none, and a module declaring
+ * `class X extends HTMLReactiveElement` is still imported by code that renders there, so
+ * the base is an inert stand-in: the class can be declared, nothing is ever defined.
+ */
+const BaseElement = typeof HTMLElement === 'undefined' ? class {
+} : HTMLElement;
+/**
+ * On a server there is no `customElements` either, and an element file that registers the
+ * standard way (`customElements.define('x-y', X)` at the top) is still imported by code that
+ * renders there. A stand-in that accepts and ignores definitions keeps that import from
+ * throwing, as Lit's server shim does. Only installed where neither DOM global exists.
+ */
+if (typeof HTMLElement === 'undefined' && typeof globalThis.customElements === 'undefined') {
+    const defined = new Map();
+    globalThis.customElements = {
+        define: (name, constructor) => void defined.set(name, constructor),
+        get: (name) => defined.get(name),
+        getName: (constructor) => [...defined].find(([, c]) => c === constructor)?.[0] ?? null,
+        upgrade: () => { },
+        // Never resolves: nothing is ever upgraded on a server.
+        whenDefined: () => new Promise(() => { }),
+    };
+}
+const prepared = new WeakSet();
+function shadowInit(shadow) {
+    if (shadow === true)
+        return { mode: 'open' };
+    if (typeof shadow === 'string')
+        return { mode: shadow };
+    return { mode: 'open', ...shadow };
+}
+/**
+ * Every `static props` from the class up to this base, nearest last so a subclass can
+ * redeclare a prop its parent had.
+ */
+function schemaOf(constructor) {
+    const chain = [];
+    for (let c = constructor; c && c !== HTMLReactiveElement; c = Object.getPrototypeOf(c)) {
+        if (Object.prototype.hasOwnProperty.call(c, 'props'))
+            chain.unshift(c.props ?? {});
+    }
+    return Object.assign({}, ...chain);
+}
+/** `el.count = 3` has to reach the signal, so the accessors go on the prototype, once per class. */
+function prepare(constructor) {
+    if (prepared.has(constructor))
+        return;
+    prepared.add(constructor);
+    // A mixin that assigns `static observedAttributes = [...]` replaces this class's getter,
+    // and the browser then never reports the props' attributes: `step="5"` stops reaching
+    // `step`. Nothing fails; say which ones went missing.
+    const observed = constructor.observedAttributes ?? [];
+    const missing = observedFrom(schemaOf(constructor)).filter((a) => !observed.includes(a));
+    if (missing.length) {
+        console.warn(`[fluixi] ${constructor.name}.observedAttributes leaves out ${missing.join(', ')}, so those props no longer ` +
+            `follow their attributes. A class or mixin that adds its own should return [...super.observedAttributes, ...].`);
+    }
+    for (const name of Object.keys(schemaOf(constructor))) {
+        Object.defineProperty(constructor.prototype, name, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return stateOf(this, name).read();
+            },
+            set(value) {
+                writeFromOutside(this, name, value);
+            },
+        });
+    }
+}
+/** Filled by the class's static block: the one way in to its private state. */
+let stateOf;
+/** Filled by the class's static block: a prop written from outside, by a page or a script. */
+let writeFromOutside;
+export class HTMLReactiveElement extends BaseElement {
+    /** The declared properties, and the attributes that mirror them. Inherited and merged. */
+    static props;
+    /**
+     * `false` (the default) renders into the element itself. `'open'`, `'closed'`, `true` or an
+     * options object attach a shadow root, which is what native `<slot>` needs. Light DOM is the default: a
+     * component that inherits the page's styles is usually what an app wants, and it is the
+     * mode that survives a server render without declarative shadow DOM.
+     */
+    static shadow;
+    /**
+     * Adopted by the shadow root, one parsed sheet shared by every instance. CSS text, a
+     * `CSSStyleSheet`, or a list: `[super.styles, '…']` keeps the parent's. A class meant to be
+     * extended declares it as `static styles: ElementStyles = …`, since a bare string narrows
+     * the type and a subclass's list no longer fits. Ignored in light DOM, which has no scope.
+     */
+    static styles;
+    /**
+     * The attributes of every declared prop. A mixin in between that observes its own
+     * extends this with `super.observedAttributes`; a subclass need not touch it.
+     */
+    static get observedAttributes() {
+        prepare(this);
+        return observedFrom(schemaOf(this));
+    }
+    static {
+        // Not a member in the type: it is a handshake with the runtime, not API.
+        Object.defineProperty(_a.prototype, OWNER_KEY, {
+            configurable: true,
+            get() {
+                return this.#creator;
+            },
+            set(owner) {
+                this.#adoptOwner(owner);
+            },
+        });
+        // On a server, @fluixi/dom hands each attached custom element node to this renderer. It
+        // defers to the element's class: after a dev reload, or with two bundles of this package,
+        // the renderer registered first belongs to another copy whose classes are not this one's.
+        if (typeof HTMLElement === 'undefined') {
+            globalThis[ELEMENT_RENDERER] ??= (node) => {
+                const registry = globalThis.customElements;
+                const constructor = registry?.get(node.localName);
+                constructor?.[RENDER_ON_SERVER]?.(node);
+            };
+        }
+        stateOf = (element, name) => {
+            const state = element.#states()[name];
+            if (!state)
+                throw new Error(`[fluixi] ${name} is not a declared prop of <${element.localName}>`);
+            return state;
+        };
+        writeFromOutside = (element, name, value) => element.#writeFromOutside(name, value);
+    }
+    /**
+     * Props written while the app hydrates around an element already built, applied once it is
+     * done. The page hydrates inside a batch whose effects run before hydration ends: an update
+     * run there builds the element's new content while server nodes are still being claimed,
+     * and its templates claimed the page's nodes as their own (the page's frame moved into the
+     * element). Until then the element shows what it adopted from the server.
+     */
+    #deferred = null;
+    #writeFromOutside(name, value, apply = () => stateOf(this, name).write(value)) {
+        if (!this.#built || !isAppHydrationPending()) {
+            apply();
+            return;
+        }
+        if (!this.#deferred) {
+            this.#deferred = new Map();
+            whenAppHydrated(() => {
+                const pending = this.#deferred;
+                this.#deferred = null;
+                for (const write of pending?.values() ?? [])
+                    write();
+            });
+        }
+        this.#deferred.set(name, apply);
+    }
+    #statesCache = null;
+    /** Prop values kept across a real removal, for the signals the next scope re-creates. */
+    #carried = null;
+    #dispose = null;
+    #root = this;
+    #authored = [];
+    #built = false;
+    /** Server-rendered and waiting for the app to hand over an owner; cancels the wait. */
+    #waiting = null;
+    /** The wait ran once; whatever it found, the next build goes ahead. */
+    #waited = false;
+    /**
+     * A template or hydration handed the owner over. An upgrade reads whatever owner happens to be
+     * current (a module evaluating inside a route preload), which is not this element's host.
+     */
+    #handed = false;
+    /** The first build adopts content the server rendered. */
+    #hydrating = false;
+    /**
+     * Disposal is deferred because `disconnectedCallback` cannot tell a removal from a move.
+     * Appending an already-parented node fires disconnect then connect in the same task, and
+     * tearing the scope down in between would rebuild the subtree on every reorder, which a
+     * keyed list does constantly.
+     */
+    #pendingDispose = null;
+    /** Suppresses the attribute callback a reflect triggers, so it does not loop. */
+    #reflecting = new Set();
+    #internals = null;
+    /**
+     * What the devtools graph groups this element's signals under. Opened when the element
+     * first needs one, closed when it is really removed.
+     */
+    #scope = null;
+    #targets = null;
+    #dispatch = null;
+    /** The owner the element was created under, for context: a Fluixi template, or none. */
+    #creator = getOwner();
+    /** The owner `render()` runs under, while built. Its parent is the creator. */
+    #rootOwner = null;
+    constructor() {
+        super();
+        prepare(new.target);
+        // Hydration reached this element before its definition did, and left the owner behind.
+        const handed = Object.getOwnPropertyDescriptor(this, OWNER_KEY);
+        if (handed) {
+            delete this[OWNER_KEY];
+            this.#creator = handed.value ?? this.#creator;
+            this.#handed = handed.value != null;
+        }
+        // A property assigned before upgrade sits as an own property and shadows the prototype
+        // accessor. Take it off and replay it through the signal.
+        this.#adoptOwnProps();
+    }
+    connectedCallback() {
+        // What sits above first: a mixin expects to run before the class that composed it.
+        Object.getPrototypeOf(_a.prototype).connectedCallback?.call(this);
+        if (this.#pendingDispose !== null) {
+            clearTimeout(this.#pendingDispose);
+            this.#pendingDispose = null;
+            return; // A move. The scope is alive and the DOM is still ours.
+        }
+        // A class field named like a prop lands after the constructor and hides the accessor.
+        this.#adoptOwnProps(true);
+        if (!this.#built && !this.#waiting)
+            this.#build();
+    }
+    disconnectedCallback() {
+        Object.getPrototypeOf(_a.prototype).disconnectedCallback?.call(this);
+        if (!this.#built || this.#pendingDispose !== null)
+            return;
+        this.#pendingDispose = setTimeout(() => {
+            this.#pendingDispose = null;
+            this.#teardown();
+        }, 0);
+    }
+    /** Another document, the same scope: nothing reactive depends on which document holds the node. */
+    adoptedCallback() {
+        Object.getPrototypeOf(_a.prototype).adoptedCallback?.call(this);
+    }
+    attributeChangedCallback(name, previous, value) {
+        Object.getPrototypeOf(_a.prototype).attributeChangedCallback?.call(this, name, previous, value);
+        if (this.#reflecting.has(name))
+            return;
+        for (const [prop, state] of Object.entries(this.#states())) {
+            if (state.attribute !== name)
+                continue;
+            this.#writeFromOutside(prop, value, () => state.write(state.declaration.fromAttribute(value)));
+            return;
+        }
+    }
+    /**
+     * What the element shows. Runs once, on the first connect, inside the element's reactive
+     * scope; bindings keep it current after that. It is never re-run, so read a prop inside a
+     * binding (`() => this.step`), not in the body, to follow it.
+     */
+    render() {
+        return undefined;
+    }
+    /**
+     * Give `context` to the elements inside this one, and to `useContext` in the components it
+     * renders. A value or an accessor; subscribed consumers follow the accessor. Call in `render()`.
+     */
+    provide(context, value) {
+        provideContext(this, context, value);
+    }
+    /**
+     * The nearest value of `context` above this element, as an accessor: an element providing
+     * it, else the Fluixi app the element was rendered in, else the default. Call in `render()`.
+     */
+    consume(context, options) {
+        return consumeContext(this, context, options);
+    }
+    /**
+     * Dispatch a `CustomEvent`, bubbling and composed by default. False when cancelled.
+     *
+     * The name goes out lowercased: a JSX handler listens for the name after `on`, lowercased,
+     * so `emit('signOut')` reaches `onSignOut`, and a listener added by hand uses `signout`.
+     */
+    emit(type, detail, init) {
+        this.#dispatch ??= createDispatch(this);
+        return this.#dispatch(type.toLowerCase(), detail, init);
+    }
+    /** Elements inside this one, by `data-target`, scoped to its render root. */
+    get targets() {
+        return (this.#targets ??= createTargets(() => this.#root));
+    }
+    /** Where `render()` output goes: the shadow root, or the element itself in light DOM. */
+    get renderRoot() {
+        return this.#root;
+    }
+    /**
+     * The children the author wrote between the tags, in light DOM. Empty under shadow DOM,
+     * where the browser projects them through `<slot>` and they were never the element's to place.
+     */
+    get authoredChildren() {
+        return this.#authored;
+    }
+    /**
+     * The element's `ElementInternals`, attached on first use: ARIA defaults, custom states,
+     * and with `static formAssociated = true`, taking part in a `<form>`.
+     */
+    get internals() {
+        return (this.#internals ??= this.attachInternals());
+    }
+    #states() {
+        if (this.#statesCache)
+            return this.#statesCache;
+        const states = withReactiveScope(this.#reactiveScope(), () => createPropStates(schemaOf(this.constructor)));
+        if (this.#carried) {
+            for (const [name, value] of Object.entries(this.#carried))
+                states[name]?.write(value);
+            this.#carried = null;
+        }
+        return (this.#statesCache = states);
+    }
+    #reactiveScope() {
+        return (this.#scope ??= openReactiveScope({
+            kind: 'element',
+            name: `<${this.localName}>`,
+            target: this,
+            // The class, since the line that opened the scope is this package's, not the app's.
+            detail: this.constructor.name,
+        }));
+    }
+    #adoptOwnProps(warn = false) {
+        for (const name of Object.keys(schemaOf(this.constructor))) {
+            if (!Object.prototype.hasOwnProperty.call(this, name))
+                continue;
+            const value = this[name];
+            delete this[name];
+            if (warn) {
+                console.warn(`[fluixi] <${this.localName}> has a class field named "${name}", which hides the declared prop. ` +
+                    `Declare it only in static props, and set a default there.`);
+            }
+            this.#states()[name].write(value);
+        }
+    }
+    /**
+     * Render a light DOM element's content into its server node, under the page's owner so its
+     * context and resources are the page's. Props come from what @fluixi/dom recorded on the
+     * node; the ones with no attribute form ride along as JSON for the client. Shadow DOM
+     * elements are left to the client until declarative shadow roots are emitted.
+     */
+    static [RENDER_ON_SERVER](node) {
+        _a.#renderOnServer(this, node);
+    }
+    static #renderOnServer(constructor, node) {
+        if (constructor.shadow !== undefined && constructor.shadow !== false)
+            return;
+        const element = new constructor();
+        const recorded = node[SERVER_PROPS] ?? {};
+        const carried = {};
+        for (const [name, state] of Object.entries(element.#states())) {
+            if (name in recorded) {
+                const value = recorded[name];
+                state.write(value);
+                if (value !== null && typeof value === 'object' && isPlainData(value))
+                    carried[name] = value;
+            }
+            else if (state.attribute !== false) {
+                const attribute = node.getAttribute(state.attribute);
+                if (attribute !== null)
+                    state.write(state.declaration.fromAttribute(attribute));
+            }
+        }
+        element.#authored = [...node.childNodes];
+        for (const child of element.#authored)
+            node.removeChild(child);
+        element.#root = node;
+        element.#built = true;
+        // Its own key scope, named after its own key: the client renders this content in the
+        // element's root, not in the page's, and must number it the same way.
+        const scope = `${node.getAttribute(HYDRATION_KEY) ?? ''}~`;
+        // Under the scope that created the node (recorded by @fluixi/dom), so the app's providers
+        // reach `useContext` here as they do in the browser.
+        const createdIn = node[OWNER_KEY] ?? null;
+        runWithOwner(createdIn, () => root(() => {
+            setKeyScope(scope);
+            insert(node, element.render());
+        }));
+        node.setAttribute(SSR_ATTRIBUTE, '');
+        if (Object.keys(carried).length) {
+            try {
+                node.setAttribute(SSR_PROPS_ATTRIBUTE, JSON.stringify(carried));
+            }
+            catch {
+                // A cycle: the client waits for hydration to assign it.
+            }
+        }
+    }
+    #build() {
+        if (this.#shouldWaitForHost())
+            return this.#waitForHost();
+        this.#built = true;
+        const constructor = this.constructor;
+        const shadow = constructor.shadow;
+        if (shadow !== undefined && shadow !== false) {
+            // A declarative shadow root may already be attached from a server render.
+            this.#root = this.shadowRoot ?? this.attachShadow(shadowInit(shadow));
+            applyStyles(this.#root, constructor, constructor.styles);
+        }
+        else if (this.hasAttribute(SSR_ATTRIBUTE)) {
+            // Rendered on the server: its children are render()'s output, adopted below, and the
+            // props with no attribute form come back from the JSON the server wrote.
+            this.#hydrating = true;
+            const json = this.getAttribute(SSR_PROPS_ATTRIBUTE);
+            if (json) {
+                try {
+                    const states = this.#states();
+                    for (const [name, value] of Object.entries(JSON.parse(json)))
+                        states[name]?.write(value);
+                }
+                catch {
+                    // Malformed: hydration assigns them as properties.
+                }
+            }
+            this.removeAttribute(SSR_ATTRIBUTE);
+            this.removeAttribute(SSR_PROPS_ATTRIBUTE);
+            this[OWNS_CONTENT] = true;
+            this.#root = this;
+        }
+        else {
+            // Light DOM: the author's children are the content. Take them out before anything
+            // renders, so they survive and the component can place them.
+            this.#authored = Array.from(this.childNodes);
+            for (const node of this.#authored)
+                node.remove();
+            this.#root = this;
+        }
+        // Detached: the element lives as long as it is connected, not as long as whatever created
+        // it. Linked to that creator for context only, so an app's providers reach `render()`.
+        const creator = this.#creator ?? getOwner();
+        runWithOwner(null, () => withReactiveScope(this.#reactiveScope(), () => root((dispose) => {
+            const own = getOwner();
+            this.#rootOwner = own;
+            if (own && creator)
+                own.parent = creator;
+            this.#dispose = dispose;
+            // Reflects live in the same scope as the content, so they stop when it does.
+            this.#startReflecting();
+            if (this.#hydrating) {
+                // The scope the server rendered this content in (see renderOnServer).
+                setKeyScope(`${this.getAttribute(HYDRATION_KEY) ?? ''}~`);
+                hydrateChildren(this, () => this.render());
+            }
+            else
+                insert(this.#root, this.render());
+            this.#hydrating = false;
+        })));
+        // In light DOM the element decides where the children written between its tags go. One
+        // that places none of them hides them, which is silent unless said.
+        const shown = (node) => node.nodeType === 1 || (node.nodeType === 3 && node.textContent?.trim());
+        if (this.#root === this && this.#authored.some((node) => shown(node) && !node.isConnected)) {
+            console.warn(`[fluixi] <${this.localName}> has children between its tags that its render() does not place, so they ` +
+                `are not shown. Place this.authoredChildren in render(), or use shadow DOM with a <slot>.`);
+        }
+    }
+    #startReflecting() {
+        for (const state of Object.values(this.#states())) {
+            const attribute = state.attribute;
+            if (attribute === false || !state.declaration.reflect)
+                continue;
+            effect(() => {
+                const next = state.declaration.toAttribute(state.read());
+                this.#reflecting.add(attribute);
+                try {
+                    if (next === null)
+                        this.removeAttribute(attribute);
+                    else
+                        this.setAttribute(attribute, next);
+                }
+                finally {
+                    this.#reflecting.delete(attribute);
+                }
+            }, undefined, { name: `reflect ${attribute}` });
+        }
+    }
+    /**
+     * Hydration found this element after it had already rendered, as a server-rendered one does:
+     * link the render to the app now, so what it provides reaches the element. Consumers that
+     * found nothing are told to look again.
+     */
+    /**
+     * Rendered by the server inside an app, and upgraded before that app hydrated: nothing
+     * above it yet, so a context read in its first render would find nothing. Light DOM only;
+     * a shadow root is built by the client.
+     */
+    #shouldWaitForHost() {
+        const shadow = this.constructor.shadow;
+        return !this.#waited && !this.#handed && (shadow === undefined || shadow === false) && this.hasAttribute(SSR_ATTRIBUTE);
+    }
+    /**
+     * Wait a microtask, so an entry module that imported this element has called `startClient`.
+     * Then build when the app hands over an owner, or when its hydration ends without reaching
+     * this element. No app hydrating (a static page, another framework): build now.
+     */
+    #waitForHost() {
+        let cancelled = false;
+        let stop = () => { };
+        this.#waiting = () => {
+            cancelled = true;
+            stop();
+        };
+        const resume = () => {
+            if (cancelled)
+                return;
+            this.#waiting = null;
+            this.#waited = true;
+            if (!this.#built && this.isConnected)
+                this.#build();
+        };
+        queueMicrotask(() => {
+            if (cancelled)
+                return;
+            if (isAppHydrationPending())
+                stop = whenAppHydrated(resume);
+            else
+                resume();
+        });
+    }
+    #adoptOwner(owner) {
+        if (!owner || this.#handed)
+            return;
+        this.#handed = true;
+        this.#creator = owner;
+        if (this.#waiting) {
+            this.#waiting();
+            this.#waiting = null;
+            if (this.isConnected)
+                this.#build();
+            return;
+        }
+        if (!this.#rootOwner)
+            return;
+        this.#rootOwner.parent = owner;
+        announceOwner(this);
+    }
+    #teardown() {
+        this.#dispose?.();
+        this.#dispose = null;
+        this.#rootOwner = null;
+        this.#built = false;
+        if (this.#scope)
+            closeReactiveScope(this.#scope);
+        this.#scope = null;
+        // The props outlive the scope: their values move to new signals made inside the next one,
+        // so an element added back shows its props under the scope it reports then.
+        if (this.#statesCache) {
+            this.#carried = Object.fromEntries(Object.entries(this.#statesCache).map(([name, state]) => [name, state.read()]));
+            this.#statesCache = null;
+        }
+        // The rendered content goes with the scope. Light children were taken out at build time
+        // and are put back, so the element reads as it was authored.
+        if (this.#root === this) {
+            this.textContent = '';
+            for (const node of this.#authored)
+                this.appendChild(node);
+        }
+    }
+}
+_a = HTMLReactiveElement;
+/**
+ * `HTMLReactiveElement` with the declared props typed on the instance:
+ * `class Counter extends typedElement(props)` gives `this.step` its type. Static props alone
+ * work at runtime; this is only the type.
+ */
+export function typedElement(props) {
+    class Typed extends HTMLReactiveElement {
+        static props = props;
+    }
+    return Typed;
+}
+export function createElementClass(setup, options = {}) {
+    let Base = HTMLReactiveElement;
+    // Either shape takes what the previous one returned: the runtime class is the same.
+    for (const mixin of options.mixins ?? [])
+        Base = mixin(Base);
+    class SetupElement extends Base {
+        static props = options.props ?? {};
+        static shadow = options.shadow;
+        static styles = options.styles;
+        render() {
+            const accessors = {};
+            for (const name of Object.keys(schemaOf(this.constructor))) {
+                accessors[name] = () => this[name];
+            }
+            return setup({
+                el: this,
+                props: accessors,
+                set: (name, value) => {
+                    this[name] = value;
+                },
+                dispatch: (type, detail, init) => this.emit(type, detail, init),
+                targets: this.targets,
+                children: () => [...this.authoredChildren],
+                provide: (context, value) => this.provide(context, value),
+                consume: (context, options) => this.consume(context, options),
+            });
+        }
+    }
+    return SetupElement;
+}
+/**
+ * Define a Fluixi component as a custom element.
+ *
+ * Returns the constructor, so a caller can subclass it or hand it to a lazy loader. On a
+ * server it builds the class and registers nothing, which keeps the module importable from
+ * code that also runs during a server render.
+ */
+export function defineElement(name, setup, options = {}) {
+    const constructor = createElementClass(setup, options);
+    // `fx-disclosure` → `FxDisclosure`, rather than the generated `SetupElement`: what a stack
+    // trace and the devtools graph show for this element.
+    const className = name.replace(/(^|-)([a-z0-9])/g, (_, _dash, ch) => ch.toUpperCase());
+    Object.defineProperty(constructor, 'name', { value: className, configurable: true });
+    if (isServer())
+        return constructor;
+    return defineCustomElement(name, constructor, options.define);
+}