sinho 0.2.3 → 0.3.1

package/dist/array_mutation.js

@@ -14,7 +14,7 @@ export const useArrayMutation = (array, keyFn) => {
     const [result, setResult] = useSignal({
         _mutations: [],
         _map: new Map(),
-    });
+    }, { force: true });
     let indexMap = new Map();
     useEffect(() => {
         const mutations = [];

package/dist/array_mutation.js.map

@@ -1 +1 @@
-{"version":3,"file":"array_mutation.js","sourceRoot":"","sources":["../src/array_mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,WAAW,GAAG,CAClB,KAAmB,EACnB,KAA2C,EACrB,EAAE;IACxB,MAAM,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;IAE1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAE/B,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CAAC,kBAAkB,GAAG,GAAG,CAAC,CAAC;QAC5C,CAAC;QAED,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAoBF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAA+B,EAC/B,KAA2C,EACd,EAAE;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAsB;QACzD,UAAU,EAAE,EAAE;QACd,IAAI,EAAE,IAAI,GAAG,EAAE;KAChB,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,IAAI,GAAG,EAAmB,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAoB,EAAE,CAAC;QACtC,MAAM,WAAW,GAAG,QAAQ,CAAC;QAC7B,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAEhD,MAAM,mBAAmB,GAAG,CAAC,IAAY,GAAG,EAAE,EAAE,CAC9C,SAAS;aACN,GAAG,CAAC,CAAC,QAAQ,EAA2B,EAAE,CACzC,QAAQ,CAAC,KAAK,IAAI,GAAG;YACnB,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YAChE,CAAC,CAAC,QAAQ,CAAC,KAAK,IAAI,GAAG;gBACrB,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC1C,CAAC,CAAC,QAAQ,CAAC,KAAK,IAAI,GAAG;oBACrB,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CACJ,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK;wBACrC,CAAC,CAAC,CAAC,GAAG,CAAC;wBACP,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,KAAK;4BACnB,CAAC,CAAC,QAAQ,CAAC,GAAG;4BACd,CAAC,CAAC,CAAC;oBACX,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CACjB;aACA,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEjC,KAAK,MAAM,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,CAAC;YACrC,MAAM,CAAC,GAAG,mBAAmB,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAEpD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC1B,SAAS,CAAC,IAAI,CAAC;oBACb,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,GAAG;oBACT,MAAM,EAAE,CAAC;iBACV,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACjC,MAAM,QAAQ,GAAG,mBAAmB,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAE3D,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACpB,SAAS,CAAC,IAAI,CAAC;oBACb,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,GAAG;oBACT,MAAM,EAAE,CAAC;iBACV,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;gBACzB,SAAS,CAAC,IAAI,CAAC;oBACb,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,GAAG;oBACT,KAAK,EAAE,QAAQ;oBACf,GAAG,EAAE,CAAC;iBACP,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAED,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,SAAS,CAAC;gBACR,UAAU,EAAE,SAAS;gBACrB,IAAI,EAAE,WAAW;aAClB,CAAC,CAAC;QACL,CAAC;QAED,QAAQ,GAAG,WAAW,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"array_mutation.js","sourceRoot":"","sources":["../src/array_mutation.ts"],"names":[],"mappings":"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"}

package/dist/bundle.d.ts

@@ -759,6 +759,11 @@ interface Context<in out T> {
 declare const createContext: (<T>(value: T, opts?: SetSignalOptions) => Context<T>) & (<T>(value?: T, opts?: SetSignalOptions) => Context<T | undefined>);
 declare const useContext: <T>(context: Context<T>) => Signal<T>;
 
+type TemplateNodes = (Node | TemplateNodes)[];
+declare namespace TemplateNodes {
+    const forEach: (nodes: TemplateNodes, fn: (node: Node) => void) => void;
+    const last: (nodes: TemplateNodes, lastIndex?: number) => Node | undefined;
+}
 /**
  * Represents a render result of a component.
  */
@@ -766,7 +771,7 @@ interface Template {
     /**
      * Build the DOM elements represented by this template.
      */
-    build(): Node[];
+    build(): TemplateNodes;
 }
 
 interface Tagged<in out T> {
@@ -1138,4 +1143,4 @@ declare namespace JSX {
     }
 }
 
-export { type AttributeOptions, type Children, type Cleanup, Component, type ComponentConstructor, type ComponentOptions, type Context, type DangerousHtml, Else, ElseIf, type EventConstructor, For, Fragment, type FunctionalComponent, If, JSX, MaybeSignal, type Metadata, Portal, type PropOptions, type RefSignal, type RefSignalSetter, type SetSignalOptions, type Signal, type SignalLike, type SignalSetter, Style, type Styles, type SubscopeOptions, type Template, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };
+export { type AttributeOptions, type Children, type Cleanup, Component, type ComponentConstructor, type ComponentOptions, type Context, type DangerousHtml, Else, ElseIf, type EventConstructor, For, Fragment, type FunctionalComponent, If, JSX, MaybeSignal, type Metadata, Portal, type PropOptions, type RefSignal, type RefSignalSetter, type SetSignalOptions, type Signal, type SignalLike, type SignalSetter, Style, type Styles, type SubscopeOptions, type Template, TemplateNodes, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };

package/dist/bundle.js

@@ -332,6 +332,29 @@ const useContext = (context) => {
     });
 };
 
+var TemplateNodes;
+(function (TemplateNodes) {
+    TemplateNodes.forEach = (nodes, fn) => nodes.forEach((node) => Array.isArray(node) ? TemplateNodes.forEach(node, fn) : fn(node));
+    TemplateNodes.last = (nodes, lastIndex = nodes.length - 1) => {
+        if (!nodes.length)
+            return;
+        for (let i = lastIndex; i >= 0; i--) {
+            const last = nodes[i];
+            if (!Array.isArray(last))
+                return last;
+            const lastNode = TemplateNodes.last(last);
+            if (lastNode)
+                return lastNode;
+        }
+    };
+})(TemplateNodes || (TemplateNodes = {}));
+const createTemplate = (build) => ({
+    build() {
+        const nodes = build();
+        return nodes.build?.() ?? nodes;
+    },
+});
+
 /**
  * Defines a property in your component metadata that can be set from outside
  * of the component.
@@ -540,7 +563,9 @@ const Component = ((tagName, metadata = {}, opts = {}) => {
                 const prevMountEffects = mountEffects;
                 mountEffects = [];
                 try {
-                    renderParent?.append(...this.render().build());
+                    TemplateNodes.forEach(this.render().build(), (node) => {
+                        renderParent.append(node);
+                    });
                     // Run mount effects
                     mountEffects.forEach(([fn, opts]) => useEffect(fn, opts));
                 }
@@ -679,13 +704,6 @@ const setAttr = (node, name, value, heuristic) => {
     }
 };
 
-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(""));
@@ -719,9 +737,11 @@ const Fragment = ({ children }) => createTemplate(() => {
     return !Array.isArray(children)
         ? children == null
             ? []
-            : typeof children == "object"
-                ? children
-                : Text({ text: children })
+            : [
+                typeof children == "object"
+                    ? children.build()
+                    : Text({ text: children }).build(),
+            ]
         : children.flatMap((children) => Fragment({ children }).build());
 });
 
@@ -770,10 +790,10 @@ const hydrateElement = (node, svg, props, heuristic) => {
         });
     }
     if (props.children != null) {
-        node.append(...runWithRenderer({
+        TemplateNodes.forEach(runWithRenderer({
             _svg: svg,
             _nodes: node.childNodes.values(),
-        }, () => Fragment({ children: props.children }).build()));
+        }, () => Fragment({ children: props.children }).build()), (subnode) => node.append(subnode));
     }
     return node;
 };
@@ -847,7 +867,7 @@ const useArrayMutation = (array, keyFn) => {
     const [result, setResult] = useSignal({
         _mutations: [],
         _map: new Map(),
-    });
+    }, { force: true });
     let indexMap = new Map();
     useEffect(() => {
         const mutations = [];
@@ -914,33 +934,21 @@ const For = (props) => createTemplate(() => {
     const items = MaybeSignal.upgrade(props.each ?? []);
     const anchor = renderer._node(() => document.createComment(""));
     const keyFn = props.key ?? ((_, i) => i);
-    const nodes = [anchor];
+    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;
-    };
+    const lookForAnchor = (index) => TemplateNodes.last(nodes[1], index - 1) ?? anchor;
     useEffect(() => {
         for (const mutation of mutationResult()._mutations) {
             if (mutation._type == "r") {
-                const { _subnodes = [], _destroy } = keyMap.get(mutation._key) ?? {};
+                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));
+                nodes[1].splice(mutation._index, 1);
+                TemplateNodes.forEach(_subnodes ?? [], (node) => node.parentNode?.removeChild(node));
                 keyMap.delete(mutation._key);
             }
             else if (mutation._type == "a") {
-                let _subnodes = [];
+                let _subnodes;
                 const [, destroy] = useSubscope(() => {
                     const [index, setIndex] = useSignal(mutation._index);
                     const [item, setItem] = useSignal(items()[mutation._index]);
@@ -956,27 +964,24 @@ const For = (props) => createTemplate(() => {
                         }
                     });
                     _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));
+                    nodes[1].splice(mutation._index, 0, _subnodes);
+                    let itemAnchor = lookForAnchor(mutation._index);
+                    TemplateNodes.forEach(_subnodes, (node) => {
+                        itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
+                        itemAnchor = node;
+                    });
                 });
                 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));
+                const { _subnodes } = keyMap.get(mutation._key) ?? {};
+                nodes[1].splice(mutation._from, 1);
+                nodes[1].splice(mutation._to, 0, _subnodes ?? []);
+                let itemAnchor = lookForAnchor(mutation._to);
+                TemplateNodes.forEach(_subnodes ?? [], (node) => {
+                    itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
+                    itemAnchor = node;
+                });
             }
         }
     }, [mutationResult]);
@@ -997,22 +1002,26 @@ const If = (props) => {
  */
 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 prevConditions = renderer._ifConditions;
+    const myCondition = MaybeSignal.upgrade(props.condition);
+    const fullCondition = useMemo(() => prevConditions.every((condition) => !condition()) && myCondition());
+    renderer._ifConditions = [...prevConditions, myCondition];
+    return createTemplate(() => runWithRenderer({ _ifConditions: [] }, () => {
         const anchor = renderer._node(() => document.createComment(""));
-        const nodes = [anchor];
-        const template = useMemo(() => condition() ? Fragment({ children: props.children }) : null);
+        const nodes = [anchor, []];
+        const template = useMemo(() => fullCondition() ? Fragment({ children: props.children }) : null);
         let subnodes = [];
         useEffect(() => {
-            subnodes.forEach((node) => node.parentNode?.removeChild(node));
-            nodes.length = 1;
+            TemplateNodes.forEach(subnodes, (node) => node.parentNode?.removeChild(node));
+            nodes[1] = [];
             const [, destroy] = useSubscope(() => {
                 subnodes = template()?.build() ?? [];
-                anchor.after(...subnodes);
-                nodes.push(...subnodes);
+                nodes[1] = subnodes;
+                let before = anchor;
+                TemplateNodes.forEach(subnodes, (node) => {
+                    before.parentNode?.insertBefore(node, before.nextSibling);
+                    before = node;
+                });
             });
             return destroy;
         }, [template]);
@@ -1029,11 +1038,11 @@ const Else = ({ children, }) => {
 const Portal = ({ mount, children }) => createTemplate(() => runWithRenderer({ _nodes: undefined }, () => {
     const nodes = Fragment({ children }).build();
     useEffect(() => {
-        nodes.forEach((node) => mount.appendChild(node));
+        TemplateNodes.forEach(nodes, (node) => mount.appendChild(node));
         return () => {
-            nodes.forEach((node) => node.parentNode?.removeChild(node));
+            TemplateNodes.forEach(nodes, (node) => node.parentNode?.removeChild(node));
         };
-    });
+    }, []);
     return [];
 }));
 
@@ -1109,4 +1118,4 @@ const jsx = (type, props, key) => {
     return createElement(type, props);
 };
 
-export { Component, Else, ElseIf, For, Fragment, If, MaybeSignal, Portal, Style, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };
+export { Component, Else, ElseIf, For, Fragment, If, MaybeSignal, Portal, Style, TemplateNodes, createContext, createElement, css, defineComponents, event, flushBatch, h, isComponent, jsx, jsx as jsxDEV, jsx as jsxs, prop, useBatch, useContext, useMountEffect as useEffect, useMemo, useRef, useSignal, useSubscope };

package/dist/bundle.min.js

@@ -1 +1 @@
-const t=t=>({t:t,o:[],i:[],l:{...t?.l},u(t){const n=o;o=this;try{return t()}finally{o=n}},h(){for(let t=this.i.length-1;t>=0;t--)this.i[t].h();this.i=[];for(let t=this.o.length-1;t>=0;t--){const n=this.o[t];n._?.(),n.u=()=>{},n.p.forEach((t=>t.o.delete(n))),n.p.clear()}this.o=[]}});let n,e,o=t(),s=!1;const r=()=>o,c=(t,o)=>{const r=()=>(!s&&n&&(n.p.add(r),r.o.add(n)),r.peek());r.o=new Set,r.peek=()=>t;const c=(n,s)=>{const l={...o,...s};if(l.equals??=(t,n)=>t===n,e){const o="function"==typeof n?n(r.peek()):n;!l?.force&&l.equals(o,r.peek())||(l?.force?t=o:e.m.push((()=>t=o)),l?.silent||r.o.forEach((t=>{t.v?e.S.add(t):e.o.add(t)})))}else i((()=>c(n,l)))};return[r,c]},i=t=>{if(e)return t();e={m:[],o:new Set,S:new Set};try{const n=t();return l(),n}finally{e=void 0}},l=()=>{for(;e&&e.m.length+e.o.size+e.S.size>0;){e.o.forEach((t=>t._?.())),e.m.forEach((t=>t())),e.m=[];const t=e.S.values().next().value??e.o.values().next().value;t&&(t.u(),e.S.delete(t),e.o.delete(t))}};let u=!1;const f=(t,e)=>{const r=!!e,c={M:o,v:u,p:new Set,u(){const o=n,c=s;n=this;try{this.p.forEach((t=>t.o.delete(this))),this.p.clear(),e&&(s=!1,e.forEach((t=>t()))),s=r,this._?.();const n=this.M.u((()=>i(t)));this._=n?()=>{this.M.u((()=>i(n))),this._=null}:null}finally{n=o,s=c}}};o.o.push(c),c.u(),c.p.size||c._||o.o.pop()},a=(t,n)=>{const[e,o]=c(void 0,n);let s=!0;u=!0;try{f((()=>{o(t,s?{force:!0}:{}),s=!1}))}finally{u=!1}return e},d=(n,s)=>{const r=e;e=void 0;const c=o,i=t(c);Object.assign(i.l,s?.details);try{c.i.push(i);return[i.u(n),()=>{const t=c.i.indexOf(i);t>=0&&c.i.splice(t,1),i.h()}]}finally{e=r}},h=(t,n)=>{const[e,o]=c(t,n);return e.set=o,e},_={upgrade:t=>()=>_.get(t),get:t=>"function"==typeof t?t():t,peek(t){const n=s;s=!0;try{return this.get(t)}finally{s=n}}},p=(t={})=>({k:[],C(t){return this.N?.next().value??t()},...t}),m=()=>{const t=r();return t.l.j??=p()},y=(t,n)=>{const e=m(),o=p({...e,...t}),[s,r]=d(n,{details:{j:o}});return f((()=>r)),s},w=t=>(t[0]??"").toLowerCase()+t.slice(1).replace(/[A-Z]/g,(t=>"-"+t.toLowerCase())),b=t=>t.startsWith("on:")?t.slice(3):w(t.slice(2)),v=Symbol(),g=(t,n)=>({[v]:Math.random().toString(36).slice(2),H:t,L:n}),x=t=>!!t?.[v],S=(t,n,e)=>{n.addEventListener(t[v],(t=>{const n=_.get(e);void 0!==n&&(t.stopPropagation(),t.detail(n))}))},M=t=>{const n=m();return a((()=>{let e=t.H;return n.T?.dispatchEvent(new CustomEvent(t[v],{detail:t=>e=t,bubbles:!0,composed:!0})),e}))},k=(t,n)=>({A:"p",O:t,...n}),C=(t=CustomEvent)=>({A:"e",D:t}),E=Symbol();let N;const j=(t,n)=>{N?N.push([t,n]):f(t,n)},H=(t,n={},e={})=>{const o=[],s=new Map;for(const t in n){const e=n[t];if("p"==e.A&&e.attribute){"function"==typeof e.attribute&&(e.attribute={transform:e.attribute});const n=e.attribute={name:w(t),static:!1,transform:t=>t,...e.attribute};s.set(n.name,{name:t,meta:e}),n.static||o.push(n.name)}}e.shadow??={mode:"open"};class i extends HTMLElement{static[E]={I:t};static observedAttributes=o;props={};events={};[E]={};constructor(){super();for(const t in n){const e=n[t];if("p"==e.A){const n=x(e.O)?e.O:null,[o,s]=c(n?void 0:e.O);this.props[t]=o,n&&S(n,this,o),Object.defineProperty(this,t,{get:o.peek,set:t=>s((()=>t),{force:!0})})}else if("e"==e.A&&t.startsWith("on")){const n=b(t);this.events[t]=t=>this.dispatchEvent(new e.D(n,t))}}}connectedCallback(){const t=(n=this,e.shadow?n.shadowRoot??n.attachShadow(e.shadow):n);var n;this[E].$=d((()=>y({P:!1,T:this,N:t.childNodes.values()},(()=>{this[E].M=r();const n=N;N=[];try{t?.append(...this.render().build()),N.forEach((([t,n])=>f(t,n)))}finally{N=n}}))))[1]}disconnectedCallback(){this[E].$?.()}attributeChangedCallback(t,n,e){const o=s.get(t);o&&(this[o.name]=null!=e?o.meta.attribute.transform.call(this,e):x(o.meta.O)?void 0:o.meta.O)}}return i},L=t=>!!t?.[E],T=(...t)=>{const[n,e]="string"==typeof t[0]?[t[0],t.slice(1)]:["",t];for(const t of e)customElements.define(n+t[E].I,t)},A=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,O=(t,n,e)=>{"-"==n[0]?t.style.setProperty(n,""+e):t.style[n]=null==e?"":"number"!=typeof e||A.test(n)?""+e:e+"px"},D=(t,n,e,o)=>{const s=null==e||!1===e&&!n.includes("-");if(n.startsWith("prop:"))t[n.slice(5)]=e;else if(n.startsWith("attr:"))n=n.slice(5),s?t.removeAttribute(n):t.setAttribute(n,e);else if(!["innerHTML","outerHTML"].includes(n)){if(!["tabIndex","role",...o?["width","height","href","list","form","download","rowSpan","colSpan"]:[]].includes(n)&&n in t)try{return void(t[n]=e)}catch(t){}"function"==typeof e||(s?t.removeAttribute(n):t.setAttribute(n,e))}},I=t=>({build(){const n=t();return n.build?.()??n}}),$=({text:t,marker:n})=>I((()=>{const e=m(),o=n&&e.C((()=>document.createComment(""))),s=e.C((()=>document.createTextNode("")));return f((()=>{const n=""+(_.get(t)??"");s.textContent!=n&&(s.textContent=n)})),o?[o,s]:[s]})),z=({children:t})=>I((()=>Array.isArray(t)?t.flatMap((t=>z({children:t}).build())):null==t?[]:"object"==typeof t?t:$({text:t}))),P=(t,n,e,o)=>{const{ref:s,style:c,children:l,dangerouslySetInnerHTML:u,...a}=e;for(const n in c??{}){const e=c[n];f((()=>{O(t,n,_.get(e))}))}for(const n in a){const e=a[n];if(n.startsWith("on")){const o=r(),s=t=>{o.u((()=>i((()=>e(t)))))},c=b(n);f((()=>(t.addEventListener(c,s),()=>t.removeEventListener(c,s))))}else f((()=>{D(t,n,_.get(e),o)}))}return u&&f((()=>{const n=_.get(u).__html;t.innerHTML!=n&&(t.innerHTML=n)})),s&&f((()=>(s.set(t),()=>s.set(void 0)))),null!=e.children&&t.append(...y({P:n,N:t.childNodes.values()},(()=>z({children:e.children}).build()))),t},V=(t,n={},e)=>(null!=e&&(n.children=e),L(t)?((t,n)=>I((()=>{const e=m().C((()=>new t));return customElements.upgrade(e),P(e,!1,n),[e]})))(t,n):"function"==typeof t?I((()=>t(n))):((t,n={})=>I((()=>{const e=m(),o="svg"==t||!!e.P;return[P(e.C((()=>o?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t))),o,n,!0)]})))(t,n)),Z=new Proxy(V,{get:(t,n)=>(e,o)=>t(n,e,o)}),q=(t,n)=>{const[e,o]=c({V:[],Z:new Map});let s=new Map;return f((()=>{const e=[],r=s,c=((t,n)=>{const e=new Map;for(let o=0;o<t.length;o++){const s=n(t[o],o);if(e.has(s))throw Error(`Duplicate key '${s}'`);e.set(s,o)}return e})(t(),n),i=(t=NaN)=>e.map((t=>"r"==t.q?n=>n<t.B?n:n==t.B?NaN:n-1:"a"==t.q?n=>n<t.B?n:n+1:"m"==t.q?n=>t.F<=n&&n<t.G?n+1:n==t.G?t.F:n:t=>t)).reduce(((t,n)=>n(t)),t);for(const t of r.keys()){const n=i(r.get(t));c.has(t)||e.push({q:"r",J:t,B:n})}for(let o=0;o<t().length;o++){const s=n(t()[o],o),c=i(r.get(s));isNaN(c)?e.push({q:"a",J:s,B:o}):c!=o&&e.push({q:"m",J:s,G:c,F:o})}e.length>0&&o({V:e,Z:c}),s=c})),e},B=t=>I((()=>{const n=m(),e=_.upgrade(t.each??[]),o=n.C((()=>document.createComment(""))),s=t.key??((t,n)=>n),r=[o],i=new Map,l=q(e,s),u=t=>{for(let n=t-1;n>=0;n--){const n=s(e()[t-1],t-1),o=i.get(n)?.K??[];if(o.length>0)return o[o.length-1]}return o};return f((()=>{for(const n of l().V)if("r"==n.q){const{K:t=[],$:e}=i.get(n.J)??{};e?.();const o=r.indexOf(t[0]);o>0&&r.splice(o,t.length),t.forEach((t=>t.parentNode?.removeChild(t))),i.delete(n.J)}else if("a"==n.q){let o=[];const[,s]=d((()=>{const[s,i]=c(n.B),[a,d]=c(e()[n.B]);f((()=>{0<=s()&&s()<e().length&&d((()=>e()[s()]))})),f((()=>{const t=l().Z.get(n.J);null!=t&&i(t)})),o=t.children?.(a,s,e).build()??[];const h=u(n.B),_=r.indexOf(h);_>=0&&r.splice(_+1,0,...o),o.forEach((t=>h.parentNode?.insertBefore(t,h.nextSibling)))}));i.set(n.J,{K:o,$:s})}else if("m"==n.q){const{K:t=[]}=i.get(n.J)??{},e=r.indexOf(t[0]);e>=0&&r.splice(e,t.length);const o=u(n.F),s=r.indexOf(o);s>=0&&r.splice(s+1,0,...t),t.forEach((t=>o.parentNode?.insertBefore(t,o.nextSibling)))}}),[l]),r})),F=t=>(m().k=[],G({condition:t.condition,children:t.children})),G=t=>{const n=m(),e=n.k,o=a((()=>e.every((t=>!t()))&&_.get(t.condition)));return n.k=[...e,o],y({k:[]},(()=>I((()=>{const e=n.C((()=>document.createComment(""))),s=[e],r=a((()=>o()?z({children:t.children}):null));let c=[];return f((()=>{c.forEach((t=>t.parentNode?.removeChild(t))),s.length=1;const[,t]=d((()=>{c=r()?.build()??[],e.after(...c),s.push(...c)}));return t}),[r]),s}))))},J=({children:t})=>G({condition:!0,children:t}),K=({mount:t,children:n})=>I((()=>y({N:void 0},(()=>{const e=z({children:n}).build();return f((()=>(e.forEach((n=>t.appendChild(n))),()=>{e.forEach((t=>t.parentNode?.removeChild(t)))}))),[]})))),Q=Symbol(),R=new Map,U=t=>{const n=t.children;if("function"==typeof n){const e=V("style",{},$({text:n,marker:!1}));return t.light?K({mount:document.head,children:e}):e}if(n){const o=m(),s=t.light?document:o.T?.shadowRoot??document,r=((t,n,e)=>{if(!R.has(n)){const t=new CSSStyleSheet;t.replaceSync(n),R.set(n,{R:t,U:0})}const o=R.get(n);o.U++,t.has(n)||t.set(n,{R:o.R,U:0});const s=t.get(n);return s.U++,f((()=>()=>{--s.U||(t.delete(n),e()),--o.U||R.delete(n)})),s.R})((e=s,e[Q]??=new Map),n,(()=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter((t=>t!=r))}));s.adoptedStyleSheets.push(r)}var e;return z({})},W=(t,...n)=>{const e=()=>t.reduce(((t,e,o)=>t+e+(_.get(n[o])??"")),"");return n.some((t=>"function"==typeof t))?e:e()},X=(t,n,e)=>(n&&null!=e&&(n.key=e),V(t,n));export{H as Component,J as Else,G as ElseIf,B as For,z as Fragment,F as If,_ as MaybeSignal,K as Portal,U as Style,g as createContext,V as createElement,W as css,T as defineComponents,C as event,l as flushBatch,Z as h,L as isComponent,X as jsx,X as jsxDEV,X as jsxs,k as prop,i as useBatch,M as useContext,j as useEffect,a as useMemo,h as useRef,c as useSignal,d as useSubscope};
+const t=t=>({t:t,o:[],i:[],l:{...t?.l},u(t){const n=o;o=this;try{return t()}finally{o=n}},h(){for(let t=this.i.length-1;t>=0;t--)this.i[t].h();this.i=[];for(let t=this.o.length-1;t>=0;t--){const n=this.o[t];n._?.(),n.u=()=>{},n.p.forEach((t=>t.o.delete(n))),n.p.clear()}this.o=[]}});let n,e,o=t(),s=!1;const r=()=>o,c=(t,o)=>{const r=()=>(!s&&n&&(n.p.add(r),r.o.add(n)),r.peek());r.o=new Set,r.peek=()=>t;const c=(n,s)=>{const l={...o,...s};if(l.equals??=(t,n)=>t===n,e){const o="function"==typeof n?n(r.peek()):n;!l?.force&&l.equals(o,r.peek())||(l?.force?t=o:e.m.push((()=>t=o)),l?.silent||r.o.forEach((t=>{t.v?e.S.add(t):e.o.add(t)})))}else i((()=>c(n,l)))};return[r,c]},i=t=>{if(e)return t();e={m:[],o:new Set,S:new Set};try{const n=t();return l(),n}finally{e=void 0}},l=()=>{for(;e&&e.m.length+e.o.size+e.S.size>0;){e.o.forEach((t=>t._?.())),e.m.forEach((t=>t())),e.m=[];const t=e.S.values().next().value??e.o.values().next().value;t&&(t.u(),e.S.delete(t),e.o.delete(t))}};let u=!1;const f=(t,e)=>{const r=!!e,c={M:o,v:u,p:new Set,u(){const o=n,c=s;n=this;try{this.p.forEach((t=>t.o.delete(this))),this.p.clear(),e&&(s=!1,e.forEach((t=>t()))),s=r,this._?.();const n=this.M.u((()=>i(t)));this._=n?()=>{this.M.u((()=>i(n))),this._=null}:null}finally{n=o,s=c}}};o.o.push(c),c.u(),c.p.size||c._||o.o.pop()},a=(t,n)=>{const[e,o]=c(void 0,n);let s=!0;u=!0;try{f((()=>{o(t,s?{force:!0}:{}),s=!1}))}finally{u=!1}return e},d=(n,s)=>{const r=e;e=void 0;const c=o,i=t(c);Object.assign(i.l,s?.details);try{c.i.push(i);return[i.u(n),()=>{const t=c.i.indexOf(i);t>=0&&c.i.splice(t,1),i.h()}]}finally{e=r}},h=(t,n)=>{const[e,o]=c(t,n);return e.set=o,e},_={upgrade:t=>()=>_.get(t),get:t=>"function"==typeof t?t():t,peek(t){const n=s;s=!0;try{return this.get(t)}finally{s=n}}},p=(t={})=>({k:[],C(t){return this.N?.next().value??t()},...t}),y=()=>{const t=r();return t.l.j??=p()},m=(t,n)=>{const e=y(),o=p({...e,...t}),[s,r]=d(n,{details:{j:o}});return f((()=>r)),s},w=t=>(t[0]??"").toLowerCase()+t.slice(1).replace(/[A-Z]/g,(t=>"-"+t.toLowerCase())),b=t=>t.startsWith("on:")?t.slice(3):w(t.slice(2)),v=Symbol(),g=(t,n)=>({[v]:Math.random().toString(36).slice(2),A:t,H:n}),x=t=>!!t?.[v],S=(t,n,e)=>{n.addEventListener(t[v],(t=>{const n=_.get(e);void 0!==n&&(t.stopPropagation(),t.detail(n))}))},M=t=>{const n=y();return a((()=>{let e=t.A;return n.L?.dispatchEvent(new CustomEvent(t[v],{detail:t=>e=t,bubbles:!0,composed:!0})),e}))};var k;!function(t){t.forEach=(n,e)=>n.forEach((n=>Array.isArray(n)?t.forEach(n,e):e(n))),t.last=(n,e=n.length-1)=>{if(n.length)for(let o=e;o>=0;o--){const e=n[o];if(!Array.isArray(e))return e;const s=t.last(e);if(s)return s}}}(k||(k={}));const C=t=>({build(){const n=t();return n.build?.()??n}}),E=(t,n)=>({T:"p",O:t,...n}),N=(t=CustomEvent)=>({T:"e",D:t}),j=Symbol();let A;const H=(t,n)=>{A?A.push([t,n]):f(t,n)},L=(t,n={},e={})=>{const o=[],s=new Map;for(const t in n){const e=n[t];if("p"==e.T&&e.attribute){"function"==typeof e.attribute&&(e.attribute={transform:e.attribute});const n=e.attribute={name:w(t),static:!1,transform:t=>t,...e.attribute};s.set(n.name,{name:t,meta:e}),n.static||o.push(n.name)}}e.shadow??={mode:"open"};class i extends HTMLElement{static[j]={I:t};static observedAttributes=o;props={};events={};[j]={};constructor(){super();for(const t in n){const e=n[t];if("p"==e.T){const n=x(e.O)?e.O:null,[o,s]=c(n?void 0:e.O);this.props[t]=o,n&&S(n,this,o),Object.defineProperty(this,t,{get:o.peek,set:t=>s((()=>t),{force:!0})})}else if("e"==e.T&&t.startsWith("on")){const n=b(t);this.events[t]=t=>this.dispatchEvent(new e.D(n,t))}}}connectedCallback(){const t=(n=this,e.shadow?n.shadowRoot??n.attachShadow(e.shadow):n);var n;this[j].$=d((()=>m({P:!1,L:this,N:t.childNodes.values()},(()=>{this[j].M=r();const n=A;A=[];try{k.forEach(this.render().build(),(n=>{t.append(n)})),A.forEach((([t,n])=>f(t,n)))}finally{A=n}}))))[1]}disconnectedCallback(){this[j].$?.()}attributeChangedCallback(t,n,e){const o=s.get(t);o&&(this[o.name]=null!=e?o.meta.attribute.transform.call(this,e):x(o.meta.O)?void 0:o.meta.O)}}return i},T=t=>!!t?.[j],O=(...t)=>{const[n,e]="string"==typeof t[0]?[t[0],t.slice(1)]:["",t];for(const t of e)customElements.define(n+t[j].I,t)},D=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,I=(t,n,e)=>{"-"==n[0]?t.style.setProperty(n,""+e):t.style[n]=null==e?"":"number"!=typeof e||D.test(n)?""+e:e+"px"},$=(t,n,e,o)=>{const s=null==e||!1===e&&!n.includes("-");if(n.startsWith("prop:"))t[n.slice(5)]=e;else if(n.startsWith("attr:"))n=n.slice(5),s?t.removeAttribute(n):t.setAttribute(n,e);else if(!["innerHTML","outerHTML"].includes(n)){if(!["tabIndex","role",...o?["width","height","href","list","form","download","rowSpan","colSpan"]:[]].includes(n)&&n in t)try{return void(t[n]=e)}catch(t){}"function"==typeof e||(s?t.removeAttribute(n):t.setAttribute(n,e))}},z=({text:t,marker:n})=>C((()=>{const e=y(),o=n&&e.C((()=>document.createComment(""))),s=e.C((()=>document.createTextNode("")));return f((()=>{const n=""+(_.get(t)??"");s.textContent!=n&&(s.textContent=n)})),o?[o,s]:[s]})),P=({children:t})=>C((()=>Array.isArray(t)?t.flatMap((t=>P({children:t}).build())):null==t?[]:["object"==typeof t?t.build():z({text:t}).build()])),V=(t,n,e,o)=>{const{ref:s,style:c,children:l,dangerouslySetInnerHTML:u,...a}=e;for(const n in c??{}){const e=c[n];f((()=>{I(t,n,_.get(e))}))}for(const n in a){const e=a[n];if(n.startsWith("on")){const o=r(),s=t=>{o.u((()=>i((()=>e(t)))))},c=b(n);f((()=>(t.addEventListener(c,s),()=>t.removeEventListener(c,s))))}else f((()=>{$(t,n,_.get(e),o)}))}return u&&f((()=>{const n=_.get(u).__html;t.innerHTML!=n&&(t.innerHTML=n)})),s&&f((()=>(s.set(t),()=>s.set(void 0)))),null!=e.children&&k.forEach(m({P:n,N:t.childNodes.values()},(()=>P({children:e.children}).build())),(n=>t.append(n))),t},Z=(t,n={},e)=>(null!=e&&(n.children=e),T(t)?((t,n)=>C((()=>{const e=y().C((()=>new t));return customElements.upgrade(e),V(e,!1,n),[e]})))(t,n):"function"==typeof t?C((()=>t(n))):((t,n={})=>C((()=>{const e=y(),o="svg"==t||!!e.P;return[V(e.C((()=>o?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t))),o,n,!0)]})))(t,n)),q=new Proxy(Z,{get:(t,n)=>(e,o)=>t(n,e,o)}),B=(t,n)=>{const[e,o]=c({V:[],Z:new Map},{force:!0});let s=new Map;return f((()=>{const e=[],r=s,c=((t,n)=>{const e=new Map;for(let o=0;o<t.length;o++){const s=n(t[o],o);if(e.has(s))throw Error(`Duplicate key '${s}'`);e.set(s,o)}return e})(t(),n),i=(t=NaN)=>e.map((t=>"r"==t.q?n=>n<t.B?n:n==t.B?NaN:n-1:"a"==t.q?n=>n<t.B?n:n+1:"m"==t.q?n=>t.F<=n&&n<t.G?n+1:n==t.G?t.F:n:t=>t)).reduce(((t,n)=>n(t)),t);for(const t of r.keys()){const n=i(r.get(t));c.has(t)||e.push({q:"r",J:t,B:n})}for(let o=0;o<t().length;o++){const s=n(t()[o],o),c=i(r.get(s));isNaN(c)?e.push({q:"a",J:s,B:o}):c!=o&&e.push({q:"m",J:s,G:c,F:o})}e.length>0&&o({V:e,Z:c}),s=c})),e},F=t=>C((()=>{const n=y(),e=_.upgrade(t.each??[]),o=n.C((()=>document.createComment(""))),s=t.key??((t,n)=>n),r=[o,[]],i=new Map,l=B(e,s),u=t=>k.last(r[1],t-1)??o;return f((()=>{for(const n of l().V)if("r"==n.q){const{K:t,$:e}=i.get(n.J)??{};e?.(),r[1].splice(n.B,1),k.forEach(t??[],(t=>t.parentNode?.removeChild(t))),i.delete(n.J)}else if("a"==n.q){let o;const[,s]=d((()=>{const[s,i]=c(n.B),[a,d]=c(e()[n.B]);f((()=>{0<=s()&&s()<e().length&&d((()=>e()[s()]))})),f((()=>{const t=l().Z.get(n.J);null!=t&&i(t)})),o=t.children?.(a,s,e).build()??[],r[1].splice(n.B,0,o);let h=u(n.B);k.forEach(o,(t=>{h.parentNode?.insertBefore(t,h.nextSibling),h=t}))}));i.set(n.J,{K:o,$:s})}else if("m"==n.q){const{K:t}=i.get(n.J)??{};r[1].splice(n.G,1),r[1].splice(n.F,0,t??[]);let e=u(n.F);k.forEach(t??[],(t=>{e.parentNode?.insertBefore(t,e.nextSibling),e=t}))}}),[l]),r})),G=t=>(y().k=[],J({condition:t.condition,children:t.children})),J=t=>{const n=y(),e=n.k,o=_.upgrade(t.condition),s=a((()=>e.every((t=>!t()))&&o()));return n.k=[...e,o],C((()=>m({k:[]},(()=>{const e=n.C((()=>document.createComment(""))),o=[e,[]],r=a((()=>s()?P({children:t.children}):null));let c=[];return f((()=>{k.forEach(c,(t=>t.parentNode?.removeChild(t))),o[1]=[];const[,t]=d((()=>{c=r()?.build()??[],o[1]=c;let t=e;k.forEach(c,(n=>{t.parentNode?.insertBefore(n,t.nextSibling),t=n}))}));return t}),[r]),o}))))},K=({children:t})=>J({condition:!0,children:t}),Q=({mount:t,children:n})=>C((()=>m({N:void 0},(()=>{const e=P({children:n}).build();return f((()=>(k.forEach(e,(n=>t.appendChild(n))),()=>{k.forEach(e,(t=>t.parentNode?.removeChild(t)))})),[]),[]})))),R=Symbol(),U=new Map,W=t=>{const n=t.children;if("function"==typeof n){const e=Z("style",{},z({text:n,marker:!1}));return t.light?Q({mount:document.head,children:e}):e}if(n){const o=y(),s=t.light?document:o.L?.shadowRoot??document,r=((t,n,e)=>{if(!U.has(n)){const t=new CSSStyleSheet;t.replaceSync(n),U.set(n,{R:t,U:0})}const o=U.get(n);o.U++,t.has(n)||t.set(n,{R:o.R,U:0});const s=t.get(n);return s.U++,f((()=>()=>{--s.U||(t.delete(n),e()),--o.U||U.delete(n)})),s.R})((e=s,e[R]??=new Map),n,(()=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter((t=>t!=r))}));s.adoptedStyleSheets.push(r)}var e;return P({})},X=(t,...n)=>{const e=()=>t.reduce(((t,e,o)=>t+e+(_.get(n[o])??"")),"");return n.some((t=>"function"==typeof t))?e:e()},Y=(t,n,e)=>(n&&null!=e&&(n.key=e),Z(t,n));export{L as Component,K as Else,J as ElseIf,F as For,P as Fragment,G as If,_ as MaybeSignal,Q as Portal,W as Style,k as TemplateNodes,g as createContext,Z as createElement,X as css,O as defineComponents,N as event,l as flushBatch,q as h,T as isComponent,Y as jsx,Y as jsxDEV,Y as jsxs,E as prop,i as useBatch,M as useContext,H as useEffect,a as useMemo,h as useRef,c as useSignal,d as useSubscope};

package/dist/component.js

@@ -3,6 +3,7 @@ import { runWithRenderer } from "./renderer.js";
 import { camelCaseToKebabCase, jsxPropNameToEventName, } from "./utils.js";
 import { useScope } from "./scope.js";
 import { isContext, provideContext } from "./context.js";
+import { TemplateNodes } from "./template.js";
 /**
  * Defines a property in your component metadata that can be set from outside
  * of the component.
@@ -211,7 +212,9 @@ export const Component = ((tagName, metadata = {}, opts = {}) => {
                 const prevMountEffects = mountEffects;
                 mountEffects = [];
                 try {
-                    renderParent?.append(...this.render().build());
+                    TemplateNodes.forEach(this.render().build(), (node) => {
+                        renderParent.append(node);
+                    });
                     // Run mount effects
                     mountEffects.forEach(([fn, opts]) => useEffect(fn, opts));
                 }

package/dist/component.js.map

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

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.js

@@ -1,7 +1,7 @@
 import { useArrayMutation } from "../array_mutation.js";
 import { MaybeSignal, useEffect, useSignal, useSubscope, } from "../scope.js";
 import { useRenderer } from "../renderer.js";
-import { createTemplate } from "../template.js";
+import { createTemplate, TemplateNodes } from "../template.js";
 /**
  * `For` is a component that can be used to render a list of items.
  */
@@ -10,33 +10,21 @@ export const For = (props) => createTemplate(() => {
     const items = MaybeSignal.upgrade(props.each ?? []);
     const anchor = renderer._node(() => document.createComment(""));
     const keyFn = props.key ?? ((_, i) => i);
-    const nodes = [anchor];
+    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;
-    };
+    const lookForAnchor = (index) => TemplateNodes.last(nodes[1], index - 1) ?? anchor;
     useEffect(() => {
         for (const mutation of mutationResult()._mutations) {
             if (mutation._type == "r") {
-                const { _subnodes = [], _destroy } = keyMap.get(mutation._key) ?? {};
+                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));
+                nodes[1].splice(mutation._index, 1);
+                TemplateNodes.forEach(_subnodes ?? [], (node) => node.parentNode?.removeChild(node));
                 keyMap.delete(mutation._key);
             }
             else if (mutation._type == "a") {
-                let _subnodes = [];
+                let _subnodes;
                 const [, destroy] = useSubscope(() => {
                     const [index, setIndex] = useSignal(mutation._index);
                     const [item, setItem] = useSignal(items()[mutation._index]);
@@ -52,27 +40,24 @@ export const For = (props) => createTemplate(() => {
                         }
                     });
                     _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));
+                    nodes[1].splice(mutation._index, 0, _subnodes);
+                    let itemAnchor = lookForAnchor(mutation._index);
+                    TemplateNodes.forEach(_subnodes, (node) => {
+                        itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
+                        itemAnchor = node;
+                    });
                 });
                 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));
+                const { _subnodes } = keyMap.get(mutation._key) ?? {};
+                nodes[1].splice(mutation._from, 1);
+                nodes[1].splice(mutation._to, 0, _subnodes ?? []);
+                let itemAnchor = lookForAnchor(mutation._to);
+                TemplateNodes.forEach(_subnodes ?? [], (node) => {
+                    itemAnchor.parentNode?.insertBefore(node, itemAnchor.nextSibling);
+                    itemAnchor = node;
+                });
             }
         }
     }, [mutationResult]);