sinho 0.1.0

package/dist/bundle.js

@@ -0,0 +1,1074 @@
+const createScope = (parent) => {
+    return {
+        _parent: parent,
+        _effects: [],
+        _subscopes: [],
+        _details: { ...parent?._details },
+        _run(fn) {
+            const prevScope = currScope;
+            currScope = this;
+            try {
+                return fn();
+            }
+            finally {
+                currScope = prevScope;
+            }
+        },
+        _cleanup() {
+            for (let i = this._subscopes.length - 1; i >= 0; i--) {
+                this._subscopes[i]._cleanup();
+            }
+            this._subscopes = [];
+            for (let i = this._effects.length - 1; i >= 0; i--) {
+                const effect = this._effects[i];
+                effect._clean?.();
+                effect._deps.forEach((signal) => signal._effects.delete(effect));
+                effect._deps.clear();
+            }
+            this._effects = [];
+        },
+    };
+};
+let rootScope = createScope();
+let currScope = rootScope;
+let currUntracked = false;
+let currEffect;
+let currBatch;
+/** @ignore */
+const useScope = () => currScope;
+/**
+ * Creates a new signal with the given value.
+ * @returns A tuple with the signal and its setter.
+ */
+const useSignal = (value, opts) => {
+    const signal = () => {
+        if (!currUntracked && currEffect) {
+            currEffect._deps.add(signal);
+            signal._effects.add(currEffect);
+        }
+        return signal.peek();
+    };
+    signal._effects = new Set();
+    signal.peek = () => value;
+    const setter = (arg, innerOpts) => {
+        innerOpts = { ...opts, ...innerOpts };
+        if (currBatch) {
+            const newValue = typeof arg == "function"
+                ? arg(signal.peek())
+                : arg;
+            if (innerOpts?.force || newValue !== signal.peek()) {
+                if (innerOpts?.force) {
+                    value = newValue;
+                }
+                else {
+                    currBatch._setters.push(() => (value = newValue));
+                }
+                if (!innerOpts?.silent) {
+                    signal._effects.forEach((effect) => currBatch._effects.add(effect));
+                }
+            }
+        }
+        else {
+            useBatch(() => setter(arg, innerOpts));
+        }
+    };
+    return [signal, setter];
+};
+/**
+ * Runs the given function in a batch.
+ *
+ * @param fn Any calls to signal setters inside the function will be batched
+ * and updated at the same time.
+ */
+const useBatch = (fn) => {
+    const prevBatch = currBatch;
+    currBatch = { _setters: [], _effects: new Set() };
+    try {
+        const result = fn();
+        while (currBatch._setters.length > 0 || currBatch._effects.size > 0) {
+            // Clean effect subscope
+            const effects = currBatch._effects;
+            currBatch._effects = new Set();
+            effects.forEach((effect) => effect._clean?.());
+            // Run signal updates
+            currBatch._setters.forEach((setter) => setter());
+            currBatch._setters = [];
+            // Run effects
+            effects.forEach((effect) => effect._run());
+        }
+        return result;
+    }
+    finally {
+        currBatch = prevBatch;
+    }
+};
+/**
+ * Creates an effect which will rerun when any accessed signal changes.
+ *
+ * @param fn The function to run; it can return a cleanup function.
+ */
+const useEffect = (fn, deps) => {
+    const untracked = !!deps;
+    const effect = {
+        _scope: currScope,
+        _deps: new Set(),
+        _run() {
+            const prevEffect = currEffect;
+            const prevUntracked = currUntracked;
+            currEffect = this;
+            try {
+                if (!deps) {
+                    // For automatic dependency tracking
+                    // clean up dependencies and listeners
+                    this._deps.forEach((dep) => dep._effects.delete(this));
+                    this._deps.clear();
+                }
+                else if (!this._deps.size) {
+                    // Track specified dependencies
+                    deps.forEach((dep) => dep());
+                }
+                // Run effect
+                currUntracked = untracked;
+                this._clean?.();
+                const cleanup = this._scope._run(() => useBatch(fn));
+                this._clean = !cleanup
+                    ? null
+                    : () => {
+                        this._scope._run(() => useBatch(cleanup));
+                        this._clean = null;
+                    };
+            }
+            finally {
+                // Restore scope state
+                currEffect = prevEffect;
+                currUntracked = prevUntracked;
+            }
+        },
+    };
+    effect._deps.forEach((signal) => signal._effects.add(effect));
+    currScope._effects.push(effect);
+    effect._run();
+    if (!effect._deps.size && !effect._clean) {
+        // Optimization: Destroy effect since there's no cleanup and this effect
+        // won't be called again
+        currScope._effects.pop();
+    }
+};
+/**
+ * Creates a memoized signal.
+ *
+ * @param fn The computation function.
+ */
+const useMemo = (fn, opts) => {
+    const [memo, setMemo] = useSignal();
+    let firstTime = true;
+    useEffect(() => {
+        setMemo(fn, firstTime ? { ...opts, force: true } : opts);
+        firstTime = false;
+    });
+    return memo;
+};
+/**
+ * Executes a function inside a subscope which can be manually destroyed.
+ *
+ * @param fn The function to run in the subscope.
+ * @returns A function to manually destroy the subscope.
+ */
+const useSubscope = (fn, opts) => {
+    const parent = currScope;
+    const scope = createScope(parent);
+    Object.assign(scope._details, opts?.details);
+    parent._subscopes.push(scope);
+    const result = scope._run(fn);
+    return [
+        result,
+        () => {
+            const index = parent._subscopes.indexOf(scope);
+            if (index >= 0) {
+                parent._subscopes.splice(index, 1);
+            }
+            scope._cleanup();
+        },
+    ];
+};
+/**
+ * Creates a new signal with write capabilities.
+ */
+const useRef = (value, opts) => {
+    const [signal, setter] = useSignal(value, opts);
+    signal.set = setter;
+    return signal;
+};
+/**
+ * @namespace
+ */
+const MaybeSignal = {
+    /**
+     * Transforms the given {@link MaybeSignal} into a {@link Signal}.
+     */
+    upgrade: (signal) => () => MaybeSignal.get(signal),
+    /**
+     * Gets the value of the given {@link MaybeSignal}.
+     */
+    get: (signal) => typeof signal == "function" ? signal() : signal,
+    /**
+     * Accesses the value of the given {@link MaybeSignal} without tracking.
+     */
+    peek(signal) {
+        const prevUntracked = currUntracked;
+        currUntracked = true;
+        try {
+            return this.get(signal);
+        }
+        finally {
+            currUntracked = prevUntracked;
+        }
+    },
+};
+
+const createRenderer = (override = {}) => ({
+    _ifConditions: [],
+    _node(fallback) {
+        return this._nodes?.next().value ?? fallback();
+    },
+    ...override,
+});
+const useRenderer = () => {
+    const scope = useScope();
+    return (scope._details._renderer ??= createRenderer());
+};
+const runWithRenderer = (override, fn) => {
+    const currRenderer = useRenderer();
+    const _renderer = createRenderer({
+        ...currRenderer,
+        ...override,
+    });
+    const [result, destroy] = useSubscope(fn, {
+        details: { _renderer },
+    });
+    useEffect(() => destroy);
+    return result;
+};
+
+const camelCaseToKebabCase = (value) => {
+    return ((value[0] ?? "").toLowerCase() +
+        value.slice(1).replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`));
+};
+const jsxPropNameToEventName = (value) => {
+    if (value.startsWith("on:")) {
+        return value.slice(3);
+    }
+    else {
+        return camelCaseToKebabCase(value.slice(2));
+    }
+};
+
+const contextSym = Symbol("Context");
+/**
+ * Creates a new context with the given value.
+ */
+const createContext = ((value, opts) => ({
+    [contextSym]: Math.random().toString(36).slice(2),
+    _init: value,
+    _opts: opts,
+}));
+const isContext = (value) => !!value?.[contextSym];
+const provideContext = (context, element, value) => {
+    element.addEventListener(context[contextSym], (evt) => {
+        const innerValue = MaybeSignal.get(value);
+        if (innerValue !== undefined) {
+            evt.stopPropagation();
+            evt.detail(innerValue);
+        }
+    });
+};
+const useContext = (context) => {
+    const renderer = useRenderer();
+    return useMemo(() => {
+        let result = context._init;
+        renderer._component?.dispatchEvent(new CustomEvent(context[contextSym], {
+            detail: (value) => (result = value),
+            bubbles: true,
+            composed: true,
+        }));
+        return result;
+    });
+};
+
+/**
+ * Defines a property in your component metadata that can be set from outside
+ * of the component.
+ *
+ * Make sure to avoid conflicts with native `HTMLElement` properties.
+ *
+ * You can get properties by accessing the {@link Signal} in `this.props`.
+ * It's also possible to set the properties directly on the component instance.
+ *
+ * It's also possible to define an attribute for the property by setting the
+ * `attribute` option. By default, the attribute name is the kebab-case version
+ * of the property name. The attribute will be observed and the signal updated
+ * on changes. You can also provide a custom name and a transform function to
+ * convert the attribute value to the property value.
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   greetingMessage: prop<string>("Hello, world!", {
+ *     attribute: {
+ *       name: "greeting",
+ *     }
+ *   }),
+ * }) {
+ *   render() {
+ *     return <h1>{this.props.greetingMessage}</h1>;
+ *   }
+ * }
+ *
+ * defineComponents(App);
+ *
+ * const app = new App();
+ * app.greetingMessage = "Hello, universe!";
+ * ```
+ */
+const prop = (defaultOrContext, opts) => ({
+    _tag: "p",
+    _defaultOrContext: defaultOrContext,
+    ...opts,
+});
+/**
+ * Defines an event in your component metadata that can be dispatched by
+ * the component.
+ *
+ * Make sure your event name starts with `on` and to avoid conflicts with
+ * native `HTMLElement` events. The event name will be converted to kebab-case.
+ *
+ * You can dispatch events either using `HTMLElement.dispatchEvent` or by
+ * calling the event emitter function in `this.events` inside the `render`
+ * function of a component.
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   onSomethingHappen: event<string>(),
+ *   // Event name will be `something-happen`
+ * }) {
+ *   render() {
+ *     // …
+ *     this.events.onSomethingHappen({ detail: "Something happened! "});
+ *   }
+ * }
+ *
+ * const app = new App();
+ * app.addEventListener("something-happen", (evt) => {
+ *   // `evt` is `CustomEvent<string>`
+ *   console.log(evt.detail);
+ * });
+ * ```
+ *
+ * You can also provide a custom event constructor:
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   onSomethingClick: event(() => MouseEvent),
+ * }) {
+ *   render() {
+ *     return (
+ *       <button onclick={evt => this.events.onSomethingClick(evt)}>
+ *         Click me!
+ *       </button>
+ *     );
+ *   }
+ * }
+ * ```
+ */
+const event = ((eventConstructor = CustomEvent) => ({
+    _tag: "e",
+    _event: eventConstructor,
+}));
+const componentSym = Symbol("Component");
+let mountEffects;
+/**
+ * Creates an effect which will rerun when any accessed signal changes.
+ *
+ * If used inside of a component and the component is not yet mounted, the
+ * effect will run only after the component is mounted. Otherwise, the effect
+ * will run immediately.
+ *
+ * @param fn The function to run; it may return a cleanup function.
+ */
+const useMountEffect = (fn, deps) => {
+    if (mountEffects) {
+        mountEffects.push([fn, deps]);
+    }
+    else {
+        useEffect(fn, deps);
+    }
+};
+/**
+ * Creates a new web component class.
+ *
+ * Specify props and events using the `metadata` parameter.
+ *
+ * @example
+ * ```tsx
+ * class MyComponent extends Component("my-component", {
+ *   myProp: prop<string>("Hello, world!"),
+ *   onMyEvent: event(),
+ * }) {
+ *   render() {
+ *     return (
+ *       <>
+ *         <h1>{this.props.myProp}</h1>
+ *         <button onclick={() => this.events.onMyEvent()}>Click me</button>
+ *       </>
+ *     );
+ *   },
+ * }
+ *
+ * customElements.define("my-component", MyComponent);
+ * ```
+ */
+const Component = ((tagName, metadata = {}, opts = {}) => {
+    // Extract attribute information
+    const observedAttributes = [];
+    const attributePropMap = new Map();
+    for (const name in metadata) {
+        const meta = metadata[name];
+        if (meta._tag == "p" && meta.attribute) {
+            if (typeof meta.attribute == "function") {
+                meta.attribute = { transform: meta.attribute };
+            }
+            const attribute = (meta.attribute = {
+                name: camelCaseToKebabCase(name),
+                static: false,
+                transform: (x) => x,
+                ...meta.attribute,
+            });
+            attributePropMap.set(attribute.name, {
+                name,
+                meta: meta,
+            });
+            if (!attribute.static) {
+                observedAttributes.push(attribute.name);
+            }
+        }
+    }
+    // Create base class
+    opts.shadow ??= { mode: "open" };
+    const getRenderParent = (component) => opts.shadow
+        ? component.shadowRoot ?? component.attachShadow(opts.shadow)
+        : component;
+    class _Component extends HTMLElement {
+        static [componentSym] = {
+            _tagName: tagName,
+        };
+        static observedAttributes = observedAttributes;
+        props = {};
+        events = {};
+        [componentSym] = {};
+        constructor() {
+            super();
+            for (const name in metadata) {
+                const meta = metadata[name];
+                if (meta._tag == "p") {
+                    const context = isContext(meta._defaultOrContext)
+                        ? meta._defaultOrContext
+                        : null;
+                    const [getter, setter] = useSignal(context ? undefined : meta._defaultOrContext);
+                    this.props[name] = getter;
+                    if (context) {
+                        provideContext(context, this, getter);
+                    }
+                    Object.defineProperty(this, name, {
+                        get: getter.peek,
+                        set: (value) => setter(() => value, { force: true }),
+                    });
+                }
+                else if (meta._tag == "e" && name.startsWith("on")) {
+                    const eventName = jsxPropNameToEventName(name);
+                    this.events[name] = (arg) => this.dispatchEvent(new meta._event(eventName, arg));
+                }
+            }
+        }
+        connectedCallback() {
+            const renderParent = getRenderParent(this);
+            this[componentSym]._destroy = useSubscope(() => runWithRenderer({
+                _svg: false,
+                _component: this,
+                _nodes: renderParent.childNodes.values(),
+            }, () => {
+                this[componentSym]._scope = useScope();
+                // Render
+                const prevMountEffects = mountEffects;
+                mountEffects = [];
+                try {
+                    renderParent?.append(...this.render().build());
+                    // Run mount effects
+                    mountEffects.forEach(([fn, opts]) => useEffect(fn, opts));
+                }
+                finally {
+                    mountEffects = prevMountEffects;
+                }
+            }))[1];
+        }
+        disconnectedCallback() {
+            this[componentSym]._destroy?.();
+        }
+        attributeChangedCallback(name, _, value) {
+            const prop = attributePropMap.get(name);
+            if (prop) {
+                this[prop.name] =
+                    value != null
+                        ? prop.meta.attribute.transform.call(this, value)
+                        : isContext(prop.meta._defaultOrContext)
+                            ? undefined
+                            : prop.meta._defaultOrContext;
+            }
+        }
+    }
+    return _Component;
+});
+/**
+ * Determines whether the given value is a component created by
+ * extending {@link ComponentConstructor}.
+ */
+const isComponent = (value) => !!value?.[componentSym];
+/**
+ * Defines a set of components with the given prefix.
+ */
+const defineComponents = (...args) => {
+    const [prefix, components] = typeof args[0] == "string"
+        ? [args[0], args.slice(1)]
+        : ["", args];
+    for (const component of components) {
+        customElements.define(prefix + component[componentSym]._tagName, component);
+    }
+};
+
+/*
+ * The following functions are lifted from Preact <https://preactjs.com/> and
+ * modified.
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015-present Jason Miller
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+const setStyle = (node, key, value) => {
+    if (key[0] == "-") {
+        node.style.setProperty(key, `${value}`);
+    }
+    else {
+        node.style[key] =
+            value == null
+                ? ""
+                : typeof value != "number" || IS_NON_DIMENSIONAL.test(key)
+                    ? `${value}`
+                    : `${value}px`;
+    }
+};
+const setAttr = (node, name, value, heuristic) => {
+    const removeAttribute = value == null || (value === false && !name.includes("-"));
+    if (name.startsWith("prop:")) {
+        node[name] = value;
+    }
+    else if (name.startsWith("attr:")) {
+        if (!removeAttribute) {
+            node.setAttribute(name, value);
+        }
+        else {
+            node.removeAttribute(name);
+        }
+    }
+    else if (!["innerHTML", "outerHTML"].includes(name)) {
+        if (![
+            // Default value in browsers is `-1` and an empty string is
+            // cast to `0` instead
+            "tabIndex",
+            "role",
+            ...(heuristic
+                ? [
+                    "width",
+                    "height",
+                    "href",
+                    "list",
+                    "form",
+                    "download",
+                    "rowSpan",
+                    "colSpan",
+                ]
+                : []),
+        ].includes(name) &&
+            name in node) {
+            try {
+                node[name] = value == null ? "" : value;
+                return;
+            }
+            catch (e) { }
+        }
+        // aria- and data- attributes have no boolean representation.
+        // A `false` value is different from the attribute not being
+        // present, so we can't remove it. For non-boolean aria
+        // attributes we could treat false as a removal, but the
+        // amount of exceptions would cost too many bytes. On top of
+        // that other frameworks generally stringify `false`.
+        if (typeof value == "function") ;
+        else if (!removeAttribute) {
+            node.setAttribute(name, value);
+        }
+        else {
+            node.removeAttribute(name);
+        }
+    }
+};
+
+const createTemplate = (build) => ({
+    build() {
+        const nodes = build();
+        return nodes.build?.() ?? nodes;
+    },
+});
+
+const Text = ({ text, marker }) => createTemplate(() => {
+    const renderer = useRenderer();
+    const anchor = marker && renderer._node(() => document.createComment(""));
+    const node = renderer._node(() => document.createTextNode(""));
+    useEffect(() => {
+        const textContent = "" + (MaybeSignal.get(text) ?? "");
+        if (node.textContent != textContent) {
+            node.textContent = textContent;
+        }
+    });
+    return anchor ? [anchor, node] : [node];
+});
+
+/**
+ * Fragment is a component that can be used to wrap multiple children without
+ * introducing an extra DOM element.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return (
+ *     <>
+ *       <h1>Hello World</h1>
+ *       <p>This is a paragraph.</p>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+const Fragment = ({ children }) => createTemplate(() => {
+    return !Array.isArray(children)
+        ? children == null
+            ? []
+            : typeof children == "object"
+                ? children
+                : Text({ text: children })
+        : children.flatMap((children) => Fragment({ children }).build());
+});
+
+const hydrateElement = (node, svg, props, heuristic) => {
+    const { ref, style, children, dangerouslySetInnerHTML, ...attrs } = props;
+    for (const name in style ?? {}) {
+        const value = style[name];
+        const signal = value;
+        useEffect(() => {
+            setStyle(node, name, MaybeSignal.get(signal));
+        });
+    }
+    for (const name in attrs) {
+        const value = attrs[name];
+        if (name.startsWith("on")) {
+            // Register event
+            const s = useScope();
+            const listener = (evt) => {
+                s._run(() => useBatch(() => value(evt)));
+            };
+            const eventName = jsxPropNameToEventName(name);
+            useEffect(() => {
+                node.addEventListener(eventName, listener);
+                return () => node.removeEventListener(eventName, listener);
+            });
+        }
+        else {
+            // Set attribute
+            useEffect(() => {
+                setAttr(node, name, MaybeSignal.get(value), heuristic);
+            });
+        }
+    }
+    if (dangerouslySetInnerHTML) {
+        useEffect(() => {
+            const html = MaybeSignal.get(dangerouslySetInnerHTML).__html;
+            if (node.innerHTML != html) {
+                node.innerHTML = html;
+            }
+        });
+    }
+    if (ref) {
+        useEffect(() => {
+            ref.set(node);
+            return () => ref.set(undefined);
+        });
+    }
+    if (props.children != null) {
+        node.append(...runWithRenderer({
+            _svg: svg,
+            _nodes: node.childNodes.values(),
+        }, () => Fragment({ children: props.children }).build()));
+    }
+    return node;
+};
+const TagComponent = (tagName, props = {}) => createTemplate(() => {
+    const renderer = useRenderer();
+    const svg = tagName == "svg" ? true : !!renderer._svg;
+    const node = hydrateElement(renderer._node(() => !svg
+        ? document.createElement(tagName)
+        : document.createElementNS("http://www.w3.org/2000/svg", tagName)), svg, props, true);
+    return [node];
+});
+
+const ClassComponent = (type, props) => createTemplate(() => {
+    const node = useRenderer()._node(() => new type());
+    customElements.upgrade(node);
+    hydrateElement(node, false, props);
+    return [node];
+});
+
+/**
+ * Creates a template based on the given component type.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return createElement("div", { id: "app" }, [
+ *     createElement("h1", {}, "Hello, World!"),
+ *   ]);
+ * }
+ * ```
+ */
+const createElement = ((type, props = {}, children) => {
+    if (children != null) {
+        props.children = children;
+    }
+    return isComponent(type)
+        ? ClassComponent(type, props)
+        : typeof type == "function"
+            ? createTemplate(() => type(props))
+            : TagComponent(type, props);
+});
+/**
+ * Shorthand for {@link createElement} with convenience methods for intrinsic
+ * elements.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return h.div({ id: "app" }, [
+ *     h.h1({}, "Hello, World!"),
+ *   ]);
+ * }
+ * ```
+ */
+const h = new Proxy(createElement, {
+    get: (target, type) => (props, children) => target(type, props, children),
+});
+
+const getIndexMap = (array, keyFn) => {
+    const keyMap = new Map();
+    for (let i = 0; i < array.length; i++) {
+        const key = keyFn(array[i], i);
+        if (keyMap.has(key)) {
+            throw new Error(`Duplicate key '${key}'`);
+        }
+        keyMap.set(key, i);
+    }
+    return keyMap;
+};
+const useArrayMutation = (array, keyFn) => {
+    const [result, setResult] = useSignal({
+        _mutations: [],
+        _map: new Map(),
+    });
+    let indexMap = new Map();
+    useEffect(() => {
+        const mutations = [];
+        const oldIndexMap = indexMap;
+        const newIndexMap = getIndexMap(array(), keyFn);
+        const transformToOldIndex = (i = NaN) => mutations
+            .map((mutation) => mutation._type == "r"
+            ? (j) => j < mutation._index ? j : j == mutation._index ? NaN : j - 1
+            : mutation._type == "a"
+                ? (j) => (j < mutation._index ? j : j + 1)
+                : mutation._type == "m"
+                    ? (j) => mutation._to <= j && j < mutation._from
+                        ? j + 1
+                        : j == mutation._from
+                            ? mutation._to
+                            : j
+                    : (j) => j)
+            .reduce((i, fn) => fn(i), i);
+        for (const key of oldIndexMap.keys()) {
+            const i = transformToOldIndex(oldIndexMap.get(key));
+            if (!newIndexMap.has(key)) {
+                mutations.push({
+                    _type: "r",
+                    _key: key,
+                    _index: i,
+                });
+            }
+        }
+        for (let i = 0; i < array().length; i++) {
+            const key = keyFn(array()[i], i);
+            const oldIndex = transformToOldIndex(oldIndexMap.get(key));
+            if (isNaN(oldIndex)) {
+                mutations.push({
+                    _type: "a",
+                    _key: key,
+                    _index: i,
+                });
+            }
+            else if (oldIndex != i) {
+                mutations.push({
+                    _type: "m",
+                    _key: key,
+                    _from: oldIndex,
+                    _to: i,
+                });
+            }
+        }
+        if (mutations.length > 0) {
+            setResult({
+                _mutations: mutations,
+                _map: newIndexMap,
+            });
+        }
+        indexMap = newIndexMap;
+    });
+    return result;
+};
+
+/**
+ * `For` is a component that can be used to render a list of items.
+ */
+const For = (props) => createTemplate(() => {
+    const renderer = useRenderer();
+    const items = MaybeSignal.upgrade(props.each ?? []);
+    const anchor = renderer._node(() => document.createComment(""));
+    const keyFn = props.key ?? ((_, i) => i);
+    const nodes = [anchor];
+    const keyMap = new Map();
+    const mutationResult = useArrayMutation(items, keyFn);
+    const lookForAnchor = (index) => {
+        for (let i = index - 1; i >= 0; i--) {
+            const key = keyFn(items()[index - 1], index - 1);
+            const nodes = keyMap.get(key)?._subnodes ?? [];
+            if (nodes.length > 0) {
+                return nodes[nodes.length - 1];
+            }
+        }
+        return anchor;
+    };
+    useEffect(() => {
+        for (const mutation of mutationResult()._mutations) {
+            if (mutation._type == "r") {
+                const { _subnodes = [], _destroy } = keyMap.get(mutation._key) ?? {};
+                _destroy?.();
+                const index = nodes.indexOf(_subnodes[0]);
+                if (index > 0) {
+                    nodes.splice(index, _subnodes.length);
+                }
+                _subnodes.forEach((node) => node.parentNode?.removeChild(node));
+                keyMap.delete(mutation._key);
+            }
+            else if (mutation._type == "a") {
+                let _subnodes = [];
+                const [, destroy] = useSubscope(() => {
+                    const [index, setIndex] = useSignal(mutation._index);
+                    const [item, setItem] = useSignal(items()[mutation._index]);
+                    useEffect(() => {
+                        if (0 <= index() && index() < items().length) {
+                            setItem(() => items()[index()]);
+                        }
+                    });
+                    useEffect(() => {
+                        const index = mutationResult()._map.get(mutation._key);
+                        if (index != null) {
+                            setIndex(index);
+                        }
+                    });
+                    _subnodes = props.children?.(item, index, items).build() ?? [];
+                    const itemAnchor = lookForAnchor(mutation._index);
+                    const anchorIndex = nodes.indexOf(itemAnchor);
+                    if (anchorIndex >= 0) {
+                        nodes.splice(anchorIndex + 1, 0, ..._subnodes);
+                    }
+                    _subnodes.forEach((node) => itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling));
+                });
+                keyMap.set(mutation._key, { _subnodes, _destroy: destroy });
+            }
+            else if (mutation._type == "m") {
+                const { _subnodes = [] } = keyMap.get(mutation._key) ?? {};
+                const index = nodes.indexOf(_subnodes[0]);
+                if (index >= 0) {
+                    nodes.splice(index, _subnodes.length);
+                }
+                const itemAnchor = lookForAnchor(mutation._to);
+                const anchorIndex = nodes.indexOf(itemAnchor);
+                if (anchorIndex >= 0) {
+                    nodes.splice(anchorIndex + 1, 0, ..._subnodes);
+                }
+                _subnodes.forEach((node) => itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling));
+            }
+        }
+    }, [mutationResult]);
+    return nodes;
+});
+
+/**
+ * `If` is a component that can be used to render conditionally.
+ */
+const If = (props) => {
+    const renderer = useRenderer();
+    renderer._ifConditions = [];
+    return ElseIf({ condition: props.condition, children: props.children });
+};
+/**
+ * `ElseIf` serves as an `else if` block for {@link If}. It can also be chained
+ * multiple times.
+ */
+const ElseIf = (props) => {
+    const renderer = useRenderer();
+    const conditions = renderer._ifConditions;
+    const condition = useMemo(() => conditions.every((condition) => !condition()) &&
+        MaybeSignal.get(props.condition));
+    renderer._ifConditions = [...conditions, condition];
+    return runWithRenderer({ _ifConditions: [] }, () => createTemplate(() => {
+        const anchor = renderer._node(() => document.createComment(""));
+        const nodes = [anchor];
+        const template = useMemo(() => condition() ? Fragment({ children: props.children }) : null);
+        let subnodes = [];
+        useEffect(() => {
+            subnodes.forEach((node) => node.parentNode?.removeChild(node));
+            nodes.length = 1;
+            const [, destroy] = useSubscope(() => {
+                subnodes = template()?.build() ?? [];
+                anchor.after(...subnodes);
+                nodes.push(...subnodes);
+            });
+            return destroy;
+        }, [template]);
+        return nodes;
+    }));
+};
+/**
+ * `Else` indicates the `else` block for {@link If} and {@link ElseIf}.
+ */
+const Else = ({ children, }) => {
+    return ElseIf({ condition: true, children });
+};
+
+const Portal = ({ mount, children }) => createTemplate(() => runWithRenderer({ _nodes: undefined }, () => {
+    const nodes = Fragment({ children }).build();
+    useEffect(() => {
+        nodes.forEach((node) => mount.appendChild(node));
+        return () => {
+            nodes.forEach((node) => node.parentNode?.removeChild(node));
+        };
+    });
+    return [];
+}));
+
+const styleSheetRegistrySym = Symbol("styleSheetRegistry");
+const globalStyleSheetRegistry = new Map();
+const getLocalStyleSheetRegistry = (obj) => (obj[styleSheetRegistrySym] ??= new Map());
+const useStyleSheet = (registry, css, cleanup) => {
+    if (!globalStyleSheetRegistry.has(css)) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(css);
+        globalStyleSheetRegistry.set(css, {
+            _sheet: sheet,
+            _refs: 0,
+        });
+    }
+    const globalEntry = globalStyleSheetRegistry.get(css);
+    globalEntry._refs++;
+    if (!registry.has(css)) {
+        registry.set(css, {
+            _sheet: globalEntry._sheet,
+            _refs: 0,
+        });
+    }
+    const entry = registry.get(css);
+    entry._refs++;
+    useEffect(() => () => {
+        if (!--entry._refs) {
+            registry.delete(css);
+            cleanup();
+        }
+        if (!--globalEntry._refs) {
+            globalStyleSheetRegistry.delete(css);
+        }
+    });
+    return entry._sheet;
+};
+const Style = (props) => {
+    const css = props.children;
+    if (typeof css == "function") {
+        // Dynamic CSS will be inserted into the DOM as a <style> element.
+        const styleEl = createElement("style", {}, Text({
+            text: css,
+            marker: false,
+        }));
+        return props.light
+            ? Portal({ mount: document.head, children: styleEl })
+            : styleEl;
+    }
+    // Static CSS will be inserted as an adopted stylesheet and cached.
+    if (css) {
+        const renderer = useRenderer();
+        const styleRoot = props.light
+            ? document
+            : renderer._component?.shadowRoot ?? document;
+        const registry = getLocalStyleSheetRegistry(styleRoot);
+        const sheet = useStyleSheet(registry, css, () => {
+            styleRoot.adoptedStyleSheets = styleRoot.adoptedStyleSheets.filter((s) => s != sheet);
+        });
+        styleRoot.adoptedStyleSheets.push(sheet);
+    }
+    return Fragment({});
+};
+const css = (strings, ...values) => {
+    const result = () => strings.reduce((acc, string, i) => acc + string + (MaybeSignal.get(values[i]) ?? ""), "");
+    return values.some((value) => typeof value == "function") ? result : result();
+};
+
+/** @ignore */
+const jsx = (type, props, key) => {
+    if (props && key != null) {
+        props.key = key;
+    }
+    return createElement(type, props);
+};
+
+export { Component, Else, ElseIf, For, Fragment, If, MaybeSignal, Portal, Style, createContext, createElement, css, defineComponents, event, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal };