@ryupold/vode 1.1.0 → 1.1.2

package/README.md

@@ -144,7 +144,7 @@ Imagine this HTML:
   <div class="card-image">
     <figure class="image is-4by3">
       <img
-        src="https://bulma.io/assets/images/placeholders/1280x960.png"
+        src="placeholders/1280x960.png"
         alt="Placeholder image"
       />
     </figure>
@@ -154,7 +154,7 @@ Imagine this HTML:
       <div class="media-left">
         <figure class="image is-48x48">
           <img
-            src="https://bulma.io/assets/images/placeholders/96x96.png"
+            src="placeholders/96x96.png"
             alt="Placeholder image"
           />
         </figure>
@@ -166,8 +166,7 @@ Imagine this HTML:
     </div>
 
     <div class="content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
-      iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="?post=vode">vode</a>. <a href="#">#css</a>
       <a href="#">#responsive</a>
       <br />
       <time datetime="2025-09-24">10:09 PM - 24 Sep 2025</time>
@@ -179,36 +178,36 @@ Imagine this HTML:
 expressed as **"vode"** it would look like this:
 
 ```ts
-[DIV, { class: "card" },
-    [DIV, { class: "card-image" },
-        [FIGURE, { class: "image is-4by3" },
+[DIV, { class: 'card' },
+    [DIV, { class: 'card-image' },
+        [FIGURE, { class: 'image is-4by3' },
             [IMG, {
-                src: "https://bulma.io/assets/images/placeholders/1280x960.png",
-                alt: "Placeholder image"
+                src: 'placeholders/1280x960.png',
+                alt: 'Placeholder image'
             }]
         ]
     ],
-    [DIV, { class: "card-content" },
-        [DIV, { class: "media" },
-            [DIV, { class: "media-left" },
-                [FIGURE, { class: "image is-48x48" },
+    [DIV, { class: 'card-content' },
+        [DIV, { class: 'media' },
+            [DIV, { class: 'media-left' },
+                [FIGURE, { class: 'image is-48x48' },
                     [IMG, {
-                        src: "https://bulma.io/assets/images/placeholders/96x96.png",
-                        alt: "Placeholder image"
+                        src: 'placeholders/96x96.png',
+                        alt: 'Placeholder image'
                     }]
                 ]
             ],
-            [DIV, { class: "media-content" },
-                [P, { class: "title is-4" }, "John Smith"],
-                [P, { class: "subtitle is-6" }, "@johnsmith"]
+            [DIV, { class: 'media-content' },
+                [P, { class: 'title is-4' }, 'John Smith'],
+                [P, { class: 'subtitle is-6' }, '@johnsmith']
             ]
         ],
-        [DIV, { class: "content" },
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. ",
-            [A, "@bulmaio"], ". ", [A, { href: "#" }, "#css"],
-            [A, { href: "#" }, "#responsive"],
+        [DIV, { class: 'content' },
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
+            [A, {href: '?post=vode'}, 'vode'], '. ', [A, { href: '#' }, '#css'],
+            [A, { href: '#' }, '#responsive'],
             [BR],
-            [TIME, { datetime: "2025-09-24" }, "10:09 PM - 24 Sep 2025"]
+            [TIME, { datetime: '2025-09-24' }, '10:09 PM - 24 Sep 2025']
         ]
     ]
 ]
@@ -317,10 +316,10 @@ const patch = app(containerNode, state, (s) => CompFooBar(s));
 ```
 It will analyse the current structure of the given `containerNode` and adjust its structure in the first render. When render-patches are applied to the `patch` function or via yield/return of events, the `containerNode` is updated to match the vode structure 1:1. 
 
-#### they multiply
+#### isolated state
 You can have multiple isolated vode app instances on a page, each with its own state and render function. The returned patch function from `app` can be used to synchronize the state between them.
 
-#### nesting
+#### isolated app
 It is possible to nest vode-apps inside vode-apps, but the library is not opionated on how you do that. One can imagine this type of component:
 
 ```ts
@@ -396,6 +395,14 @@ s.patch(null);
 
 // setting a property in a patch to undefined deletes it from the state object
 s.patch({ pointing: undefined });
+
+//❌ it is discouraged to patch inside the render step 💩
+const ComponentEwww = (s) => {
+    if(!s.isLoading)
+        s.patch(() => startLoading());
+
+    return [DIV, s.loading ? [PROGRESS] : s.title];
+}
 ```
 
 ### memoization
