sinho 0.1.0

package/dist/dom.js

@@ -0,0 +1,97 @@
+/*
+ * 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;
+export 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`;
+    }
+};
+export 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") {
+            // never serialize functions as attribute values
+        }
+        else if (!removeAttribute) {
+            node.setAttribute(name, value);
+        }
+        else {
+            node.removeAttribute(name);
+        }
+    }
+};
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AASH,MAAM,kBAAkB,GACtB,mEAAmE,CAAC;AAEtE,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,IAA2B,EAC3B,GAAQ,EACR,KAAyC,EACnC,EAAE;IACR,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YACb,KAAK,IAAI,IAAI;gBACX,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,OAAO,KAAK,IAAI,QAAQ,IAAI,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC;oBACxD,CAAC,CAAC,GAAG,KAAK,EAAE;oBACZ,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC;IACvB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,IAAS,EACT,IAAY,EACZ,KAAc,EACd,SAAmB,EACb,EAAE;IACR,MAAM,eAAe,GACnB,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5D,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;IACrB,CAAC;SAAM,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QACpC,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;SAAM,IAAI,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACtD,IACE,CAAC;YACC,2DAA2D;YAC3D,sBAAsB;YACtB,UAAU;YACV,MAAM;YACN,GAAG,CAAC,SAAS;gBACX,CAAC,CAAC;oBACE,OAAO;oBACP,QAAQ;oBACR,MAAM;oBACN,MAAM;oBACN,MAAM;oBACN,UAAU;oBACV,SAAS;oBACT,SAAS;iBACV;gBACH,CAAC,CAAC,EAAE,CAAC;SACR,CAAC,QAAQ,CAAC,IAAI,CAAC;YAChB,IAAI,IAAI,IAAI,EACZ,CAAC;YACD,IAAI,CAAC;gBACH,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;gBACxC,OAAO;YACT,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC,CAAA,CAAC;QAChB,CAAC;QAED,6DAA6D;QAC7D,4DAA4D;QAC5D,uDAAuD;QACvD,wDAAwD;QACxD,4DAA4D;QAC5D,qDAAqD;QAErD,IAAI,OAAO,KAAK,IAAI,UAAU,EAAE,CAAC;YAC/B,gDAAgD;QAClD,CAAC;aAAM,IAAI,CAAC,eAAe,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;AACH,CAAC,CAAC"}

package/dist/intrinsic/ClassComponent.d.ts

@@ -0,0 +1,2 @@
+import type { DomProps } from "../dom.js";
+export declare const ClassComponent: <T extends HTMLElement>(type: new () => T, props: DomProps<T> & Record<string, unknown>) => import("../template.js").Template;

package/dist/intrinsic/ClassComponent.js

@@ -0,0 +1,10 @@
+import { useRenderer } from "../renderer.js";
+import { createTemplate } from "../template.js";
+import { hydrateElement } from "./TagComponent.js";
+export const ClassComponent = (type, props) => createTemplate(() => {
+    const node = useRenderer()._node(() => new type());
+    customElements.upgrade(node);
+    hydrateElement(node, false, props);
+    return [node];
+});
+//# sourceMappingURL=ClassComponent.js.map

package/dist/intrinsic/ClassComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassComponent.js","sourceRoot":"","sources":["../../src/intrinsic/ClassComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAiB,EACjB,KAA4C,EAC5C,EAAE,CACF,cAAc,CAAC,GAAG,EAAE;IAClB,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACnD,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAEnC,OAAO,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC,CAAC,CAAC"}

package/dist/intrinsic/Dynamic.d.ts

@@ -0,0 +1,33 @@
+import { FunctionalComponent } from "../component.js";
+import { MaybeSignal } from "../scope.js";
+import { Template } from "../template.js";
+/**
+ * `Dynamic` is a component that can be used to render conditionally.
+ *
+ * On every change, it will replace all previously rendered nodes with new ones.
+ *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   const [count, setCount] = useSignal(100);
+ *
+ *   <Dynamic
+ *     render={() =>
+ *       count() === 1 ? (
+ *        <>
+ *          <h3>Details</h3>
+ *          { … }
+ *        </>
+ *       ) : count() > 1 ? (
+ *        <p>Multiple items selected</p>
+ *       ) : (
+ *        <p>No items</p>
+ *       )
+ *     }
+ *   />
+ * );
+ * ```
+ */
+export declare const Dynamic: FunctionalComponent<{
+    render?: MaybeSignal<Template | undefined | void | null>;
+}>;

