npm - @ryupold/vode - Versions diffs - 1.0.0 → 1.0.2 - Mend

@ryupold/vode 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -2,6 +2,127 @@
 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`.
+## Usage
+### ESM
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ESM Example</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module">
+        import { app, createState, BR, DIV, INPUT, SPAN } from 'https://unpkg.com/@ryupold/vode/dist/vode.min.mjs';
+        const appNode = document.getElementById('app');
+        const state = { counter: 0 };
+        app(appNode, state,
+            (s) => [DIV,
+                [INPUT, {
+                    type: 'button',
+                    onclick: { counter: s.counter + 1 },
+                    value: 'Click me',
+                }],
+                [BR],
+                [SPAN, { style: { color: 'red' } }, `${s.counter}`],
+            ]
+        );
+    </script>
+</body>
+</html>
+```
+### Classic
+Binds the library to the global `V` variable.
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Classic Script Example</title>
+    <script src="https://unpkg.com/@ryupold/vode/dist/vode.min.js"></script>
+</head>
+<body>
+    <div id="app"></div>
+    <script>
+        var appNode = document.getElementById('app');
+        var state = { counter: 0 };
+        V.app(appNode, state,
+            (s) => ["div",
+                ["input", {
+                    type: 'button',
+                    onclick: { counter: s.counter + 1 },
+                    value: 'Click me',
+                }
+                ],
+                ["br"],
+                ["span", { style: { color: 'red' } }, `${s.counter}`],
+            ]);
+    </script>
+</body>
+</html>
+```
+### NPM
+[![NPM](https://badge.fury.io/js/%40ryupold%2Fvode.svg)](https://www.npmjs.com/package/@ryupold/vode)
+```bash
+# npm
+npm install @ryupold/vode --save
+# yarn
+yarn add @ryupold/vode
+# bun
+bun add @ryupold/vode
+```
+index.html
+```html
+<html>
+<head>
+    <title>Vode Example</title>
+    <script type="module" src="main.js"></script>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
+```
+main.ts
+```ts
+import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
+const state = createState({
+    counter: 0,
+});
+type State = typeof state;
+const appNode = document.getElementById('app');
+app<State>(appNode, state,
+    (s: State) => [DIV,
+        [INPUT, {
+            type: 'button',
+            onclick: { counter: s.counter + 1 },
+            value: 'Click me',
+        }],
+        [BR],
+        [SPAN, { style: { color: 'red' } }, `${s.counter}`],
+    ]
+);
+```
 ## vode
 A `vode` is a representation of a virtual DOM node, which is a tree structure of HTML elements. It is written as tuple:
@@ -49,24 +170,24 @@ const CompFooBar = (s) => [DIV, { class: "container" },
         },
         // you can set the patch object directly for events
-        onmouseenter: {pointing: true},
-        onmouseleave: {pointing: false},
+        onmouseenter: { pointing: true },
+        onmouseleave: { pointing: false },
         // a patch can be an async function
         onmouseup: async (state, evt) => {
-            state.patch(loading: true);
+            state.patch({ loading: true });
             const result = await apiCall();
             return { title: result.data.title, loading: false };
         },
         // you can also use a generator function that yields patches
-        onmousedown: async function* (state, evt) => {
+        onmousedown: async function* (state, evt) {
             yield { loading: true };
             const result = await apiCall();
             yield {
-                body: result.data.body,
-                loading: false
+                body: result.data.body,
             };
+            return { loading: false };
         },
         class: { bar: s.pointing }
@@ -76,198 +197,104 @@ const CompFooBar = (s) => [DIV, { class: "container" },
 ### app
-`app` is a function that takes a HTML node, an initial state object, and a render function (`Component<State>`).
+`app` is a function that takes a HTML node, a state object, and a render function (`Component<State>`).
 ```ts
 const appNode = document.getElementById('APP-ID');
