@ryupold/vode 1.1.4 → 1.1.6

package/README.md

@@ -1,5 +1,11 @@
 # ![vode-logo](./logo.svg)
 
+[![TypeScript](https://img.shields.io/badge/TypeScript-100%-blue?logo=typescript)](https://www.typescriptlang.org/)
+[![Dependencies](https://img.shields.io/badge/dependencies-0-success)](package.json)
+[![NPM](https://badge.fury.io/js/%40ryupold%2Fvode.svg)](https://www.npmjs.com/package/@ryupold/vode)
+[![NPM Downloads](https://img.shields.io/npm/dm/@ryupold/vode)](https://www.npmjs.com/package/@ryupold/vode)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)
+
 A small web framework for a minimalistic development flow. Zero dependencies, no build step except for typescript compilation, and a simple virtual DOM implementation that is easy to understand and use. Autocompletion out of the box due to binding to `lib.dom.d.ts`.
 
 It can be used to create single page applications or isolated components with complex state. The usage of arrays gives flexibility in composition and makes refactoring easy.
@@ -101,7 +107,7 @@ index.html
 ```
 
 main.ts
-```ts
+```typescript
 import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
 
 const state = createState({
@@ -177,7 +183,7 @@ Imagine this HTML:
 
 expressed as **"vode"** it would look like this:
 
-```ts
+```javascript
 [DIV, { class: 'card' },
     [DIV, { class: 'card-image' },
         [FIGURE, { class: 'image is-4by3' },
@@ -213,16 +219,18 @@ expressed as **"vode"** it would look like this:
 ]
 ```
 
-Viewed alone it does not provide an obvious benefit (apart from looking better imho), but as the result of a function of state, it can become very useful to express conditional UI this way.
+Viewed alone it does not provide an obvious benefit (apart from looking better imho), 
+but as the result of a function of state, it can become very useful to express conditional UI this way. 
 
 ### Component
-```ts
+```typescript
 type Component<S> = (s: S) => ChildVode<S>;
 ```
 
-A `Component<State>` is a function that takes a state object and returns a `Vode<State>`. It is used to render the UI based on the current state.
+A `Component<State>` is a function that takes a state object and returns a `Vode<State>`. 
+It is used to render the UI based on the current state.
 
-```ts
+```typescript
 // A full vode has a tag, properties, and children. props and children are optional.
 const CompFoo = (s) => [SPAN, { class: "foo" }, s.isAuthenticated ? "foo" : "bar"];
 
@@ -304,8 +312,8 @@ const CompBar = (s) => [DIV, { class: "container" },
 ### app
 
 `app` is a function that takes a HTML node, a state object, and a render function (`Component<State>`).  
-```ts
-const containerNode = document.getElementById('APP-ID');
+```typescript
+const containerNode = document.getElementById('ANY-ELEMENT');
 const state = {
     counter: 0,
     pointing: false,
@@ -315,35 +323,40 @@ const state = {
 };
 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. 
+
+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. 
 
 #### 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.
+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.
 
-#### 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:
+#### nested vode-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
+```typescript
 export function IsolatedVodeApp<OuterState, InnerState>(
     tag: Tag,
-    props: Props<OuterState>,
     state: InnerState,
-    View: (ins:InnerState) => Vode<InnerState>, 
-    ...initialPatches: Patch<InnerState>[]
+    View: (ins: InnerState) => Vode<InnerState>,
 ): ChildVode<OuterState> {
     return memo<OuterState>([],
         () => [tag,
             {
-                ...props,
-                onMount: (_: OuterState, container: HTMLElement) => {
-                    app<InnerState>(container, state, View, ...initialPatches);
+                onMount: (s: OuterState, container: Element) => {
+                    app<InnerState>(container, state, View);
+                    if (props.onMount) props.onMount(s, container);
                 }
             }
         ]
     );
 }
 ```
-The `empty memo` prevents further render calls from the outer app so rendering of the subtree inside is controlled by the inner app.
+The `empty memo` prevents further render calls from the outer app
+so rendering of the subtree inside is controlled by the inner app.
+Take note of the fact that the top-level element of the inner app refers to the surrounding element and will change its state accordingly.
 
 ### state & patch
 The state object you pass to [`app`](#app) can be updated directly or via `patch`. 
@@ -397,7 +410,7 @@ 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 💩
+// ❌ it is discouraged to patch inside the render step 💩
 const ComponentEwww = (s) => {
     if(!s.isLoading)
         s.patch(() => startLoading());
@@ -407,42 +420,74 @@ const ComponentEwww = (s) => {
 ```
 
 ### memoization
-To optimize performance, you can use `memo(Array, Component | PropsFactory)` to cache the result of a component function. This is useful when the component does not depend on the state or when the creation of the vode is expensive. You can also pass a function that returns the Props object to memoize the attributes.
-
-```ts
-const CompMemoFooBar = (s) =>  [DIV, { class: "container" }, 
-    [H1, "Hello World"], 
-    [BR], 
-    [P, "This is a paragraph."],
-    
-    // expensive component to render
-    memo(
-        // this array is shallow compared to the previous render
-        [s.title, s.body], 
-        // this is the component function that will be 
-        // called only when the array changes
-        (s) => {
-            const list = [UL];
-            for (let i = 0; i < 1000; i++) {
-                list.push([LI, `Item ${i}`]);
-            }
-            return list;
-        },
-    )
-];
+To optimize performance, you can use `memo(Array, Component | PropsFactory)` to cache the result of a component function. 
+This is useful when the component does not depend on the state or when the creation of the vode is expensive.
+You can also pass a function that returns the Props object to memoize the attributes.
+
+```typescript
+const CompMemoFooBar = (s) => 
+    [DIV, { class: "container" }, 
+        [H1, "Hello World"], 
+        [BR], 
+        [P, "This is a paragraph."],
+        
+        // expensive component to render
+        memo(
+            // this array is shallow compared to the previous render
+            [s.title, s.body], 
+            // this is the component function that will be 
+            // called only when the array changes
+            (s) => {
+                const list = [UL];
+                for (let i = 0; i < 1000; i++) {
+                    list.push([LI, `Item ${i}`]);
+                }
+                return list;
+            },
+        )
+    ];
 ```
 
-### Direct access to DOM elements
+### helper functions
+
+The library provides some helper functions to help with certain situations.
+
+```typescript
+import { tag, props, children, mergeClass, hydrate } from '@ryupold/vode';
+
+// Merge class props intelligently
+mergeClass('foo', ['baz', 'bar']);  // 'foo bar baz'
+mergeClass(['foo'], { bar: true }); // { foo: true, bar: true }
+
+const myVode = [DIV, { class: 'foo' }, [SPAN, 'hello'], [STRONG, 'world']];
+
+// access parts of a vode
+tag(myVode);        // 'div'
+props(myVode);      // { class: 'foo' }
+children(myVode);   // [[SPAN, 'hello'], [STRONG, 'world']]
+
+// get existing DOM element as a vode (can be helpful for analyzing/debugging)
+const asVode = hydrate(document.getElementById('my-element'));
+```
 
-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. 
+> Be aware that `onMount/onUnmount` are only called when a element 
+> is actually created/removed which might not always be the case during 
+> rendering, as only a diff of the virtual DOM is applied.
 
 ## Contributing
 
-I was delighted by the simplicity of [hyperapp](https://github.com/jorgebucaran/hyperapp), which inspired me to create this library. 
+I was delighted by the simplicity of [hyperapp](https://github.com/jorgebucaran/hyperapp), 
+which inspired me to create this library. 
 
 Not planning to add more features, just keeping it simple and easy.
 
-But if you find bugs or have suggestions, feel free to open an [issue](https://github.com/ryupold/vode/issues) or a pull request.
+But if you find bugs or have suggestions, 
+feel free to open an [issue](https://github.com/ryupold/vode/issues) or a pull request.
 
 ## License
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)

package/dist/vode.js

@@ -335,7 +335,7 @@ var V = (() => {
       _vode.patch,
       container.parentElement,
       Array.from(container.parentElement.children).indexOf(container),
-      hydrate(container),
+      hydrate(container, true),
       dom(state)
     );
     for (const effect of initialPatches) {
@@ -343,17 +343,17 @@ var V = (() => {
     }
     return _vode.patch;
   }
-  function hydrate(element) {
+  function hydrate(element, prepareForRender) {
     if (element?.nodeType === Node.TEXT_NODE) {
       if (element.nodeValue?.trim() !== "")
-        return element;
+        return prepareForRender ? element : element.nodeValue;
       return void 0;
     } else if (element.nodeType === Node.COMMENT_NODE) {
       return void 0;
     } else if (element.nodeType === Node.ELEMENT_NODE) {
       const tag2 = element.tagName.toLowerCase();
       const root = [tag2];
-      root.node = element;
+      if (prepareForRender) root.node = element;
       if (element?.hasAttributes()) {
         const props2 = {};
         const attr = element.attributes;
@@ -365,9 +365,9 @@ var V = (() => {
       if (element.hasChildNodes()) {
         const remove = [];
         for (let child2 of element.childNodes) {
-          const wet = child2 && hydrate(child2);
+          const wet = child2 && hydrate(child2, prepareForRender);
           if (wet) root.push(wet);
-          else if (child2) remove.push(child2);
+          else if (child2 && prepareForRender) remove.push(child2);
         }
         for (let child2 of remove) {
           child2.remove();
@@ -674,7 +674,7 @@ var V = (() => {
         node.style.cssText = "";
       } else if (typeof newValue === "string") {
         if (oldValue !== newValue) node.style.cssText = newValue;
-      } else if (oldValue) {
+      } else if (oldValue && typeof oldValue === "object") {
         for (let k in { ...oldValue, ...newValue }) {
           if (!oldValue || newValue[k] !== oldValue[k]) {
             node.style[k] = newValue[k];

package/dist/vode.min.js

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

package/dist/vode.min.mjs

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

package/dist/vode.mjs

@@ -104,23 +104,24 @@ function app(container, state, dom, ...initialPatches) {
   _vode.q = null;
   const root = container;
   root._vode = _vode;
-  _vode.vode = render(state, _vode.patch, container.parentElement, Array.from(container.parentElement.children).indexOf(container), hydrate(container), dom(state));
+  _vode.vode = render(state, _vode.patch, container.parentElement, Array.from(container.parentElement.children).indexOf(container), hydrate(container, true), dom(state));
   for (const effect of initialPatches) {
     _vode.patch(effect);
   }
   return _vode.patch;
 }
-function hydrate(element) {
+function hydrate(element, prepareForRender) {
   if (element?.nodeType === Node.TEXT_NODE) {
     if (element.nodeValue?.trim() !== "")
-      return element;
+      return prepareForRender ? element : element.nodeValue;
     return;
   } else if (element.nodeType === Node.COMMENT_NODE) {
     return;
   } else if (element.nodeType === Node.ELEMENT_NODE) {
     const tag = element.tagName.toLowerCase();
     const root = [tag];
-    root.node = element;
+    if (prepareForRender)
+      root.node = element;
     if (element?.hasAttributes()) {
       const props = {};
       const attr = element.attributes;
@@ -132,10 +133,10 @@ function hydrate(element) {
     if (element.hasChildNodes()) {
       const remove = [];
       for (let child of element.childNodes) {
-        const wet = child && hydrate(child);
+        const wet = child && hydrate(child, prepareForRender);
         if (wet)
           root.push(wet);
-        else if (child)
+        else if (child && prepareForRender)
           remove.push(child);
       }
       for (let child of remove) {
@@ -454,7 +455,7 @@ function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
     } else if (typeof newValue === "string") {
       if (oldValue !== newValue)
         node.style.cssText = newValue;
-    } else if (oldValue) {
+    } else if (oldValue && typeof oldValue === "object") {
       for (let k in { ...oldValue, ...newValue }) {
         if (!oldValue || newValue[k] !== oldValue[k]) {
           node.style[k] = newValue[k];

package/logo.svg

@@ -1,50 +1,55 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35">
     <style>
         text {
-            font-weight: bold;
-            font-family: "Monaco", monospace;
-            color: #2d3748;
-            fill: #2d3748;
+        font-weight: bold;
+        font-family: "Consolas", monospace;
+        fill: #2d3748;
+        dominant-baseline: central;
+        text-anchor: middle;
         }
 
         .braces-text {
-            font-size: 40px;
-            opacity: 0.666;
-            stroke: #aaa;
-            stroke-width: 1px;
+        font-size: 36px;
+        opacity: 0.65;
+        stroke: #aaa;
+        stroke-width: 0.8px;
+        paint-order: stroke;
         }
 
         .item-text {
-            paint-order: stroke;
-            stroke: #aaa;
-            stroke-width: 1px;
+        paint-order: stroke;
+        stroke: #aaa;
+        stroke-width: 0.8px;
         }
 
         .comma-text {
-            font-size: 14px;
-            paint-order: stroke;
-            stroke: #fff;
-            stroke-width: 0.5px;
-            stroke-linecap: butt;
-            stroke-linejoin: miter;
-            opacity: 0.333;
+        font-size: 12px;
+        paint-order: stroke;
+        stroke: #fff;
+        stroke-width: 0.4px;
+        opacity: 0.3;
         }
     </style>
-    <text x="-5%" y="76%" class="braces-text">[</text>
 
-    <text x="13%" y="76%" font-size="32" class="item-text">V</text>
-    <text x="24%" y="76%" class="comma-text">,</text>
-        
-    <g transform="translate(32, -3)">
-        <text x="0" y="76%" font-size="20" class="item-text" >{</text>
-        <text x="12" y="76%" font-size="20" class="item-text">}</text>
-    </g>
-    <text x="50" y="76%" class="comma-text">,</text>
+    <!-- Opening bracket -->
+    <text x="5" y="14.6" class="braces-text">[</text>
 
-    <text x="58" y="76%" font-size="24" class="item-text">d</text>
-    <text x="69" y="76%" class="comma-text">,</text>
+    <!-- V -->
+    <text x="18" y="17" font-size="32" class="item-text">V</text>
+    <text x="26" y="23" class="comma-text">,</text>
 
-    <text x="76" y="76%" font-size="24" class="item-text">e</text>
+    <!-- {} -->
+    <text x="36" y="17" font-size="20" class="item-text">{</text>
+    <text x="47.5" y="17" font-size="20" class="item-text">}</text>
+    <text x="53" y="23" class="comma-text">,</text>
 
-    <text x="83%" y="76%" class="braces-text">]</text>
+    <!-- d -->
+    <text x="66" y="19" font-size="24" class="item-text">d</text>
+    <text x="75" y="23" class="comma-text">,</text>
+
+    <!-- e -->
+    <text x="86" y="19" font-size="24" class="item-text">e</text>
+
+    <!-- Closing bracket -->
+    <text x="95.6" y="14.6" class="braces-text">]</text>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "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.22",
+        "bun": "1.2.23",
         "esbuild": "0.25.10",
-        "typescript": "5.9.2"
+        "typescript": "5.9.3"
     }
 }

package/src/vode.ts

@@ -209,7 +209,7 @@ export function app<S extends object | unknown>(container: Element, state: Omit<
         _vode.patch!,
         container.parentElement,
         Array.from(container.parentElement.children).indexOf(container),
-        hydrate<S>(container),
+        hydrate<S>(container, true) as AttachedVode<S>,
         dom(<S>state)
     )!;
 
@@ -221,10 +221,10 @@ export function app<S extends object | unknown>(container: Element, state: Omit<
 }
 
 /** return vode representation of given DOM node */
-export function hydrate<S = unknown>(element: Element | Text): AttachedVode<S> | undefined {
+export function hydrate<S = unknown>(element: Element | Text, prepareForRender?: boolean): Vode<S> | string | AttachedVode<S> | undefined {
     if ((element as Text)?.nodeType === Node.TEXT_NODE) {
         if ((element as Text).nodeValue?.trim() !== "")
-            return element as Text;
+            return prepareForRender ? element as Text : (element as Text).nodeValue!;
         return undefined; //ignore (mostly html whitespace)
     }
     else if (element.nodeType === Node.COMMENT_NODE) {
@@ -234,7 +234,7 @@ export function hydrate<S = unknown>(element: Element | Text): AttachedVode<S> |
         const tag: Tag = (<Element>element).tagName.toLowerCase();
         const root: Vode<S> = [tag];
 
-        (<AttachedVode<S>>root).node = element;
+        if (prepareForRender) (<AttachedVode<S>>root).node = element;
         if ((element as HTMLElement)?.hasAttributes()) {
             const props: Props<S> = {};
             const attr = (<HTMLElement>element).attributes;
@@ -246,15 +246,15 @@ export function hydrate<S = unknown>(element: Element | Text): AttachedVode<S> |
         if (element.hasChildNodes()) {
             const remove: ChildNode[] = [];
             for (let child of element.childNodes) {
-                const wet = child && hydrate<S>(child as Element | Text)! as ChildVode<S>;
+                const wet = child && hydrate<S>(child as Element | Text, prepareForRender)! as ChildVode<S>;
                 if (wet) root.push(wet as any);
-                else if (child) remove.push(child);
+                else if (child && prepareForRender) remove.push(child);
             }
             for (let child of remove) {
                 child.remove();
             }
         }
-        return <AttachedVode<S>>root;
+        return root;
     } else {
         return undefined;
     }
@@ -642,8 +642,8 @@ function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | key
         if (!newValue) {
             (node as HTMLElement).style.cssText = "";
         } else if (typeof newValue === "string") {
-            if(oldValue !== newValue) (node as HTMLElement).style.cssText = newValue;
-        } else if (oldValue) {
+            if (oldValue !== newValue) (node as HTMLElement).style.cssText = newValue;
+        } else if (oldValue && typeof oldValue === "object") {
             for (let k in { ...(oldValue as Props<S>), ...(newValue as Props<S>) }) {
                 if (!oldValue || newValue[k as keyof PropertyValue<S>] !== oldValue[k as keyof PropertyValue<S>]) {
                     (node as HTMLElement).style[k as keyof PropertyValue<S>] = newValue[k as keyof PropertyValue<S>];