package/dist/intrinsic/Dynamic.js

@@ -0,0 +1,53 @@
+import { MaybeSignal, useEffect, useMemo, useSubscope } from "../scope.js";
+import { useRenderer } from "../renderer.js";
+import { createTemplate } from "../template.js";
+/**
+ * `Dynamic` is a component that can be used to render conditionally.
+ *
+ * On every change, it will replace all previously rendered nodes with new ones.
+ *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   const [count, setCount] = useSignal(100);
+ *
+ *   <Dynamic
+ *     render={() =>
+ *       count() === 1 ? (
+ *        <>
+ *          <h3>Details</h3>
+ *          { … }
+ *        </>
+ *       ) : count() > 1 ? (
+ *        <p>Multiple items selected</p>
+ *       ) : (
+ *        <p>No items</p>
+ *       )
+ *     }
+ *   />
+ * );
+ * ```
+ */
+export const Dynamic = (props) => createTemplate(() => {
+    const renderer = useRenderer();
+    const anchor = renderer._node(() => document.createComment(""));
+    const nodes = [anchor];
+    const template = useMemo(() => MaybeSignal.get(props.render));
+    useEffect(() => {
+        const [subnodes, destroy] = useSubscope(() => {
+            const subnodes = template()?.build() ?? [];
+            anchor.after(...subnodes);
+            nodes.push(...subnodes);
+            return subnodes;
+        });
+        return () => {
+            destroy();
+            for (const node of subnodes ?? []) {
+                node.parentNode?.removeChild(node);
+            }
+            nodes.length = 1;
+        };
+    }, [template]);
+    return nodes;
+});
+//# sourceMappingURL=Dynamic.js.map

package/dist/intrinsic/Dynamic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dynamic.js","sourceRoot":"","sources":["../../src/intrinsic/Dynamic.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,OAAO,GAEf,CAAC,KAAK,EAAE,EAAE,CACb,cAAc,CAAC,GAAG,EAAE;IAClB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,MAAM,KAAK,GAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC,GAAG,EAAE;YAC3C,MAAM,QAAQ,GAAG,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YAC3C,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC;YAC1B,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC;YACxB,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,OAAO,EAAE,CAAC;YAEV,KAAK,MAAM,IAAI,IAAI,QAAQ,IAAI,EAAE,EAAE,CAAC;gBAClC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YAED,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,KAAK,CAAC;AACf,CAAC,CAAC,CAAC"}

package/dist/intrinsic/ErrorBoundary.d.ts

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from "../component.js";
+import { Children } from "./Fragment.js";
+/**
+ * `ErrorBoundary` is a component that can be used to catch errors in the
+ * component tree.
+ */
+export declare const ErrorBoundary: FunctionalComponent<{
+    fallback?: FunctionalComponent<{
+        error: unknown;
+        reset: () => void;
+    }>;
+    children?: Children;
+}>;
+export declare const useErrorBoundary: () => readonly [show: (err: unknown) => void, reset: () => void];

package/dist/intrinsic/ErrorBoundary.js

@@ -0,0 +1,36 @@
+import { useScope, useSignal } from "../scope.js";
+import { createTemplate } from "../template.js";
+import { Fragment } from "./Fragment.js";
+import { createContext, provideContext, useContext } from "../context.js";
+import { If } from "./If.js";
+const ErrorContext = createContext([
+    (err) => {
+        throw err;
+    },
+    () => { },
+]);
+/**
+ * `ErrorBoundary` is a component that can be used to catch errors in the
+ * component tree.
+ */
+export const ErrorBoundary = ({ fallback, children }) => {
+    let error;
+    const [showError, setShowError] = useSignal(false);
+    const show = (err) => {
+        error = err;
+        setShowError(true);
+    };
+    const reset = () => setShowError(false);
+    return If({
+        condition: showError,
+        then: createTemplate(() => fallback?.({ error, reset }) ?? []),
+        else: createTemplate(() => {
+            provideContext(ErrorContext, () => [show, reset]);
+            const s = useScope();
+            s._onError = show;
+            return Fragment({ children });
+        }),
+    });
+};
+export const useErrorBoundary = () => useContext(ErrorContext)();
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/intrinsic/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../src/intrinsic/ErrorBoundary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,MAAM,YAAY,GAAG,aAAa,CAAC;IACjC,CAAC,GAAY,EAAQ,EAAE;QACrB,MAAM,GAAG,CAAC;IACZ,CAAC;IACD,GAAS,EAAE,GAAE,CAAC;CACN,CAAC,CAAC;AAEZ;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAMrB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9B,IAAI,KAAc,CAAC;IACnB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEnD,MAAM,IAAI,GAAG,CAAC,GAAY,EAAE,EAAE;QAC5B,KAAK,GAAG,GAAG,CAAC;QACZ,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,EAAE,CAAC;QACR,SAAS,EAAE,SAAS;QACpB,IAAI,EAAE,cAAc,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC;QAC9D,IAAI,EAAE,cAAc,CAAC,GAAG,EAAE;YACxB,cAAc,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC,CAAC;YAC3D,MAAM,CAAC,GAAG,QAAQ,EAAE,CAAC;YACrB,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;YAElB,OAAO,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC;KACH,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAG9B,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC"}