-const initialState = {
+const state = {
     counter: 0,
     pointing: false,
     loading: false,
     title: '',
     body: '',
 };
-const patch = app<State>(appNode, initialState, (s) => CompFooBar(s));
+const patch = app(appNode, state, (s) => CompFooBar(s));
 ```
-It will render the initial state and update the DOM when patches are applied to the patch function or via events. All elements returnded by the render function are placed under `appNode`.
-You can have multiple isolated `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.
-### memoization
-To optimize performance, you can use `memo(Array, Component)` to cache the result of a component function. This is useful when the component does not depend on the state or when the state does not change frequently.
+It will render the state and update the DOM when patches are applied to the `patch` function or via events. All elements returned by the render function are placed under `appNode`.
-```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;
-        },
-    )
-];
-```
+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.
-### state
-The state is a singleton object that can be updated. A re-render happens when a patch object is supplied to the patch function or via event.
+### state & patch
+The state object you pass to [`app`](#app) can be updated directly or via `patch`.
+During the call to `app`, the state object is bound to the vode app instance and becomes a singleton from its perspective.
+Also a `patch` function is added to the state object; it is the same function that is also returned by `app`.
+A re-render happens when a patch object is supplied to the `patch` function or via event.
-```ts
-// type safe way to create the state object
-const s = createState({
+```js
+const s = {
     counter: 0,
     pointing: false,
     loading: false,
     title: 'foo',
     body: '',
-});
-type State = typeof s;
+};
-app(appNode, s, ...); // after calling app(), the state object is bound to the appNode
+app(appNode, s, s => AppView(s));
+// after calling app(), the state object is bound to the appNode
+// update state directly as it is a singleton (silent patch)
+s.title = 'Hello World';
-s.title = 'Hello World'; // update state directly as it is a singleton (silent patch)
+// render patch
+s.patch({});
-s.patch({}); // render patch
+// render patch with a change that is applied to the state
+s.patch({ title: 'bar' });
-s.patch({ title: 'bar' }); // render patch with a change that is applied to the state
+// patch with a function that receives the state
+s.patch((s) => ({body: s.body + ' baz'}));
-s.patch((s) => ({body: s.body + ' baz'})); // render patch with a function that receives the state
+// patch with an async function that receives the state
+s.patch(async (s) => {
+    s.loading = true; // sometimes it is easier to combine a silent patch
+    s.patch({});      // with an empty render patch
+    const result = await apiCall();
+    return { title: result.title, body: result.body, loading: false };
+});
+// patch with a generator function that yields patches
 s.patch(async function*(s){
-    // you can also use a generator function that yields patches
     yield { loading: true };
     const result = await apiCall();
     yield { title: result.title, body: result.body };
     return { loading: false };
 });
-s.patch(null); // ignored, also: undefined, number, string, boolean, void
+// ignored, also: undefined, number, string, boolean, void
+s.patch(null);
-s.patch({ pointing: undefined }); // deletes the property from the state
+// setting a property in a patch to undefined deletes it from the state object
+s.patch({ pointing: undefined });
 ```
-## Install
-### ESM
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>ESM Example</title>
-</head>
-<body>
-    <div id="app"></div>
-    <script type="module">
-        import { app, createState, BR, DIV, INPUT, SPAN } from 'https://cdn.jsdelivr.net/npm/@ryupold/vode/dist/vode.min.mjs';
-        const appNode = document.getElementById('app');
-        app(appNode, { counter: 0 },
-            (s) => [DIV,
-                [INPUT, {
-                    type: 'button',
-                    onclick: { counter: s.counter + 1 },
-                    value: 'Click me',
-                }],
-                [BR],
-                [SPAN, { style: { color: 'red' } }, `${s.counter}`],
-            ]
-        );
-    </script>
-</body>
-</html>
-```
-### Classic
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Classic Script Example</title>
-    <script src="https://cdn.jsdelivr.net/npm/@ryupold/vode/dist/vode.min.js"></script>
-</head>
-<body>
-    <div id="app"></div>
-    <script>
-        const appNode = document.getElementById('app');
-        V.app(appNode, { counter: 0 },
-            (s) => ["DIV",
-                ["INPUT", {
-                    type: 'button',
-                    onclick: { counter: s.counter + 1 },
-                    value: 'Click me',
-                }
-                ],
-                ["BR"],
-                ["SPAN", { style: { color: 'red' } }, `${s.counter}`],
-            ]);
-    </script>
-</body>
-</html>
-```
-### NPM
-```bash
-# npm
-npm install @ryupold/vode --save
-# yarn
-yarn add @ryupold/vode
-# bun
-bun add @ryupold/vode
-```
-index.html
-```html
-<html>
-<head>
-    <title>Vode Example</title>
-    <script type="module" src="main.js"></script>
-</head>
-<body>
-    <div id="app"></div>
-</body>
-</html>
-```
+### 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.
-main.ts
 ```ts
-import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
-const init = createState({
-    counter: 0,
-});
-type State = typeof init;
+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;
+        },
+    )
+];
+```
-const appNode = document.getElementById('app');
+### Direct access to DOM elements
-app<State>(appNode, init,
-    (s: State) => [DIV,
-        [INPUT, {
-            type: 'button',
-            onclick: { counter: s.counter + 1 },
-            value: 'Click me',
-        }],
-        [BR],
-        [SPAN, { style: { color: 'red' } }, `${s.counter}`],
-    ]
-);
-```
+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
@@ -278,4 +305,4 @@ 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.
 ## License
-[MIT](./LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)

package/dist/vode.js CHANGED Viewed