@@ -426,7 +433,7 @@ const CompMemoFooBar = (s) =>  [DIV, { class: "container" },
 
 ### Direct access to DOM elements
 
-Additionally to the standard HTML attributes, you can define 2 special event attributes: `onMount(State, Element)` and `onUnmount(State, Element)` in the vode props. These are called when the element is created or removed during rendering. They receive the `State` as the first argument and the DOM element as the second argument. Like the other events they can be patches too.
+Additionally to the standard HTML attributes, you can define 2 special event attributes: `onMount(State, Element)` and `onUnmount(State, Element)` in the vode props. These are called when the element is created or removed during rendering. They receive the `State` as the first argument and the DOM element as the second argument. Like the other events they can be patches too. 
 
 ## Contributing
 

package/dist/vode.js

@@ -311,8 +311,9 @@ var V = (() => {
           _vode.q = null;
           const vom = dom(_vode.state);
           _vode.vode = render(_vode.state, _vode.patch, container.parentElement, 0, _vode.vode, vom);
-          if (container.tagName !== vom[0].toUpperCase()) {
+          if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
             container = _vode.vode.node;
+            container._vode = _vode;
           }
         } finally {
           _vode.isRendering = false;
@@ -458,7 +459,7 @@ var V = (() => {
       return void 0;
     } else if (element.nodeType === Node.COMMENT_NODE) {
       return void 0;
-    } else {
+    } else if (element.nodeType === Node.ELEMENT_NODE) {
       const tag2 = element.tagName.toLowerCase();
       const root = [tag2];
       root.node = element;
@@ -471,12 +472,19 @@ var V = (() => {
         root.push(props2);
       }
       if (element.hasChildNodes()) {
+        const remove = [];
         for (let child2 of element.childNodes) {
           const wet = child2 && hydrate(child2);
           if (wet) root.push(wet);
+          else if (child2) remove.push(child2);
+        }
+        for (let child2 of remove) {
+          child2.remove();
         }
       }
       return root;
+    } else {
+      return void 0;
     }
   }
   function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
@@ -514,8 +522,8 @@ var V = (() => {
         oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(text);
       } else {
-        if (parent.childNodes[childIndex + 1]) {
-          parent.insertBefore(text, parent.childNodes[childIndex + 1]);
+        if (parent.childNodes[childIndex]) {
+          parent.insertBefore(text, parent.childNodes[childIndex]);
         } else {
           parent.appendChild(text);
         }
@@ -536,8 +544,8 @@ var V = (() => {
         oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(newNode);
       } else {
-        if (parent.childNodes[childIndex + 1]) {
-          parent.insertBefore(newNode, parent.childNodes[childIndex + 1]);
+        if (parent.childNodes[childIndex]) {
+          parent.insertBefore(newNode, parent.childNodes[childIndex]);
         } else {
           parent.appendChild(newNode);
         }

package/dist/vode.min.js

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

package/dist/vode.min.mjs

@@ -1 +1 @@
-function h(f,L,...j){if(!f)throw new Error("tag must be a string or vode");if(Array.isArray(f))return f;else if(L)return[f,L,...j];else return[f,...j]}function g(f,L,j,...q){if(!f?.parentElement)throw new Error("container must be a valid HTMLElement inside the <html></html> document");if(!L||typeof L!=="object")throw new Error("given state must be an object");if(typeof j!=="function")throw new Error("dom must be a function that returns a vode");let E={};E.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(L,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(z)=>{if(!z||typeof z!=="function"&&typeof z!=="object")return;if(E.stats.patchCount++,z?.next){let F=z;E.stats.liveEffectCount++;try{let U=await F.next();while(U.done===!1){E.stats.liveEffectCount++;try{E.patch(U.value),U=await F.next()}finally{E.stats.liveEffectCount--}}E.patch(U.value)}finally{E.stats.liveEffectCount--}}else if(z.then){E.stats.liveEffectCount++;try{let F=await z;E.patch(F)}finally{E.stats.liveEffectCount--}}else if(Array.isArray(z))if(typeof z[0]==="function")if(z.length>1)E.patch(z[0](E.state,...z.slice(1)));else E.patch(z[0](E.state));else E.stats.patchCount--;else if(typeof z==="function")E.patch(z(E.state));else if(E.stats.renderPatchCount++,E.q=A(E.q||{},z,!1),!E.isRendering)E.render()}}),Object.defineProperty(E,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(E.isRendering||!E.q)return;E.isRendering=!0;let z=Date.now();try{E.state=A(E.state,E.q,!0),E.q=null;let F=j(E.state);if(E.vode=H(E.state,E.patch,f.parentElement,0,E.vode,F),f.tagName!==F[0].toUpperCase())f=E.vode.node}finally{if(E.isRendering=!1,E.stats.renderCount++,E.stats.lastRenderTime=Date.now()-z,E.q)E.render()}})}),E.patch=L.patch,E.state=L,E.q=null;let X=f;X._vode=E,E.vode=H(L,E.patch,f.parentElement,Array.from(f.parentElement.children).indexOf(f),y(f),j(L));for(let z of q)E.patch(z);return E.patch}function u(f,L){return L.__memo=f,L}function c(f){return f}function v(f){return f}function i(f){return f?Array.isArray(f)?f[0]:typeof f==="string"||f.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function $(f){if(Array.isArray(f)&&f.length>1&&f[1]&&!Array.isArray(f[1])){if(typeof f[1]==="object"&&f[1].nodeType!==Node.TEXT_NODE)return f[1]}return}function V(f,L){if(!f)return L;if(!L)return f;if(typeof f==="string"&&typeof L==="string"){let j=f.split(" "),q=L.split(" "),E=new Set([...j,...q]);return Array.from(E).join(" ").trim()}else if(typeof f==="string"&&Array.isArray(L)){let j=new Set([...L,...f.split(" ")]);return Array.from(j).join(" ").trim()}else if(Array.isArray(f)&&typeof L==="string"){let j=new Set([...f,...L.split(" ")]);return Array.from(j).join(" ").trim()}else if(Array.isArray(f)&&Array.isArray(L)){let j=new Set([...f,...L]);return Array.from(j).join(" ").trim()}else if(typeof f==="string"&&typeof L==="object")return{[f]:!0,...L};else if(typeof f==="object"&&typeof L==="string")return{...f,[L]:!0};else if(typeof f==="object"&&typeof L==="object")return{...f,...L};else if(typeof f==="object"&&Array.isArray(L)){let j={...f};for(let q of L)j[q]=!0;return j}else if(Array.isArray(f)&&typeof L==="object"){let j={};for(let q of f)j[q]=!0;for(let q of Object.keys(L))j[q]=L[q];return j}throw new Error(`cannot merge classes of ${f} (${typeof f}) and ${L} (${typeof L})`)}function D(f){let L=x(f);if(L>0)return f.slice(L);return null}function p(f){return f.length-x(f)}function w(f,L){return f[L+x(f)]}function x(f){return $(f)?2:1}function A(f,L,j){if(!L)return f;for(let q in L){let E=L[q];if(E&&typeof E==="object"){let X=f[q];if(X)if(Array.isArray(E))f[q]=[...E];else if(E instanceof Date&&X!==E)f[q]=new Date(E);else if(Array.isArray(X))f[q]=A({},E,j);else if(typeof X==="object")A(f[q],E,j);else f[q]=A({},E,j);else if(Array.isArray(E))f[q]=[...E];else if(E instanceof Date)f[q]=new Date(E);else f[q]=A({},E,j)}else if(E===void 0&&j)delete f[q];else f[q]=E}return f}function y(f){if(f?.nodeType===Node.TEXT_NODE){if(f.nodeValue?.trim()!=="")return f;return}else if(f.nodeType===Node.COMMENT_NODE)return;else{let j=[f.tagName.toLowerCase()];if(j.node=f,f?.hasAttributes()){let q={},E=f.attributes;for(let X of E)q[X.name]=X.value;j.push(q)}if(f.hasChildNodes())for(let q of f.childNodes){let E=q&&y(q);if(E)j.push(E)}return j}}function H(f,L,j,q,E,X,z){X=I(f,X,E);let F=!X||typeof X==="number"||typeof X==="boolean";if(X===E||!E&&F)return E;let U=E?.nodeType===Node.TEXT_NODE,G=U?E:E?.node;if(F){G?.onUnmount&&L(G.onUnmount(G)),G?.remove();return}let T=!F&&P(X),R=!F&&k(X),M=!!X&&typeof X!=="string"&&!!(X?.node||X?.nodeType===Node.TEXT_NODE);if(!T&&!R&&!M&&!E)throw new Error("Invalid vode: "+typeof X+" "+JSON.stringify(X));else if(M&&T)X=X.wholeText;else if(M&&R)X=[...X];if(U&&T){if(G.nodeValue!==X)G.nodeValue=X;return E}if(T&&(!G||!U)){let J=document.createTextNode(X);if(G)G.onUnmount&&L(G.onUnmount(G)),G.replaceWith(J);else if(j.childNodes[q+1])j.insertBefore(J,j.childNodes[q+1]);else j.appendChild(J);return J}if(R&&(!G||U||E[0]!==X[0])){z=z||X[0]==="svg";let J=z?document.createElementNS("http://www.w3.org/2000/svg",X[0]):document.createElement(X[0]);X.node=J;let O=X;if(1 in O)O[1]=I(f,O[1],void 0);let Y=$(X);if(K(L,J,void 0,Y,z),G)G.onUnmount&&L(G.onUnmount(G)),G.replaceWith(J);else if(j.childNodes[q+1])j.insertBefore(J,j.childNodes[q+1]);else j.appendChild(J);let W=D(X);if(W)for(let Q=0;Q<W.length;Q++){let B=W[Q],Z=H(f,L,J,Q,void 0,B,z);X[Y?Q+2:Q+1]=Z}return J.onMount&&L(J.onMount(J)),X}if(!U&&R&&E[0]===X[0]){z=z||X[0]==="svg",X.node=G;let J=X,O=E,Y=!1;if(J[1]?.__memo){let B=J[1];if(J[1]=I(f,J[1],O[1]),B!==J[1]){let Z=$(X);K(L,G,$(E),Z,z),Y=!!Z}}else{let B=$(X);K(L,G,$(E),B,z),Y=!!B}let W=D(X),Q=D(E);if(W){for(let B=0;B<W.length;B++){let Z=W[B],b=Q&&Q[B],N=H(f,L,G,B,b,Z,z);if(N)X[Y?B+2:B+1]=N}for(let B=W.length;Q&&B<Q.length;B++)if(Q[B]?.node)Q[B].node.remove();else if(Q[B]?.nodeType===Node.TEXT_NODE)Q[B].remove()}for(let B=W?.length||0;B<Q?.length;B++)if(Q[B]?.node)Q[B].node.remove();else if(Q[B]?.nodeType===Node.TEXT_NODE)Q[B].remove();return X}return}function k(f){return Array.isArray(f)&&f.length>0&&typeof f[0]==="string"}function P(f){return typeof f==="string"||f?.nodeType===Node.TEXT_NODE}function I(f,L,j){if(typeof L!=="function")return L;let q=L?.__memo,E=j?.__memo;if(Array.isArray(q)&&Array.isArray(E)&&q.length===E.length){let z=!0;for(let F=0;F<q.length;F++)if(q[F]!==E[F]){z=!1;break}if(z)return j}let X=m(L,f);if(typeof X==="object")X.__memo=L?.__memo;return X}function m(f,L){if(typeof f==="function")return m(f(L),L);else return f}function K(f,L,j,q,E){if(!q&&!j)return;if(j)for(let X in j){let z=j[X],F=q?.[X];if(z!==F)if(q)q[X]=C(f,L,X,z,F,E);else C(f,L,X,z,void 0,E)}if(q&&j){for(let X in q)if(!(X in j)){let z=q[X];q[X]=C(f,L,X,void 0,z,E)}}else if(q)for(let X in q){let z=q[X];q[X]=C(f,L,X,void 0,z,E)}}function C(f,L,j,q,E,X){if(j==="style")if(!E)L.style.cssText="";else if(q){for(let z in{...q,...E})if(!q||E[z]!==q[z])L.style[z]=E[z];else if(q[z]&&!E[z])L.style[z]=void 0}else for(let z in E)L.style[z]=E[z];else if(j==="class")if(X)if(E){let z=S(E);L.classList.value=z}else L.classList.value="";else if(E){let z=S(E);L.className=z}else L.className="";else if(j[0]==="o"&&j[1]==="n")if(E){let z=null;if(typeof E==="function"){let F=E;z=(U)=>f([F,U])}else if(Array.isArray(E)){let F=E,U=E[0];if(F.length>1)z=()=>f([U,...F.slice(1)]);else z=(G)=>f([U,G])}else if(typeof E==="object")z=()=>f(E);L[j]=z}else L[j]=null;else if(E!==null&&E!==void 0&&E!==!1)L.setAttribute(j,E);else L.removeAttribute(j);return E}function S(f){if(typeof f==="string")return f;else if(Array.isArray(f))return f.map(S).join(" ");else if(typeof f==="object")return Object.keys(f).filter((L)=>f[L]).join(" ");else return""}var r="a",l="abbr",t="address",n="area",a="article",d="aside",o="audio",e="b",ff="base",Ef="bdi",Lf="bdo",Xf="blockquote",jf="body",qf="br",zf="button",Bf="canvas",Ff="caption",Gf="cite",Jf="code",Qf="col",Uf="colgroup",Wf="data",Yf="datalist",Zf="dd",$f="del",Af="details",Of="dfn",Tf="dialog",Rf="div",Cf="dl",Hf="dt",Mf="em",Df="embed",If="fieldset",Kf="figcaption",Sf="figure",xf="footer",Nf="form",yf="h1",mf="h2",_f="h3",bf="h4",kf="h5",Pf="h6",hf="head",gf="header",uf="hgroup",cf="hr",vf="html",Vf="i",pf="iframe",wf="img",sf="input",rf="ins",lf="kbd",tf="label",nf="legend",af="li",df="link",of="main",ef="map",fE="mark",EE="menu",LE="meta",XE="meter",jE="nav",qE="noscript",zE="object",BE="ol",FE="optgroup",GE="option",JE="output",QE="p",UE="picture",WE="pre",YE="progress",ZE="q",$E="rp",AE="rt",OE="ruby",TE="s",RE="samp",CE="script",HE="section",ME="select",DE="slot",IE="small",KE="source",SE="span",xE="strong",NE="style",yE="sub",mE="summary",_E="sup",bE="table",kE="tbody",PE="td",hE="template",gE="textarea",uE="tfoot",cE="th",vE="thead",iE="time",VE="title",pE="tr",wE="track",sE="u",rE="ul",lE="video",tE="wbr",nE="animate",aE="animateMotion",dE="animateTransform",oE="circle",eE="clipPath",fL="defs",EL="desc",LL="ellipse",XL="feBlend",jL="feColorMatrix",qL="feComponentTransfer",zL="feComposite",BL="feConvolveMatrix",FL="feDiffuseLighting",GL="feDisplacementMap",JL="feDistantLight",QL="feDropShadow",UL="feFlood",WL="feFuncA",YL="feFuncB",ZL="feFuncG",$L="feFuncR",AL="feGaussianBlur",OL="feImage",TL="feMerge",RL="feMergeNode",CL="feMorphology",HL="feOffset",ML="fePointLight",DL="feSpecularLighting",IL="feSpotLight",KL="feTile",SL="feTurbulence",xL="filter",NL="foreignObject",yL="g",mL="image",_L="line",bL="linearGradient",kL="marker",PL="mask",hL="metadata",gL="mpath",uL="path",cL="pattern",vL="polygon",iL="polyline",VL="radialGradient",pL="rect",wL="set",sL="stop",rL="svg",lL="switch",tL="symbol",nL="text",aL="textPath",dL="tspan",oL="use",eL="view",fX="annotation",EX="annotation-xml",LX="maction",XX="math",jX="merror",qX="mfrac",zX="mi",BX="mmultiscripts",FX="mn",GX="mo",JX="mover",QX="mpadded",UX="mphantom",WX="mprescripts",YX="mroot",ZX="mrow",$X="ms",AX="mspace",OX="msqrt",TX="mstyle",RX="msub",CX="msubsup",HX="msup",MX="mtable",DX="mtd",IX="mtext",KX="mtr",SX="munder",xX="munderover",NX="semantics";function mX(f){let L=document.createElement("div");L.innerHTML=f.trim();let j=[];for(let q of L.childNodes){let E=_(q);if(E!=null)j.push(E)}return j}function _(f){if(f.nodeType===Node.TEXT_NODE)return f.textContent;if(f.nodeType!==Node.ELEMENT_NODE)return;let L=[f.tagName.toLowerCase()];if(f.hasAttributes()){let j={};for(let q of f.attributes)j[q.name]=q.value;L.push(j)}for(let j of f.childNodes){let q=_(j);if(q&&(typeof q!=="string"||q.length>0))L.push(q)}return L}export{h as vode,i as tag,$ as props,V as mergeClass,u as memo,mX as htmlToVode,c as createState,v as createPatch,x as childrenStart,D as children,p as childCount,w as child,g as app,tE as WBR,eL as VIEW,lE as VIDEO,oL as USE,rE as UL,sE as U,dL as TSPAN,wE as TRACK,pE as TR,VE as TITLE,iE as TIME,vE as THEAD,cE as TH,uE as TFOOT,aL as TEXTPATH,gE as TEXTAREA,nL as TEXT,hE as TEMPLATE,PE as TD,kE as TBODY,bE as TABLE,tL as SYMBOL,lL as SWITCH,rL as SVG,_E as SUP,mE as SUMMARY,yE as SUB,NE as STYLE,xE as STRONG,sL as STOP,SE as SPAN,KE as SOURCE,IE as SMALL,DE as SLOT,wL as SET,NX as SEMANTICS,ME as SELECT,HE as SECTION,CE as SCRIPT,RE as SAMP,TE as S,OE as RUBY,AE as RT,$E as RP,pL as RECT,VL as RADIALGRADIENT,ZE as Q,YE as PROGRESS,WE as PRE,iL as POLYLINE,vL as POLYGON,UE as PICTURE,cL as PATTERN,uL as PATH,QE as P,JE as OUTPUT,GE as OPTION,FE as OPTGROUP,BE as OL,zE as OBJECT,qE as NOSCRIPT,jE as NAV,xX as MUNDEROVER,SX as MUNDER,KX as MTR,IX as MTEXT,DX as MTD,MX as MTABLE,HX as MSUP,CX as MSUBSUP,RX as MSUB,TX as MSTYLE,OX as MSQRT,AX as MSPACE,$X as MS,ZX as MROW,YX as MROOT,WX as MPRESCRIPTS,UX as MPHANTOM,gL as MPATH,QX as MPADDED,JX as MOVER,GX as MO,FX as MN,BX as MMULTISCRIPTS,zX as MI,qX as MFRAC,XE as METER,hL as METADATA,LE as META,jX as MERROR,EE as MENU,XX as MATH,PL as MASK,kL as MARKER,fE as MARK,ef as MAP,of as MAIN,LX as MACTION,df as LINK,bL as LINEARGRADIENT,_L as LINE,af as LI,nf as LEGEND,tf as LABEL,lf as KBD,rf as INS,sf as INPUT,wf as IMG,mL as IMAGE,pf as IFRAME,Vf as I,vf as HTML,cf as HR,uf as HGROUP,gf as HEADER,hf as HEAD,Pf as H6,kf as H5,bf as H4,_f as H3,mf as H2,yf as H1,yL as G,Nf as FORM,NL as FOREIGNOBJECT,xf as FOOTER,xL as FILTER,Sf as FIGURE,Kf as FIGCAPTION,If as FIELDSET,SL as FETURBULENCE,KL as FETILE,IL as FESPOTLIGHT,DL as FESPECULARLIGHTING,ML as FEPOINTLIGHT,HL as FEOFFSET,CL as FEMORPHOLOGY,RL as FEMERGENODE,TL as FEMERGE,OL as FEIMAGE,AL as FEGAUSSIANBLUR,$L as FEFUNCR,ZL as FEFUNCG,YL as FEFUNCB,WL as FEFUNCA,UL as FEFLOOD,QL as FEDROPSHADOW,JL as FEDISTANTLIGHT,GL as FEDISPLACEMENTMAP,FL as FEDIFFUSELIGHTING,BL as FECONVOLVEMATRIX,zL as FECOMPOSITE,qL as FECOMPONENTTRANSFER,jL as FECOLORMATRIX,XL as FEBLEND,Df as EMBED,Mf as EM,LL as ELLIPSE,Hf as DT,Cf as DL,Rf as DIV,Tf as DIALOG,Of as DFN,Af as DETAILS,EL as DESC,$f as DEL,fL as DEFS,Zf as DD,Yf as DATALIST,Wf as DATA,Uf as COLGROUP,Qf as COL,Jf as CODE,eE as CLIPPATH,Gf as CITE,oE as CIRCLE,Ff as CAPTION,Bf as CANVAS,zf as BUTTON,qf as BR,jf as BODY,Xf as BLOCKQUOTE,Lf as BDO,Ef as BDI,ff as BASE,e as B,o as AUDIO,d as ASIDE,a as ARTICLE,n as AREA,EX as ANNOTATION_XML,fX as ANNOTATION,dE as ANIMATETRANSFORM,aE as ANIMATEMOTION,nE as ANIMATE,t as ADDRESS,l as ABBR,r as A};
+function g(f,L,...j){if(!f)throw Error("tag must be a string or vode");if(Array.isArray(f))return f;else if(L)return[f,L,...j];else return[f,...j]}function h(f,L,j,...q){if(!f?.parentElement)throw Error("container must be a valid HTMLElement inside the <html></html> document");if(!L||typeof L!=="object")throw Error("given state must be an object");if(typeof j!=="function")throw Error("dom must be a function that returns a vode");let E={};E.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(L,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(z)=>{if(!z||typeof z!=="function"&&typeof z!=="object")return;if(E.stats.patchCount++,z?.next){let F=z;E.stats.liveEffectCount++;try{let U=await F.next();while(U.done===!1){E.stats.liveEffectCount++;try{E.patch(U.value),U=await F.next()}finally{E.stats.liveEffectCount--}}E.patch(U.value)}finally{E.stats.liveEffectCount--}}else if(z.then){E.stats.liveEffectCount++;try{let F=await z;E.patch(F)}finally{E.stats.liveEffectCount--}}else if(Array.isArray(z))if(typeof z[0]==="function")if(z.length>1)E.patch(z[0](E.state,...z.slice(1)));else E.patch(z[0](E.state));else E.stats.patchCount--;else if(typeof z==="function")E.patch(z(E.state));else if(E.stats.renderPatchCount++,E.q=A(E.q||{},z,!1),!E.isRendering)E.render()}}),Object.defineProperty(E,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(E.isRendering||!E.q)return;E.isRendering=!0;let z=Date.now();try{E.state=A(E.state,E.q,!0),E.q=null;let F=j(E.state);if(E.vode=H(E.state,E.patch,f.parentElement,0,E.vode,F),f.tagName.toUpperCase()!==F[0].toUpperCase())f=E.vode.node,f._vode=E}finally{if(E.isRendering=!1,E.stats.renderCount++,E.stats.lastRenderTime=Date.now()-z,E.q)E.render()}})}),E.patch=L.patch,E.state=L,E.q=null;let X=f;X._vode=E,E.vode=H(L,E.patch,f.parentElement,Array.from(f.parentElement.children).indexOf(f),y(f),j(L));for(let z of q)E.patch(z);return E.patch}function u(f,L){return L.__memo=f,L}function c(f){return f}function v(f){return f}function i(f){return f?Array.isArray(f)?f[0]:typeof f==="string"||f.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function $(f){if(Array.isArray(f)&&f.length>1&&f[1]&&!Array.isArray(f[1])){if(typeof f[1]==="object"&&f[1].nodeType!==Node.TEXT_NODE)return f[1]}return}function V(f,L){if(!f)return L;if(!L)return f;if(typeof f==="string"&&typeof L==="string"){let j=f.split(" "),q=L.split(" "),E=new Set([...j,...q]);return Array.from(E).join(" ").trim()}else if(typeof f==="string"&&Array.isArray(L)){let j=new Set([...L,...f.split(" ")]);return Array.from(j).join(" ").trim()}else if(Array.isArray(f)&&typeof L==="string"){let j=new Set([...f,...L.split(" ")]);return Array.from(j).join(" ").trim()}else if(Array.isArray(f)&&Array.isArray(L)){let j=new Set([...f,...L]);return Array.from(j).join(" ").trim()}else if(typeof f==="string"&&typeof L==="object")return{[f]:!0,...L};else if(typeof f==="object"&&typeof L==="string")return{...f,[L]:!0};else if(typeof f==="object"&&typeof L==="object")return{...f,...L};else if(typeof f==="object"&&Array.isArray(L)){let j={...f};for(let q of L)j[q]=!0;return j}else if(Array.isArray(f)&&typeof L==="object"){let j={};for(let q of f)j[q]=!0;for(let q of Object.keys(L))j[q]=L[q];return j}throw Error(`cannot merge classes of ${f} (${typeof f}) and ${L} (${typeof L})`)}function D(f){let L=x(f);if(L>0)return f.slice(L);return null}function p(f){return f.length-x(f)}function w(f,L){return f[L+x(f)]}function x(f){return $(f)?2:1}function A(f,L,j){if(!L)return f;for(let q in L){let E=L[q];if(E&&typeof E==="object"){let X=f[q];if(X)if(Array.isArray(E))f[q]=[...E];else if(E instanceof Date&&X!==E)f[q]=new Date(E);else if(Array.isArray(X))f[q]=A({},E,j);else if(typeof X==="object")A(f[q],E,j);else f[q]=A({},E,j);else if(Array.isArray(E))f[q]=[...E];else if(E instanceof Date)f[q]=new Date(E);else f[q]=A({},E,j)}else if(E===void 0&&j)delete f[q];else f[q]=E}return f}function y(f){if(f?.nodeType===Node.TEXT_NODE){if(f.nodeValue?.trim()!=="")return f;return}else if(f.nodeType===Node.COMMENT_NODE)return;else if(f.nodeType===Node.ELEMENT_NODE){let j=[f.tagName.toLowerCase()];if(j.node=f,f?.hasAttributes()){let q={},E=f.attributes;for(let X of E)q[X.name]=X.value;j.push(q)}if(f.hasChildNodes()){let q=[];for(let E of f.childNodes){let X=E&&y(E);if(X)j.push(X);else if(E)q.push(E)}for(let E of q)E.remove()}return j}else return}function H(f,L,j,q,E,X,z){X=I(f,X,E);let F=!X||typeof X==="number"||typeof X==="boolean";if(X===E||!E&&F)return E;let U=E?.nodeType===Node.TEXT_NODE,G=U?E:E?.node;if(F){G?.onUnmount&&L(G.onUnmount(G)),G?.remove();return}let T=!F&&P(X),R=!F&&m(X),M=!!X&&typeof X!=="string"&&!!(X?.node||X?.nodeType===Node.TEXT_NODE);if(!T&&!R&&!M&&!E)throw Error("Invalid vode: "+typeof X+" "+JSON.stringify(X));else if(M&&T)X=X.wholeText;else if(M&&R)X=[...X];if(U&&T){if(G.nodeValue!==X)G.nodeValue=X;return E}if(T&&(!G||!U)){let J=document.createTextNode(X);if(G)G.onUnmount&&L(G.onUnmount(G)),G.replaceWith(J);else if(j.childNodes[q])j.insertBefore(J,j.childNodes[q]);else j.appendChild(J);return J}if(R&&(!G||U||E[0]!==X[0])){z=z||X[0]==="svg";let J=z?document.createElementNS("http://www.w3.org/2000/svg",X[0]):document.createElement(X[0]);X.node=J;let O=X;if(1 in O)O[1]=I(f,O[1],void 0);let Y=$(X);if(K(L,J,void 0,Y,z),G)G.onUnmount&&L(G.onUnmount(G)),G.replaceWith(J);else if(j.childNodes[q])j.insertBefore(J,j.childNodes[q]);else j.appendChild(J);let W=D(X);if(W)for(let Q=0;Q<W.length;Q++){let B=W[Q],Z=H(f,L,J,Q,void 0,B,z);X[Y?Q+2:Q+1]=Z}return J.onMount&&L(J.onMount(J)),X}if(!U&&R&&E[0]===X[0]){z=z||X[0]==="svg",X.node=G;let J=X,O=E,Y=!1;if(J[1]?.__memo){let B=J[1];if(J[1]=I(f,J[1],O[1]),B!==J[1]){let Z=$(X);K(L,G,$(E),Z,z),Y=!!Z}}else{let B=$(X);K(L,G,$(E),B,z),Y=!!B}let W=D(X),Q=D(E);if(W){for(let B=0;B<W.length;B++){let Z=W[B],k=Q&&Q[B],N=H(f,L,G,B,k,Z,z);if(N)X[Y?B+2:B+1]=N}for(let B=W.length;Q&&B<Q.length;B++)if(Q[B]?.node)Q[B].node.remove();else if(Q[B]?.nodeType===Node.TEXT_NODE)Q[B].remove()}for(let B=W?.length||0;B<Q?.length;B++)if(Q[B]?.node)Q[B].node.remove();else if(Q[B]?.nodeType===Node.TEXT_NODE)Q[B].remove();return X}return}function m(f){return Array.isArray(f)&&f.length>0&&typeof f[0]==="string"}function P(f){return typeof f==="string"||f?.nodeType===Node.TEXT_NODE}function I(f,L,j){if(typeof L!=="function")return L;let q=L?.__memo,E=j?.__memo;if(Array.isArray(q)&&Array.isArray(E)&&q.length===E.length){let z=!0;for(let F=0;F<q.length;F++)if(q[F]!==E[F]){z=!1;break}if(z)return j}let X=b(L,f);if(typeof X==="object")X.__memo=L?.__memo;return X}function b(f,L){if(typeof f==="function")return b(f(L),L);else return f}function K(f,L,j,q,E){if(!q&&!j)return;if(j)for(let X in j){let z=j[X],F=q?.[X];if(z!==F)if(q)q[X]=C(f,L,X,z,F,E);else C(f,L,X,z,void 0,E)}if(q&&j){for(let X in q)if(!(X in j)){let z=q[X];q[X]=C(f,L,X,void 0,z,E)}}else if(q)for(let X in q){let z=q[X];q[X]=C(f,L,X,void 0,z,E)}}function C(f,L,j,q,E,X){if(j==="style")if(!E)L.style.cssText="";else if(q){for(let z in{...q,...E})if(!q||E[z]!==q[z])L.style[z]=E[z];else if(q[z]&&!E[z])L.style[z]=void 0}else for(let z in E)L.style[z]=E[z];else if(j==="class")if(X)if(E){let z=S(E);L.classList.value=z}else L.classList.value="";else if(E){let z=S(E);L.className=z}else L.className="";else if(j[0]==="o"&&j[1]==="n")if(E){let z=null;if(typeof E==="function"){let F=E;z=(U)=>f([F,U])}else if(Array.isArray(E)){let F=E,U=E[0];if(F.length>1)z=()=>f([U,...F.slice(1)]);else z=(G)=>f([U,G])}else if(typeof E==="object")z=()=>f(E);L[j]=z}else L[j]=null;else if(E!==null&&E!==void 0&&E!==!1)L.setAttribute(j,E);else L.removeAttribute(j);return E}function S(f){if(typeof f==="string")return f;else if(Array.isArray(f))return f.map(S).join(" ");else if(typeof f==="object")return Object.keys(f).filter((L)=>f[L]).join(" ");else return""}var r="a",l="abbr",t="address",n="area",a="article",d="aside",o="audio",e="b",ff="base",Ef="bdi",Lf="bdo",Xf="blockquote",jf="body",qf="br",zf="button",Bf="canvas",Ff="caption",Gf="cite",Jf="code",Qf="col",Uf="colgroup",Wf="data",Yf="datalist",Zf="dd",$f="del",Af="details",Of="dfn",Tf="dialog",Rf="div",Cf="dl",Hf="dt",Mf="em",Df="embed",If="fieldset",Kf="figcaption",Sf="figure",xf="footer",Nf="form",yf="h1",bf="h2",_f="h3",kf="h4",mf="h5",Pf="h6",gf="head",hf="header",uf="hgroup",cf="hr",vf="html",Vf="i",pf="iframe",wf="img",sf="input",rf="ins",lf="kbd",tf="label",nf="legend",af="li",df="link",of="main",ef="map",fE="mark",EE="menu",LE="meta",XE="meter",jE="nav",qE="noscript",zE="object",BE="ol",FE="optgroup",GE="option",JE="output",QE="p",UE="picture",WE="pre",YE="progress",ZE="q",$E="rp",AE="rt",OE="ruby",TE="s",RE="samp",CE="script",HE="section",ME="select",DE="slot",IE="small",KE="source",SE="span",xE="strong",NE="style",yE="sub",bE="summary",_E="sup",kE="table",mE="tbody",PE="td",gE="template",hE="textarea",uE="tfoot",cE="th",vE="thead",iE="time",VE="title",pE="tr",wE="track",sE="u",rE="ul",lE="video",tE="wbr",nE="animate",aE="animateMotion",dE="animateTransform",oE="circle",eE="clipPath",fL="defs",EL="desc",LL="ellipse",XL="feBlend",jL="feColorMatrix",qL="feComponentTransfer",zL="feComposite",BL="feConvolveMatrix",FL="feDiffuseLighting",GL="feDisplacementMap",JL="feDistantLight",QL="feDropShadow",UL="feFlood",WL="feFuncA",YL="feFuncB",ZL="feFuncG",$L="feFuncR",AL="feGaussianBlur",OL="feImage",TL="feMerge",RL="feMergeNode",CL="feMorphology",HL="feOffset",ML="fePointLight",DL="feSpecularLighting",IL="feSpotLight",KL="feTile",SL="feTurbulence",xL="filter",NL="foreignObject",yL="g",bL="image",_L="line",kL="linearGradient",mL="marker",PL="mask",gL="metadata",hL="mpath",uL="path",cL="pattern",vL="polygon",iL="polyline",VL="radialGradient",pL="rect",wL="set",sL="stop",rL="svg",lL="switch",tL="symbol",nL="text",aL="textPath",dL="tspan",oL="use",eL="view",fX="annotation",EX="annotation-xml",LX="maction",XX="math",jX="merror",qX="mfrac",zX="mi",BX="mmultiscripts",FX="mn",GX="mo",JX="mover",QX="mpadded",UX="mphantom",WX="mprescripts",YX="mroot",ZX="mrow",$X="ms",AX="mspace",OX="msqrt",TX="mstyle",RX="msub",CX="msubsup",HX="msup",MX="mtable",DX="mtd",IX="mtext",KX="mtr",SX="munder",xX="munderover",NX="semantics";function bX(f){let L=document.createElement("div");L.innerHTML=f.trim();let j=[];for(let q of L.childNodes){let E=_(q);if(E!=null)j.push(E)}return j}function _(f){if(f.nodeType===Node.TEXT_NODE)return f.textContent;if(f.nodeType!==Node.ELEMENT_NODE)return;let L=[f.tagName.toLowerCase()];if(f.hasAttributes()){let j={};for(let q of f.attributes)j[q.name]=q.value;L.push(j)}for(let j of f.childNodes){let q=_(j);if(q&&(typeof q!=="string"||q.length>0))L.push(q)}return L}export{g as vode,i as tag,$ as props,V as mergeClass,u as memo,bX as htmlToVode,c as createState,v as createPatch,x as childrenStart,D as children,p as childCount,w as child,h as app,tE as WBR,eL as VIEW,lE as VIDEO,oL as USE,rE as UL,sE as U,dL as TSPAN,wE as TRACK,pE as TR,VE as TITLE,iE as TIME,vE as THEAD,cE as TH,uE as TFOOT,aL as TEXTPATH,hE as TEXTAREA,nL as TEXT,gE as TEMPLATE,PE as TD,mE as TBODY,kE as TABLE,tL as SYMBOL,lL as SWITCH,rL as SVG,_E as SUP,bE as SUMMARY,yE as SUB,NE as STYLE,xE as STRONG,sL as STOP,SE as SPAN,KE as SOURCE,IE as SMALL,DE as SLOT,wL as SET,NX as SEMANTICS,ME as SELECT,HE as SECTION,CE as SCRIPT,RE as SAMP,TE as S,OE as RUBY,AE as RT,$E as RP,pL as RECT,VL as RADIALGRADIENT,ZE as Q,YE as PROGRESS,WE as PRE,iL as POLYLINE,vL as POLYGON,UE as PICTURE,cL as PATTERN,uL as PATH,QE as P,JE as OUTPUT,GE as OPTION,FE as OPTGROUP,BE as OL,zE as OBJECT,qE as NOSCRIPT,jE as NAV,xX as MUNDEROVER,SX as MUNDER,KX as MTR,IX as MTEXT,DX as MTD,MX as MTABLE,HX as MSUP,CX as MSUBSUP,RX as MSUB,TX as MSTYLE,OX as MSQRT,AX as MSPACE,$X as MS,ZX as MROW,YX as MROOT,WX as MPRESCRIPTS,UX as MPHANTOM,hL as MPATH,QX as MPADDED,JX as MOVER,GX as MO,FX as MN,BX as MMULTISCRIPTS,zX as MI,qX as MFRAC,XE as METER,gL as METADATA,LE as META,jX as MERROR,EE as MENU,XX as MATH,PL as MASK,mL as MARKER,fE as MARK,ef as MAP,of as MAIN,LX as MACTION,df as LINK,kL as LINEARGRADIENT,_L as LINE,af as LI,nf as LEGEND,tf as LABEL,lf as KBD,rf as INS,sf as INPUT,wf as IMG,bL as IMAGE,pf as IFRAME,Vf as I,vf as HTML,cf as HR,uf as HGROUP,hf as HEADER,gf as HEAD,Pf as H6,mf as H5,kf as H4,_f as H3,bf as H2,yf as H1,yL as G,Nf as FORM,NL as FOREIGNOBJECT,xf as FOOTER,xL as FILTER,Sf as FIGURE,Kf as FIGCAPTION,If as FIELDSET,SL as FETURBULENCE,KL as FETILE,IL as FESPOTLIGHT,DL as FESPECULARLIGHTING,ML as FEPOINTLIGHT,HL as FEOFFSET,CL as FEMORPHOLOGY,RL as FEMERGENODE,TL as FEMERGE,OL as FEIMAGE,AL as FEGAUSSIANBLUR,$L as FEFUNCR,ZL as FEFUNCG,YL as FEFUNCB,WL as FEFUNCA,UL as FEFLOOD,QL as FEDROPSHADOW,JL as FEDISTANTLIGHT,GL as FEDISPLACEMENTMAP,FL as FEDIFFUSELIGHTING,BL as FECONVOLVEMATRIX,zL as FECOMPOSITE,qL as FECOMPONENTTRANSFER,jL as FECOLORMATRIX,XL as FEBLEND,Df as EMBED,Mf as EM,LL as ELLIPSE,Hf as DT,Cf as DL,Rf as DIV,Tf as DIALOG,Of as DFN,Af as DETAILS,EL as DESC,$f as DEL,fL as DEFS,Zf as DD,Yf as DATALIST,Wf as DATA,Uf as COLGROUP,Qf as COL,Jf as CODE,eE as CLIPPATH,Gf as CITE,oE as CIRCLE,Ff as CAPTION,Bf as CANVAS,zf as BUTTON,qf as BR,jf as BODY,Xf as BLOCKQUOTE,Lf as BDO,Ef as BDI,ff as BASE,e as B,o as AUDIO,d as ASIDE,a as ARTICLE,n as AREA,EX as ANNOTATION_XML,fX as ANNOTATION,dE as ANIMATETRANSFORM,aE as ANIMATEMOTION,nE as ANIMATE,t as ADDRESS,l as ABBR,r as A};

package/dist/vode.mjs

@@ -85,8 +85,9 @@ function app(container, state, dom, ...initialPatches) {
         _vode.q = null;
         const vom = dom(_vode.state);
         _vode.vode = render(_vode.state, _vode.patch, container.parentElement, 0, _vode.vode, vom);
-        if (container.tagName !== vom[0].toUpperCase()) {
+        if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
           container = _vode.vode.node;
+          container._vode = _vode;
         }
       } finally {
         _vode.isRendering = false;
@@ -231,7 +232,7 @@ function hydrate(element) {
     return;
   } else if (element.nodeType === Node.COMMENT_NODE) {
     return;
-  } else {
+  } else if (element.nodeType === Node.ELEMENT_NODE) {
     const tag2 = element.tagName.toLowerCase();
     const root = [tag2];
     root.node = element;
@@ -244,13 +245,21 @@ function hydrate(element) {
       root.push(props2);
     }
     if (element.hasChildNodes()) {
+      const remove = [];
       for (let child2 of element.childNodes) {
         const wet = child2 && hydrate(child2);
         if (wet)
           root.push(wet);
+        else if (child2)
+          remove.push(child2);
+      }
+      for (let child2 of remove) {
+        child2.remove();
       }
     }
     return root;
+  } else {
+    return;
   }
 }
 function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
@@ -288,8 +297,8 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
       oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
       oldNode.replaceWith(text);
     } else {
-      if (parent.childNodes[childIndex + 1]) {
-        parent.insertBefore(text, parent.childNodes[childIndex + 1]);
+      if (parent.childNodes[childIndex]) {
+        parent.insertBefore(text, parent.childNodes[childIndex]);
       } else {
         parent.appendChild(text);
       }
@@ -310,8 +319,8 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
       oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
       oldNode.replaceWith(newNode);
     } else {
-      if (parent.childNodes[childIndex + 1]) {
-        parent.insertBefore(newNode, parent.childNodes[childIndex + 1]);
+      if (parent.childNodes[childIndex]) {
+        parent.insertBefore(newNode, parent.childNodes[childIndex]);
       } else {
         parent.appendChild(newNode);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "description": "Small web framework for minimal websites",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -32,8 +32,8 @@
         "watch": "tsc -b -w"
     },
     "devDependencies": {
-        "bun": "^1.2.21",
-        "esbuild": "^0.25.9",
-        "typescript": "^5.9.2"
+        "bun": "1.2.22",
+        "esbuild": "0.25.10",
+        "typescript": "5.9.2"
     }
 }

package/src/vode.ts

@@ -182,8 +182,9 @@ export function app<S extends object | unknown>(container: Element, state: Omit<
                 _vode.q = null;
                 const vom = dom(_vode.state);
                 _vode.vode = render(_vode.state, _vode.patch, container.parentElement as Element, 0, _vode.vode, vom)!;
-                if ((<ContainerNode<S>>container).tagName !== (vom[0] as Tag).toUpperCase()) { //the tag name was changed during render -> update reference to vode-app-root 
+                if ((<ContainerNode<S>>container).tagName.toUpperCase() !== (vom[0] as Tag).toUpperCase()) { //the tag name was changed during render -> update reference to vode-app-root 
                     container = _vode.vode.node as Element;
+                    (<ContainerNode<S>>container)._vode = _vode
                 }
             } finally {
                 _vode.isRendering = false;
@@ -374,7 +375,7 @@ function hydrate<S = unknown>(element: Element | Text): AttachedVode<S> | undefi
     else if (element.nodeType === Node.COMMENT_NODE) {
         return undefined; //ignore (not interesting)
     }
-    else {
+    else if (element.nodeType === Node.ELEMENT_NODE) {
         const tag: Tag = (<Element>element).tagName.toLowerCase();
         const root: Vode<S> = [tag];
 
@@ -388,12 +389,19 @@ function hydrate<S = unknown>(element: Element | Text): AttachedVode<S> | undefi
             (<Vode<S>>root).push(props as any);
         }
         if (element.hasChildNodes()) {
+            const remove: ChildNode[] = [];
             for (let child of element.childNodes) {
                 const wet = child && hydrate<S>(child as Element | Text)! as ChildVode<S>;
                 if (wet) root.push(wet as any);
+                else if (child) remove.push(child);
+            }
+            for (let child of remove) {
+                child.remove();
             }
         }
         return <AttachedVode<S>>root;
+    } else {
+        return undefined;
     }
 }
 
@@ -444,8 +452,8 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
             oldNode.replaceWith(text);
         } else {
-            if (parent.childNodes[childIndex + 1]) {
-                parent.insertBefore(text, parent.childNodes[childIndex + 1]);
+            if (parent.childNodes[childIndex]) {
+                parent.insertBefore(text, parent.childNodes[childIndex]);
             } else {
                 parent.appendChild(text);
             }
@@ -475,8 +483,8 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
             oldNode.replaceWith(newNode);
         } else {
-            if (parent.childNodes[childIndex + 1]) {
-                parent.insertBefore(newNode, parent.childNodes[childIndex + 1]);
+            if (parent.childNodes[childIndex]) {
+                parent.insertBefore(newNode, parent.childNodes[childIndex]);
             } else {
                 parent.appendChild(newNode);
             }