package/dist/intrinsic/For.d.ts

@@ -0,0 +1,10 @@
+import { MaybeSignal, Signal, SignalLike } from "../scope.js";
+import { Template } from "../template.js";
+/**
+ * `For` is a component that can be used to render a list of items.
+ */
+export declare const For: <T>(props: {
+    each?: MaybeSignal<readonly T[]> | undefined;
+    key?: ((item: T, index: number) => string | number) | undefined;
+    children?: ((item: Signal<T>, index: Signal<number>, arr: SignalLike<readonly T[]>) => Template) | undefined;
+}) => Template;

package/dist/intrinsic/For.js

@@ -0,0 +1,81 @@
+import { useArrayMutation } from "../array_mutation.js";
+import { MaybeSignal, useEffect, useSignal, useSubscope, } from "../scope.js";
+import { useRenderer } from "../renderer.js";
+import { createTemplate } from "../template.js";
+/**
+ * `For` is a component that can be used to render a list of items.
+ */
+export 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;
+});
+//# sourceMappingURL=For.js.map

package/dist/intrinsic/For.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"For.js","sourceRoot":"","sources":["../../src/intrinsic/For.ts"],"names":[],"mappings":"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"}

package/dist/intrinsic/Fragment.d.ts

@@ -0,0 +1,23 @@
+import { FunctionalComponent } from "../component.js";
+import { Template } from "../template.js";
+import type { MaybeSignal } from "../scope.js";
+export type Children = Template | MaybeSignal<string | number | null | undefined> | Children[];
+/**
+ * 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>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare const Fragment: FunctionalComponent<{
+    children?: Children;
+}>;

package/dist/intrinsic/Fragment.js

@@ -0,0 +1,28 @@
+import { Text } from "./Text.js";
+import { createTemplate } from "../template.js";
+/**
+ * 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>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const Fragment = ({ children }) => createTemplate(() => {
+    return !Array.isArray(children)
+        ? children == null
+            ? []
+            : typeof children == "object"
+                ? children
+                : Text({ text: children })
+        : children.flatMap((children) => Fragment({ children }).build());
+});
+//# sourceMappingURL=Fragment.js.map

package/dist/intrinsic/Fragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fragment.js","sourceRoot":"","sources":["../../src/intrinsic/Fragment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAQ1D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,QAAQ,GAEhB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACpB,cAAc,CAAC,GAAG,EAAE;IAClB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC7B,CAAC,CAAC,QAAQ,IAAI,IAAI;YAChB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,OAAO,QAAQ,IAAI,QAAQ;gBAC3B,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QAC9B,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AACrE,CAAC,CAAC,CAAC"}

package/dist/intrinsic/If.d.ts

@@ -0,0 +1,24 @@
+import type { FunctionalComponent } from "../component.js";
+import { MaybeSignal } from "../scope.js";
+import { Children } from "./Fragment.js";
+/**
+ * `If` is a component that can be used to render conditionally.
+ */
+export declare const If: FunctionalComponent<{
+    condition?: MaybeSignal<boolean>;
+    children?: Children;
+}>;
+/**
+ * `ElseIf` serves as an `else if` block for {@link If}. It can also be chained
+ * multiple times.
+ */
+export declare const ElseIf: FunctionalComponent<{
+    condition?: MaybeSignal<boolean>;
+    children?: Children;
+}>;
+/**
+ * `Else` indicates the `else` block for {@link If} and {@link ElseIf}.
+ */
+export declare const Else: FunctionalComponent<{
+    children?: Children;
+}>;

