npm - @ryupold/vode - Versions diffs - 1.1.7 → 1.1.8 - Mend

@ryupold/vode 1.1.7 → 1.1.8

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 (9) hide show

package/README.md CHANGED Viewed

@@ -4,7 +4,7 @@
 [![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)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.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`.
@@ -23,7 +23,7 @@ It can be used to create single page applications or isolated components with co
 <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';
+        import { app, BR, DIV, INPUT, SPAN } from 'https://unpkg.com/@ryupold/vode/dist/vode.min.mjs';
         const appNode = document.getElementById('app');
@@ -228,7 +228,8 @@ 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.
+It is used to render the UI based on the current state.
+A new **vode** must be created on each render, otherwise it would be skipped which could lead to unexpected results. If you seek to improve render performance have a look at the [`memo`](#memoization) function.
 ```typescript
 // A full vode has a tag, properties, and children. props and children are optional.
@@ -312,6 +313,7 @@ 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>`).
 ```typescript
 const containerNode = document.getElementById('ANY-ELEMENT');
 const state = {
@@ -321,48 +323,28 @@ const state = {
     title: '',
     body: '',
 };
-const patch = app(containerNode, state, (s) => CompFooBar(s));
+const patch = app(
+    containerNode,
+    state,
+    (s) =>
+        [DIV,
+            [P, { style: { color: 'red' } }, `${s.counter}`],
+            [BUTTON, { onclick: () => ({ counter: s.counter + 1 }) }, 'Click me'],
+        ]
+    );
 ```
 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.
-#### 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:
-```typescript
-export function IsolatedVodeApp<OuterState, InnerState>(
-    tag: Tag,
-    state: InnerState,
-    View: (ins: InnerState) => Vode<InnerState>,
-): ChildVode<OuterState> {
-    return memo<OuterState>([],
-        () => [tag,
-            {
-                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.
-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`.
 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.
+When an object is passed to `patch`, its properties are incrementally deep merged onto the state object.
 ```js
 const s = {
@@ -376,7 +358,7 @@ const s = {
 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)
+// update state directly as it is a singleton (silent patch, no render)
 s.title = 'Hello World';
 // render patch
@@ -396,7 +378,7 @@ s.patch(async (s) => {
     return { title: result.title, body: result.body, loading: false };
 });
-// patch with a generator function that yields patches
+// patch with an async generator function that yields patches
 s.patch(async function*(s){
     yield { loading: true };
     const result = await apiCall();
@@ -420,12 +402,12 @@ 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.
+To optimize performance, you can use `memo(depsArray, Component | PropsFactory)` to cache the result of a component function. If the array of dependencies does not change (shallow compare), the component function is not called again, indicating for the render to skip this node and all its children.
+This is useful when the creation of the vode is expensive or the rendering of it takes a significant amount of time.
 ```typescript
-const CompMemoFooBar = (s) =>
+const CompMemoList = (s) =>
     [DIV, { class: "container" },
         [H1, "Hello World"],
         [BR],
@@ -447,6 +429,18 @@ const CompMemoFooBar = (s) =>
         )
     ];
 ```
+Passing an empty dependency array means the component is only rendered once and then ignored.
+You can also pass a function that returns the Props object to memoize the attributes.
+```typescript
+const CompMemoProps = (s) => [DIV,
+    memo([s.isActive], (s) => ({
+        class: s.isActive ? 'active' : 'inactive'
+    })),
+    "Content"
+];
+```
 ### helper functions
@@ -456,8 +450,8 @@ The library provides some helper functions to help with certain situations.
 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 }
+mergeClass('foo', ['baz', 'bar']);  // -> 'foo bar baz'
+mergeClass(['foo'], { bar: true, baz: false }); // -> 'foo bar'
 const myVode = [DIV, { class: 'foo' }, [SPAN, 'hello'], [STRONG, 'world']];
@@ -475,19 +469,79 @@ Additionally to the standard HTML attributes, you can define 2 special event att
 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
+> Be aware that `onMount/onUnmount` are only called when an 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
+### advanced usage
+#### 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.
+#### nested vode-app
+It is possible to nest vode-apps inside vode-apps, but the library is not opinionated on how you do that.
+One can imagine this type of component:
+```typescript
+export function IsolatedVodeApp<OuterState, InnerState>(
+    tag: Tag,
+    state: InnerState,
+    View: (ins: InnerState) => Vode<InnerState>,
+): ChildVode<OuterState> {
+    return memo<OuterState>([],
+        () => [tag,
+            {
+                onMount: (s: OuterState, container: Element) => {
+                    app<InnerState>(container, state, View);
+                }
+            }
+        ]
+    );
+}
+```
+The memo with empty dependency array 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.
+### performance
+There are some metrics available on the appNode.
+They are updated on each render.
+```typescript
+app<State>(appNode, state, (s) => ...);
+console.log(appNode._vode.stats);
+```
+```javascript
+{
+    // number of patches applied to the state overall
+    patchCount: 100,
+    // number of render-patches (objects) overall
+    renderPatchCount: 50,
+    // number of renders performed overall
+    renderCount: 40,
+    // number of active (async) running patches (effects)
+    liveEffectCount: 0,
+    // time the last render took in milliseconds
+    lastRenderTime: 1,
+}
+```
+The library is optimized for small to medium sized applications. In my own tests it could easily handle sites with tens of thousands of elements. Smart usage of `memo` can help to optimize performance further. You can find a comparison of the performance with other libraries [here](https://krausest.github.io/js-framework-benchmark/current.html).
+This being said, the library does not focus on performance. It is designed to feel nice while coding, by providing a primitive that is simple to bent & form. I want the mental model to be easy to grasp and the API surface to be small so that a developer can focus on building a web application instead of learning the framework and get to a flow state as quick as possible.
+## Thanks
-I was delighted by the simplicity of [hyperapp](https://github.com/jorgebucaran/hyperapp),
-which inspired me to create this library.
+The simplicity of [hyperapp](https://github.com/jorgebucaran/hyperapp) demonstrated that powerful frameworks don't require complexity, which inspired this library's design philosophy.
-Not planning to add more features, just keeping it simple and easy.
+Not planning to add more features, just keeping it simple and easy (and hopefully bug free).
 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)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)

package/dist/vode.js CHANGED Viewed

@@ -237,15 +237,15 @@ var V = (() => {
   // src/vode.ts
   function vode(tag2, props2, ...children2) {
-    if (!tag2) throw new Error("tag must be a string or vode");
+    if (!tag2) throw new Error("first argument to vode() must be a tag name or a vode");
     if (Array.isArray(tag2)) return tag2;
     else if (props2) return [tag2, props2, ...children2];
     else return [tag2, ...children2];
   }
   function app(container, state, dom, ...initialPatches) {
-    if (!container?.parentElement) throw new Error("container must be a valid HTMLElement inside the <html></html> document");
-    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");
+    if (!container?.parentElement) throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
+    if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
+    if (typeof dom !== "function") throw new Error("third argument to app() must be a function that returns a vode");
     const _vode = {};
     _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
     Object.defineProperty(state, "patch", {
@@ -379,10 +379,13 @@ var V = (() => {
     }
   }
   function memo(compare, componentOrProps) {
+    if (!compare || !Array.isArray(compare)) throw new Error("first argument to memo() must be an array of values to compare");
+    if (typeof componentOrProps !== "function") throw new Error("second argument to memo() must be a function that returns a vode or props object");
     componentOrProps.__memo = compare;
     return componentOrProps;
   }
   function createState(state) {
+    if (!state || typeof state !== "object") throw new Error("createState() must be called with a state object");
     return state;
   }
   function createPatch(p) {

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 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);})();
1	+ "use strict";var V=(()=>{var N=Object.defineProperty;var F=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=F(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:()=>ut,COLGROUP:()=>xt,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:()=>bt,EMBED:()=>Rt,FEBLEND:()=>co,FECOLORMATRIX:()=>io,FECOMPONENTTRANSFER:()=>po,FECOMPOSITE:()=>To,FECONVOLVEMATRIX:()=>fo,FEDIFFUSELIGHTING:()=>lo,FEDISPLACEMENTMAP:()=>So,FEDISTANTLIGHT:()=>go,FEDROPSHADOW:()=>uo,FEFLOOD:()=>xo,FEFUNCA:()=>yo,FEFUNCB:()=>Eo,FEFUNCG:()=>mo,FEFUNCR:()=>ho,FEGAUSSIANBLUR:()=>Ao,FEIMAGE:()=>Po,FEMERGE:()=>Co,FEMERGENODE:()=>Mo,FEMORPHOLOGY:()=>No,FEOFFSET:()=>Oo,FEPOINTLIGHT:()=>bo,FESPECULARLIGHTING:()=>Ro,FESPOTLIGHT:()=>Lo,FETILE:()=>Do,FETURBULENCE:()=>Io,FIELDSET:()=>Lt,FIGCAPTION:()=>Dt,FIGURE:()=>It,FILTER:()=>vo,FOOTER:()=>vt,FOREIGNOBJECT:()=>Fo,FORM:()=>Ft,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:()=>un,MPADDED:()=>xn,MPATH:()=>_o,MPHANTOM:()=>yn,MPRESCRIPTS:()=>En,MROOT:()=>mn,MROW:()=>hn,MS:()=>An,MSPACE:()=>Pn,MSQRT:()=>Cn,MSTYLE:()=>Mn,MSUB:()=>Nn,MSUBSUP:()=>On,MSUP:()=>bn,MTABLE:()=>Rn,MTD:()=>Ln,MTEXT:()=>Dn,MTR:()=>In,MUNDER:()=>vn,MUNDEROVER:()=>Fn,NAV:()=>ie,NOSCRIPT:()=>pe,OBJECT:()=>Te,OL:()=>fe,OPTGROUP:()=>le,OPTION:()=>Se,OUTPUT:()=>de,P:()=>ge,PATH:()=>Ko,PATTERN:()=>Xo,PICTURE:()=>ue,POLYGON:()=>qo,POLYLINE:()=>Yo,PRE:()=>xe,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:()=>be,SMALL:()=>Re,SOURCE:()=>Le,SPAN:()=>De,STOP:()=>Qo,STRONG:()=>Ie,STYLE:()=>ve,SUB:()=>Fe,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:()=>L,memo:()=>_,mergeClass:()=>Y,props:()=>d,tag:()=>q,vode:()=>j});function j(t,o,...a){if(!t)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(t)?t:o?[t,o,...a]:[t,...a]}function B(t,o,a,...s){if(!t?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!o\|\|typeof o!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let 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=x(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=x(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),L(t,!0),a(o));for(let r of s)e.patch(r);return e.patch}function L(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&&L(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){if(!t\|\|!Array.isArray(t))throw new Error("first argument to memo() must be an array of values to compare");if(typeof o!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return o.__memo=t,o}function K(t){if(!t\|\|typeof t!="object")throw new Error("createState() must be called with a state object");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 x(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]=x({},e,a):typeof n=="object"?x(t[s],e,a):t[s]=x({},e,a):Array.isArray(e)?t[s]=[...e]:e instanceof Date?t[s]=new Date(e):t[s]=x({},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);b(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],u=P(t,o,T,f,void 0,c,r);n[g?f+2:f+1]=u}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 u=d(n);b(o,p,d(e),u,r),g=!!u}}else{let c=d(n);b(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 u=S[c],v=f&&f[c],D=P(t,o,p,c,v,u,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 b(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=R(e);o.classList.value=r}else o.classList.value="";else if(e){let r=R(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 R(t){return typeof t=="string"?t:Array.isArray(t)?t.map(R).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",ut="col",xt="colgroup",yt="data",Et="datalist",mt="dd",ht="del",At="details",Pt="dfn",Ct="dialog",Mt="div",Nt="dl",Ot="dt",bt="em",Rt="embed",Lt="fieldset",Dt="figcaption",It="figure",vt="footer",Ft="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",ue="picture",xe="pre",ye="progress",Ee="q",me="rp",he="rt",Ae="ruby",Pe="s",Ce="samp",Me="script",Ne="section",Oe="select",be="slot",Re="small",Le="source",De="span",Ie="strong",ve="style",Fe="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",uo="feDropShadow",xo="feFlood",yo="feFuncA",Eo="feFuncB",mo="feFuncG",ho="feFuncR",Ao="feGaussianBlur",Po="feImage",Co="feMerge",Mo="feMergeNode",No="feMorphology",Oo="feOffset",bo="fePointLight",Ro="feSpecularLighting",Lo="feSpotLight",Do="feTile",Io="feTurbulence",vo="filter",Fo="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",un="mover",xn="mpadded",yn="mphantom",En="mprescripts",mn="mroot",hn="mrow",An="ms",Pn="mspace",Cn="msqrt",Mn="mstyle",Nn="msub",On="msubsup",bn="msup",Rn="mtable",Ln="mtd",Dn="mtext",In="mtr",vn="munder",Fn="munderover",Gn="semantics";return V(Hn);})();

package/dist/vode.min.mjs CHANGED Viewed

	@@ -1 +1 @@
1	- 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};
1	+ function P(f,z,...J){if(!f)throw Error("first argument to vode() must be a tag name or a 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("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!z\|\|typeof z!=="object")throw Error("second argument to app() must be a state object");if(typeof J!=="function")throw Error("third argument to app() 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=H(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=H(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){if(!f\|\|!Array.isArray(f))throw Error("first argument to memo() must be an array of values to compare");if(typeof z!=="function")throw Error("second argument to memo() must be a function that returns a vode or props object");return z.__memo=f,z}function u(f){if(!f\|\|typeof f!=="object")throw Error("createState() must be called with a state object");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 w(f,z){return f[z+x(f)]}function x(f){return A(f)?2:1}function H(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]=H({},q,J);else if(typeof B==="object")H(f[G],q,J);else f[G]=H({},q,J);else if(Array.isArray(q))f[G]=[...q];else if(q instanceof Date)f[G]=new Date(q);else f[G]=H({},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 O=!U&&m(B),F=!U&&y(B),T=!!B&&typeof B!=="string"&&!!(B?.node\|\|B?.nodeType===Node.TEXT_NODE);if(!O&&!F&&!T&&!q)throw Error("Invalid vode: "+typeof B+" "+JSON.stringify(B));else if(T&&O)B=B.wholeText;else if(T&&F)B=[...B];if(Z&&O){if(W.nodeValue!==B)W.nodeValue=B;return q}if(O&&(!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 C=B;if(1 in C)C[1]=I(f,C[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,C=q,j=!1;if(X[1]?.__memo){let Q=X[1];if(X[1]=I(f,X[1],C[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",Hf="dfn",Cf="dialog",Of="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",wf="img",pf="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",Hq="ruby",Cq="s",Oq="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",wq="track",pq="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",Hz="feImage",Cz="feMerge",Oz="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",wz="set",pz="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",HB="msqrt",CB="mstyle",OB="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,w as child,g as app,lq as WBR,oz as VIEW,rq as VIDEO,dz as USE,sq as UL,pq as U,az as TSPAN,wq 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,pz as STOP,Kq as SPAN,Iq as SOURCE,Rq as SMALL,Tq as SLOT,wz as SET,xB as SEMANTICS,Dq as SELECT,Mq as SECTION,Fq as SCRIPT,Oq as SAMP,Cq as S,Hq 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,OB as MSUB,CB as MSTYLE,HB 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,pf as INPUT,wf 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,Oz as FEMERGENODE,Cz as FEMERGE,Hz 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,Of as DIV,Cf as DIALOG,Hf 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 CHANGED Viewed

@@ -1,7 +1,7 @@
 // src/vode.ts
 function vode(tag, props, ...children) {
   if (!tag)
-    throw new Error("tag must be a string or vode");
+    throw new Error("first argument to vode() must be a tag name or a vode");
   if (Array.isArray(tag))
     return tag;
   else if (props)
@@ -11,11 +11,11 @@ function vode(tag, props, ...children) {
 }
 function app(container, state, dom, ...initialPatches) {
   if (!container?.parentElement)
-    throw new Error("container must be a valid HTMLElement inside the <html></html> document");
+    throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
   if (!state || typeof state !== "object")
-    throw new Error("given state must be an object");
+    throw new Error("second argument to app() must be a state object");
   if (typeof dom !== "function")
-    throw new Error("dom must be a function that returns a vode");
+    throw new Error("third argument to app() must be a function that returns a vode");
   const _vode = {};
   _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
   Object.defineProperty(state, "patch", {
@@ -149,10 +149,16 @@ function hydrate(element, prepareForRender) {
   }
 }
 function memo(compare, componentOrProps) {
+  if (!compare || !Array.isArray(compare))
+    throw new Error("first argument to memo() must be an array of values to compare");
+  if (typeof componentOrProps !== "function")
+    throw new Error("second argument to memo() must be a function that returns a vode or props object");
   componentOrProps.__memo = compare;
   return componentOrProps;
 }
 function createState(state) {
+  if (!state || typeof state !== "object")
+    throw new Error("createState() must be called with a state object");
   return state;
 }
 function createPatch(p) {

package/icon.svg ADDED Viewed

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+    <style>
+        text {
+        font-weight: 600;
+        font-family: "Courier New", Courier, monospace;
+        fill: #2d3748;
+        dominant-baseline: central;
+        text-anchor: middle;
+        text-rendering: geometricPrecision;
+        stroke: #d2c8b7;
+        paint-order: stroke;
+        stroke-width: 1%;
+        }
+        .tag {
+        font-size: 60%;
+        }
+        .braces {
+        font-size: 75%;
+        font-weight: 600;
+        }
+    </style>
+    <!-- Opening bracket -->
+    <text x="7%" y="48%" class="braces">[</text>
+    <!-- V -->
+    <text x="50%" y="55%" class="tag">V</text>
+    <!-- Closing bracket -->
+    <text x="93%" y="48%" class="braces">]</text>
+</svg>

package/logo.svg CHANGED Viewed

@@ -1,55 +1,57 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35">
     <style>
         text {
-        font-weight: bold;
-        font-family: "Consolas", monospace;
+        font-weight: 600;
+        font-family: "Courier New", Courier, monospace;
         fill: #2d3748;
+        stroke: #d2c8b7;
         dominant-baseline: central;
         text-anchor: middle;
+        text-rendering: geometricPrecision;
+        paint-order: stroke;
+        stroke-width: 1%;
         }
-        .braces-text {
-        font-size: 36px;
-        opacity: 0.65;
-        stroke: #aaa;
-        stroke-width: 0.8px;
-        paint-order: stroke;
+        .tag {
+        font-size: 200%;
         }
-        .item-text {
-        paint-order: stroke;
-        stroke: #aaa;
-        stroke-width: 0.8px;
+        .props {
+        font-size: 135%;
+        }
+        .child {
+        font-size: 150%;
+        }
+        .braces {
+        font-size: 250%;
         }
         .comma-text {
-        font-size: 12px;
-        paint-order: stroke;
-        stroke: #fff;
-        stroke-width: 0.4px;
-        opacity: 0.3;
+        font-size: 80%;
         }
     </style>
     <!-- Opening bracket -->
-    <text x="5" y="14.6" class="braces-text">[</text>
+    <text x="3%" y="47%" class="braces">[</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="18%" y="53%" class="tag">V</text>
+    <text x="24%" y="65%" class="comma-text">,</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="36%" y="51%" class="props">{</text>
+    <text x="47%" y="51%" class="props">}</text>
+    <text x="51.5%" y="65%" class="comma-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>
+    <text x="64%" y="58%" class="child">d</text>
+    <text x="75%" y="65%" class="comma-text">,</text>
     <!-- e -->
-    <text x="86" y="19" font-size="24" class="item-text">e</text>
+    <text x="86.5%" y="58%" class="child">e</text>
     <!-- Closing bracket -->
-    <text x="95.6" y="14.6" class="braces-text">]</text>
+    <text x="97%" y="47%" class="braces">]</text>
 </svg>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.1.7",
+    "version": "1.1.8",
     "description": "Small web framework for minimal websites",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",

package/src/vode.ts CHANGED Viewed

@@ -100,7 +100,8 @@ export type ContainerNode<S> = HTMLElement & {
  * - identity: `vode(["div", ["span", "bar"]])` => `["div", ["span", "bar"]]` --*rendered*-> `<div><span>bar</span></div>`
  */
 export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Props<S> | ChildVode<S>, ...children: ChildVode<S>[]): Vode<S> {
-    if (!tag) throw new Error("tag must be a string or vode");
+    if (!tag) throw new Error("first argument to vode() must be a tag name or a vode");
     if (Array.isArray(tag)) return tag;
     else if (props) return [tag, props as Props<S>, ...children];
     else return [tag, ...children];
@@ -114,9 +115,9 @@ export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Pro
  * @returns a patch function that can be used to update the state
  */
 export function app<S extends object | unknown>(container: Element, state: Omit<S, "patch">, dom: (s: S) => Vode<S>, ...initialPatches: Patch<S>[]) {
-    if (!container?.parentElement) throw new Error("container must be a valid HTMLElement inside the <html></html> document");
-    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");
+    if (!container?.parentElement) throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
+    if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
+    if (typeof dom !== "function") throw new Error("third argument to app() 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 };
@@ -263,12 +264,19 @@ export function hydrate<S = unknown>(element: Element | Text, prepareForRender?:
 /** memoizes the resulting component or props by comparing element by element (===) with the
  * `compare` of the previous render. otherwise skips the render step (not calling `componentOrProps`)*/
 export function memo<S>(compare: any[], componentOrProps: Component<S> | ((s: S) => Props<S>)): typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S> {
+    if (!compare || !Array.isArray(compare)) throw new Error("first argument to memo() must be an array of values to compare");
+    if(typeof componentOrProps !== "function") throw new Error("second argument to memo() must be a function that returns a vode or props object");
     (<any>componentOrProps).__memo = compare;
     return componentOrProps as typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S>;
 }
 /** 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>; }
+export function createState<S extends object | unknown>(state: S): PatchableState<S> {
+    if (!state || typeof state !== "object") throw new Error("createState() must be called with a state object");
+    return state as PatchableState<S>;
+}
 /** type safe way to create a patch. useful for type inference and autocompletion. */
 export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effect<S> | IgnoredPatch): typeof p { return p; }