@ryupold/vode 1.4.2 → 1.5.0

package/README.md

@@ -474,6 +474,34 @@ const CompMemoProps = (s) => [DIV,
 ];
 ```
 
+### error handling
+
+You can catch errors during rendering by providing a `catch` property in the vode props.
+
+```typescript
+const CompWithError: ChildVode = () =>
+    [DIV,
+        {
+            catch: (s: unknown, err: any) => [SPAN, { style: { color: 'red' } }, `An error occurred: ${err?.message}`],
+        },
+
+        [P, "Below error is intentional for testing error boundaries:"],
+
+        [DIV, {
+            // catch: [SPAN, { style: { color: 'red' } }, `An error occurred!`], // uncomment to catch child error directly here
+            onMount: () => {
+                throw new Error("Test error boundary in post view....");
+            }
+        }],
+    ];
+```
+
+If the `catch` property is a function, it will be called with the current state and the error as arguments, and should return a valid child-vode to render instead.
+If it is a vode, it will be rendered directly. 
+If no `catch` property is provided, the error will propagate to the nearest ancestor that has a `catch` property defined, or to the top-level app if none is found.
+Try to keep the `catch` blocks as specific as possible to avoid masking other errors. 
+Or just don't make errors happen in the first place :)
+
 ### helper functions
 
 The library provides some helper functions for common tasks.
@@ -657,9 +685,9 @@ console.log(appNode._vode.stats);
     syncRenderPatchCount: 55,
     // number of view transition render-patches (arrays) overall
     asyncRenderPatchCount: 3,
-    // number of renders performed overall
+    // number of sync "normal" renders performed overall
     syncRenderCount: 43,
-    // number of renders performed overall
+    // number of async renders performed overall
     asyncRenderCount: 2,
     // time the last render took in milliseconds
     lastSyncRenderTime: 2,
@@ -672,7 +700,10 @@ console.log(appNode._vode.stats);
 
 The library is optimized for small to medium sized applications. In my own tests it could easily handle sites with tens of thousands of elements. Smart usage of `memo` can help to optimize performance further. You can find a comparison of the performance with other libraries [here](https://krausest.github.io/js-framework-benchmark/current.html).
 
-This being said, the library does not focus on performance. It is designed to feel nice while coding, by providing a primitive that is simple to bend & form. I want the mental model to be easy to grasp and the API surface to be small so that a developer can focus on building a web application instead of learning the framework and get to a flow state as quick as possible.
+This being said, the library does not focus on performance.
+It is designed to feel nice while coding, by providing a primitive that is simple to bend & form.
+I want the mental model to be easy to grasp and the API surface to be small 
+so that a developer can focus on building a web application instead of learning the framework and get to a flow state as quick as possible.
 
 ## Thanks
 

package/dist/vode.js

@@ -536,116 +536,134 @@ var V = (() => {
     return target;
   }
   function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
-    newVode = remember(state, newVode, oldVode);
-    const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
-    if (newVode === oldVode || !oldVode && isNoVode) {
-      return oldVode;
-    }
-    const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
-    const oldNode = oldIsText ? oldVode : oldVode?.node;
-    if (isNoVode) {
-      oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
-      oldNode?.remove();
-      return void 0;
-    }
-    const isText = !isNoVode && isTextVode(newVode);
-    const isNode = !isNoVode && isNaturalVode(newVode);
-    const alreadyAttached = !!newVode && typeof newVode !== "string" && !!(newVode?.node || newVode?.nodeType === Node.TEXT_NODE);
-    if (!isText && !isNode && !alreadyAttached && !oldVode) {
-      throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
-    } else if (alreadyAttached && isText) {
-      newVode = newVode.wholeText;
-    } else if (alreadyAttached && isNode) {
-      newVode = [...newVode];
-    }
-    if (oldIsText && isText) {
-      if (oldNode.nodeValue !== newVode) {
-        oldNode.nodeValue = newVode;
+    try {
+      newVode = remember(state, newVode, oldVode);
+      const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
+      if (newVode === oldVode || !oldVode && isNoVode) {
+        return oldVode;
       }
-      return oldVode;
-    }
-    if (isText && (!oldNode || !oldIsText)) {
-      const text = document.createTextNode(newVode);
-      if (oldNode) {
-        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
-        oldNode.replaceWith(text);
-      } else {
-        if (parent.childNodes[childIndex]) {
-          parent.insertBefore(text, parent.childNodes[childIndex]);
-        } else {
-          parent.appendChild(text);
-        }
+      const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
+      const oldNode = oldIsText ? oldVode : oldVode?.node;
+      if (isNoVode) {
+        oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode?.remove();
+        return void 0;
       }
-      return text;
-    }
-    if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
-      const newvode = newVode;
-      if (1 in newvode) {
-        newvode[1] = remember(state, newvode[1], void 0);
+      const isText = !isNoVode && isTextVode(newVode);
+      const isNode = !isNoVode && isNaturalVode(newVode);
+      const alreadyAttached = !!newVode && typeof newVode !== "string" && !!(newVode?.node || newVode?.nodeType === Node.TEXT_NODE);
+      if (!isText && !isNode && !alreadyAttached && !oldVode) {
+        throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
+      } else if (alreadyAttached && isText) {
+        newVode = newVode.wholeText;
+      } else if (alreadyAttached && isNode) {
+        newVode = [...newVode];
       }
-      const properties = props(newVode);
-      xmlns = properties?.xmlns || xmlns;
-      const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
-      newVode.node = newNode;
-      patchProperties(state, patch, newNode, void 0, properties);
-      if (oldNode) {
-        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
-        oldNode.replaceWith(newNode);
-      } else {
-        if (parent.childNodes[childIndex]) {
-          parent.insertBefore(newNode, parent.childNodes[childIndex]);
+      if (oldIsText && isText) {
+        if (oldNode.nodeValue !== newVode) {
+          oldNode.nodeValue = newVode;
+        }
+        return oldVode;
+      }
+      if (isText && (!oldNode || !oldIsText)) {
+        const text = document.createTextNode(newVode);
+        if (oldNode) {
+          oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+          oldNode.replaceWith(text);
         } else {
-          parent.appendChild(newNode);
+          if (parent.childNodes[childIndex]) {
+            parent.insertBefore(text, parent.childNodes[childIndex]);
+          } else {
+            parent.appendChild(text);
+          }
         }
+        return text;
       }
-      const newChildren = children(newVode);
-      if (newChildren) {
-        for (let i = 0; i < newChildren.length; i++) {
-          const child2 = newChildren[i];
-          const attached = render(state, patch, newNode, i, void 0, child2, xmlns);
-          newVode[properties ? i + 2 : i + 1] = attached;
+      if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
+        const newvode = newVode;
+        if (1 in newvode) {
+          newvode[1] = remember(state, newvode[1], void 0);
+        }
+        const properties = props(newVode);
+        xmlns = properties?.xmlns || xmlns;
+        const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
+        newVode.node = newNode;
+        patchProperties(state, patch, newNode, void 0, properties);
+        if (oldNode) {
+          oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+          oldNode.replaceWith(newNode);
+        } else {
+          if (parent.childNodes[childIndex]) {
+            parent.insertBefore(newNode, parent.childNodes[childIndex]);
+          } else {
+            parent.appendChild(newNode);
+          }
+        }
+        const newChildren = children(newVode);
+        if (newChildren) {
+          for (let i = 0; i < newChildren.length; i++) {
+            const child2 = newChildren[i];
+            const attached = render(state, patch, newNode, i, void 0, child2, xmlns);
+            newVode[properties ? i + 2 : i + 1] = attached;
+          }
         }
+        newNode.onMount && patch(newNode.onMount(newNode));
+        return newVode;
       }
-      newNode.onMount && patch(newNode.onMount(newNode));
-      return newVode;
-    }
-    if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
-      newVode.node = oldNode;
-      const newvode = newVode;
-      const oldvode = oldVode;
-      let hasProps = false;
-      if (newvode[1]?.__memo) {
-        const prev = newvode[1];
-        newvode[1] = remember(state, newvode[1], oldvode[1]);
-        if (prev !== newvode[1]) {
+      if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
+        newVode.node = oldNode;
+        const newvode = newVode;
+        const oldvode = oldVode;
+        let hasProps = false;
+        if (newvode[1]?.__memo) {
+          const prev = newvode[1];
+          newvode[1] = remember(state, newvode[1], oldvode[1]);
+          if (prev !== newvode[1]) {
+            const properties = props(newVode);
+            patchProperties(state, patch, oldNode, props(oldVode), properties);
+            hasProps = !!properties;
+          }
+        } else {
           const properties = props(newVode);
           patchProperties(state, patch, oldNode, props(oldVode), properties);
           hasProps = !!properties;
         }
-      } else {
-        const properties = props(newVode);
-        patchProperties(state, patch, oldNode, props(oldVode), properties);
-        hasProps = !!properties;
-      }
-      const newKids = children(newVode);
-      const oldKids = children(oldVode);
-      if (newKids) {
-        for (let i = 0; i < newKids.length; i++) {
-          const child2 = newKids[i];
-          const oldChild = oldKids && oldKids[i];
-          const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
-          if (attached) {
-            newVode[hasProps ? i + 2 : i + 1] = attached;
+        const newKids = children(newVode);
+        const oldKids = children(oldVode);
+        if (newKids) {
+          for (let i = 0; i < newKids.length; i++) {
+            const child2 = newKids[i];
+            const oldChild = oldKids && oldKids[i];
+            const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
+            if (attached) {
+              newVode[hasProps ? i + 2 : i + 1] = attached;
+            }
           }
         }
-      }
-      if (oldKids) {
-        const newKidsCount = newKids ? newKids.length : 0;
-        for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-          render(state, patch, oldNode, i, oldKids[i], void 0, xmlns);
+        if (oldKids) {
+          const newKidsCount = newKids ? newKids.length : 0;
+          for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
+            render(state, patch, oldNode, i, oldKids[i], void 0, xmlns);
+          }
         }
+        return newVode;
+      }
+    } catch (error) {
+      const catchVode = props(newVode)?.catch;
+      if (catchVode) {
+        const handledVode = typeof catchVode === "function" ? catchVode(state, error) : catchVode;
+        return render(
+          state,
+          patch,
+          parent,
+          childIndex,
+          hydrate(newVode?.node || oldVode?.node, true),
+          handledVode,
+          xmlns
+        );
+      } else {
+        throw error;
       }
-      return newVode;
     }
     return void 0;
   }

package/dist/vode.min.js

@@ -1 +1 @@
-"use strict";var V=(()=>{var N=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var G=(e,n)=>{for(var a in n)N(e,a,{get:n[a],enumerable:!0})},K=(e,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of H(n))!U.call(e,t)&&t!==a&&N(e,t,{get:()=>n[t],enumerable:!(s=j(n,t))||s.enumerable});return e};var B=e=>K(N({},"__esModule",{value:!0}),e);var Bn={};G(Bn,{A:()=>tt,ABBR:()=>et,ADDRESS:()=>ot,ANIMATE:()=>so,ANIMATEMOTION:()=>ao,ANIMATETRANSFORM:()=>ro,ANNOTATION:()=>Sn,ANNOTATION_XML:()=>fn,AREA:()=>nt,ARTICLE:()=>st,ASIDE:()=>at,AUDIO:()=>rt,B:()=>ct,BASE:()=>it,BDI:()=>pt,BDO:()=>lt,BLOCKQUOTE:()=>St,BODY:()=>ft,BR:()=>dt,BUTTON:()=>Tt,CANVAS:()=>ut,CAPTION:()=>yt,CIRCLE:()=>co,CITE:()=>gt,CLIPPATH:()=>io,CODE:()=>xt,COL:()=>ht,COLGROUP:()=>mt,DATA:()=>Et,DATALIST:()=>bt,DD:()=>Pt,DEFS:()=>po,DEL:()=>At,DESC:()=>lo,DETAILS:()=>Ct,DFN:()=>Mt,DIALOG:()=>Nt,DIV:()=>Rt,DL:()=>Ot,DT:()=>Dt,DelegateStateContext:()=>L,ELLIPSE:()=>So,EM:()=>vt,EMBED:()=>Lt,FEBLEND:()=>fo,FECOLORMATRIX:()=>To,FECOMPONENTTRANSFER:()=>uo,FECOMPOSITE:()=>yo,FECONVOLVEMATRIX:()=>go,FEDIFFUSELIGHTING:()=>xo,FEDISPLACEMENTMAP:()=>ho,FEDISTANTLIGHT:()=>mo,FEDROPSHADOW:()=>Eo,FEFLOOD:()=>bo,FEFUNCA:()=>Po,FEFUNCB:()=>Ao,FEFUNCG:()=>Co,FEFUNCR:()=>Mo,FEGAUSSIANBLUR:()=>No,FEIMAGE:()=>Ro,FEMERGE:()=>Oo,FEMERGENODE:()=>Do,FEMORPHOLOGY:()=>vo,FEOFFSET:()=>Lo,FEPOINTLIGHT:()=>Io,FESPECULARLIGHTING:()=>Fo,FESPOTLIGHT:()=>Vo,FETILE:()=>ko,FETURBULENCE:()=>jo,FIELDSET:()=>It,FIGCAPTION:()=>Ft,FIGURE:()=>Vt,FILTER:()=>Ho,FOOTER:()=>kt,FOREIGNOBJECT:()=>Uo,FORM:()=>jt,G:()=>Go,H1:()=>Ht,H2:()=>Ut,H3:()=>Gt,H4:()=>Kt,H5:()=>Bt,H6:()=>_t,HEAD:()=>qt,HEADER:()=>wt,HGROUP:()=>Xt,HR:()=>$t,HTML:()=>Yt,I:()=>Wt,IFRAME:()=>Jt,IMAGE:()=>Ko,IMG:()=>Qt,INPUT:()=>zt,INS:()=>Zt,KBD:()=>te,KeyStateContext:()=>v,LABEL:()=>ee,LEGEND:()=>oe,LI:()=>ne,LINE:()=>Bo,LINEARGRADIENT:()=>_o,LINK:()=>se,MACTION:()=>dn,MAIN:()=>ae,MAP:()=>re,MARK:()=>ce,MARKER:()=>qo,MASK:()=>wo,MATH:()=>Tn,MENU:()=>ie,MERROR:()=>un,META:()=>pe,METADATA:()=>Xo,METER:()=>le,MFRAC:()=>yn,MI:()=>gn,MMULTISCRIPTS:()=>xn,MN:()=>hn,MO:()=>mn,MOVER:()=>En,MPADDED:()=>bn,MPATH:()=>$o,MPHANTOM:()=>Pn,MPRESCRIPTS:()=>An,MROOT:()=>Cn,MROW:()=>Mn,MS:()=>Nn,MSPACE:()=>Rn,MSQRT:()=>On,MSTYLE:()=>Dn,MSUB:()=>vn,MSUBSUP:()=>Ln,MSUP:()=>In,MTABLE:()=>Fn,MTD:()=>Vn,MTEXT:()=>kn,MTR:()=>jn,MUNDER:()=>Hn,MUNDEROVER:()=>Un,NAV:()=>Se,NOSCRIPT:()=>fe,OBJECT:()=>de,OL:()=>Te,OPTGROUP:()=>ue,OPTION:()=>ye,OUTPUT:()=>ge,P:()=>xe,PATH:()=>Yo,PATTERN:()=>Wo,PICTURE:()=>he,POLYGON:()=>Jo,POLYLINE:()=>Qo,PRE:()=>me,PROGRESS:()=>Ee,Q:()=>be,RADIALGRADIENT:()=>zo,RECT:()=>Zo,RP:()=>Pe,RT:()=>Ae,RUBY:()=>Ce,S:()=>Me,SAMP:()=>Ne,SCRIPT:()=>Re,SEARCH:()=>Oe,SECTION:()=>De,SELECT:()=>ve,SEMANTICS:()=>Gn,SET:()=>tn,SLOT:()=>Le,SMALL:()=>Ie,SOURCE:()=>Fe,SPAN:()=>Ve,STOP:()=>en,STRONG:()=>ke,STYLE:()=>je,SUB:()=>He,SUMMARY:()=>Ue,SUP:()=>Ge,SVG:()=>on,SWITCH:()=>nn,SYMBOL:()=>sn,TABLE:()=>Ke,TBODY:()=>Be,TD:()=>_e,TEMPLATE:()=>qe,TEXT:()=>an,TEXTAREA:()=>we,TEXTPATH:()=>rn,TFOOT:()=>Xe,TH:()=>$e,THEAD:()=>Ye,TIME:()=>We,TITLE:()=>Je,TR:()=>Qe,TRACK:()=>ze,TSPAN:()=>cn,U:()=>Ze,UL:()=>to,USE:()=>pn,VAR:()=>eo,VIDEO:()=>oo,VIEW:()=>ln,WBR:()=>no,app:()=>q,child:()=>Q,childCount:()=>J,children:()=>P,childrenStart:()=>M,createPatch:()=>Y,createState:()=>$,defuse:()=>w,globals:()=>E,hydrate:()=>D,memo:()=>X,mergeClass:()=>Kn,props:()=>m,tag:()=>W,vode:()=>_});var E={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(e=>e()),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function _(e,n,...a){if(!e)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(e)?e:n?[e,n,...a]:[e,...a]}function q(e,n,a,...s){if(!e?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!n||typeof n!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let t={};t.syncRenderer=E.requestAnimationFrame,t.asyncRenderer=E.startViewTransition,t.qSync=null,t.qAsync=null,t.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0},Object.defineProperty(n,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(c,T)=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(t.stats.patchCount++,c?.next){let l=c;t.stats.liveEffectCount++;try{let h=await l.next();for(;h.done===!1;){t.stats.liveEffectCount++;try{t.patch(h.value,T),h=await l.next()}finally{t.stats.liveEffectCount--}}t.patch(h.value,T)}finally{t.stats.liveEffectCount--}}else if(c.then){t.stats.liveEffectCount++;try{let l=await c;t.patch(l,T)}finally{t.stats.liveEffectCount--}}else if(Array.isArray(c))if(c.length>0)for(let l of c)t.patch(l,!document.hidden&&!!t.asyncRenderer);else{t.qSync=x(t.qSync||{},t.qAsync,!1),t.qAsync=null;try{E.currentViewTransition?.skipTransition()}catch{}t.stats.syncRenderPatchCount++,t.renderSync()}else typeof c=="function"?t.patch(c(t.state),T):T?(t.stats.asyncRenderPatchCount++,t.qAsync=x(t.qAsync||{},c,!1),await t.renderAsync()):(t.stats.syncRenderPatchCount++,t.qSync=x(t.qSync||{},c,!1),t.renderSync())}});function o(c){let T=Date.now(),l=a(t.state);t.vode=A(t.state,t.patch,e.parentElement,0,t.vode,l),e.tagName.toUpperCase()!==l[0].toUpperCase()&&(e=t.vode.node,e._vode=t),c||(t.stats.lastSyncRenderTime=Date.now()-T,t.stats.syncRenderCount++,t.isRendering=!1,t.qSync&&t.renderSync())}let r=o.bind(null,!1),i=o.bind(null,!0);Object.defineProperty(t,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{t.isRendering||!t.qSync||(t.isRendering=!0,t.state=x(t.state,t.qSync,!0),t.qSync=null,t.syncRenderer(r))}}),Object.defineProperty(t,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(t.isAnimating||!t.qAsync||(await E.currentViewTransition?.updateCallbackDone,t.isAnimating||!t.qAsync||document.hidden))return;t.isAnimating=!0;let c=Date.now();try{t.state=x(t.state,t.qAsync,!0),t.qAsync=null,E.currentViewTransition=t.asyncRenderer(i),await E.currentViewTransition?.updateCallbackDone}finally{t.stats.lastAsyncRenderTime=Date.now()-c,t.stats.asyncRenderCount++,t.isAnimating=!1}t.qAsync&&t.renderAsync()}}),t.patch=n.patch,t.state=n;let d=e;d._vode=t,t.vode=A(n,t.patch,e.parentElement,Array.from(e.parentElement.children).indexOf(e),D(e,!0),a(n));for(let c of s)t.patch(c);return t.patch}function w(e){if(e?._vode){let a=function(t){if(!t?.node)return;let o=m(t);if(o)for(let i in o)i[0]==="o"&&i[1]==="n"&&(t.node[i]=null);let r=P(t);if(r)for(let i of r)a(i)};var n=a;let s=e._vode;delete e._vode,Object.defineProperty(s.state,"patch",{value:void 0}),Object.defineProperty(s,"renderSync",{value:()=>{}}),Object.defineProperty(s,"renderAsync",{value:()=>{}}),a(s.vode)}}function D(e,n){if(e?.nodeType===Node.TEXT_NODE)return e.nodeValue?.trim()!==""?n?e:e.nodeValue:void 0;if(e.nodeType===Node.COMMENT_NODE)return;if(e.nodeType===Node.ELEMENT_NODE){let s=[e.tagName.toLowerCase()];if(n&&(s.node=e),e?.hasAttributes()){let t={},o=e.attributes;for(let r of o)t[r.name]=r.value;s.push(t)}if(e.hasChildNodes()){let t=[];for(let o of e.childNodes){let r=o&&D(o,n);r?s.push(r):o&&n&&t.push(o)}for(let o of t)o.remove()}return s}else return}function X(e,n){if(!e||!Array.isArray(e))throw new Error("first argument to memo() must be an array of values to compare");if(typeof n!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return n.__memo=e,n}function $(e){if(!e||typeof e!="object")throw new Error("createState() must be called with a state object");return e}function Y(e){return e}function W(e){return e?Array.isArray(e)?e[0]:typeof e=="string"||e.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function m(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function P(e){let n=M(e);return n>0?e.slice(n):null}function J(e){let n=M(e);return n<0?0:e.length-n}function Q(e,n){let a=M(e);if(a>0)return e[n+a]}function M(e){return m(e)?e.length>2?2:-1:Array.isArray(e)&&e.length>1?1:-1}function x(e,n,a){if(!n)return e;for(let s in n){let t=n[s];if(t&&typeof t=="object"){let o=e[s];o?Array.isArray(t)?e[s]=[...t]:t instanceof Date&&o!==t?e[s]=new Date(t):Array.isArray(o)?e[s]=x({},t,a):typeof o=="object"?x(e[s],t,a):e[s]=x({},t,a):Array.isArray(t)?e[s]=[...t]:t instanceof Date?e[s]=new Date(t):e[s]=x({},t,a)}else t===void 0&&a?delete e[s]:e[s]=t}return e}function A(e,n,a,s,t,o,r){o=R(e,o,t);let i=!o||typeof o=="number"||typeof o=="boolean";if(o===t||!t&&i)return t;let d=t?.nodeType===Node.TEXT_NODE,c=d?t:t?.node;if(i){c?.onUnmount&&n(c.onUnmount(c)),c?.remove();return}let T=!i&&Z(o),l=!i&&z(o),h=!!o&&typeof o!="string"&&!!(o?.node||o?.nodeType===Node.TEXT_NODE);if(!T&&!l&&!h&&!t)throw new Error("Invalid vode: "+typeof o+" "+JSON.stringify(o));if(h&&T?o=o.wholeText:h&&l&&(o=[...o]),d&&T)return c.nodeValue!==o&&(c.nodeValue=o),t;if(T&&(!c||!d)){let S=document.createTextNode(o);return c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(S)):a.childNodes[s]?a.insertBefore(S,a.childNodes[s]):a.appendChild(S),S}if(l&&(!c||d||t[0]!==o[0])){let S=o;1 in S&&(S[1]=R(e,S[1],void 0));let b=m(o);r=b?.xmlns||r;let f=r?document.createElementNS(r,o[0]):document.createElement(o[0]);o.node=f,O(e,n,f,void 0,b),c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(f)):a.childNodes[s]?a.insertBefore(f,a.childNodes[s]):a.appendChild(f);let g=P(o);if(g)for(let u=0;u<g.length;u++){let p=g[u],y=A(e,n,f,u,void 0,p,r);o[b?u+2:u+1]=y}return f.onMount&&n(f.onMount(f)),o}if(!d&&l&&t[0]===o[0]){o.node=c;let S=o,b=t,f=!1;if(S[1]?.__memo){let p=S[1];if(S[1]=R(e,S[1],b[1]),p!==S[1]){let y=m(o);O(e,n,c,m(t),y),f=!!y}}else{let p=m(o);O(e,n,c,m(t),p),f=!!p}let g=P(o),u=P(t);if(g)for(let p=0;p<g.length;p++){let y=g[p],k=u&&u[p],I=A(e,n,c,p,k,y,r);I&&(o[f?p+2:p+1]=I)}if(u){let p=g?g.length:0;for(let y=u.length-1;y>=p;y--)A(e,n,c,y,u[y],void 0,r)}return o}}function z(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function Z(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function R(e,n,a){if(typeof n!="function")return n;let s=n?.__memo,t=a?.__memo;if(Array.isArray(s)&&Array.isArray(t)&&s.length===t.length){let r=!0;for(let i=0;i<s.length;i++)if(s[i]!==t[i]){r=!1;break}if(r)return a}let o=F(n,e);return typeof o=="object"&&(o.__memo=n?.__memo),o}function F(e,n){return typeof e=="function"?F(e(n),n):e}function O(e,n,a,s,t){if(!(!t&&!s)){if(s)for(let o in s){let r=s[o],i=t?.[o];r!==i&&(t?t[o]=C(e,n,a,o,r,i):C(e,n,a,o,r,void 0))}if(t&&s){for(let o in t)if(!(o in s)){let r=t[o];t[o]=C(e,n,a,o,void 0,r)}}else if(t)for(let o in t){let r=t[o];t[o]=C(e,n,a,o,void 0,r)}}}function C(e,n,a,s,t,o){if(s==="style")if(!o)a.style.cssText="";else if(typeof o=="string")t!==o&&(a.style.cssText=o);else if(t&&typeof t=="object"){for(let r in t)o[r]||(a.style[r]=null);for(let r in o){let i=t[r],d=o[r];i!==d&&(a.style[r]=d)}}else for(let r in o)a.style[r]=o[r];else if(s==="class")o?a.setAttribute("class",V(o)):a.removeAttribute("class");else if(s[0]==="o"&&s[1]==="n")if(o){let r=null;if(typeof o=="function"){let i=o;r=d=>n(i(e,d))}else typeof o=="object"&&(r=()=>n(o));a[s]=r}else a[s]=null;else a[s]=o,o==null||o===!1?a.removeAttribute(s):a.setAttribute(s,o);return o}function V(e){return typeof e=="string"?e:Array.isArray(e)?e.map(V).join(" "):typeof e=="object"?Object.keys(e).filter(n=>e[n]).join(" "):""}var tt="a",et="abbr",ot="address",nt="area",st="article",at="aside",rt="audio",ct="b",it="base",pt="bdi",lt="bdo",St="blockquote",ft="body",dt="br",Tt="button",ut="canvas",yt="caption",gt="cite",xt="code",ht="col",mt="colgroup",Et="data",bt="datalist",Pt="dd",At="del",Ct="details",Mt="dfn",Nt="dialog",Rt="div",Ot="dl",Dt="dt",vt="em",Lt="embed",It="fieldset",Ft="figcaption",Vt="figure",kt="footer",jt="form",Ht="h1",Ut="h2",Gt="h3",Kt="h4",Bt="h5",_t="h6",qt="head",wt="header",Xt="hgroup",$t="hr",Yt="html",Wt="i",Jt="iframe",Qt="img",zt="input",Zt="ins",te="kbd",ee="label",oe="legend",ne="li",se="link",ae="main",re="map",ce="mark",ie="menu",pe="meta",le="meter",Se="nav",fe="noscript",de="object",Te="ol",ue="optgroup",ye="option",ge="output",xe="p",he="picture",me="pre",Ee="progress",be="q",Pe="rp",Ae="rt",Ce="ruby",Me="s",Ne="samp",Re="script",Oe="search",De="section",ve="select",Le="slot",Ie="small",Fe="source",Ve="span",ke="strong",je="style",He="sub",Ue="summary",Ge="sup",Ke="table",Be="tbody",_e="td",qe="template",we="textarea",Xe="tfoot",$e="th",Ye="thead",We="time",Je="title",Qe="tr",ze="track",Ze="u",to="ul",eo="var",oo="video",no="wbr",so="animate",ao="animateMotion",ro="animateTransform",co="circle",io="clipPath",po="defs",lo="desc",So="ellipse",fo="feBlend",To="feColorMatrix",uo="feComponentTransfer",yo="feComposite",go="feConvolveMatrix",xo="feDiffuseLighting",ho="feDisplacementMap",mo="feDistantLight",Eo="feDropShadow",bo="feFlood",Po="feFuncA",Ao="feFuncB",Co="feFuncG",Mo="feFuncR",No="feGaussianBlur",Ro="feImage",Oo="feMerge",Do="feMergeNode",vo="feMorphology",Lo="feOffset",Io="fePointLight",Fo="feSpecularLighting",Vo="feSpotLight",ko="feTile",jo="feTurbulence",Ho="filter",Uo="foreignObject",Go="g",Ko="image",Bo="line",_o="linearGradient",qo="marker",wo="mask",Xo="metadata",$o="mpath",Yo="path",Wo="pattern",Jo="polygon",Qo="polyline",zo="radialGradient",Zo="rect",tn="set",en="stop",on="svg",nn="switch",sn="symbol",an="text",rn="textPath",cn="tspan",pn="use",ln="view",Sn="annotation",fn="annotation-xml",dn="maction",Tn="math",un="merror",yn="mfrac",gn="mi",xn="mmultiscripts",hn="mn",mn="mo",En="mover",bn="mpadded",Pn="mphantom",An="mprescripts",Cn="mroot",Mn="mrow",Nn="ms",Rn="mspace",On="msqrt",Dn="mstyle",vn="msub",Ln="msubsup",In="msup",Fn="mtable",Vn="mtd",kn="mtext",jn="mtr",Hn="munder",Un="munderover",Gn="semantics";function Kn(...e){if(!e||e.length===0)return null;if(e.length===1)return e[0];let n=e[0];for(let a=1;a<e.length;a++){let s=n,t=e[a];if(!s)n=t;else if(t)if(typeof s=="string"&&typeof t=="string"){let o=s.split(" "),r=t.split(" "),i=new Set([...o,...r]);n=Array.from(i).join(" ").trim()}else if(typeof s=="string"&&Array.isArray(t)){let o=new Set([...t,...s.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&typeof t=="string"){let o=new Set([...s,...t.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&Array.isArray(t)){let o=new Set([...s,...t]);n=Array.from(o).join(" ").trim()}else if(typeof s=="string"&&typeof t=="object")n={[s]:!0,...t};else if(typeof s=="object"&&typeof t=="string")n={...s,[t]:!0};else if(typeof s=="object"&&typeof t=="object")n={...s,...t};else if(typeof s=="object"&&Array.isArray(t)){let o={...s};for(let r of t)o[r]=!0;n=o}else if(Array.isArray(s)&&typeof t=="object"){let o={};for(let r of s)o[r]=!0;for(let r of Object.keys(t))o[r]=t[r];n=o}else throw new Error(`cannot merge classes of ${s} (${typeof s}) and ${t} (${typeof t})`);else continue}return n}var v=class{constructor(n,a){this.state=n;this.path=a;this.keys=a.split(".")}keys;get(){let n=this.keys,a=this.state?this.state[n[0]]:void 0;for(let s=1;s<n.length&&a;s++)a=a[n[s]];return a}put(n){this.putDeep(n,this.state)}patch(n){if(Array.isArray(n)){let a=[];for(let s of n)a.push(this.createPatch(s));this.state.patch(a)}else this.state.patch(this.createPatch(n))}createPatch(n){let a={};return this.putDeep(n,a),a}putDeep(n,a){let s=this.keys;if(s.length>1){let t=0,o=a[s[t]];for((typeof o!="object"||o===null)&&(a[s[t]]=o={}),t=1;t<s.length-1;t++){let r=o;o=o[s[t]],(typeof o!="object"||o===null)&&(r[s[t]]=o={})}o[s[t]]=n}else typeof a[s[0]]=="object"&&typeof n=="object"?Object.assign(a[s[0]],n):a[s[0]]=n}},L=class{constructor(n,a,s,t){this.state=n;this.get=a;this.put=s;this.patch=t}};return B(Bn);})();
+"use strict";var V=(()=>{var R=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var G=(e,n)=>{for(var a in n)R(e,a,{get:n[a],enumerable:!0})},K=(e,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of H(n))!U.call(e,t)&&t!==a&&R(e,t,{get:()=>n[t],enumerable:!(s=j(n,t))||s.enumerable});return e};var B=e=>K(R({},"__esModule",{value:!0}),e);var Bn={};G(Bn,{A:()=>tt,ABBR:()=>et,ADDRESS:()=>ot,ANIMATE:()=>so,ANIMATEMOTION:()=>ao,ANIMATETRANSFORM:()=>ro,ANNOTATION:()=>Sn,ANNOTATION_XML:()=>fn,AREA:()=>nt,ARTICLE:()=>st,ASIDE:()=>at,AUDIO:()=>rt,B:()=>ct,BASE:()=>it,BDI:()=>pt,BDO:()=>lt,BLOCKQUOTE:()=>St,BODY:()=>ft,BR:()=>dt,BUTTON:()=>Tt,CANVAS:()=>ut,CAPTION:()=>yt,CIRCLE:()=>co,CITE:()=>gt,CLIPPATH:()=>io,CODE:()=>xt,COL:()=>ht,COLGROUP:()=>mt,DATA:()=>Et,DATALIST:()=>bt,DD:()=>Pt,DEFS:()=>po,DEL:()=>At,DESC:()=>lo,DETAILS:()=>Ct,DFN:()=>Mt,DIALOG:()=>Nt,DIV:()=>Rt,DL:()=>Ot,DT:()=>Dt,DelegateStateContext:()=>L,ELLIPSE:()=>So,EM:()=>vt,EMBED:()=>Lt,FEBLEND:()=>fo,FECOLORMATRIX:()=>To,FECOMPONENTTRANSFER:()=>uo,FECOMPOSITE:()=>yo,FECONVOLVEMATRIX:()=>go,FEDIFFUSELIGHTING:()=>xo,FEDISPLACEMENTMAP:()=>ho,FEDISTANTLIGHT:()=>mo,FEDROPSHADOW:()=>Eo,FEFLOOD:()=>bo,FEFUNCA:()=>Po,FEFUNCB:()=>Ao,FEFUNCG:()=>Co,FEFUNCR:()=>Mo,FEGAUSSIANBLUR:()=>No,FEIMAGE:()=>Ro,FEMERGE:()=>Oo,FEMERGENODE:()=>Do,FEMORPHOLOGY:()=>vo,FEOFFSET:()=>Lo,FEPOINTLIGHT:()=>Io,FESPECULARLIGHTING:()=>Vo,FESPOTLIGHT:()=>Fo,FETILE:()=>ko,FETURBULENCE:()=>jo,FIELDSET:()=>It,FIGCAPTION:()=>Vt,FIGURE:()=>Ft,FILTER:()=>Ho,FOOTER:()=>kt,FOREIGNOBJECT:()=>Uo,FORM:()=>jt,G:()=>Go,H1:()=>Ht,H2:()=>Ut,H3:()=>Gt,H4:()=>Kt,H5:()=>Bt,H6:()=>_t,HEAD:()=>qt,HEADER:()=>wt,HGROUP:()=>Xt,HR:()=>$t,HTML:()=>Yt,I:()=>Wt,IFRAME:()=>Jt,IMAGE:()=>Ko,IMG:()=>Qt,INPUT:()=>zt,INS:()=>Zt,KBD:()=>te,KeyStateContext:()=>v,LABEL:()=>ee,LEGEND:()=>oe,LI:()=>ne,LINE:()=>Bo,LINEARGRADIENT:()=>_o,LINK:()=>se,MACTION:()=>dn,MAIN:()=>ae,MAP:()=>re,MARK:()=>ce,MARKER:()=>qo,MASK:()=>wo,MATH:()=>Tn,MENU:()=>ie,MERROR:()=>un,META:()=>pe,METADATA:()=>Xo,METER:()=>le,MFRAC:()=>yn,MI:()=>gn,MMULTISCRIPTS:()=>xn,MN:()=>hn,MO:()=>mn,MOVER:()=>En,MPADDED:()=>bn,MPATH:()=>$o,MPHANTOM:()=>Pn,MPRESCRIPTS:()=>An,MROOT:()=>Cn,MROW:()=>Mn,MS:()=>Nn,MSPACE:()=>Rn,MSQRT:()=>On,MSTYLE:()=>Dn,MSUB:()=>vn,MSUBSUP:()=>Ln,MSUP:()=>In,MTABLE:()=>Vn,MTD:()=>Fn,MTEXT:()=>kn,MTR:()=>jn,MUNDER:()=>Hn,MUNDEROVER:()=>Un,NAV:()=>Se,NOSCRIPT:()=>fe,OBJECT:()=>de,OL:()=>Te,OPTGROUP:()=>ue,OPTION:()=>ye,OUTPUT:()=>ge,P:()=>xe,PATH:()=>Yo,PATTERN:()=>Wo,PICTURE:()=>he,POLYGON:()=>Jo,POLYLINE:()=>Qo,PRE:()=>me,PROGRESS:()=>Ee,Q:()=>be,RADIALGRADIENT:()=>zo,RECT:()=>Zo,RP:()=>Pe,RT:()=>Ae,RUBY:()=>Ce,S:()=>Me,SAMP:()=>Ne,SCRIPT:()=>Re,SEARCH:()=>Oe,SECTION:()=>De,SELECT:()=>ve,SEMANTICS:()=>Gn,SET:()=>tn,SLOT:()=>Le,SMALL:()=>Ie,SOURCE:()=>Ve,SPAN:()=>Fe,STOP:()=>en,STRONG:()=>ke,STYLE:()=>je,SUB:()=>He,SUMMARY:()=>Ue,SUP:()=>Ge,SVG:()=>on,SWITCH:()=>nn,SYMBOL:()=>sn,TABLE:()=>Ke,TBODY:()=>Be,TD:()=>_e,TEMPLATE:()=>qe,TEXT:()=>an,TEXTAREA:()=>we,TEXTPATH:()=>rn,TFOOT:()=>Xe,TH:()=>$e,THEAD:()=>Ye,TIME:()=>We,TITLE:()=>Je,TR:()=>Qe,TRACK:()=>ze,TSPAN:()=>cn,U:()=>Ze,UL:()=>to,USE:()=>pn,VAR:()=>eo,VIDEO:()=>oo,VIEW:()=>ln,WBR:()=>no,app:()=>q,child:()=>Q,childCount:()=>J,children:()=>A,childrenStart:()=>N,createPatch:()=>Y,createState:()=>$,defuse:()=>w,globals:()=>E,hydrate:()=>M,memo:()=>X,mergeClass:()=>Kn,props:()=>x,tag:()=>W,vode:()=>_});var E={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(e=>e()),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function _(e,n,...a){if(!e)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(e)?e:n?[e,n,...a]:[e,...a]}function q(e,n,a,...s){if(!e?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!n||typeof n!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let t={};t.syncRenderer=E.requestAnimationFrame,t.asyncRenderer=E.startViewTransition,t.qSync=null,t.qAsync=null,t.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0},Object.defineProperty(n,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(c,T)=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(t.stats.patchCount++,c?.next){let S=c;t.stats.liveEffectCount++;try{let m=await S.next();for(;m.done===!1;){t.stats.liveEffectCount++;try{t.patch(m.value,T),m=await S.next()}finally{t.stats.liveEffectCount--}}t.patch(m.value,T)}finally{t.stats.liveEffectCount--}}else if(c.then){t.stats.liveEffectCount++;try{let S=await c;t.patch(S,T)}finally{t.stats.liveEffectCount--}}else if(Array.isArray(c))if(c.length>0)for(let S of c)t.patch(S,!document.hidden&&!!t.asyncRenderer);else{t.qSync=h(t.qSync||{},t.qAsync,!1),t.qAsync=null;try{E.currentViewTransition?.skipTransition()}catch{}t.stats.syncRenderPatchCount++,t.renderSync()}else typeof c=="function"?t.patch(c(t.state),T):T?(t.stats.asyncRenderPatchCount++,t.qAsync=h(t.qAsync||{},c,!1),await t.renderAsync()):(t.stats.syncRenderPatchCount++,t.qSync=h(t.qSync||{},c,!1),t.renderSync())}});function o(c){let T=Date.now(),S=a(t.state);t.vode=b(t.state,t.patch,e.parentElement,0,t.vode,S),e.tagName.toUpperCase()!==S[0].toUpperCase()&&(e=t.vode.node,e._vode=t),c||(t.stats.lastSyncRenderTime=Date.now()-T,t.stats.syncRenderCount++,t.isRendering=!1,t.qSync&&t.renderSync())}let r=o.bind(null,!1),i=o.bind(null,!0);Object.defineProperty(t,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{t.isRendering||!t.qSync||(t.isRendering=!0,t.state=h(t.state,t.qSync,!0),t.qSync=null,t.syncRenderer(r))}}),Object.defineProperty(t,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(t.isAnimating||!t.qAsync||(await E.currentViewTransition?.updateCallbackDone,t.isAnimating||!t.qAsync||document.hidden))return;t.isAnimating=!0;let c=Date.now();try{t.state=h(t.state,t.qAsync,!0),t.qAsync=null,E.currentViewTransition=t.asyncRenderer(i),await E.currentViewTransition?.updateCallbackDone}finally{t.stats.lastAsyncRenderTime=Date.now()-c,t.stats.asyncRenderCount++,t.isAnimating=!1}t.qAsync&&t.renderAsync()}}),t.patch=n.patch,t.state=n;let p=e;p._vode=t,t.vode=b(n,t.patch,e.parentElement,Array.from(e.parentElement.children).indexOf(e),M(e,!0),a(n));for(let c of s)t.patch(c);return t.patch}function w(e){if(e?._vode){let a=function(t){if(!t?.node)return;let o=x(t);if(o)for(let i in o)i[0]==="o"&&i[1]==="n"&&(t.node[i]=null);let r=A(t);if(r)for(let i of r)a(i)};var n=a;let s=e._vode;delete e._vode,Object.defineProperty(s.state,"patch",{value:void 0}),Object.defineProperty(s,"renderSync",{value:()=>{}}),Object.defineProperty(s,"renderAsync",{value:()=>{}}),a(s.vode)}}function M(e,n){if(e?.nodeType===Node.TEXT_NODE)return e.nodeValue?.trim()!==""?n?e:e.nodeValue:void 0;if(e.nodeType===Node.COMMENT_NODE)return;if(e.nodeType===Node.ELEMENT_NODE){let s=[e.tagName.toLowerCase()];if(n&&(s.node=e),e?.hasAttributes()){let t={},o=e.attributes;for(let r of o)t[r.name]=r.value;s.push(t)}if(e.hasChildNodes()){let t=[];for(let o of e.childNodes){let r=o&&M(o,n);r?s.push(r):o&&n&&t.push(o)}for(let o of t)o.remove()}return s}else return}function X(e,n){if(!e||!Array.isArray(e))throw new Error("first argument to memo() must be an array of values to compare");if(typeof n!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return n.__memo=e,n}function $(e){if(!e||typeof e!="object")throw new Error("createState() must be called with a state object");return e}function Y(e){return e}function W(e){return e?Array.isArray(e)?e[0]:typeof e=="string"||e.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function x(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function A(e){let n=N(e);return n>0?e.slice(n):null}function J(e){let n=N(e);return n<0?0:e.length-n}function Q(e,n){let a=N(e);if(a>0)return e[n+a]}function N(e){return x(e)?e.length>2?2:-1:Array.isArray(e)&&e.length>1?1:-1}function h(e,n,a){if(!n)return e;for(let s in n){let t=n[s];if(t&&typeof t=="object"){let o=e[s];o?Array.isArray(t)?e[s]=[...t]:t instanceof Date&&o!==t?e[s]=new Date(t):Array.isArray(o)?e[s]=h({},t,a):typeof o=="object"?h(e[s],t,a):e[s]=h({},t,a):Array.isArray(t)?e[s]=[...t]:t instanceof Date?e[s]=new Date(t):e[s]=h({},t,a)}else t===void 0&&a?delete e[s]:e[s]=t}return e}function b(e,n,a,s,t,o,r){try{o=O(e,o,t);let i=!o||typeof o=="number"||typeof o=="boolean";if(o===t||!t&&i)return t;let p=t?.nodeType===Node.TEXT_NODE,c=p?t:t?.node;if(i){c?.onUnmount&&n(c.onUnmount(c)),c?.remove();return}let T=!i&&Z(o),S=!i&&z(o),m=!!o&&typeof o!="string"&&!!(o?.node||o?.nodeType===Node.TEXT_NODE);if(!T&&!S&&!m&&!t)throw new Error("Invalid vode: "+typeof o+" "+JSON.stringify(o));if(m&&T?o=o.wholeText:m&&S&&(o=[...o]),p&&T)return c.nodeValue!==o&&(c.nodeValue=o),t;if(T&&(!c||!p)){let f=document.createTextNode(o);return c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(f)):a.childNodes[s]?a.insertBefore(f,a.childNodes[s]):a.appendChild(f),f}if(S&&(!c||p||t[0]!==o[0])){let f=o;1 in f&&(f[1]=O(e,f[1],void 0));let P=x(o);r=P?.xmlns||r;let d=r?document.createElementNS(r,o[0]):document.createElement(o[0]);o.node=d,D(e,n,d,void 0,P),c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(d)):a.childNodes[s]?a.insertBefore(d,a.childNodes[s]):a.appendChild(d);let g=A(o);if(g)for(let u=0;u<g.length;u++){let l=g[u],y=b(e,n,d,u,void 0,l,r);o[P?u+2:u+1]=y}return d.onMount&&n(d.onMount(d)),o}if(!p&&S&&t[0]===o[0]){o.node=c;let f=o,P=t,d=!1;if(f[1]?.__memo){let l=f[1];if(f[1]=O(e,f[1],P[1]),l!==f[1]){let y=x(o);D(e,n,c,x(t),y),d=!!y}}else{let l=x(o);D(e,n,c,x(t),l),d=!!l}let g=A(o),u=A(t);if(g)for(let l=0;l<g.length;l++){let y=g[l],k=u&&u[l],I=b(e,n,c,l,k,y,r);I&&(o[d?l+2:l+1]=I)}if(u){let l=g?g.length:0;for(let y=u.length-1;y>=l;y--)b(e,n,c,y,u[y],void 0,r)}return o}}catch(i){let p=x(o)?.catch;if(p){let c=typeof p=="function"?p(e,i):p;return b(e,n,a,s,M(o?.node||t?.node,!0),c,r)}else throw i}}function z(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function Z(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function O(e,n,a){if(typeof n!="function")return n;let s=n?.__memo,t=a?.__memo;if(Array.isArray(s)&&Array.isArray(t)&&s.length===t.length){let r=!0;for(let i=0;i<s.length;i++)if(s[i]!==t[i]){r=!1;break}if(r)return a}let o=V(n,e);return typeof o=="object"&&(o.__memo=n?.__memo),o}function V(e,n){return typeof e=="function"?V(e(n),n):e}function D(e,n,a,s,t){if(!(!t&&!s)){if(s)for(let o in s){let r=s[o],i=t?.[o];r!==i&&(t?t[o]=C(e,n,a,o,r,i):C(e,n,a,o,r,void 0))}if(t&&s){for(let o in t)if(!(o in s)){let r=t[o];t[o]=C(e,n,a,o,void 0,r)}}else if(t)for(let o in t){let r=t[o];t[o]=C(e,n,a,o,void 0,r)}}}function C(e,n,a,s,t,o){if(s==="style")if(!o)a.style.cssText="";else if(typeof o=="string")t!==o&&(a.style.cssText=o);else if(t&&typeof t=="object"){for(let r in t)o[r]||(a.style[r]=null);for(let r in o){let i=t[r],p=o[r];i!==p&&(a.style[r]=p)}}else for(let r in o)a.style[r]=o[r];else if(s==="class")o?a.setAttribute("class",F(o)):a.removeAttribute("class");else if(s[0]==="o"&&s[1]==="n")if(o){let r=null;if(typeof o=="function"){let i=o;r=p=>n(i(e,p))}else typeof o=="object"&&(r=()=>n(o));a[s]=r}else a[s]=null;else a[s]=o,o==null||o===!1?a.removeAttribute(s):a.setAttribute(s,o);return o}function F(e){return typeof e=="string"?e:Array.isArray(e)?e.map(F).join(" "):typeof e=="object"?Object.keys(e).filter(n=>e[n]).join(" "):""}var tt="a",et="abbr",ot="address",nt="area",st="article",at="aside",rt="audio",ct="b",it="base",pt="bdi",lt="bdo",St="blockquote",ft="body",dt="br",Tt="button",ut="canvas",yt="caption",gt="cite",xt="code",ht="col",mt="colgroup",Et="data",bt="datalist",Pt="dd",At="del",Ct="details",Mt="dfn",Nt="dialog",Rt="div",Ot="dl",Dt="dt",vt="em",Lt="embed",It="fieldset",Vt="figcaption",Ft="figure",kt="footer",jt="form",Ht="h1",Ut="h2",Gt="h3",Kt="h4",Bt="h5",_t="h6",qt="head",wt="header",Xt="hgroup",$t="hr",Yt="html",Wt="i",Jt="iframe",Qt="img",zt="input",Zt="ins",te="kbd",ee="label",oe="legend",ne="li",se="link",ae="main",re="map",ce="mark",ie="menu",pe="meta",le="meter",Se="nav",fe="noscript",de="object",Te="ol",ue="optgroup",ye="option",ge="output",xe="p",he="picture",me="pre",Ee="progress",be="q",Pe="rp",Ae="rt",Ce="ruby",Me="s",Ne="samp",Re="script",Oe="search",De="section",ve="select",Le="slot",Ie="small",Ve="source",Fe="span",ke="strong",je="style",He="sub",Ue="summary",Ge="sup",Ke="table",Be="tbody",_e="td",qe="template",we="textarea",Xe="tfoot",$e="th",Ye="thead",We="time",Je="title",Qe="tr",ze="track",Ze="u",to="ul",eo="var",oo="video",no="wbr",so="animate",ao="animateMotion",ro="animateTransform",co="circle",io="clipPath",po="defs",lo="desc",So="ellipse",fo="feBlend",To="feColorMatrix",uo="feComponentTransfer",yo="feComposite",go="feConvolveMatrix",xo="feDiffuseLighting",ho="feDisplacementMap",mo="feDistantLight",Eo="feDropShadow",bo="feFlood",Po="feFuncA",Ao="feFuncB",Co="feFuncG",Mo="feFuncR",No="feGaussianBlur",Ro="feImage",Oo="feMerge",Do="feMergeNode",vo="feMorphology",Lo="feOffset",Io="fePointLight",Vo="feSpecularLighting",Fo="feSpotLight",ko="feTile",jo="feTurbulence",Ho="filter",Uo="foreignObject",Go="g",Ko="image",Bo="line",_o="linearGradient",qo="marker",wo="mask",Xo="metadata",$o="mpath",Yo="path",Wo="pattern",Jo="polygon",Qo="polyline",zo="radialGradient",Zo="rect",tn="set",en="stop",on="svg",nn="switch",sn="symbol",an="text",rn="textPath",cn="tspan",pn="use",ln="view",Sn="annotation",fn="annotation-xml",dn="maction",Tn="math",un="merror",yn="mfrac",gn="mi",xn="mmultiscripts",hn="mn",mn="mo",En="mover",bn="mpadded",Pn="mphantom",An="mprescripts",Cn="mroot",Mn="mrow",Nn="ms",Rn="mspace",On="msqrt",Dn="mstyle",vn="msub",Ln="msubsup",In="msup",Vn="mtable",Fn="mtd",kn="mtext",jn="mtr",Hn="munder",Un="munderover",Gn="semantics";function Kn(...e){if(!e||e.length===0)return null;if(e.length===1)return e[0];let n=e[0];for(let a=1;a<e.length;a++){let s=n,t=e[a];if(!s)n=t;else if(t)if(typeof s=="string"&&typeof t=="string"){let o=s.split(" "),r=t.split(" "),i=new Set([...o,...r]);n=Array.from(i).join(" ").trim()}else if(typeof s=="string"&&Array.isArray(t)){let o=new Set([...t,...s.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&typeof t=="string"){let o=new Set([...s,...t.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&Array.isArray(t)){let o=new Set([...s,...t]);n=Array.from(o).join(" ").trim()}else if(typeof s=="string"&&typeof t=="object")n={[s]:!0,...t};else if(typeof s=="object"&&typeof t=="string")n={...s,[t]:!0};else if(typeof s=="object"&&typeof t=="object")n={...s,...t};else if(typeof s=="object"&&Array.isArray(t)){let o={...s};for(let r of t)o[r]=!0;n=o}else if(Array.isArray(s)&&typeof t=="object"){let o={};for(let r of s)o[r]=!0;for(let r of Object.keys(t))o[r]=t[r];n=o}else throw new Error(`cannot merge classes of ${s} (${typeof s}) and ${t} (${typeof t})`);else continue}return n}var v=class{constructor(n,a){this.state=n;this.path=a;this.keys=a.split(".")}keys;get(){let n=this.keys,a=this.state?this.state[n[0]]:void 0;for(let s=1;s<n.length&&a;s++)a=a[n[s]];return a}put(n){this.putDeep(n,this.state)}patch(n){if(Array.isArray(n)){let a=[];for(let s of n)a.push(this.createPatch(s));this.state.patch(a)}else this.state.patch(this.createPatch(n))}createPatch(n){let a={};return this.putDeep(n,a),a}putDeep(n,a){let s=this.keys;if(s.length>1){let t=0,o=a[s[t]];for((typeof o!="object"||o===null)&&(a[s[t]]=o={}),t=1;t<s.length-1;t++){let r=o;o=o[s[t]],(typeof o!="object"||o===null)&&(r[s[t]]=o={})}o[s[t]]=n}else typeof a[s[0]]=="object"&&typeof n=="object"?Object.assign(a[s[0]],n):a[s[0]]=n}},L=class{constructor(n,a,s,t){this.state=n;this.get=a;this.put=s;this.patch=t}};return B(Bn);})();

package/dist/vode.min.mjs

@@ -1 +1 @@
-var D={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(z)=>z(),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function u(z,G,...Q){if(!z)throw Error("first argument to vode() must be a tag name or a vode");if(Array.isArray(z))return z;else if(G)return[z,G,...Q];else return[z,...Q]}function V(z,G,Q,...J){if(!z?.parentElement)throw Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!G||typeof G!=="object")throw Error("second argument to app() must be a state object");if(typeof Q!=="function")throw Error("third argument to app() must be a function that returns a vode");let q={};q.syncRenderer=D.requestAnimationFrame,q.asyncRenderer=D.startViewTransition,q.qSync=null,q.qAsync=null,q.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0},Object.defineProperty(G,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(X,H)=>{if(!X||typeof X!=="function"&&typeof X!=="object")return;if(q.stats.patchCount++,X?.next){let E=X;q.stats.liveEffectCount++;try{let T=await E.next();while(T.done===!1){q.stats.liveEffectCount++;try{q.patch(T.value,H),T=await E.next()}finally{q.stats.liveEffectCount--}}q.patch(T.value,H)}finally{q.stats.liveEffectCount--}}else if(X.then){q.stats.liveEffectCount++;try{let E=await X;q.patch(E,H)}finally{q.stats.liveEffectCount--}}else if(Array.isArray(X))if(X.length>0)for(let E of X)q.patch(E,!document.hidden&&!!q.asyncRenderer);else{q.qSync=M(q.qSync||{},q.qAsync,!1),q.qAsync=null;try{D.currentViewTransition?.skipTransition()}catch{}q.stats.syncRenderPatchCount++,q.renderSync()}else if(typeof X==="function")q.patch(X(q.state),H);else if(H)q.stats.asyncRenderPatchCount++,q.qAsync=M(q.qAsync||{},X,!1),await q.renderAsync();else q.stats.syncRenderPatchCount++,q.qSync=M(q.qSync||{},X,!1),q.renderSync()}});function B(X){let H=Date.now(),E=Q(q.state);if(q.vode=K(q.state,q.patch,z.parentElement,0,q.vode,E),z.tagName.toUpperCase()!==E[0].toUpperCase())z=q.vode.node,z._vode=q;if(!X){if(q.stats.lastSyncRenderTime=Date.now()-H,q.stats.syncRenderCount++,q.isRendering=!1,q.qSync)q.renderSync()}}let U=B.bind(null,!1),Z=B.bind(null,!0);Object.defineProperty(q,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{if(q.isRendering||!q.qSync)return;q.isRendering=!0,q.state=M(q.state,q.qSync,!0),q.qSync=null,q.syncRenderer(U)}}),Object.defineProperty(q,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(q.isAnimating||!q.qAsync)return;if(await D.currentViewTransition?.updateCallbackDone,q.isAnimating||!q.qAsync||document.hidden)return;q.isAnimating=!0;let X=Date.now();try{q.state=M(q.state,q.qAsync,!0),q.qAsync=null,D.currentViewTransition=q.asyncRenderer(Z),await D.currentViewTransition?.updateCallbackDone}finally{q.stats.lastAsyncRenderTime=Date.now()-X,q.stats.asyncRenderCount++,q.isAnimating=!1}if(q.qAsync)q.renderAsync()}}),q.patch=G.patch,q.state=G;let j=z;j._vode=q,q.vode=K(G,q.patch,z.parentElement,Array.from(z.parentElement.children).indexOf(z),x(z,!0),Q(G));for(let X of J)q.patch(X);return q.patch}function v(z){if(z?._vode){let G=function(J){if(!J?.node)return;let q=R(J);if(q){for(let U in q)if(U[0]==="o"&&U[1]==="n")J.node[U]=null}let B=f(J);if(B)for(let U of B)G(U)},Q=z._vode;delete z._vode,Object.defineProperty(Q.state,"patch",{value:void 0}),Object.defineProperty(Q,"renderSync",{value:()=>{}}),Object.defineProperty(Q,"renderAsync",{value:()=>{}}),G(Q.vode)}}function x(z,G){if(z?.nodeType===Node.TEXT_NODE){if(z.nodeValue?.trim()!=="")return G?z:z.nodeValue;return}else if(z.nodeType===Node.COMMENT_NODE)return;else if(z.nodeType===Node.ELEMENT_NODE){let J=[z.tagName.toLowerCase()];if(G)J.node=z;if(z?.hasAttributes()){let q={},B=z.attributes;for(let U of B)q[U.name]=U.value;J.push(q)}if(z.hasChildNodes()){let q=[];for(let B of z.childNodes){let U=B&&x(B,G);if(U)J.push(U);else if(B&&G)q.push(B)}for(let B of q)B.remove()}return J}else return}function w(z,G){if(!z||!Array.isArray(z))throw Error("first argument to memo() must be an array of values to compare");if(typeof G!=="function")throw Error("second argument to memo() must be a function that returns a vode or props object");return G.__memo=z,G}function c(z){if(!z||typeof z!=="object")throw Error("createState() must be called with a state object");return z}function p(z){return z}function i(z){return z?Array.isArray(z)?z[0]:typeof z==="string"||z.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function R(z){if(Array.isArray(z)&&z.length>1&&z[1]&&!Array.isArray(z[1])){if(typeof z[1]==="object"&&z[1].nodeType!==Node.TEXT_NODE)return z[1]}return}function f(z){let G=b(z);if(G>0)return z.slice(G);return null}function r(z){let G=b(z);if(G<0)return 0;return z.length-G}function l(z,G){let Q=b(z);if(Q>0)return z[G+Q];else return}function b(z){return R(z)?z.length>2?2:-1:Array.isArray(z)&&z.length>1?1:-1}function M(z,G,Q){if(!G)return z;for(let J in G){let q=G[J];if(q&&typeof q==="object"){let B=z[J];if(B)if(Array.isArray(q))z[J]=[...q];else if(q instanceof Date&&B!==q)z[J]=new Date(q);else if(Array.isArray(B))z[J]=M({},q,Q);else if(typeof B==="object")M(z[J],q,Q);else z[J]=M({},q,Q);else if(Array.isArray(q))z[J]=[...q];else if(q instanceof Date)z[J]=new Date(q);else z[J]=M({},q,Q)}else if(q===void 0&&Q)delete z[J];else z[J]=q}return z}function K(z,G,Q,J,q,B,U){B=C(z,B,q);let Z=!B||typeof B==="number"||typeof B==="boolean";if(B===q||!q&&Z)return q;let j=q?.nodeType===Node.TEXT_NODE,X=j?q:q?.node;if(Z){X?.onUnmount&&G(X.onUnmount(X)),X?.remove();return}let H=!Z&&y(B),E=!Z&&g(B),T=!!B&&typeof B!=="string"&&!!(B?.node||B?.nodeType===Node.TEXT_NODE);if(!H&&!E&&!T&&!q)throw Error("Invalid vode: "+typeof B+" "+JSON.stringify(B));else if(T&&H)B=B.wholeText;else if(T&&E)B=[...B];if(j&&H){if(X.nodeValue!==B)X.nodeValue=B;return q}if(H&&(!X||!j)){let L=document.createTextNode(B);if(X)X.onUnmount&&G(X.onUnmount(X)),X.replaceWith(L);else if(Q.childNodes[J])Q.insertBefore(L,Q.childNodes[J]);else Q.appendChild(L);return L}if(E&&(!X||j||q[0]!==B[0])){let L=B;if(1 in L)L[1]=C(z,L[1],void 0);let I=R(B);U=I?.xmlns||U;let W=U?document.createElementNS(U,B[0]):document.createElement(B[0]);if(B.node=W,S(z,G,W,void 0,I),X)X.onUnmount&&G(X.onUnmount(X)),X.replaceWith(W);else if(Q.childNodes[J])Q.insertBefore(W,Q.childNodes[J]);else Q.appendChild(W);let F=f(B);if(F)for(let Y=0;Y<F.length;Y++){let $=F[Y],O=K(z,G,W,Y,void 0,$,U);B[I?Y+2:Y+1]=O}return W.onMount&&G(W.onMount(W)),B}if(!j&&E&&q[0]===B[0]){B.node=X;let L=B,I=q,W=!1;if(L[1]?.__memo){let $=L[1];if(L[1]=C(z,L[1],I[1]),$!==L[1]){let O=R(B);S(z,G,X,R(q),O),W=!!O}}else{let $=R(B);S(z,G,X,R(q),$),W=!!$}let F=f(B),Y=f(q);if(F)for(let $=0;$<F.length;$++){let O=F[$],_=Y&&Y[$],N=K(z,G,X,$,_,O,U);if(N)B[W?$+2:$+1]=N}if(Y){let $=F?F.length:0;for(let O=Y.length-1;O>=$;O--)K(z,G,X,O,Y[O],void 0,U)}return B}return}function g(z){return Array.isArray(z)&&z.length>0&&typeof z[0]==="string"}function y(z){return typeof z==="string"||z?.nodeType===Node.TEXT_NODE}function C(z,G,Q){if(typeof G!=="function")return G;let J=G?.__memo,q=Q?.__memo;if(Array.isArray(J)&&Array.isArray(q)&&J.length===q.length){let U=!0;for(let Z=0;Z<J.length;Z++)if(J[Z]!==q[Z]){U=!1;break}if(U)return Q}let B=k(G,z);if(typeof B==="object")B.__memo=G?.__memo;return B}function k(z,G){if(typeof z==="function")return k(z(G),G);else return z}function S(z,G,Q,J,q){if(!q&&!J)return;if(J)for(let B in J){let U=J[B],Z=q?.[B];if(U!==Z)if(q)q[B]=A(z,G,Q,B,U,Z);else A(z,G,Q,B,U,void 0)}if(q&&J){for(let B in q)if(!(B in J)){let U=q[B];q[B]=A(z,G,Q,B,void 0,U)}}else if(q)for(let B in q){let U=q[B];q[B]=A(z,G,Q,B,void 0,U)}}function A(z,G,Q,J,q,B){if(J==="style")if(!B)Q.style.cssText="";else if(typeof B==="string"){if(q!==B)Q.style.cssText=B}else if(q&&typeof q==="object"){for(let U in q)if(!B[U])Q.style[U]=null;for(let U in B){let Z=q[U],j=B[U];if(Z!==j)Q.style[U]=j}}else for(let U in B)Q.style[U]=B[U];else if(J==="class")if(B)Q.setAttribute("class",P(B));else Q.removeAttribute("class");else if(J[0]==="o"&&J[1]==="n")if(B){let U=null;if(typeof B==="function"){let Z=B;U=(j)=>G(Z(z,j))}else if(typeof B==="object")U=()=>G(B);Q[J]=U}else Q[J]=null;else if(Q[J]=B,B===void 0||B===null||B===!1)Q.removeAttribute(J);else Q.setAttribute(J,B);return B}function P(z){if(typeof z==="string")return z;else if(Array.isArray(z))return z.map(P).join(" ");else if(typeof z==="object")return Object.keys(z).filter((G)=>z[G]).join(" ");else return""}var n="a",d="abbr",t="address",a="area",o="article",e="aside",qq="audio",zq="b",Bq="base",Gq="bdi",Jq="bdo",Qq="blockquote",Uq="body",Xq="br",Zq="button",$q="canvas",Eq="caption",Lq="cite",Wq="code",jq="col",Hq="colgroup",Yq="data",Oq="datalist",Fq="dd",Mq="del",Tq="details",Rq="dfn",Dq="dialog",Iq="div",Kq="dl",Aq="dt",fq="em",Cq="embed",Sq="fieldset",bq="figcaption",Nq="figure",xq="footer",kq="form",Pq="h1",_q="h2",gq="h3",yq="h4",hq="h5",mq="h6",uq="head",Vq="header",vq="hgroup",wq="hr",cq="html",pq="i",iq="iframe",rq="img",lq="input",sq="ins",nq="kbd",dq="label",tq="legend",aq="li",oq="link",eq="main",qz="map",zz="mark",Bz="menu",Gz="meta",Jz="meter",Qz="nav",Uz="noscript",Xz="object",Zz="ol",$z="optgroup",Ez="option",Lz="output",Wz="p",jz="picture",Hz="pre",Yz="progress",Oz="q",Fz="rp",Mz="rt",Tz="ruby",Rz="s",Dz="samp",Iz="script",Kz="search",Az="section",fz="select",Cz="slot",Sz="small",bz="source",Nz="span",xz="strong",kz="style",Pz="sub",_z="summary",gz="sup",yz="table",hz="tbody",mz="td",uz="template",Vz="textarea",vz="tfoot",wz="th",cz="thead",pz="time",iz="title",rz="tr",lz="track",sz="u",nz="ul",dz="var",tz="video",az="wbr",oz="animate",ez="animateMotion",qB="animateTransform",zB="circle",BB="clipPath",GB="defs",JB="desc",QB="ellipse",UB="feBlend",XB="feColorMatrix",ZB="feComponentTransfer",$B="feComposite",EB="feConvolveMatrix",LB="feDiffuseLighting",WB="feDisplacementMap",jB="feDistantLight",HB="feDropShadow",YB="feFlood",OB="feFuncA",FB="feFuncB",MB="feFuncG",TB="feFuncR",RB="feGaussianBlur",DB="feImage",IB="feMerge",KB="feMergeNode",AB="feMorphology",fB="feOffset",CB="fePointLight",SB="feSpecularLighting",bB="feSpotLight",NB="feTile",xB="feTurbulence",kB="filter",PB="foreignObject",_B="g",gB="image",yB="line",hB="linearGradient",mB="marker",uB="mask",VB="metadata",vB="mpath",wB="path",cB="pattern",pB="polygon",iB="polyline",rB="radialGradient",lB="rect",sB="set",nB="stop",dB="svg",tB="switch",aB="symbol",oB="text",eB="textPath",qG="tspan",zG="use",BG="view",GG="annotation",JG="annotation-xml",QG="maction",UG="math",XG="merror",ZG="mfrac",$G="mi",EG="mmultiscripts",LG="mn",WG="mo",jG="mover",HG="mpadded",YG="mphantom",OG="mprescripts",FG="mroot",MG="mrow",TG="ms",RG="mspace",DG="msqrt",IG="mstyle",KG="msub",AG="msubsup",fG="msup",CG="mtable",SG="mtd",bG="mtext",NG="mtr",xG="munder",kG="munderover",PG="semantics";function gG(...z){if(!z||z.length===0)return null;if(z.length===1)return z[0];let G=z[0];for(let Q=1;Q<z.length;Q++){let J=G,q=z[Q];if(!J)G=q;else if(!q)continue;else if(typeof J==="string"&&typeof q==="string"){let B=J.split(" "),U=q.split(" "),Z=new Set([...B,...U]);G=Array.from(Z).join(" ").trim()}else if(typeof J==="string"&&Array.isArray(q)){let B=new Set([...q,...J.split(" ")]);G=Array.from(B).join(" ").trim()}else if(Array.isArray(J)&&typeof q==="string"){let B=new Set([...J,...q.split(" ")]);G=Array.from(B).join(" ").trim()}else if(Array.isArray(J)&&Array.isArray(q)){let B=new Set([...J,...q]);G=Array.from(B).join(" ").trim()}else if(typeof J==="string"&&typeof q==="object")G={[J]:!0,...q};else if(typeof J==="object"&&typeof q==="string")G={...J,[q]:!0};else if(typeof J==="object"&&typeof q==="object")G={...J,...q};else if(typeof J==="object"&&Array.isArray(q)){let B={...J};for(let U of q)B[U]=!0;G=B}else if(Array.isArray(J)&&typeof q==="object"){let B={};for(let U of J)B[U]=!0;for(let U of Object.keys(q))B[U]=q[U];G=B}else throw Error(`cannot merge classes of ${J} (${typeof J}) and ${q} (${typeof q})`)}return G}class h{state;path;keys;constructor(z,G){this.state=z;this.path=G;this.keys=G.split(".")}get(){let z=this.keys,G=this.state?this.state[z[0]]:void 0;for(let Q=1;Q<z.length&&!!G;Q++)G=G[z[Q]];return G}put(z){this.putDeep(z,this.state)}patch(z){if(Array.isArray(z)){let G=[];for(let Q of z)G.push(this.createPatch(Q));this.state.patch(G)}else this.state.patch(this.createPatch(z))}createPatch(z){let G={};return this.putDeep(z,G),G}putDeep(z,G){let Q=this.keys;if(Q.length>1){let J=0,q=G[Q[J]];if(typeof q!=="object"||q===null)G[Q[J]]=q={};for(J=1;J<Q.length-1;J++){let B=q;if(q=q[Q[J]],typeof q!=="object"||q===null)B[Q[J]]=q={}}q[Q[J]]=z}else if(typeof G[Q[0]]==="object"&&typeof z==="object")Object.assign(G[Q[0]],z);else G[Q[0]]=z}}class m{state;get;put;patch;constructor(z,G,Q,J){this.state=z;this.get=G;this.put=Q;this.patch=J}}export{u as vode,i as tag,R as props,gG as mergeClass,w as memo,x as hydrate,D as globals,v as defuse,c as createState,p as createPatch,b as childrenStart,f as children,r as childCount,l as child,V as app,az as WBR,BG as VIEW,tz as VIDEO,dz as VAR,zG as USE,nz as UL,sz as U,qG as TSPAN,lz as TRACK,rz as TR,iz as TITLE,pz as TIME,cz as THEAD,wz as TH,vz as TFOOT,eB as TEXTPATH,Vz as TEXTAREA,oB as TEXT,uz as TEMPLATE,mz as TD,hz as TBODY,yz as TABLE,aB as SYMBOL,tB as SWITCH,dB as SVG,gz as SUP,_z as SUMMARY,Pz as SUB,kz as STYLE,xz as STRONG,nB as STOP,Nz as SPAN,bz as SOURCE,Sz as SMALL,Cz as SLOT,sB as SET,PG as SEMANTICS,fz as SELECT,Az as SECTION,Kz as SEARCH,Iz as SCRIPT,Dz as SAMP,Rz as S,Tz as RUBY,Mz as RT,Fz as RP,lB as RECT,rB as RADIALGRADIENT,Oz as Q,Yz as PROGRESS,Hz as PRE,iB as POLYLINE,pB as POLYGON,jz as PICTURE,cB as PATTERN,wB as PATH,Wz as P,Lz as OUTPUT,Ez as OPTION,$z as OPTGROUP,Zz as OL,Xz as OBJECT,Uz as NOSCRIPT,Qz as NAV,kG as MUNDEROVER,xG as MUNDER,NG as MTR,bG as MTEXT,SG as MTD,CG as MTABLE,fG as MSUP,AG as MSUBSUP,KG as MSUB,IG as MSTYLE,DG as MSQRT,RG as MSPACE,TG as MS,MG as MROW,FG as MROOT,OG as MPRESCRIPTS,YG as MPHANTOM,vB as MPATH,HG as MPADDED,jG as MOVER,WG as MO,LG as MN,EG as MMULTISCRIPTS,$G as MI,ZG as MFRAC,Jz as METER,VB as METADATA,Gz as META,XG as MERROR,Bz as MENU,UG as MATH,uB as MASK,mB as MARKER,zz as MARK,qz as MAP,eq as MAIN,QG as MACTION,oq as LINK,hB as LINEARGRADIENT,yB as LINE,aq as LI,tq as LEGEND,dq as LABEL,h as KeyStateContext,nq as KBD,sq as INS,lq as INPUT,rq as IMG,gB as IMAGE,iq as IFRAME,pq as I,cq as HTML,wq as HR,vq as HGROUP,Vq as HEADER,uq as HEAD,mq as H6,hq as H5,yq as H4,gq as H3,_q as H2,Pq as H1,_B as G,kq as FORM,PB as FOREIGNOBJECT,xq as FOOTER,kB as FILTER,Nq as FIGURE,bq as FIGCAPTION,Sq as FIELDSET,xB as FETURBULENCE,NB as FETILE,bB as FESPOTLIGHT,SB as FESPECULARLIGHTING,CB as FEPOINTLIGHT,fB as FEOFFSET,AB as FEMORPHOLOGY,KB as FEMERGENODE,IB as FEMERGE,DB as FEIMAGE,RB as FEGAUSSIANBLUR,TB as FEFUNCR,MB as FEFUNCG,FB as FEFUNCB,OB as FEFUNCA,YB as FEFLOOD,HB as FEDROPSHADOW,jB as FEDISTANTLIGHT,WB as FEDISPLACEMENTMAP,LB as FEDIFFUSELIGHTING,EB as FECONVOLVEMATRIX,$B as FECOMPOSITE,ZB as FECOMPONENTTRANSFER,XB as FECOLORMATRIX,UB as FEBLEND,Cq as EMBED,fq as EM,QB as ELLIPSE,m as DelegateStateContext,Aq as DT,Kq as DL,Iq as DIV,Dq as DIALOG,Rq as DFN,Tq as DETAILS,JB as DESC,Mq as DEL,GB as DEFS,Fq as DD,Oq as DATALIST,Yq as DATA,Hq as COLGROUP,jq as COL,Wq as CODE,BB as CLIPPATH,Lq as CITE,zB as CIRCLE,Eq as CAPTION,$q as CANVAS,Zq as BUTTON,Xq as BR,Uq as BODY,Qq as BLOCKQUOTE,Jq as BDO,Gq as BDI,Bq as BASE,zq as B,qq as AUDIO,e as ASIDE,o as ARTICLE,a as AREA,JG as ANNOTATION_XML,GG as ANNOTATION,qB as ANIMATETRANSFORM,ez as ANIMATEMOTION,oz as ANIMATE,t as ADDRESS,d as ABBR,n as A};
+var D={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(z)=>z(),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function u(z,G,...Q){if(!z)throw Error("first argument to vode() must be a tag name or a vode");if(Array.isArray(z))return z;else if(G)return[z,G,...Q];else return[z,...Q]}function V(z,G,Q,...J){if(!z?.parentElement)throw Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!G||typeof G!=="object")throw Error("second argument to app() must be a state object");if(typeof Q!=="function")throw Error("third argument to app() must be a function that returns a vode");let q={};q.syncRenderer=D.requestAnimationFrame,q.asyncRenderer=D.startViewTransition,q.qSync=null,q.qAsync=null,q.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0},Object.defineProperty(G,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(X,H)=>{if(!X||typeof X!=="function"&&typeof X!=="object")return;if(q.stats.patchCount++,X?.next){let L=X;q.stats.liveEffectCount++;try{let T=await L.next();while(T.done===!1){q.stats.liveEffectCount++;try{q.patch(T.value,H),T=await L.next()}finally{q.stats.liveEffectCount--}}q.patch(T.value,H)}finally{q.stats.liveEffectCount--}}else if(X.then){q.stats.liveEffectCount++;try{let L=await X;q.patch(L,H)}finally{q.stats.liveEffectCount--}}else if(Array.isArray(X))if(X.length>0)for(let L of X)q.patch(L,!document.hidden&&!!q.asyncRenderer);else{q.qSync=M(q.qSync||{},q.qAsync,!1),q.qAsync=null;try{D.currentViewTransition?.skipTransition()}catch{}q.stats.syncRenderPatchCount++,q.renderSync()}else if(typeof X==="function")q.patch(X(q.state),H);else if(H)q.stats.asyncRenderPatchCount++,q.qAsync=M(q.qAsync||{},X,!1),await q.renderAsync();else q.stats.syncRenderPatchCount++,q.qSync=M(q.qSync||{},X,!1),q.renderSync()}});function B(X){let H=Date.now(),L=Q(q.state);if(q.vode=K(q.state,q.patch,z.parentElement,0,q.vode,L),z.tagName.toUpperCase()!==L[0].toUpperCase())z=q.vode.node,z._vode=q;if(!X){if(q.stats.lastSyncRenderTime=Date.now()-H,q.stats.syncRenderCount++,q.isRendering=!1,q.qSync)q.renderSync()}}let U=B.bind(null,!1),Z=B.bind(null,!0);Object.defineProperty(q,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{if(q.isRendering||!q.qSync)return;q.isRendering=!0,q.state=M(q.state,q.qSync,!0),q.qSync=null,q.syncRenderer(U)}}),Object.defineProperty(q,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(q.isAnimating||!q.qAsync)return;if(await D.currentViewTransition?.updateCallbackDone,q.isAnimating||!q.qAsync||document.hidden)return;q.isAnimating=!0;let X=Date.now();try{q.state=M(q.state,q.qAsync,!0),q.qAsync=null,D.currentViewTransition=q.asyncRenderer(Z),await D.currentViewTransition?.updateCallbackDone}finally{q.stats.lastAsyncRenderTime=Date.now()-X,q.stats.asyncRenderCount++,q.isAnimating=!1}if(q.qAsync)q.renderAsync()}}),q.patch=G.patch,q.state=G;let $=z;$._vode=q,q.vode=K(G,q.patch,z.parentElement,Array.from(z.parentElement.children).indexOf(z),b(z,!0),Q(G));for(let X of J)q.patch(X);return q.patch}function v(z){if(z?._vode){let G=function(J){if(!J?.node)return;let q=R(J);if(q){for(let U in q)if(U[0]==="o"&&U[1]==="n")J.node[U]=null}let B=f(J);if(B)for(let U of B)G(U)},Q=z._vode;delete z._vode,Object.defineProperty(Q.state,"patch",{value:void 0}),Object.defineProperty(Q,"renderSync",{value:()=>{}}),Object.defineProperty(Q,"renderAsync",{value:()=>{}}),G(Q.vode)}}function b(z,G){if(z?.nodeType===Node.TEXT_NODE){if(z.nodeValue?.trim()!=="")return G?z:z.nodeValue;return}else if(z.nodeType===Node.COMMENT_NODE)return;else if(z.nodeType===Node.ELEMENT_NODE){let J=[z.tagName.toLowerCase()];if(G)J.node=z;if(z?.hasAttributes()){let q={},B=z.attributes;for(let U of B)q[U.name]=U.value;J.push(q)}if(z.hasChildNodes()){let q=[];for(let B of z.childNodes){let U=B&&b(B,G);if(U)J.push(U);else if(B&&G)q.push(B)}for(let B of q)B.remove()}return J}else return}function w(z,G){if(!z||!Array.isArray(z))throw Error("first argument to memo() must be an array of values to compare");if(typeof G!=="function")throw Error("second argument to memo() must be a function that returns a vode or props object");return G.__memo=z,G}function i(z){if(!z||typeof z!=="object")throw Error("createState() must be called with a state object");return z}function p(z){return z}function c(z){return z?Array.isArray(z)?z[0]:typeof z==="string"||z.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function R(z){if(Array.isArray(z)&&z.length>1&&z[1]&&!Array.isArray(z[1])){if(typeof z[1]==="object"&&z[1].nodeType!==Node.TEXT_NODE)return z[1]}return}function f(z){let G=N(z);if(G>0)return z.slice(G);return null}function r(z){let G=N(z);if(G<0)return 0;return z.length-G}function l(z,G){let Q=N(z);if(Q>0)return z[G+Q];else return}function N(z){return R(z)?z.length>2?2:-1:Array.isArray(z)&&z.length>1?1:-1}function M(z,G,Q){if(!G)return z;for(let J in G){let q=G[J];if(q&&typeof q==="object"){let B=z[J];if(B)if(Array.isArray(q))z[J]=[...q];else if(q instanceof Date&&B!==q)z[J]=new Date(q);else if(Array.isArray(B))z[J]=M({},q,Q);else if(typeof B==="object")M(z[J],q,Q);else z[J]=M({},q,Q);else if(Array.isArray(q))z[J]=[...q];else if(q instanceof Date)z[J]=new Date(q);else z[J]=M({},q,Q)}else if(q===void 0&&Q)delete z[J];else z[J]=q}return z}function K(z,G,Q,J,q,B,U){try{B=C(z,B,q);let Z=!B||typeof B==="number"||typeof B==="boolean";if(B===q||!q&&Z)return q;let $=q?.nodeType===Node.TEXT_NODE,X=$?q:q?.node;if(Z){X?.onUnmount&&G(X.onUnmount(X)),X?.remove();return}let H=!Z&&y(B),L=!Z&&g(B),T=!!B&&typeof B!=="string"&&!!(B?.node||B?.nodeType===Node.TEXT_NODE);if(!H&&!L&&!T&&!q)throw Error("Invalid vode: "+typeof B+" "+JSON.stringify(B));else if(T&&H)B=B.wholeText;else if(T&&L)B=[...B];if($&&H){if(X.nodeValue!==B)X.nodeValue=B;return q}if(H&&(!X||!$)){let W=document.createTextNode(B);if(X)X.onUnmount&&G(X.onUnmount(X)),X.replaceWith(W);else if(Q.childNodes[J])Q.insertBefore(W,Q.childNodes[J]);else Q.appendChild(W);return W}if(L&&(!X||$||q[0]!==B[0])){let W=B;if(1 in W)W[1]=C(z,W[1],void 0);let A=R(B);U=A?.xmlns||U;let j=U?document.createElementNS(U,B[0]):document.createElement(B[0]);if(B.node=j,S(z,G,j,void 0,A),X)X.onUnmount&&G(X.onUnmount(X)),X.replaceWith(j);else if(Q.childNodes[J])Q.insertBefore(j,Q.childNodes[J]);else Q.appendChild(j);let F=f(B);if(F)for(let Y=0;Y<F.length;Y++){let E=F[Y],O=K(z,G,j,Y,void 0,E,U);B[A?Y+2:Y+1]=O}return j.onMount&&G(j.onMount(j)),B}if(!$&&L&&q[0]===B[0]){B.node=X;let W=B,A=q,j=!1;if(W[1]?.__memo){let E=W[1];if(W[1]=C(z,W[1],A[1]),E!==W[1]){let O=R(B);S(z,G,X,R(q),O),j=!!O}}else{let E=R(B);S(z,G,X,R(q),E),j=!!E}let F=f(B),Y=f(q);if(F)for(let E=0;E<F.length;E++){let O=F[E],_=Y&&Y[E],x=K(z,G,X,E,_,O,U);if(x)B[j?E+2:E+1]=x}if(Y){let E=F?F.length:0;for(let O=Y.length-1;O>=E;O--)K(z,G,X,O,Y[O],void 0,U)}return B}}catch(Z){let $=R(B)?.catch;if($){let X=typeof $==="function"?$(z,Z):$;return K(z,G,Q,J,b(B?.node||q?.node,!0),X,U)}else throw Z}return}function g(z){return Array.isArray(z)&&z.length>0&&typeof z[0]==="string"}function y(z){return typeof z==="string"||z?.nodeType===Node.TEXT_NODE}function C(z,G,Q){if(typeof G!=="function")return G;let J=G?.__memo,q=Q?.__memo;if(Array.isArray(J)&&Array.isArray(q)&&J.length===q.length){let U=!0;for(let Z=0;Z<J.length;Z++)if(J[Z]!==q[Z]){U=!1;break}if(U)return Q}let B=k(G,z);if(typeof B==="object")B.__memo=G?.__memo;return B}function k(z,G){if(typeof z==="function")return k(z(G),G);else return z}function S(z,G,Q,J,q){if(!q&&!J)return;if(J)for(let B in J){let U=J[B],Z=q?.[B];if(U!==Z)if(q)q[B]=I(z,G,Q,B,U,Z);else I(z,G,Q,B,U,void 0)}if(q&&J){for(let B in q)if(!(B in J)){let U=q[B];q[B]=I(z,G,Q,B,void 0,U)}}else if(q)for(let B in q){let U=q[B];q[B]=I(z,G,Q,B,void 0,U)}}function I(z,G,Q,J,q,B){if(J==="style")if(!B)Q.style.cssText="";else if(typeof B==="string"){if(q!==B)Q.style.cssText=B}else if(q&&typeof q==="object"){for(let U in q)if(!B[U])Q.style[U]=null;for(let U in B){let Z=q[U],$=B[U];if(Z!==$)Q.style[U]=$}}else for(let U in B)Q.style[U]=B[U];else if(J==="class")if(B)Q.setAttribute("class",P(B));else Q.removeAttribute("class");else if(J[0]==="o"&&J[1]==="n")if(B){let U=null;if(typeof B==="function"){let Z=B;U=($)=>G(Z(z,$))}else if(typeof B==="object")U=()=>G(B);Q[J]=U}else Q[J]=null;else if(Q[J]=B,B===void 0||B===null||B===!1)Q.removeAttribute(J);else Q.setAttribute(J,B);return B}function P(z){if(typeof z==="string")return z;else if(Array.isArray(z))return z.map(P).join(" ");else if(typeof z==="object")return Object.keys(z).filter((G)=>z[G]).join(" ");else return""}var n="a",d="abbr",t="address",a="area",o="article",e="aside",qq="audio",zq="b",Bq="base",Gq="bdi",Jq="bdo",Qq="blockquote",Uq="body",Xq="br",Zq="button",$q="canvas",Eq="caption",Lq="cite",Wq="code",jq="col",Hq="colgroup",Yq="data",Oq="datalist",Fq="dd",Mq="del",Tq="details",Rq="dfn",Dq="dialog",Kq="div",Aq="dl",Iq="dt",fq="em",Cq="embed",Sq="fieldset",bq="figcaption",Nq="figure",xq="footer",kq="form",Pq="h1",_q="h2",gq="h3",yq="h4",mq="h5",hq="h6",uq="head",Vq="header",vq="hgroup",wq="hr",iq="html",pq="i",cq="iframe",rq="img",lq="input",sq="ins",nq="kbd",dq="label",tq="legend",aq="li",oq="link",eq="main",qz="map",zz="mark",Bz="menu",Gz="meta",Jz="meter",Qz="nav",Uz="noscript",Xz="object",Zz="ol",$z="optgroup",Ez="option",Lz="output",Wz="p",jz="picture",Hz="pre",Yz="progress",Oz="q",Fz="rp",Mz="rt",Tz="ruby",Rz="s",Dz="samp",Kz="script",Az="search",Iz="section",fz="select",Cz="slot",Sz="small",bz="source",Nz="span",xz="strong",kz="style",Pz="sub",_z="summary",gz="sup",yz="table",mz="tbody",hz="td",uz="template",Vz="textarea",vz="tfoot",wz="th",iz="thead",pz="time",cz="title",rz="tr",lz="track",sz="u",nz="ul",dz="var",tz="video",az="wbr",oz="animate",ez="animateMotion",qB="animateTransform",zB="circle",BB="clipPath",GB="defs",JB="desc",QB="ellipse",UB="feBlend",XB="feColorMatrix",ZB="feComponentTransfer",$B="feComposite",EB="feConvolveMatrix",LB="feDiffuseLighting",WB="feDisplacementMap",jB="feDistantLight",HB="feDropShadow",YB="feFlood",OB="feFuncA",FB="feFuncB",MB="feFuncG",TB="feFuncR",RB="feGaussianBlur",DB="feImage",KB="feMerge",AB="feMergeNode",IB="feMorphology",fB="feOffset",CB="fePointLight",SB="feSpecularLighting",bB="feSpotLight",NB="feTile",xB="feTurbulence",kB="filter",PB="foreignObject",_B="g",gB="image",yB="line",mB="linearGradient",hB="marker",uB="mask",VB="metadata",vB="mpath",wB="path",iB="pattern",pB="polygon",cB="polyline",rB="radialGradient",lB="rect",sB="set",nB="stop",dB="svg",tB="switch",aB="symbol",oB="text",eB="textPath",qG="tspan",zG="use",BG="view",GG="annotation",JG="annotation-xml",QG="maction",UG="math",XG="merror",ZG="mfrac",$G="mi",EG="mmultiscripts",LG="mn",WG="mo",jG="mover",HG="mpadded",YG="mphantom",OG="mprescripts",FG="mroot",MG="mrow",TG="ms",RG="mspace",DG="msqrt",KG="mstyle",AG="msub",IG="msubsup",fG="msup",CG="mtable",SG="mtd",bG="mtext",NG="mtr",xG="munder",kG="munderover",PG="semantics";function gG(...z){if(!z||z.length===0)return null;if(z.length===1)return z[0];let G=z[0];for(let Q=1;Q<z.length;Q++){let J=G,q=z[Q];if(!J)G=q;else if(!q)continue;else if(typeof J==="string"&&typeof q==="string"){let B=J.split(" "),U=q.split(" "),Z=new Set([...B,...U]);G=Array.from(Z).join(" ").trim()}else if(typeof J==="string"&&Array.isArray(q)){let B=new Set([...q,...J.split(" ")]);G=Array.from(B).join(" ").trim()}else if(Array.isArray(J)&&typeof q==="string"){let B=new Set([...J,...q.split(" ")]);G=Array.from(B).join(" ").trim()}else if(Array.isArray(J)&&Array.isArray(q)){let B=new Set([...J,...q]);G=Array.from(B).join(" ").trim()}else if(typeof J==="string"&&typeof q==="object")G={[J]:!0,...q};else if(typeof J==="object"&&typeof q==="string")G={...J,[q]:!0};else if(typeof J==="object"&&typeof q==="object")G={...J,...q};else if(typeof J==="object"&&Array.isArray(q)){let B={...J};for(let U of q)B[U]=!0;G=B}else if(Array.isArray(J)&&typeof q==="object"){let B={};for(let U of J)B[U]=!0;for(let U of Object.keys(q))B[U]=q[U];G=B}else throw Error(`cannot merge classes of ${J} (${typeof J}) and ${q} (${typeof q})`)}return G}class m{state;path;keys;constructor(z,G){this.state=z;this.path=G;this.keys=G.split(".")}get(){let z=this.keys,G=this.state?this.state[z[0]]:void 0;for(let Q=1;Q<z.length&&!!G;Q++)G=G[z[Q]];return G}put(z){this.putDeep(z,this.state)}patch(z){if(Array.isArray(z)){let G=[];for(let Q of z)G.push(this.createPatch(Q));this.state.patch(G)}else this.state.patch(this.createPatch(z))}createPatch(z){let G={};return this.putDeep(z,G),G}putDeep(z,G){let Q=this.keys;if(Q.length>1){let J=0,q=G[Q[J]];if(typeof q!=="object"||q===null)G[Q[J]]=q={};for(J=1;J<Q.length-1;J++){let B=q;if(q=q[Q[J]],typeof q!=="object"||q===null)B[Q[J]]=q={}}q[Q[J]]=z}else if(typeof G[Q[0]]==="object"&&typeof z==="object")Object.assign(G[Q[0]],z);else G[Q[0]]=z}}class h{state;get;put;patch;constructor(z,G,Q,J){this.state=z;this.get=G;this.put=Q;this.patch=J}}export{u as vode,c as tag,R as props,gG as mergeClass,w as memo,b as hydrate,D as globals,v as defuse,i as createState,p as createPatch,N as childrenStart,f as children,r as childCount,l as child,V as app,az as WBR,BG as VIEW,tz as VIDEO,dz as VAR,zG as USE,nz as UL,sz as U,qG as TSPAN,lz as TRACK,rz as TR,cz as TITLE,pz as TIME,iz as THEAD,wz as TH,vz as TFOOT,eB as TEXTPATH,Vz as TEXTAREA,oB as TEXT,uz as TEMPLATE,hz as TD,mz as TBODY,yz as TABLE,aB as SYMBOL,tB as SWITCH,dB as SVG,gz as SUP,_z as SUMMARY,Pz as SUB,kz as STYLE,xz as STRONG,nB as STOP,Nz as SPAN,bz as SOURCE,Sz as SMALL,Cz as SLOT,sB as SET,PG as SEMANTICS,fz as SELECT,Iz as SECTION,Az as SEARCH,Kz as SCRIPT,Dz as SAMP,Rz as S,Tz as RUBY,Mz as RT,Fz as RP,lB as RECT,rB as RADIALGRADIENT,Oz as Q,Yz as PROGRESS,Hz as PRE,cB as POLYLINE,pB as POLYGON,jz as PICTURE,iB as PATTERN,wB as PATH,Wz as P,Lz as OUTPUT,Ez as OPTION,$z as OPTGROUP,Zz as OL,Xz as OBJECT,Uz as NOSCRIPT,Qz as NAV,kG as MUNDEROVER,xG as MUNDER,NG as MTR,bG as MTEXT,SG as MTD,CG as MTABLE,fG as MSUP,IG as MSUBSUP,AG as MSUB,KG as MSTYLE,DG as MSQRT,RG as MSPACE,TG as MS,MG as MROW,FG as MROOT,OG as MPRESCRIPTS,YG as MPHANTOM,vB as MPATH,HG as MPADDED,jG as MOVER,WG as MO,LG as MN,EG as MMULTISCRIPTS,$G as MI,ZG as MFRAC,Jz as METER,VB as METADATA,Gz as META,XG as MERROR,Bz as MENU,UG as MATH,uB as MASK,hB as MARKER,zz as MARK,qz as MAP,eq as MAIN,QG as MACTION,oq as LINK,mB as LINEARGRADIENT,yB as LINE,aq as LI,tq as LEGEND,dq as LABEL,m as KeyStateContext,nq as KBD,sq as INS,lq as INPUT,rq as IMG,gB as IMAGE,cq as IFRAME,pq as I,iq as HTML,wq as HR,vq as HGROUP,Vq as HEADER,uq as HEAD,hq as H6,mq as H5,yq as H4,gq as H3,_q as H2,Pq as H1,_B as G,kq as FORM,PB as FOREIGNOBJECT,xq as FOOTER,kB as FILTER,Nq as FIGURE,bq as FIGCAPTION,Sq as FIELDSET,xB as FETURBULENCE,NB as FETILE,bB as FESPOTLIGHT,SB as FESPECULARLIGHTING,CB as FEPOINTLIGHT,fB as FEOFFSET,IB as FEMORPHOLOGY,AB as FEMERGENODE,KB as FEMERGE,DB as FEIMAGE,RB as FEGAUSSIANBLUR,TB as FEFUNCR,MB as FEFUNCG,FB as FEFUNCB,OB as FEFUNCA,YB as FEFLOOD,HB as FEDROPSHADOW,jB as FEDISTANTLIGHT,WB as FEDISPLACEMENTMAP,LB as FEDIFFUSELIGHTING,EB as FECONVOLVEMATRIX,$B as FECOMPOSITE,ZB as FECOMPONENTTRANSFER,XB as FECOLORMATRIX,UB as FEBLEND,Cq as EMBED,fq as EM,QB as ELLIPSE,h as DelegateStateContext,Iq as DT,Aq as DL,Kq as DIV,Dq as DIALOG,Rq as DFN,Tq as DETAILS,JB as DESC,Mq as DEL,GB as DEFS,Fq as DD,Oq as DATALIST,Yq as DATA,Hq as COLGROUP,jq as COL,Wq as CODE,BB as CLIPPATH,Lq as CITE,zB as CIRCLE,Eq as CAPTION,$q as CANVAS,Zq as BUTTON,Xq as BR,Uq as BODY,Qq as BLOCKQUOTE,Jq as BDO,Gq as BDI,Bq as BASE,zq as B,qq as AUDIO,e as ASIDE,o as ARTICLE,a as AREA,JG as ANNOTATION_XML,GG as ANNOTATION,qB as ANIMATETRANSFORM,ez as ANIMATEMOTION,oz as ANIMATE,t as ADDRESS,d as ABBR,n as A};

package/dist/vode.mjs

@@ -309,116 +309,126 @@ function mergeState(target, source, allowDeletion) {
   return target;
 }
 function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
-  newVode = remember(state, newVode, oldVode);
-  const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
-  if (newVode === oldVode || !oldVode && isNoVode) {
-    return oldVode;
-  }
-  const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
-  const oldNode = oldIsText ? oldVode : oldVode?.node;
-  if (isNoVode) {
-    oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
-    oldNode?.remove();
-    return;
-  }
-  const isText = !isNoVode && isTextVode(newVode);
-  const isNode = !isNoVode && isNaturalVode(newVode);
-  const alreadyAttached = !!newVode && typeof newVode !== "string" && !!(newVode?.node || newVode?.nodeType === Node.TEXT_NODE);
-  if (!isText && !isNode && !alreadyAttached && !oldVode) {
-    throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
-  } else if (alreadyAttached && isText) {
-    newVode = newVode.wholeText;
-  } else if (alreadyAttached && isNode) {
-    newVode = [...newVode];
-  }
-  if (oldIsText && isText) {
-    if (oldNode.nodeValue !== newVode) {
-      oldNode.nodeValue = newVode;
+  try {
+    newVode = remember(state, newVode, oldVode);
+    const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
+    if (newVode === oldVode || !oldVode && isNoVode) {
+      return oldVode;
     }
-    return oldVode;
-  }
-  if (isText && (!oldNode || !oldIsText)) {
-    const text = document.createTextNode(newVode);
-    if (oldNode) {
-      oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
-      oldNode.replaceWith(text);
-    } else {
-      if (parent.childNodes[childIndex]) {
-        parent.insertBefore(text, parent.childNodes[childIndex]);
-      } else {
-        parent.appendChild(text);
-      }
+    const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
+    const oldNode = oldIsText ? oldVode : oldVode?.node;
+    if (isNoVode) {
+      oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
+      oldNode?.remove();
+      return;
     }
-    return text;
-  }
-  if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
-    const newvode = newVode;
-    if (1 in newvode) {
-      newvode[1] = remember(state, newvode[1], undefined);
+    const isText = !isNoVode && isTextVode(newVode);
+    const isNode = !isNoVode && isNaturalVode(newVode);
+    const alreadyAttached = !!newVode && typeof newVode !== "string" && !!(newVode?.node || newVode?.nodeType === Node.TEXT_NODE);
+    if (!isText && !isNode && !alreadyAttached && !oldVode) {
+      throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
+    } else if (alreadyAttached && isText) {
+      newVode = newVode.wholeText;
+    } else if (alreadyAttached && isNode) {
+      newVode = [...newVode];
     }
-    const properties = props(newVode);
-    xmlns = properties?.xmlns || xmlns;
-    const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
-    newVode.node = newNode;
-    patchProperties(state, patch, newNode, undefined, properties);
-    if (oldNode) {
-      oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
-      oldNode.replaceWith(newNode);
-    } else {
-      if (parent.childNodes[childIndex]) {
-        parent.insertBefore(newNode, parent.childNodes[childIndex]);
+    if (oldIsText && isText) {
+      if (oldNode.nodeValue !== newVode) {
+        oldNode.nodeValue = newVode;
+      }
+      return oldVode;
+    }
+    if (isText && (!oldNode || !oldIsText)) {
+      const text = document.createTextNode(newVode);
+      if (oldNode) {
+        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode.replaceWith(text);
       } else {
-        parent.appendChild(newNode);
+        if (parent.childNodes[childIndex]) {
+          parent.insertBefore(text, parent.childNodes[childIndex]);
+        } else {
+          parent.appendChild(text);
+        }
       }
+      return text;
     }
-    const newChildren = children(newVode);
-    if (newChildren) {
-      for (let i = 0;i < newChildren.length; i++) {
-        const child2 = newChildren[i];
-        const attached = render(state, patch, newNode, i, undefined, child2, xmlns);
-        newVode[properties ? i + 2 : i + 1] = attached;
+    if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
+      const newvode = newVode;
+      if (1 in newvode) {
+        newvode[1] = remember(state, newvode[1], undefined);
+      }
+      const properties = props(newVode);
+      xmlns = properties?.xmlns || xmlns;
+      const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
+      newVode.node = newNode;
+      patchProperties(state, patch, newNode, undefined, properties);
+      if (oldNode) {
+        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode.replaceWith(newNode);
+      } else {
+        if (parent.childNodes[childIndex]) {
+          parent.insertBefore(newNode, parent.childNodes[childIndex]);
+        } else {
+          parent.appendChild(newNode);
+        }
+      }
+      const newChildren = children(newVode);
+      if (newChildren) {
+        for (let i = 0;i < newChildren.length; i++) {
+          const child2 = newChildren[i];
+          const attached = render(state, patch, newNode, i, undefined, child2, xmlns);
+          newVode[properties ? i + 2 : i + 1] = attached;
+        }
       }
+      newNode.onMount && patch(newNode.onMount(newNode));
+      return newVode;
     }
-    newNode.onMount && patch(newNode.onMount(newNode));
-    return newVode;
-  }
-  if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
-    newVode.node = oldNode;
-    const newvode = newVode;
-    const oldvode = oldVode;
-    let hasProps = false;
-    if (newvode[1]?.__memo) {
-      const prev = newvode[1];
-      newvode[1] = remember(state, newvode[1], oldvode[1]);
-      if (prev !== newvode[1]) {
+    if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
+      newVode.node = oldNode;
+      const newvode = newVode;
+      const oldvode = oldVode;
+      let hasProps = false;
+      if (newvode[1]?.__memo) {
+        const prev = newvode[1];
+        newvode[1] = remember(state, newvode[1], oldvode[1]);
+        if (prev !== newvode[1]) {
+          const properties = props(newVode);
+          patchProperties(state, patch, oldNode, props(oldVode), properties);
+          hasProps = !!properties;
+        }
+      } else {
         const properties = props(newVode);
         patchProperties(state, patch, oldNode, props(oldVode), properties);
         hasProps = !!properties;
       }
-    } else {
-      const properties = props(newVode);
-      patchProperties(state, patch, oldNode, props(oldVode), properties);
-      hasProps = !!properties;
-    }
-    const newKids = children(newVode);
-    const oldKids = children(oldVode);
-    if (newKids) {
-      for (let i = 0;i < newKids.length; i++) {
-        const child2 = newKids[i];
-        const oldChild = oldKids && oldKids[i];
-        const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
-        if (attached) {
-          newVode[hasProps ? i + 2 : i + 1] = attached;
+      const newKids = children(newVode);
+      const oldKids = children(oldVode);
+      if (newKids) {
+        for (let i = 0;i < newKids.length; i++) {
+          const child2 = newKids[i];
+          const oldChild = oldKids && oldKids[i];
+          const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
+          if (attached) {
+            newVode[hasProps ? i + 2 : i + 1] = attached;
+          }
         }
       }
-    }
-    if (oldKids) {
-      const newKidsCount = newKids ? newKids.length : 0;
-      for (let i = oldKids.length - 1;i >= newKidsCount; i--) {
-        render(state, patch, oldNode, i, oldKids[i], undefined, xmlns);
+      if (oldKids) {
+        const newKidsCount = newKids ? newKids.length : 0;
+        for (let i = oldKids.length - 1;i >= newKidsCount; i--) {
+          render(state, patch, oldNode, i, oldKids[i], undefined, xmlns);
+        }
       }
+      return newVode;
+    }
+  } catch (error) {
+    const catchVode = props(newVode)?.catch;
+    if (catchVode) {
+      const handledVode = typeof catchVode === "function" ? catchVode(state, error) : catchVode;
+      return render(state, patch, parent, childIndex, hydrate(newVode?.node || oldVode?.node, true), handledVode, xmlns);
+    } else {
+      throw error;
     }
-    return newVode;
   }
   return;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.4.2",
+    "version": "1.5.0",
     "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",

package/src/vode.ts

@@ -39,6 +39,8 @@ export type Props<S> = Partial<
     onMount?: MountFunction<S>,
     /** called before the element is detached */
     onUnmount?: MountFunction<S>,
+    /** used instead of original vode when an error occurs during rendering */
+    catch?: ((s: S, error: any) => ChildVode<S>) | ChildVode<S>;
 };
 
 export type MountFunction<S> =
@@ -54,7 +56,8 @@ export type ClassProp =
 
 export type StyleProp =
     | (Record<number, never> & { [K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] | null })
-    | string;
+    | string
+    | "" | null | undefined; // no style
 
 export type EventsMap =
     & { [K in keyof HTMLElementEventMap as `on${K}`]: HTMLElementEventMap[K] }
@@ -464,149 +467,165 @@ function mergeState(target: any, source: any, allowDeletion: boolean) {
 };
 
 function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, xmlns?: string): AttachedVode<S> | undefined {
-    // unwrap component if it is memoized
-    newVode = remember(state, newVode, oldVode) as ChildVode<S>;
+    try {
+        // unwrap component if it is memoized
+        newVode = remember(state, newVode, oldVode) as ChildVode<S>;
 
-    const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
-    if (newVode === oldVode || (!oldVode && isNoVode)) {
-        return oldVode;
-    }
+        const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
+        if (newVode === oldVode || (!oldVode && isNoVode)) {
+            return oldVode;
+        }
 
-    const oldIsText = (oldVode as Text)?.nodeType === Node.TEXT_NODE;
-    const oldNode: ChildNode | undefined = oldIsText ? oldVode as Text : oldVode?.node;
+        const oldIsText = (oldVode as Text)?.nodeType === Node.TEXT_NODE;
+        const oldNode: ChildNode | undefined = oldIsText ? oldVode as Text : oldVode?.node;
 
-    // falsy|text|element(A) -> undefined 
-    if (isNoVode) {
-        (<any>oldNode)?.onUnmount && patch((<any>oldNode).onUnmount(oldNode));
-        oldNode?.remove();
-        return undefined;
-    }
+        // falsy|text|element(A) -> undefined 
+        if (isNoVode) {
+            (<any>oldNode)?.onUnmount && patch((<any>oldNode).onUnmount(oldNode));
+            oldNode?.remove();
+            return undefined;
+        }
 
-    const isText = !isNoVode && isTextVode(newVode);
-    const isNode = !isNoVode && isNaturalVode(newVode);
-    const alreadyAttached = !!newVode && typeof newVode !== "string" && !!((<any>newVode)?.node || (<any>newVode)?.nodeType === Node.TEXT_NODE);
+        const isText = !isNoVode && isTextVode(newVode);
+        const isNode = !isNoVode && isNaturalVode(newVode);
+        const alreadyAttached = !!newVode && typeof newVode !== "string" && !!((<any>newVode)?.node || (<any>newVode)?.nodeType === Node.TEXT_NODE);
 
-    if (!isText && !isNode && !alreadyAttached && !oldVode) {
-        throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
-    }
-    else if (alreadyAttached && isText) {
-        newVode = (<Text><any>newVode).wholeText;
-    }
-    else if (alreadyAttached && isNode) {
-        newVode = [...<Vode<S>>newVode];
-    }
+        if (!isText && !isNode && !alreadyAttached && !oldVode) {
+            throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
+        }
+        else if (alreadyAttached && isText) {
+            newVode = (<Text><any>newVode).wholeText;
+        }
+        else if (alreadyAttached && isNode) {
+            newVode = [...<Vode<S>>newVode];
+        }
 
-    // text -> text
-    if (oldIsText && isText) {
-        if ((<Text>oldNode).nodeValue !== <string>newVode) {
-            (<Text>oldNode).nodeValue = <string>newVode;
+        // text -> text
+        if (oldIsText && isText) {
+            if ((<Text>oldNode).nodeValue !== <string>newVode) {
+                (<Text>oldNode).nodeValue = <string>newVode;
+            }
+            return oldVode;
         }
-        return oldVode;
-    }
-    // falsy|element -> text
-    if (isText && (!oldNode || !oldIsText)) {
-        const text = document.createTextNode(newVode as string)
-        if (oldNode) {
-            (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
-            oldNode.replaceWith(text);
-        } else {
-            if (parent.childNodes[childIndex]) {
-                parent.insertBefore(text, parent.childNodes[childIndex]);
+        // falsy|element -> text
+        if (isText && (!oldNode || !oldIsText)) {
+            const text = document.createTextNode(newVode as string)
+            if (oldNode) {
+                (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
+                oldNode.replaceWith(text);
             } else {
-                parent.appendChild(text);
+                if (parent.childNodes[childIndex]) {
+                    parent.insertBefore(text, parent.childNodes[childIndex]);
+                } else {
+                    parent.appendChild(text);
+                }
             }
+            return text as Text;
         }
-        return text as Text;
-    }
 
-    // falsy|text|element(A) -> element(B) 
-    if (
-        (isNode && (!oldNode || oldIsText || (<Vode<S>>oldVode)[0] !== (<Vode<S>>newVode)[0]))
-    ) {
-        const newvode = <Vode<S>>newVode;
-        if (1 in newvode) {
-            newvode[1] = remember(state, newvode[1], undefined) as Vode<S>;
-        }
+        // falsy|text|element(A) -> element(B) 
+        if (
+            (isNode && (!oldNode || oldIsText || (<Vode<S>>oldVode)[0] !== (<Vode<S>>newVode)[0]))
+        ) {
+            const newvode = <Vode<S>>newVode;
+            if (1 in newvode) {
+                newvode[1] = remember(state, newvode[1], undefined) as Vode<S>;
+            }
 
-        const properties = props(newVode);
+            const properties = props(newVode);
 
-        xmlns = properties?.xmlns as string || xmlns;
-        const newNode: ChildNode = xmlns
-            ? document.createElementNS(xmlns, (<Vode<S>>newVode)[0])
-            : document.createElement((<Vode<S>>newVode)[0]);
-        (<AttachedVode<S>>newVode).node = newNode;
+            xmlns = properties?.xmlns as string || xmlns;
+            const newNode: ChildNode = xmlns
+                ? document.createElementNS(xmlns, (<Vode<S>>newVode)[0])
+                : document.createElement((<Vode<S>>newVode)[0]);
+            (<AttachedVode<S>>newVode).node = newNode;
 
-        patchProperties(state, patch, newNode, undefined, properties);
+            patchProperties(state, patch, newNode, undefined, properties);
 
-        if (oldNode) {
-            (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
-            oldNode.replaceWith(newNode);
-        } else {
-            if (parent.childNodes[childIndex]) {
-                parent.insertBefore(newNode, parent.childNodes[childIndex]);
+            if (oldNode) {
+                (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
+                oldNode.replaceWith(newNode);
             } else {
-                parent.appendChild(newNode);
+                if (parent.childNodes[childIndex]) {
+                    parent.insertBefore(newNode, parent.childNodes[childIndex]);
+                } else {
+                    parent.appendChild(newNode);
+                }
             }
-        }
 
-        const newChildren = children(newVode);
-        if (newChildren) {
-            for (let i = 0; i < newChildren.length; i++) {
-                const child = newChildren[i];
-                const attached = render(state, patch, newNode as Element, i, undefined, child, xmlns);
-                (<Vode<S>>newVode!)[properties ? i + 2 : i + 1] = <Vode<S>>attached;
+            const newChildren = children(newVode);
+            if (newChildren) {
+                for (let i = 0; i < newChildren.length; i++) {
+                    const child = newChildren[i];
+                    const attached = render(state, patch, newNode as Element, i, undefined, child, xmlns);
+                    (<Vode<S>>newVode!)[properties ? i + 2 : i + 1] = <Vode<S>>attached;
+                }
             }
-        }
 
-        (<any>newNode).onMount && patch((<any>newNode).onMount(newNode));
-        return <AttachedVode<S>>newVode;
-    }
-
-    //element(A) -> element(A) 
-    if (!oldIsText && isNode && (<Vode<S>>oldVode)[0] === (<Vode<S>>newVode)[0]) {
-        (<AttachedVode<S>>newVode).node = oldNode;
-
-        const newvode = <Vode<S>>newVode;
-        const oldvode = <Vode<S>>oldVode;
+            (<any>newNode).onMount && patch((<any>newNode).onMount(newNode));
+            return <AttachedVode<S>>newVode;
+        }
 
-        let hasProps = false;
-        if ((<any>newvode[1])?.__memo) {
-            const prev = newvode[1] as any;
-            newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
-            if (prev !== newvode[1]) {
+        //element(A) -> element(A) 
+        if (!oldIsText && isNode && (<Vode<S>>oldVode)[0] === (<Vode<S>>newVode)[0]) {
+            (<AttachedVode<S>>newVode).node = oldNode;
+
+            const newvode = <Vode<S>>newVode;
+            const oldvode = <Vode<S>>oldVode;
+
+            let hasProps = false;
+            if ((<any>newvode[1])?.__memo) {
+                const prev = newvode[1] as any;
+                newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
+                if (prev !== newvode[1]) {
+                    const properties = props(newVode);
+                    patchProperties(state, patch, oldNode!, props(oldVode), properties);
+                    hasProps = !!properties;
+                }
+            }
+            else {
                 const properties = props(newVode);
                 patchProperties(state, patch, oldNode!, props(oldVode), properties);
                 hasProps = !!properties;
             }
-        }
-        else {
-            const properties = props(newVode);
-            patchProperties(state, patch, oldNode!, props(oldVode), properties);
-            hasProps = !!properties;
-        }
 
-        const newKids = children(newVode);
-        const oldKids = children(oldVode) as AttachedVode<S>[];
-        if (newKids) {
-            for (let i = 0; i < newKids.length; i++) {
-                const child = newKids[i];
-                const oldChild = oldKids && oldKids[i];
+            const newKids = children(newVode);
+            const oldKids = children(oldVode) as AttachedVode<S>[];
+            if (newKids) {
+                for (let i = 0; i < newKids.length; i++) {
+                    const child = newKids[i];
+                    const oldChild = oldKids && oldKids[i];
 
-                const attached = render(state, patch, oldNode as Element, i, oldChild, child, xmlns);
-                if (attached) {
-                    (<Vode<S>>newVode)[hasProps ? i + 2 : i + 1] = <Vode<S>>attached;
+                    const attached = render(state, patch, oldNode as Element, i, oldChild, child, xmlns);
+                    if (attached) {
+                        (<Vode<S>>newVode)[hasProps ? i + 2 : i + 1] = <Vode<S>>attached;
+                    }
                 }
             }
-        }
 
-        if (oldKids) {
-            const newKidsCount = newKids ? newKids.length : 0;
-            for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-                render(state, patch, oldNode as Element, i, oldKids[i], undefined, xmlns);
+            if (oldKids) {
+                const newKidsCount = newKids ? newKids.length : 0;
+                for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
+                    render(state, patch, oldNode as Element, i, oldKids[i], undefined, xmlns);
+                }
             }
-        }
 
-        return <AttachedVode<S>>newVode;
+            return <AttachedVode<S>>newVode;
+        }
+    } catch (error) {
+        const catchVode = props(newVode)?.catch;
+        if (catchVode) {
+            const handledVode = typeof catchVode === "function"
+                ? (<(s: S, error: any) => ChildVode<S>>catchVode)(state, error)
+                : catchVode;
+
+            return render(state, patch, parent, childIndex,
+                hydrate(((<AttachedVode<S>>newVode)?.node || oldVode?.node) as Element, true) as AttachedVode<S>,
+                handledVode,
+                xmlns);
+        } else {
+            throw error;
+        }
     }
 
     return undefined;