package/dist/intrinsic/If.js

@@ -0,0 +1,47 @@
+import { createTemplate } from "../template.js";
+import { MaybeSignal, useEffect, useMemo, useSubscope } from "../scope.js";
+import { runWithRenderer, useRenderer } from "../renderer.js";
+import { Fragment } from "./Fragment.js";
+/**
+ * `If` is a component that can be used to render conditionally.
+ */
+export 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.
+ */
+export 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}.
+ */
+export const Else = ({ children, }) => {
+    return ElseIf({ condition: true, children });
+};
+//# sourceMappingURL=If.js.map

package/dist/intrinsic/If.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"If.js","sourceRoot":"","sources":["../../src/intrinsic/If.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAiB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAGV,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,aAAa,GAAG,EAAE,CAAC;IAE5B,OAAO,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC1E,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAGd,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC;IAC1C,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CACH,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;QAC7C,WAAW,CAAC,GAAG,CAAsB,KAAK,CAAC,SAAS,CAAC,CACxD,CAAC;IAEF,QAAQ,CAAC,aAAa,GAAG,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;IAEpD,OAAO,eAAe,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CACjD,cAAc,CAAC,GAAG,EAAE;QAClB,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;QAChE,MAAM,KAAK,GAAW,CAAC,MAAM,CAAC,CAAC;QAC/B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAC5B,SAAS,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5D,CAAC;QAEF,IAAI,QAAQ,GAAW,EAAE,CAAC;QAE1B,SAAS,CAAC,GAAG,EAAE;YACb,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/D,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAEjB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC,GAAG,EAAE;gBACnC,QAAQ,GAAG,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;gBACrC,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC;gBAC1B,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;YAEH,OAAO,OAAO,CAAC;QACjB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEf,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAiD,CAAC,EACjE,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,MAAM,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC/C,CAAC,CAAC"}

package/dist/intrinsic/Portal.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../component.js";
+import { Children } from "./Fragment.js";
+export declare const Portal: FunctionalComponent<{
+    mount: Node;
+    children?: Children;
+}>;

package/dist/intrinsic/Portal.js

@@ -0,0 +1,15 @@
+import { runWithRenderer } from "../renderer.js";
+import { useEffect } from "../scope.js";
+import { createTemplate } from "../template.js";
+import { Fragment } from "./Fragment.js";
+export 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 [];
+}));
+//# sourceMappingURL=Portal.js.map

package/dist/intrinsic/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../src/intrinsic/Portal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,CAAC,MAAM,MAAM,GAGd,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3B,cAAc,CAAC,GAAG,EAAE,CAClB,eAAe,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE;IAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QAEjD,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC,CACH,CAAC"}

package/dist/intrinsic/Style.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from "../component.js";
+import { MaybeSignal } from "../scope.js";
+export declare const Style: FunctionalComponent<{
+    light?: boolean;
+    children?: MaybeSignal<string>;
+}>;
+export declare const css: (strings: TemplateStringsArray, ...values: MaybeSignal<string | number>[]) => MaybeSignal<string>;

package/dist/intrinsic/Style.js

@@ -0,0 +1,70 @@
+import { createElement } from "../create_element.js";
+import { Text } from "./Text.js";
+import { MaybeSignal, useEffect } from "../scope.js";
+import { Fragment } from "./Fragment.js";
+import { useRenderer } from "../renderer.js";
+import { Portal } from "./Portal.js";
+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;
+};
+export 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({});
+};
+export 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();
+};
+//# sourceMappingURL=Style.js.map

package/dist/intrinsic/Style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Style.js","sourceRoot":"","sources":["../../src/intrinsic/Style.ts"],"names":[],"mappings":"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"}

package/dist/intrinsic/TagComponent.d.ts

@@ -0,0 +1,4 @@
+import { DomProps } from "../dom.js";
+import { Template } from "../template.js";
+export declare const hydrateElement: <E extends HTMLElement | SVGElement>(node: E, svg: boolean, props: DomProps<any>, heuristic?: boolean) => E;
+export declare const TagComponent: (tagName: string, props?: DomProps<any>) => Template;