@@ -248,13 +248,13 @@ var V = (() => {
     else if (props2) return [tag2, props2, ...children2];
     else return [tag2, ...children2];
   }
-  function app(container, initialState, dom, ...initialPatches) {
+  function app(container, state, dom, ...initialPatches) {
     if (!container) throw new Error("container must be a valid HTMLElement");
-    if (!initialState || typeof initialState !== "object") throw new Error("initialState must be an object");
+    if (!state || typeof state !== "object") throw new Error("given state must be an object");
     if (typeof dom !== "function") throw new Error("dom must be a function that returns a vode");
     const _vode = {};
     _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
-    Object.defineProperty(initialState, "patch", {
+    Object.defineProperty(state, "patch", {
       enumerable: false,
       configurable: true,
       writable: false,
@@ -299,7 +299,7 @@ var V = (() => {
           _vode.patch(action(_vode.state));
         } else {
           _vode.stats.renderPatchCount++;
-          _vode.q = mergeState(_vode.q || {}, action);
+          _vode.q = mergeState(_vode.q || {}, action, false);
           if (!_vode.isRendering) _vode.render();
         }
       }
@@ -313,7 +313,7 @@ var V = (() => {
         _vode.isRendering = true;
         const sw = Date.now();
         try {
-          _vode.state = mergeState(_vode.state, _vode.q);
+          _vode.state = mergeState(_vode.state, _vode.q, true);
           _vode.q = null;
           _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
         } finally {
@@ -326,14 +326,14 @@ var V = (() => {
         }
       })
     });
-    _vode.patch = initialState.patch;
-    _vode.state = initialState;
+    _vode.patch = state.patch;
+    _vode.state = state;
     _vode.q = null;
     const root = container;
     root._vode = _vode;
-    const initialVode = dom(initialState);
+    const initialVode = dom(state);
     _vode.vode = initialVode;
-    _vode.vode = render(initialState, _vode.patch, container, 0, void 0, initialVode);
+    _vode.vode = render(state, _vode.patch, container, 0, void 0, initialVode);
     for (const effect of initialPatches) {
       _vode.patch(effect);
     }
@@ -411,7 +411,7 @@ var V = (() => {
   function childrenStart(vode2) {
     return props(vode2) ? 2 : 1;
   }
-  function mergeState(target, source) {
+  function mergeState(target, source, allowDeletion) {
     if (!source) return target;
     for (const key in source) {
       const value = source[key];
@@ -423,18 +423,18 @@ var V = (() => {
           } else if (value instanceof Date && targetValue !== value) {
             target[key] = new Date(value);
           } else {
-            if (Array.isArray(targetValue)) target[key] = mergeState({}, value);
-            else if (typeof targetValue === "object") mergeState(target[key], value);
-            else target[key] = mergeState({}, value);
+            if (Array.isArray(targetValue)) target[key] = mergeState({}, value, allowDeletion);
+            else if (typeof targetValue === "object") mergeState(target[key], value, allowDeletion);
+            else target[key] = mergeState({}, value, allowDeletion);
           }
         } else if (Array.isArray(value)) {
           target[key] = [...value];
         } else if (value instanceof Date) {
           target[key] = new Date(value);
         } else {
-          target[key] = mergeState({}, value);
+          target[key] = mergeState({}, value, allowDeletion);
         }
-      } else if (value === void 0) {
+      } else if (value === void 0 && allowDeletion) {
         delete target[key];
       } else {
         target[key] = value;

package/dist/vode.min.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var V=(()=>{var N=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var k=(t,o)=>{for(var n in o)N(t,n,{get:o[n],enumerable:!0})},H=(t,o,n,r)=>{if(o&&typeof o=="object"\|\|typeof o=="function")for(let e of G(o))!V.call(t,e)&&e!==n&&N(t,e,{get:()=>o[e],enumerable:!(r=v(o,e))\|\|r.enumerable});return t};var U=t=>H(N({},"__esModule",{value:!0}),t);var kn={};k(kn,{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:()=>Do,FETILE:()=>bo,FETURBULENCE:()=>Io,FIELDSET:()=>Dt,FIGCAPTION:()=>bt,FIGURE:()=>It,FILTER:()=>Fo,FOOTER:()=>Ft,FOREIGNOBJECT:()=>vo,FORM:()=>vt,G:()=>Go,H1:()=>Gt,H2:()=>Vt,H3:()=>kt,H4:()=>Ht,H5:()=>Ut,H6:()=>jt,HEAD:()=>Bt,HEADER:()=>_t,HGROUP:()=>Kt,HR:()=>Xt,HTML:()=>qt,I:()=>Yt,IFRAME:()=>Wt,IMAGE:()=>Vo,IMG:()=>$t,INPUT:()=>Jt,INS:()=>Qt,KBD:()=>zt,LABEL:()=>Zt,LEGEND:()=>wt,LI:()=>te,LINE:()=>ko,LINEARGRADIENT:()=>Ho,LINK:()=>ee,MACTION:()=>cn,MAIN:()=>oe,MAP:()=>ne,MARK:()=>re,MARKER:()=>Uo,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:()=>Dn,MTEXT:()=>bn,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:()=>De,SPAN:()=>be,STOP:()=>Qo,STRONG:()=>Ie,STYLE:()=>Fe,SUB:()=>ve,SUMMARY:()=>Ge,SUP:()=>Ve,SVG:()=>zo,SWITCH:()=>Zo,SYMBOL:()=>wo,TABLE:()=>ke,TBODY:()=>He,TD:()=>Ue,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:()=>K,child:()=>$,childCount:()=>W,children:()=>A,childrenStart:()=>C,createPatch:()=>B,createState:()=>j,htmlToVode:()=>Vn,memo:()=>X,mergeClass:()=>Y,props:()=>d,tag:()=>q,vode:()=>_});function j(t){return t}function B(t){return t}function _(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 K(t,o,n,...r){if(!t)throw new Error("container must be a valid HTMLElement");if(!o\|\|typeof o!="object")throw new Error("initialState 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 c=>{if(!(!c\|\|typeof c!="function"&&typeof c!="object"))if(e.stats.patchCount++,c?.next){let l=c;e.stats.liveEffectCount++;try{let i=await l.next();for(;i.done===!1;){e.stats.liveEffectCount++;try{e.patch(i.value),i=await l.next()}finally{e.stats.liveEffectCount--}}e.patch(i.value)}finally{e.stats.liveEffectCount--}}else if(c.then){e.stats.liveEffectCount++;try{let l=await c;e.patch(l)}finally{e.stats.liveEffectCount--}}else Array.isArray(c)?typeof c[0]=="function"?c.length>1?e.patch(c[0](e.state,...c.slice(1))):e.patch(c[0](e.state)):e.stats.patchCount--:typeof c=="function"?e.patch(c(e.state)):(e.stats.renderPatchCount++,e.q=u(e.q\|\|{},c),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 c=Date.now();try{e.state=u(e.state,e.q),e.q=null,e.vode=P(e.state,e.patch,t,0,e.vode,n(e.state))}finally{e.isRendering=!1,e.stats.renderCount++,e.stats.lastRenderTime=Date.now()-c,e.q&&e.render()}})}),e.patch=o.patch,e.state=o,e.q=null;let s=t;s._vode=e;let a=n(o);e.vode=a,e.vode=P(o,e.patch,t,0,void 0,a);for(let c of r)e.patch(c);return e.patch}function X(t,o){return o.__memo=t,o}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 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 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){if(!o)return t;for(let n in o){let r=o[n];if(r&&typeof r=="object"){let e=t[n];e?Array.isArray(r)?t[n]=[...r]:r instanceof Date&&e!==r?t[n]=new Date(r):Array.isArray(e)?t[n]=u({},r):typeof e=="object"?u(t[n],r):t[n]=u({},r):Array.isArray(r)?t[n]=[...r]:r instanceof Date?t[n]=new Date(r):t[n]=u({},r)}else r===void 0?delete t[n]:t[n]=r}return t}function P(t,o,n,r,e,s,a){s=O(t,s,e);let c=!s\|\|typeof s=="number"\|\|typeof s=="boolean";if(s===e\|\|!e&&c)return e;let l=e?.nodeType===Node.TEXT_NODE,i=l?e:e?.node;if(c){i?.onUnmount&&o(i.onUnmount(i)),i?.remove();return}let E=!c&&Q(s),m=!c&&J(s),M=!!s&&typeof s!="string"&&!!(s?.node\|\|s?.nodeType===Node.TEXT_NODE);if(!E&&!m&&!M&&!e)throw new Error("Invalid vode: "+typeof s+" "+JSON.stringify(s));if(M&&E?s=s.wholeText:M&&m&&(s=[...s]),l&&E)return i.nodeValue!==s&&(i.nodeValue=s),e;if(E&&(!i\|\|!l)){let T=document.createTextNode(s);return i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(T)):n.childNodes[r]?n.insertBefore(T,n.childNodes[r]):n.appendChild(T),T}if(m&&(!i\|\|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),i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(T)):n.childNodes[r]?n.insertBefore(T,n.childNodes[r]):n.appendChild(T);let S=A(s);if(S)for(let f=0;f<S.length;f++){let p=S[f],x=P(t,o,T,f,void 0,p,a);s[g?f+2:f+1]=x}return T.onMount&&o(T.onMount(T)),s}if(!l&&m&&e[0]===s[0]){a=a\|\|s[0]==="svg",s.node=i;let T=s,y=e,g=!1;if(T[1]?.__memo){let p=T[1];if(T[1]=O(t,T[1],y[1]),p!==T[1]){let x=d(s);R(o,i,d(e),x,a),g=!!x}}else{let p=d(s);R(o,i,d(e),p,a),g=!!p}let S=A(s),f=A(e);if(S){for(let p=0;p<S.length;p++){let x=S[p],F=f&&f[p],D=P(t,o,i,p,F,x,a);D&&(s[g?p+2:p+1]=D)}for(let p=S.length;f&&p<f.length;p++)f[p]?.node?f[p].node.remove():f[p]?.nodeType===Node.TEXT_NODE&&f[p].remove()}for(let p=S?.length\|\|0;p<f?.length;p++)f[p]?.node?f[p].node.remove():f[p]?.nodeType===Node.TEXT_NODE&&f[p].remove();return s}}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,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 c=0;c<r.length;c++)if(r[c]!==e[c]){a=!1;break}if(a)return n}let s=b(o,t);return typeof s=="object"&&(s.__memo=o?.__memo),s}function b(t,o){return typeof t=="function"?b(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],c=r?.[s];a!==c&&(r?r[s]=h(t,o,s,a,c,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 c=e;a=l=>t([c,l])}else if(Array.isArray(e)){let c=e,l=e[0];c.length>1?a=()=>t([l,...c.slice(1)]):a=i=>t([l,i])}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",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",Dt="fieldset",bt="figcaption",It="figure",Ft="footer",vt="form",Gt="h1",Vt="h2",kt="h3",Ht="h4",Ut="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",De="source",be="span",Ie="strong",Fe="style",ve="sub",Ge="summary",Ve="sup",ke="table",He="tbody",Ue="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",Do="feSpotLight",bo="feTile",Io="feTurbulence",Fo="filter",vo="foreignObject",Go="g",Vo="image",ko="line",Ho="linearGradient",Uo="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",Dn="mtd",bn="mtext",In="mtr",Fn="munder",vn="munderover",Gn="semantics";function Vn(t){let o=document.createElement("div");o.innerHTML=t.trim();let n=[];for(let r of o.childNodes){let e=I(r);e!=null&&n.push(e)}return n}function I(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=I(n);r&&(typeof r!="string"\|\|r.length>0)&&o.push(r)}return o}return U(kn);})();
1	+ "use strict";var V=(()=>{var N=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var k=(t,o)=>{for(var n in o)N(t,n,{get:o[n],enumerable:!0})},H=(t,o,n,s)=>{if(o&&typeof o=="object"\|\|typeof o=="function")for(let e of G(o))!V.call(t,e)&&e!==n&&N(t,e,{get:()=>o[e],enumerable:!(s=v(o,e))\|\|s.enumerable});return t};var U=t=>H(N({},"__esModule",{value:!0}),t);var kn={};k(kn,{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:()=>Io,FETURBULENCE:()=>Do,FIELDSET:()=>bt,FIGCAPTION:()=>It,FIGURE:()=>Dt,FILTER:()=>Fo,FOOTER:()=>Ft,FOREIGNOBJECT:()=>vo,FORM:()=>vt,G:()=>Go,H1:()=>Gt,H2:()=>Vt,H3:()=>kt,H4:()=>Ht,H5:()=>Ut,H6:()=>jt,HEAD:()=>Bt,HEADER:()=>_t,HGROUP:()=>Kt,HR:()=>Xt,HTML:()=>qt,I:()=>Yt,IFRAME:()=>Wt,IMAGE:()=>Vo,IMG:()=>$t,INPUT:()=>Jt,INS:()=>Qt,KBD:()=>zt,LABEL:()=>Zt,LEGEND:()=>wt,LI:()=>te,LINE:()=>ko,LINEARGRADIENT:()=>Ho,LINK:()=>ee,MACTION:()=>cn,MAIN:()=>oe,MAP:()=>ne,MARK:()=>re,MARKER:()=>Uo,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:()=>In,MTR:()=>Dn,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:()=>Ie,STOP:()=>Qo,STRONG:()=>De,STYLE:()=>Fe,SUB:()=>ve,SUMMARY:()=>Ge,SUP:()=>Ve,SVG:()=>zo,SWITCH:()=>Zo,SYMBOL:()=>wo,TABLE:()=>ke,TBODY:()=>He,TD:()=>Ue,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:()=>K,child:()=>$,childCount:()=>W,children:()=>A,childrenStart:()=>C,createPatch:()=>B,createState:()=>j,htmlToVode:()=>Vn,memo:()=>X,mergeClass:()=>Y,props:()=>d,tag:()=>q,vode:()=>_});function j(t){return t}function B(t){return t}function _(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 K(t,o,n,...s){if(!t)throw new Error("container must be a valid HTMLElement");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 c=>{if(!(!c\|\|typeof c!="function"&&typeof c!="object"))if(e.stats.patchCount++,c?.next){let l=c;e.stats.liveEffectCount++;try{let i=await l.next();for(;i.done===!1;){e.stats.liveEffectCount++;try{e.patch(i.value),i=await l.next()}finally{e.stats.liveEffectCount--}}e.patch(i.value)}finally{e.stats.liveEffectCount--}}else if(c.then){e.stats.liveEffectCount++;try{let l=await c;e.patch(l)}finally{e.stats.liveEffectCount--}}else Array.isArray(c)?typeof c[0]=="function"?c.length>1?e.patch(c[0](e.state,...c.slice(1))):e.patch(c[0](e.state)):e.stats.patchCount--:typeof c=="function"?e.patch(c(e.state)):(e.stats.renderPatchCount++,e.q=u(e.q\|\|{},c,!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 c=Date.now();try{e.state=u(e.state,e.q,!0),e.q=null,e.vode=P(e.state,e.patch,t,0,e.vode,n(e.state))}finally{e.isRendering=!1,e.stats.renderCount++,e.stats.lastRenderTime=Date.now()-c,e.q&&e.render()}})}),e.patch=o.patch,e.state=o,e.q=null;let r=t;r._vode=e;let a=n(o);e.vode=a,e.vode=P(o,e.patch,t,0,void 0,a);for(let c of s)e.patch(c);return e.patch}function X(t,o){return o.__memo=t,o}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 n=t.split(" "),s=o.split(" "),e=new Set([...n,...s]);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 s of o)n[s]=!0;return n}else if(Array.isArray(t)&&typeof o=="object"){let n={};for(let s of t)n[s]=!0;for(let s of Object.keys(o))n[s]=o[s];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 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,n){if(!o)return t;for(let s in o){let e=o[s];if(e&&typeof e=="object"){let r=t[s];r?Array.isArray(e)?t[s]=[...e]:e instanceof Date&&r!==e?t[s]=new Date(e):Array.isArray(r)?t[s]=u({},e,n):typeof r=="object"?u(t[s],e,n):t[s]=u({},e,n):Array.isArray(e)?t[s]=[...e]:e instanceof Date?t[s]=new Date(e):t[s]=u({},e,n)}else e===void 0&&n?delete t[s]:t[s]=e}return t}function P(t,o,n,s,e,r,a){r=O(t,r,e);let c=!r\|\|typeof r=="number"\|\|typeof r=="boolean";if(r===e\|\|!e&&c)return e;let l=e?.nodeType===Node.TEXT_NODE,i=l?e:e?.node;if(c){i?.onUnmount&&o(i.onUnmount(i)),i?.remove();return}let E=!c&&Q(r),m=!c&&J(r),M=!!r&&typeof r!="string"&&!!(r?.node\|\|r?.nodeType===Node.TEXT_NODE);if(!E&&!m&&!M&&!e)throw new Error("Invalid vode: "+typeof r+" "+JSON.stringify(r));if(M&&E?r=r.wholeText:M&&m&&(r=[...r]),l&&E)return i.nodeValue!==r&&(i.nodeValue=r),e;if(E&&(!i\|\|!l)){let T=document.createTextNode(r);return i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(T)):n.childNodes[s]?n.insertBefore(T,n.childNodes[s]):n.appendChild(T),T}if(m&&(!i\|\|l\|\|e[0]!==r[0])){a=a\|\|r[0]==="svg";let T=a?document.createElementNS("http://www.w3.org/2000/svg",r[0]):document.createElement(r[0]);r.node=T;let y=r;1 in y&&(y[1]=O(t,y[1],void 0));let g=d(r);R(o,T,void 0,g,a),i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(T)):n.childNodes[s]?n.insertBefore(T,n.childNodes[s]):n.appendChild(T);let S=A(r);if(S)for(let f=0;f<S.length;f++){let p=S[f],x=P(t,o,T,f,void 0,p,a);r[g?f+2:f+1]=x}return T.onMount&&o(T.onMount(T)),r}if(!l&&m&&e[0]===r[0]){a=a\|\|r[0]==="svg",r.node=i;let T=r,y=e,g=!1;if(T[1]?.__memo){let p=T[1];if(T[1]=O(t,T[1],y[1]),p!==T[1]){let x=d(r);R(o,i,d(e),x,a),g=!!x}}else{let p=d(r);R(o,i,d(e),p,a),g=!!p}let S=A(r),f=A(e);if(S){for(let p=0;p<S.length;p++){let x=S[p],F=f&&f[p],b=P(t,o,i,p,F,x,a);b&&(r[g?p+2:p+1]=b)}for(let p=S.length;f&&p<f.length;p++)f[p]?.node?f[p].node.remove():f[p]?.nodeType===Node.TEXT_NODE&&f[p].remove()}for(let p=S?.length\|\|0;p<f?.length;p++)f[p]?.node?f[p].node.remove():f[p]?.nodeType===Node.TEXT_NODE&&f[p].remove();return r}}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,n){if(typeof o!="function")return o;let s=o?.__memo,e=n?.__memo;if(Array.isArray(s)&&Array.isArray(e)&&s.length===e.length){let a=!0;for(let c=0;c<s.length;c++)if(s[c]!==e[c]){a=!1;break}if(a)return n}let r=I(o,t);return typeof r=="object"&&(r.__memo=o?.__memo),r}function I(t,o){return typeof t=="function"?I(t(o),o):t}function R(t,o,n,s,e){if(!(!s&&!n)){if(n)for(let r in n){let a=n[r],c=s?.[r];a!==c&&(s?s[r]=h(t,o,r,a,c,e):h(t,o,r,a,void 0,e))}if(s&&n){for(let r in s)if(!(r in n)){let a=s[r];s[r]=h(t,o,r,void 0,a,e)}}else if(s)for(let r in s){let a=s[r];s[r]=h(t,o,r,void 0,a,e)}}}function h(t,o,n,s,e,r){if(n==="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(n==="class")if(r)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 c=e;a=l=>t([c,l])}else if(Array.isArray(e)){let c=e,l=e[0];c.length>1?a=()=>t([l,...c.slice(1)]):a=i=>t([l,i])}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",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",It="figcaption",Dt="figure",Ft="footer",vt="form",Gt="h1",Vt="h2",kt="h3",Ht="h4",Ut="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",Ie="span",De="strong",Fe="style",ve="sub",Ge="summary",Ve="sup",ke="table",He="tbody",Ue="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",Io="feTile",Do="feTurbulence",Fo="filter",vo="foreignObject",Go="g",Vo="image",ko="line",Ho="linearGradient",Uo="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",In="mtext",Dn="mtr",Fn="munder",vn="munderover",Gn="semantics";function Vn(t){let o=document.createElement("div");o.innerHTML=t.trim();let n=[];for(let s of o.childNodes){let e=D(s);e!=null&&n.push(e)}return n}function D(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 s of t.attributes)n[s.name]=s.value;o.push(n)}for(let n of t.childNodes){let s=D(n);s&&(typeof s!="string"\|\|s.length>0)&&o.push(s)}return o}return U(kn);})();

package/dist/vode.min.mjs CHANGED Viewed

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

package/dist/vode.mjs CHANGED Viewed

@@ -15,16 +15,16 @@ function vode(tag, props, ...children) {
   else
     return [tag, ...children];
 }
-function app(container, initialState, dom, ...initialPatches) {
+function app(container, state, dom, ...initialPatches) {
   if (!container)
     throw new Error("container must be a valid HTMLElement");
-  if (!initialState || typeof initialState !== "object")
-    throw new Error("initialState must be an object");
+  if (!state || typeof state !== "object")
+    throw new Error("given state must be an object");
   if (typeof dom !== "function")
     throw new Error("dom must be a function that returns a vode");
   const _vode = {};
   _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
-  Object.defineProperty(initialState, "patch", {
+  Object.defineProperty(state, "patch", {
     enumerable: false,
     configurable: true,
     writable: false,
@@ -71,7 +71,7 @@ function app(container, initialState, dom, ...initialPatches) {
         _vode.patch(action(_vode.state));
       } else {
         _vode.stats.renderPatchCount++;
-        _vode.q = mergeState(_vode.q || {}, action);
+        _vode.q = mergeState(_vode.q || {}, action, false);
         if (!_vode.isRendering)
           _vode.render();
       }
@@ -87,7 +87,7 @@ function app(container, initialState, dom, ...initialPatches) {
       _vode.isRendering = true;
       const sw = Date.now();
       try {
-        _vode.state = mergeState(_vode.state, _vode.q);
+        _vode.state = mergeState(_vode.state, _vode.q, true);
         _vode.q = null;
         _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
       } finally {
@@ -100,14 +100,14 @@ function app(container, initialState, dom, ...initialPatches) {
       }
     })
   });
-  _vode.patch = initialState.patch;
-  _vode.state = initialState;
+  _vode.patch = state.patch;
+  _vode.state = state;
   _vode.q = null;
   const root = container;
   root._vode = _vode;
-  const initialVode = dom(initialState);
+  const initialVode = dom(state);
   _vode.vode = initialVode;
-  _vode.vode = render(initialState, _vode.patch, container, 0, undefined, initialVode);
+  _vode.vode = render(state, _vode.patch, container, 0, undefined, initialVode);
   for (const effect of initialPatches) {
     _vode.patch(effect);
   }
@@ -187,7 +187,7 @@ function child(vode2, index) {
 function childrenStart(vode2) {
   return props(vode2) ? 2 : 1;
 }
-function mergeState(target, source) {
+function mergeState(target, source, allowDeletion) {
   if (!source)
     return target;
   for (const key in source) {
@@ -201,20 +201,20 @@ function mergeState(target, source) {
           target[key] = new Date(value);
         } else {
           if (Array.isArray(targetValue))
-            target[key] = mergeState({}, value);
+            target[key] = mergeState({}, value, allowDeletion);
           else if (typeof targetValue === "object")
-            mergeState(target[key], value);
+            mergeState(target[key], value, allowDeletion);
           else
-            target[key] = mergeState({}, value);
+            target[key] = mergeState({}, value, allowDeletion);
         }
       } else if (Array.isArray(value)) {
         target[key] = [...value];
       } else if (value instanceof Date) {
         target[key] = new Date(value);
       } else {
-        target[key] = mergeState({}, value);
+        target[key] = mergeState({}, value, allowDeletion);
       }
-    } else if (value === undefined) {
+    } else if (value === undefined && allowDeletion) {
       delete target[key];
     } else {
       target[key] = value;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.0.0",
+    "version": "1.0.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.18",
-        "esbuild": "^0.25.8",
-        "typescript": "^5.8.3"
+        "bun": "^1.2.21",
+        "esbuild": "^0.25.9",
+        "typescript": "^5.9.2"
     }
 }

package/src/vode.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 export type Vode<S> = FullVode<S> | JustTagVode | NoPropsVode<S>;
 export type FullVode<S> = [tag: Tag, props: Props<S>, ...children: ChildVode<S>[]];
-export type NoPropsVode<S> = [tag: Tag, ...children: ChildVode<S>[]] | string[];
+export type NoPropsVode<S> = [tag: Tag, ...children: ChildVode<S>[]] | (TextVode[]);
 export type JustTagVode = [tag: Tag];
 export type ChildVode<S> = Vode<S> | TextVode | NoVode | Component<S>;
-export type TextVode = string;
+export type TextVode = string & {};
 export type NoVode = undefined | null | number | boolean | bigint | void;
 export type AttachedVode<S> = Vode<S> & { node: ChildNode, id?: string } | Text & { node?: never, id?: never };
-export type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap & MathMLElementTagNameMap);
+export type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap & MathMLElementTagNameMap) | (string & {});
 export type Component<S> = (s: S) => ChildVode<S>;
 export type Patch<S> =
@@ -75,10 +75,10 @@ export type ContainerNode<S> = HTMLElement & {
      * it contains all necessary stuff for the vode app to function.
      * delete it to clear all resources of the vode app, or remove the container itself */
     _vode: {
-        state: PatchableState<S>,
-        vode: AttachedVode<S>,
-        patch: Dispatch<S>,
-        render: () => void,
+        state: PatchableState<S>,
+        vode: AttachedVode<S>,
+        patch: Dispatch<S>,
+        render: () => void,
         q: object | null,  // next patch aggregate to be applied
         isRendering: boolean,
         /** stats about the overall patches & last render time */
@@ -92,7 +92,7 @@ export type ContainerNode<S> = HTMLElement & {
     }
 };
-/** create a state object used as initial state for `app()`. it is updated with `PatchableState.patch()` using `merge()` */
+/** create a state object used as state for `app()`. it is updated with `PatchableState.patch()` using `merge()` */
 export function createState<S extends object | unknown>(state: S): PatchableState<S> { return state as PatchableState<S>; }
 /** type safe way to create a patch. useful for type inference and autocompletion. */
@@ -114,20 +114,20 @@ export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Pro
 /** create a vode app inside a container element
  * @param container will use this container as root and places the result of the dom function and further renderings in it
- * @param initialState
+ * @param state the state object that is used as singleton state bound to the vode app and is updated with `patch()`
  * @param dom creates the initial dom from the state and is called on every render
  * @param initialPatches variadic list of patches that are applied after the first render
  * @returns a patch function that can be used to update the state
  */
-export function app<S extends object | unknown>(container: HTMLElement, initialState: Omit<S, "patch">, dom: Component<S>, ...initialPatches: Patch<S>[]) {
+export function app<S extends object | unknown>(container: HTMLElement, state: Omit<S, "patch">, dom: Component<S>, ...initialPatches: Patch<S>[]) {
     if (!container) throw new Error("container must be a valid HTMLElement");
-    if (!initialState || typeof initialState !== "object") throw new Error("initialState must be an object");
+    if (!state || typeof state !== "object") throw new Error("given state must be an object");
     if (typeof dom !== "function") throw new Error("dom must be a function that returns a vode");
     const _vode = {} as ContainerNode<S>["_vode"];
     _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
-    Object.defineProperty(initialState, "patch", {
+    Object.defineProperty(state, "patch", {
         enumerable: false, configurable: true,
         writable: false, value: async (action: Patch<S>) => {
             if (!action || (typeof action !== "function" && typeof action !== "object")) return;
@@ -171,7 +171,7 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
                 _vode.patch!((<EffectFunction<S>>action)(_vode.state));
             } else {
                 _vode.stats.renderPatchCount++;
-                _vode.q = mergeState(_vode.q || {}, action);
+                _vode.q = mergeState(_vode.q || {}, action, false);
                 if (!_vode.isRendering) _vode.render!();
             }
         }
@@ -184,7 +184,7 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
             _vode.isRendering = true;
             const sw = Date.now();
             try {
-                _vode.state = mergeState(_vode.state, _vode.q);
+                _vode.state = mergeState(_vode.state, _vode.q, true);
                 _vode.q = null;
                 _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state))!;
             } finally {
@@ -198,16 +198,16 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
         })
     });
-    _vode.patch = (<PatchableState<S>>initialState).patch;
-    _vode.state = <PatchableState<S>>initialState;
+    _vode.patch = (<PatchableState<S>>state).patch;
+    _vode.state = <PatchableState<S>>state;
     _vode.q = null;
     const root = container as ContainerNode<S>;
     root._vode = _vode;
-    const initialVode = dom(<S>initialState);
+    const initialVode = dom(<S>state);
     _vode.vode = <AttachedVode<S>>initialVode;
-    _vode.vode = render(<S>initialState, _vode.patch!, container, 0, undefined, initialVode)!;
+    _vode.vode = render(<S>state, _vode.patch!, container, 0, undefined, initialVode)!;
     for (const effect of initialPatches) {
         _vode.patch!(effect);
@@ -321,7 +321,7 @@ export function childrenStart<S>(vode: ChildVode<S> | AttachedVode<S>): number {
     return props(vode) ? 2 : 1;
 }
-function mergeState(target: any, source: any) {
+function mergeState(target: any, source: any, allowDeletion: boolean) {
     if (!source) return target;
     for (const key in source) {
@@ -334,19 +334,19 @@ function mergeState(target: any, source: any) {
                 } else if (value instanceof Date && targetValue !== value) {
                     target[key] = new Date(value);
                 } else {
-                    if (Array.isArray(targetValue)) target[key] = mergeState({}, value);
-                    else if (typeof targetValue === "object") mergeState(target[key], value);
-                    else target[key] = mergeState({}, value);
+                    if (Array.isArray(targetValue)) target[key] = mergeState({}, value, allowDeletion);
+                    else if (typeof targetValue === "object") mergeState(target[key], value, allowDeletion);
+                    else target[key] = mergeState({}, value, allowDeletion);
                 }
             } else if (Array.isArray(value)) {
                 target[key] = [...value];
             } else if (value instanceof Date) {
                 target[key] = new Date(value);
             } else {
-                target[key] = mergeState({}, value);
+                target[key] = mergeState({}, value, allowDeletion);
             }
         }
-        else if (value === undefined) {
+        else if (value === undefined && allowDeletion) {
             delete target[key];
         }
         else {