@ryupold/vode 1.1.8 → 1.2.0

package/README.md

@@ -1,4 +1,4 @@
-# ![vode-logo](./logo.svg)
+# ![vode-logo](./logo.webp)
 
 [![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue?logo=typescript)](https://www.typescriptlang.org/)
 [![Dependencies](https://img.shields.io/badge/dependencies-0-success)](package.json)
@@ -6,9 +6,9 @@
 [![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-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`.
+A compact web framework for minimalist developers. 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 thanks to `lib.dom.d.ts`.
 
-It can be used to create single page applications or isolated components with complex state. The usage of arrays gives flexibility in composition and makes refactoring easy.
+It brings a primitive building block to the table that gives flexibility in composition and makes refactoring easy. Usecases can be single page applications or isolated components with complex state.
 
 ## Usage
 
@@ -116,7 +116,7 @@ const state = createState({
 
 type State = typeof state;
 
-const appNode = document.getElementById('app');
+const appNode = document.getElementById('app')!;
 
 app<State>(appNode, state,
     (s: State) => [DIV,
@@ -473,6 +473,30 @@ Like the other events they can be patches too.
 > is actually created/removed which might not always be the case during 
 > rendering, as only a diff of the virtual DOM is applied.
 
+### SVG & MathML
+SVG and MathML elements are supported but need the namespace defined in properties.
+
+```typescript
+import { SVG, CIRCLE } from '@ryupold/vode';
+
+const CompSVG = (s) => 
+    [SVG, { xmlns: 'http://www.w3.org/2000/svg', width: 100, height: 100 },
+        [CIRCLE, { cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow' }]
+    ];
+```
+
+```typescript
+import { MATH, MSUP, MI, MN } from '@ryupold/vode';
+
+const CompMathML = (s) => 
+    [MATH, { xmlns: 'http://www.w3.org/1998/Math/MathML' },
+        [MSUP, 
+            [MI, 'x'], 
+            [MN, '2']
+        ]
+    ];
+```
+
 ### advanced usage
 
 #### isolated state

package/dist/vode.js

@@ -182,6 +182,7 @@ var V = (() => {
     S: () => S,
     SAMP: () => SAMP,
     SCRIPT: () => SCRIPT,
+    SEARCH: () => SEARCH,
     SECTION: () => SECTION,
     SELECT: () => SELECT,
     SEMANTICS: () => SEMANTICS,
@@ -217,6 +218,7 @@ var V = (() => {
     U: () => U,
     UL: () => UL,
     USE: () => USE,
+    VAR: () => VAR,
     VIDEO: () => VIDEO,
     VIEW: () => VIEW,
     WBR: () => WBR,
@@ -490,7 +492,7 @@ var V = (() => {
     }
     return target;
   }
-  function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
+  function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     newVode = remember(state, newVode, oldVode);
     const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
     if (newVode === oldVode || !oldVode && isNoVode) {
@@ -534,15 +536,15 @@ var V = (() => {
       return text;
     }
     if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
-      svg = svg || newVode[0] === "svg";
-      const newNode = svg ? document.createElementNS("http://www.w3.org/2000/svg", newVode[0]) : document.createElement(newVode[0]);
-      newVode.node = newNode;
       const newvode = newVode;
       if (1 in newvode) {
         newvode[1] = remember(state, newvode[1], void 0);
       }
       const properties = props(newVode);
-      patchProperties(patch, newNode, void 0, properties, svg);
+      xmlns = properties?.xmlns || xmlns;
+      const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
+      newVode.node = newNode;
+      patchProperties(patch, newNode, void 0, properties);
       if (oldNode) {
         oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(newNode);
@@ -557,7 +559,7 @@ var V = (() => {
       if (newChildren) {
         for (let i = 0; i < newChildren.length; i++) {
           const child2 = newChildren[i];
-          const attached = render(state, patch, newNode, i, void 0, child2, svg);
+          const attached = render(state, patch, newNode, i, void 0, child2, xmlns);
           newVode[properties ? i + 2 : i + 1] = attached;
         }
       }
@@ -565,7 +567,6 @@ var V = (() => {
       return newVode;
     }
     if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
-      svg = svg || newVode[0] === "svg";
       newVode.node = oldNode;
       const newvode = newVode;
       const oldvode = oldVode;
@@ -575,12 +576,12 @@ var V = (() => {
         newvode[1] = remember(state, newvode[1], oldvode[1]);
         if (prev !== newvode[1]) {
           const properties = props(newVode);
-          patchProperties(patch, oldNode, props(oldVode), properties, svg);
+          patchProperties(patch, oldNode, props(oldVode), properties);
           hasProps = !!properties;
         }
       } else {
         const properties = props(newVode);
-        patchProperties(patch, oldNode, props(oldVode), properties, svg);
+        patchProperties(patch, oldNode, props(oldVode), properties);
         hasProps = !!properties;
       }
       const newKids = children(newVode);
@@ -589,7 +590,7 @@ var V = (() => {
         for (let i = 0; i < newKids.length; i++) {
           const child2 = newKids[i];
           const oldChild = oldKids && oldKids[i];
-          const attached = render(state, patch, oldNode, i, oldChild, child2, svg);
+          const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
           if (attached) {
             newVode[hasProps ? i + 2 : i + 1] = attached;
           }
@@ -645,15 +646,15 @@ var V = (() => {
       return c;
     }
   }
-  function patchProperties(patch, node, oldProps, newProps, isSvg) {
+  function patchProperties(patch, node, oldProps, newProps) {
     if (!newProps && !oldProps) return;
     if (oldProps) {
       for (const key in oldProps) {
         const oldValue = oldProps[key];
         const newValue = newProps?.[key];
         if (oldValue !== newValue) {
-          if (newProps) newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
-          else patchProperty(patch, node, key, oldValue, void 0, isSvg);
+          if (newProps) newProps[key] = patchProperty(patch, node, key, oldValue, newValue);
+          else patchProperty(patch, node, key, oldValue, void 0);
         }
       }
     }
@@ -661,17 +662,17 @@ var V = (() => {
       for (const key in newProps) {
         if (!(key in oldProps)) {
           const newValue = newProps[key];
-          newProps[key] = patchProperty(patch, node, key, void 0, newValue, isSvg);
+          newProps[key] = patchProperty(patch, node, key, void 0, newValue);
         }
       }
     } else if (newProps) {
       for (const key in newProps) {
         const newValue = newProps[key];
-        newProps[key] = patchProperty(patch, node, key, void 0, newValue, isSvg);
+        newProps[key] = patchProperty(patch, node, key, void 0, newValue);
       }
     }
   }
-  function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
+  function patchProperty(patch, node, key, oldValue, newValue) {
     if (key === "style") {
       if (!newValue) {
         node.style.cssText = "";
@@ -691,20 +692,10 @@ var V = (() => {
         }
       }
     } else if (key === "class") {
-      if (isSvg) {
-        if (newValue) {
-          const newClass = classString(newValue);
-          node.classList.value = newClass;
-        } else {
-          node.classList.value = "";
-        }
+      if (newValue) {
+        node.setAttribute("class", classString(newValue));
       } else {
-        if (newValue) {
-          const newClass = classString(newValue);
-          node.className = newClass;
-        } else {
-          node.className = "";
-        }
+        node.removeAttribute("class");
       }
     } else if (key[0] === "o" && key[1] === "n") {
       if (newValue) {
@@ -829,6 +820,7 @@ var V = (() => {
   var S = "s";
   var SAMP = "samp";
   var SCRIPT = "script";
+  var SEARCH = "search";
   var SECTION = "section";
   var SELECT = "select";
   var SLOT = "slot";
@@ -854,6 +846,7 @@ var V = (() => {
   var TRACK = "track";
   var U = "u";
   var UL = "ul";
+  var VAR = "var";
   var VIDEO = "video";
   var WBR = "wbr";
   var ANIMATE = "animate";

package/dist/vode.min.js

@@ -1 +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);})();
+"use strict";var V=(()=>{var N=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var U=(t,o)=>{for(var a in o)N(t,a,{get:o[a],enumerable:!0})},G=(t,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of H(o))!k.call(t,e)&&e!==a&&N(t,e,{get:()=>o[e],enumerable:!(n=F(o,e))||n.enumerable});return t};var V=t=>G(N({},"__esModule",{value:!0}),t);var Us={};U(Us,{A:()=>z,ABBR:()=>Z,ADDRESS:()=>w,ANIMATE:()=>eo,ANIMATEMOTION:()=>oo,ANIMATETRANSFORM:()=>so,ANNOTATION:()=>cs,ANNOTATION_XML:()=>is,AREA:()=>tt,ARTICLE:()=>et,ASIDE:()=>ot,AUDIO:()=>st,B:()=>nt,BASE:()=>at,BDI:()=>rt,BDO:()=>ct,BLOCKQUOTE:()=>it,BODY:()=>pt,BR:()=>Tt,BUTTON:()=>ft,CANVAS:()=>lt,CAPTION:()=>St,CIRCLE:()=>no,CITE:()=>gt,CLIPPATH:()=>ao,CODE:()=>dt,COL:()=>ut,COLGROUP:()=>xt,DATA:()=>yt,DATALIST:()=>Et,DD:()=>mt,DEFS:()=>ro,DEL:()=>ht,DESC:()=>co,DETAILS:()=>At,DFN:()=>Pt,DIALOG:()=>Ct,DIV:()=>Mt,DL:()=>Nt,DT:()=>Ot,ELLIPSE:()=>io,EM:()=>Rt,EMBED:()=>bt,FEBLEND:()=>po,FECOLORMATRIX:()=>To,FECOMPONENTTRANSFER:()=>fo,FECOMPOSITE:()=>lo,FECONVOLVEMATRIX:()=>So,FEDIFFUSELIGHTING:()=>go,FEDISPLACEMENTMAP:()=>uo,FEDISTANTLIGHT:()=>xo,FEDROPSHADOW:()=>yo,FEFLOOD:()=>Eo,FEFUNCA:()=>mo,FEFUNCB:()=>ho,FEFUNCG:()=>Ao,FEFUNCR:()=>Po,FEGAUSSIANBLUR:()=>Co,FEIMAGE:()=>Mo,FEMERGE:()=>No,FEMERGENODE:()=>Oo,FEMORPHOLOGY:()=>Ro,FEOFFSET:()=>bo,FEPOINTLIGHT:()=>Lo,FESPECULARLIGHTING:()=>Do,FESPOTLIGHT:()=>Io,FETILE:()=>vo,FETURBULENCE:()=>Fo,FIELDSET:()=>Lt,FIGCAPTION:()=>Dt,FIGURE:()=>It,FILTER:()=>Ho,FOOTER:()=>vt,FOREIGNOBJECT:()=>ko,FORM:()=>Ft,G:()=>Uo,H1:()=>Ht,H2:()=>kt,H3:()=>Ut,H4:()=>Gt,H5:()=>Vt,H6:()=>jt,HEAD:()=>Bt,HEADER:()=>_t,HGROUP:()=>Kt,HR:()=>Xt,HTML:()=>qt,I:()=>Yt,IFRAME:()=>Wt,IMAGE:()=>Go,IMG:()=>$t,INPUT:()=>Jt,INS:()=>Qt,KBD:()=>zt,LABEL:()=>Zt,LEGEND:()=>wt,LI:()=>te,LINE:()=>Vo,LINEARGRADIENT:()=>jo,LINK:()=>ee,MACTION:()=>ps,MAIN:()=>oe,MAP:()=>se,MARK:()=>ne,MARKER:()=>Bo,MASK:()=>_o,MATH:()=>Ts,MENU:()=>ae,MERROR:()=>fs,META:()=>re,METADATA:()=>Ko,METER:()=>ce,MFRAC:()=>ls,MI:()=>Ss,MMULTISCRIPTS:()=>gs,MN:()=>ds,MO:()=>us,MOVER:()=>xs,MPADDED:()=>ys,MPATH:()=>Xo,MPHANTOM:()=>Es,MPRESCRIPTS:()=>ms,MROOT:()=>hs,MROW:()=>As,MS:()=>Ps,MSPACE:()=>Cs,MSQRT:()=>Ms,MSTYLE:()=>Ns,MSUB:()=>Os,MSUBSUP:()=>Rs,MSUP:()=>bs,MTABLE:()=>Ls,MTD:()=>Ds,MTEXT:()=>Is,MTR:()=>vs,MUNDER:()=>Fs,MUNDEROVER:()=>Hs,NAV:()=>ie,NOSCRIPT:()=>pe,OBJECT:()=>Te,OL:()=>fe,OPTGROUP:()=>le,OPTION:()=>Se,OUTPUT:()=>ge,P:()=>de,PATH:()=>qo,PATTERN:()=>Yo,PICTURE:()=>ue,POLYGON:()=>Wo,POLYLINE:()=>$o,PRE:()=>xe,PROGRESS:()=>ye,Q:()=>Ee,RADIALGRADIENT:()=>Jo,RECT:()=>Qo,RP:()=>me,RT:()=>he,RUBY:()=>Ae,S:()=>Pe,SAMP:()=>Ce,SCRIPT:()=>Me,SEARCH:()=>Ne,SECTION:()=>Oe,SELECT:()=>Re,SEMANTICS:()=>ks,SET:()=>zo,SLOT:()=>be,SMALL:()=>Le,SOURCE:()=>De,SPAN:()=>Ie,STOP:()=>Zo,STRONG:()=>ve,STYLE:()=>Fe,SUB:()=>He,SUMMARY:()=>ke,SUP:()=>Ue,SVG:()=>wo,SWITCH:()=>ts,SYMBOL:()=>es,TABLE:()=>Ge,TBODY:()=>Ve,TD:()=>je,TEMPLATE:()=>Be,TEXT:()=>os,TEXTAREA:()=>_e,TEXTPATH:()=>ss,TFOOT:()=>Ke,TH:()=>Xe,THEAD:()=>qe,TIME:()=>Ye,TITLE:()=>We,TR:()=>$e,TRACK:()=>Je,TSPAN:()=>ns,U:()=>Qe,UL:()=>ze,USE:()=>as,VAR:()=>Ze,VIDEO:()=>we,VIEW:()=>rs,WBR:()=>to,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("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,...n){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 S=await i.next();for(;S.done===!1;){e.stats.liveEffectCount++;try{e.patch(S.value),S=await i.next()}finally{e.stats.liveEffectCount--}}e.patch(S.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 s=t;s._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 n)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 n=[t.tagName.toLowerCase()];if(o&&(n.node=t),t?.hasAttributes()){let e={},s=t.attributes;for(let r of s)e[r.name]=r.value;n.push(e)}if(t.hasChildNodes()){let e=[];for(let s of t.childNodes){let r=s&&b(s,o);r?n.push(r):s&&o&&e.push(s)}for(let s of e)s.remove()}return n}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(" "),n=o.split(" "),e=new Set([...a,...n]);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 n of o)a[n]=!0;return a}else if(Array.isArray(t)&&typeof o=="object"){let a={};for(let n of t)a[n]=!0;for(let n of Object.keys(o))a[n]=o[n];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 n in o){let e=o[n];if(e&&typeof e=="object"){let s=t[n];s?Array.isArray(e)?t[n]=[...e]:e instanceof Date&&s!==e?t[n]=new Date(e):Array.isArray(s)?t[n]=x({},e,a):typeof s=="object"?x(t[n],e,a):t[n]=x({},e,a):Array.isArray(e)?t[n]=[...e]:e instanceof Date?t[n]=new Date(e):t[n]=x({},e,a)}else e===void 0&&a?delete t[n]:t[n]=e}return t}function P(t,o,a,n,e,s,r){s=O(t,s,e);let i=!s||typeof s=="number"||typeof s=="boolean";if(s===e||!e&&i)return e;let S=e?.nodeType===Node.TEXT_NODE,p=S?e:e?.node;if(i){p?.onUnmount&&o(p.onUnmount(p)),p?.remove();return}let E=!i&&Q(s),m=!i&&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]),S&&E)return p.nodeValue!==s&&(p.nodeValue=s),e;if(E&&(!p||!S)){let f=document.createTextNode(s);return p?(p.onUnmount&&o(p.onUnmount(p)),p.replaceWith(f)):a.childNodes[n]?a.insertBefore(f,a.childNodes[n]):a.appendChild(f),f}if(m&&(!p||S||e[0]!==s[0])){let f=s;1 in f&&(f[1]=O(t,f[1],void 0));let y=d(s);r=y?.xmlns||r;let l=r?document.createElementNS(r,s[0]):document.createElement(s[0]);s.node=l,R(o,l,void 0,y),p?(p.onUnmount&&o(p.onUnmount(p)),p.replaceWith(l)):a.childNodes[n]?a.insertBefore(l,a.childNodes[n]):a.appendChild(l);let g=A(s);if(g)for(let T=0;T<g.length;T++){let c=g[T],u=P(t,o,l,T,void 0,c,r);s[y?T+2:T+1]=u}return l.onMount&&o(l.onMount(l)),s}if(!S&&m&&e[0]===s[0]){s.node=p;let f=s,y=e,l=!1;if(f[1]?.__memo){let c=f[1];if(f[1]=O(t,f[1],y[1]),c!==f[1]){let u=d(s);R(o,p,d(e),u),l=!!u}}else{let c=d(s);R(o,p,d(e),c),l=!!c}let g=A(s),T=A(e);if(g){for(let c=0;c<g.length;c++){let u=g[c],v=T&&T[c],L=P(t,o,p,c,v,u,r);L&&(s[l?c+2:c+1]=L)}for(let c=g.length;T&&c<T.length;c++)T[c]?.node?T[c].node.remove():T[c]?.nodeType===Node.TEXT_NODE&&T[c].remove()}for(let c=g?.length||0;c<T?.length;c++)T[c]?.node?T[c].node.remove():T[c]?.nodeType===Node.TEXT_NODE&&T[c].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,a){if(typeof o!="function")return o;let n=o?.__memo,e=a?.__memo;if(Array.isArray(n)&&Array.isArray(e)&&n.length===e.length){let r=!0;for(let i=0;i<n.length;i++)if(n[i]!==e[i]){r=!1;break}if(r)return a}let s=D(o,t);return typeof s=="object"&&(s.__memo=o?.__memo),s}function D(t,o){return typeof t=="function"?D(t(o),o):t}function R(t,o,a,n){if(!(!n&&!a)){if(a)for(let e in a){let s=a[e],r=n?.[e];s!==r&&(n?n[e]=h(t,o,e,s,r):h(t,o,e,s,void 0))}if(n&&a){for(let e in n)if(!(e in a)){let s=n[e];n[e]=h(t,o,e,void 0,s)}}else if(n)for(let e in n){let s=n[e];n[e]=h(t,o,e,void 0,s)}}}function h(t,o,a,n,e){if(a==="style")if(!e)o.style.cssText="";else if(typeof e=="string")n!==e&&(o.style.cssText=e);else if(n&&typeof n=="object")for(let s in{...n,...e})!n||e[s]!==n[s]?o.style[s]=e[s]:n[s]&&!e[s]&&(o.style[s]=void 0);else for(let s in e)o.style[s]=e[s];else if(a==="class")e?o.setAttribute("class",I(e)):o.removeAttribute("class");else if(a[0]==="o"&&a[1]==="n")if(e){let s=null;if(typeof e=="function"){let r=e;s=i=>t([r,i])}else if(Array.isArray(e)){let r=e,i=e[0];r.length>1?s=()=>t([i,...r.slice(1)]):s=S=>t([i,S])}else typeof e=="object"&&(s=()=>t(e));o[a]=s}else o[a]=null;else e!=null&&e!==!1?o.setAttribute(a,e):o.removeAttribute(a);return e}function I(t){return typeof t=="string"?t:Array.isArray(t)?t.map(I).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",st="audio",nt="b",at="base",rt="bdi",ct="bdo",it="blockquote",pt="body",Tt="br",ft="button",lt="canvas",St="caption",gt="cite",dt="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",Rt="em",bt="embed",Lt="fieldset",Dt="figcaption",It="figure",vt="footer",Ft="form",Ht="h1",kt="h2",Ut="h3",Gt="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",se="map",ne="mark",ae="menu",re="meta",ce="meter",ie="nav",pe="noscript",Te="object",fe="ol",le="optgroup",Se="option",ge="output",de="p",ue="picture",xe="pre",ye="progress",Ee="q",me="rp",he="rt",Ae="ruby",Pe="s",Ce="samp",Me="script",Ne="search",Oe="section",Re="select",be="slot",Le="small",De="source",Ie="span",ve="strong",Fe="style",He="sub",ke="summary",Ue="sup",Ge="table",Ve="tbody",je="td",Be="template",_e="textarea",Ke="tfoot",Xe="th",qe="thead",Ye="time",We="title",$e="tr",Je="track",Qe="u",ze="ul",Ze="var",we="video",to="wbr",eo="animate",oo="animateMotion",so="animateTransform",no="circle",ao="clipPath",ro="defs",co="desc",io="ellipse",po="feBlend",To="feColorMatrix",fo="feComponentTransfer",lo="feComposite",So="feConvolveMatrix",go="feDiffuseLighting",uo="feDisplacementMap",xo="feDistantLight",yo="feDropShadow",Eo="feFlood",mo="feFuncA",ho="feFuncB",Ao="feFuncG",Po="feFuncR",Co="feGaussianBlur",Mo="feImage",No="feMerge",Oo="feMergeNode",Ro="feMorphology",bo="feOffset",Lo="fePointLight",Do="feSpecularLighting",Io="feSpotLight",vo="feTile",Fo="feTurbulence",Ho="filter",ko="foreignObject",Uo="g",Go="image",Vo="line",jo="linearGradient",Bo="marker",_o="mask",Ko="metadata",Xo="mpath",qo="path",Yo="pattern",Wo="polygon",$o="polyline",Jo="radialGradient",Qo="rect",zo="set",Zo="stop",wo="svg",ts="switch",es="symbol",os="text",ss="textPath",ns="tspan",as="use",rs="view",cs="annotation",is="annotation-xml",ps="maction",Ts="math",fs="merror",ls="mfrac",Ss="mi",gs="mmultiscripts",ds="mn",us="mo",xs="mover",ys="mpadded",Es="mphantom",ms="mprescripts",hs="mroot",As="mrow",Ps="ms",Cs="mspace",Ms="msqrt",Ns="mstyle",Os="msub",Rs="msubsup",bs="msup",Ls="mtable",Ds="mtd",Is="mtext",vs="mtr",Fs="munder",Hs="munderover",ks="semantics";return V(Us);})();

package/dist/vode.min.mjs

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

package/dist/vode.mjs

@@ -269,7 +269,7 @@ function mergeState(target, source, allowDeletion) {
   }
   return target;
 }
-function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
+function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
   newVode = remember(state, newVode, oldVode);
   const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
   if (newVode === oldVode || !oldVode && isNoVode) {
@@ -313,15 +313,15 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
     return text;
   }
   if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
-    svg = svg || newVode[0] === "svg";
-    const newNode = svg ? document.createElementNS("http://www.w3.org/2000/svg", newVode[0]) : document.createElement(newVode[0]);
-    newVode.node = newNode;
     const newvode = newVode;
     if (1 in newvode) {
       newvode[1] = remember(state, newvode[1], undefined);
     }
     const properties = props(newVode);
-    patchProperties(patch, newNode, undefined, properties, svg);
+    xmlns = properties?.xmlns || xmlns;
+    const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
+    newVode.node = newNode;
+    patchProperties(patch, newNode, undefined, properties);
     if (oldNode) {
       oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
       oldNode.replaceWith(newNode);
@@ -336,7 +336,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
     if (newChildren) {
       for (let i = 0;i < newChildren.length; i++) {
         const child2 = newChildren[i];
-        const attached = render(state, patch, newNode, i, undefined, child2, svg);
+        const attached = render(state, patch, newNode, i, undefined, child2, xmlns);
         newVode[properties ? i + 2 : i + 1] = attached;
       }
     }
@@ -344,7 +344,6 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
     return newVode;
   }
   if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
-    svg = svg || newVode[0] === "svg";
     newVode.node = oldNode;
     const newvode = newVode;
     const oldvode = oldVode;
@@ -354,12 +353,12 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
       newvode[1] = remember(state, newvode[1], oldvode[1]);
       if (prev !== newvode[1]) {
         const properties = props(newVode);
-        patchProperties(patch, oldNode, props(oldVode), properties, svg);
+        patchProperties(patch, oldNode, props(oldVode), properties);
         hasProps = !!properties;
       }
     } else {
       const properties = props(newVode);
-      patchProperties(patch, oldNode, props(oldVode), properties, svg);
+      patchProperties(patch, oldNode, props(oldVode), properties);
       hasProps = !!properties;
     }
     const newKids = children(newVode);
@@ -368,7 +367,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
       for (let i = 0;i < newKids.length; i++) {
         const child2 = newKids[i];
         const oldChild = oldKids && oldKids[i];
-        const attached = render(state, patch, oldNode, i, oldChild, child2, svg);
+        const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
         if (attached) {
           newVode[hasProps ? i + 2 : i + 1] = attached;
         }
@@ -425,7 +424,7 @@ function unwrap(c, s) {
     return c;
   }
 }
-function patchProperties(patch, node, oldProps, newProps, isSvg) {
+function patchProperties(patch, node, oldProps, newProps) {
   if (!newProps && !oldProps)
     return;
   if (oldProps) {
@@ -434,9 +433,9 @@ function patchProperties(patch, node, oldProps, newProps, isSvg) {
       const newValue = newProps?.[key];
       if (oldValue !== newValue) {
         if (newProps)
-          newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
+          newProps[key] = patchProperty(patch, node, key, oldValue, newValue);
         else
-          patchProperty(patch, node, key, oldValue, undefined, isSvg);
+          patchProperty(patch, node, key, oldValue, undefined);
       }
     }
   }
@@ -444,17 +443,17 @@ function patchProperties(patch, node, oldProps, newProps, isSvg) {
     for (const key in newProps) {
       if (!(key in oldProps)) {
         const newValue = newProps[key];
-        newProps[key] = patchProperty(patch, node, key, undefined, newValue, isSvg);
+        newProps[key] = patchProperty(patch, node, key, undefined, newValue);
       }
     }
   } else if (newProps) {
     for (const key in newProps) {
       const newValue = newProps[key];
-      newProps[key] = patchProperty(patch, node, key, undefined, newValue, isSvg);
+      newProps[key] = patchProperty(patch, node, key, undefined, newValue);
     }
   }
 }
-function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
+function patchProperty(patch, node, key, oldValue, newValue) {
   if (key === "style") {
     if (!newValue) {
       node.style.cssText = "";
@@ -475,20 +474,10 @@ function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
       }
     }
   } else if (key === "class") {
-    if (isSvg) {
-      if (newValue) {
-        const newClass = classString(newValue);
-        node.classList.value = newClass;
-      } else {
-        node.classList.value = "";
-      }
+    if (newValue) {
+      node.setAttribute("class", classString(newValue));
     } else {
-      if (newValue) {
-        const newClass = classString(newValue);
-        node.className = newClass;
-      } else {
-        node.className = "";
-      }
+      node.removeAttribute("class");
     }
   } else if (key[0] === "o" && key[1] === "n") {
     if (newValue) {
@@ -612,6 +601,7 @@ var RUBY = "ruby";
 var S = "s";
 var SAMP = "samp";
 var SCRIPT = "script";
+var SEARCH = "search";
 var SECTION = "section";
 var SELECT = "select";
 var SLOT = "slot";
@@ -637,6 +627,7 @@ var TR = "tr";
 var TRACK = "track";
 var U = "u";
 var UL = "ul";
+var VAR = "var";
 var VIDEO = "video";
 var WBR = "wbr";
 var ANIMATE = "animate";
@@ -745,6 +736,7 @@ export {
   WBR,
   VIEW,
   VIDEO,
+  VAR,
   USE,
   UL,
   U,
@@ -780,6 +772,7 @@ export {
   SEMANTICS,
   SELECT,
   SECTION,
+  SEARCH,
   SCRIPT,
   SAMP,
   S,

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.1.8",
-    "description": "Small web framework for minimal websites",
+    "version": "1.2.0",
+    "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
+    "icon": "icon.webp",
     "keywords": [
         "web",
         "frontend",

package/src/vode-tags.ts

@@ -1,207 +1,208 @@
 import { Tag } from "./vode.js";
 
-//=== HTML ========================================================================================
-export const A: Tag = "a";
-export const ABBR: Tag = "abbr";
-export const ADDRESS: Tag = "address";
-export const AREA: Tag = "area";
-export const ARTICLE: Tag = "article";
-export const ASIDE: Tag = "aside";
-export const AUDIO: Tag = "audio";
-export const B: Tag = "b";
-export const BASE: Tag = "base";
-export const BDI: Tag = "bdi";
-export const BDO: Tag = "bdo";
-export const BLOCKQUOTE: Tag = "blockquote";
-export const BODY: Tag = "body";
-export const BR: Tag = "br";
-export const BUTTON: Tag = "button";
-export const CANVAS: Tag = "canvas";
-export const CAPTION: Tag = "caption";
-export const CITE: Tag = "cite";
-export const CODE: Tag = "code";
-export const COL: Tag = "col";
-export const COLGROUP: Tag = "colgroup";
-export const DATA: Tag = "data";
-export const DATALIST: Tag = "datalist";
-export const DD: Tag = "dd";
-export const DEL: Tag = "del";
-export const DETAILS: Tag = "details";
-export const DFN: Tag = "dfn";
-export const DIALOG: Tag = "dialog";
-export const DIV: Tag = "div";
-export const DL: Tag = "dl";
-export const DT: Tag = "dt";
-export const EM: Tag = "em";
-export const EMBED: Tag = "embed";
-export const FIELDSET: Tag = "fieldset";
-export const FIGCAPTION: Tag = "figcaption";
-export const FIGURE: Tag = "figure";
-export const FOOTER: Tag = "footer";
-export const FORM: Tag = "form";
-export const H1: Tag = "h1";
-export const H2: Tag = "h2";
-export const H3: Tag = "h3";
-export const H4: Tag = "h4";
-export const H5: Tag = "h5";
-export const H6: Tag = "h6";
-export const HEAD: Tag = "head";
-export const HEADER: Tag = "header";
-export const HGROUP: Tag = "hgroup";
-export const HR: Tag = "hr";
-export const HTML: Tag = "html";
-export const I: Tag = "i";
-export const IFRAME: Tag = "iframe";
-export const IMG: Tag = "img";
-export const INPUT: Tag = "input";
-export const INS: Tag = "ins";
-export const KBD: Tag = "kbd";
-export const LABEL: Tag = "label";
-export const LEGEND: Tag = "legend";
-export const LI: Tag = "li";
-export const LINK: Tag = "link";
-export const MAIN: Tag = "main";
-export const MAP: Tag = "map";
-export const MARK: Tag = "mark";
-export const MENU: Tag = "menu";
-export const META: Tag = "meta";
-export const METER: Tag = "meter";
-export const NAV: Tag = "nav";
-export const NOSCRIPT: Tag = "noscript";
-export const OBJECT: Tag = "object";
-export const OL: Tag = "ol";
-export const OPTGROUP: Tag = "optgroup";
-export const OPTION: Tag = "option";
-export const OUTPUT: Tag = "output";
-export const P: Tag = "p";
-export const PICTURE: Tag = "picture";
-export const PRE: Tag = "pre";
-export const PROGRESS: Tag = "progress";
-export const Q: Tag = "q";
-export const RP: Tag = "rp";
-export const RT: Tag = "rt";
-export const RUBY: Tag = "ruby";
-export const S: Tag = "s";
-export const SAMP: Tag = "samp";
-export const SCRIPT: Tag = "script";
-export const SECTION: Tag = "section";
-export const SELECT: Tag = "select";
-export const SLOT: Tag = "slot";
-export const SMALL: Tag = "small";
-export const SOURCE: Tag = "source";
-export const SPAN: Tag = "span";
-export const STRONG: Tag = "strong";
-export const STYLE: Tag = "style";
-export const SUB: Tag = "sub";
-export const SUMMARY: Tag = "summary";
-export const SUP: Tag = "sup";
-export const TABLE: Tag = "table";
-export const TBODY: Tag = "tbody";
-export const TD: Tag = "td";
-export const TEMPLATE: Tag = "template";
-export const TEXTAREA: Tag = "textarea";
-export const TFOOT: Tag = "tfoot";
-export const TH: Tag = "th";
-export const THEAD: Tag = "thead";
-export const TIME: Tag = "time";
-export const TITLE: Tag = "title";
-export const TR: Tag = "tr";
-export const TRACK: Tag = "track";
-export const U: Tag = "u";
-export const UL: Tag = "ul";
-export const VIDEO: Tag = "video";
-export const WBR: Tag = "wbr";
+//=== HTML ====================================================
+export const A: Tag = "a" as const;
+export const ABBR: Tag = "abbr" as const;
+export const ADDRESS: Tag = "address" as const;
+export const AREA: Tag = "area" as const;
+export const ARTICLE: Tag = "article" as const;
+export const ASIDE: Tag = "aside" as const;
+export const AUDIO: Tag = "audio" as const;
+export const B: Tag = "b" as const;
+export const BASE: Tag = "base" as const;
+export const BDI: Tag = "bdi" as const;
+export const BDO: Tag = "bdo" as const;
+export const BLOCKQUOTE: Tag = "blockquote" as const;
+export const BODY: Tag = "body" as const;
+export const BR: Tag = "br" as const;
+export const BUTTON: Tag = "button" as const;
+export const CANVAS: Tag = "canvas" as const;
+export const CAPTION: Tag = "caption" as const;
+export const CITE: Tag = "cite" as const;
+export const CODE: Tag = "code" as const;
+export const COL: Tag = "col" as const;
+export const COLGROUP: Tag = "colgroup" as const;
+export const DATA: Tag = "data" as const;
+export const DATALIST: Tag = "datalist" as const;
+export const DD: Tag = "dd" as const;
+export const DEL: Tag = "del" as const;
+export const DETAILS: Tag = "details" as const;
+export const DFN: Tag = "dfn" as const;
+export const DIALOG: Tag = "dialog" as const;
+export const DIV: Tag = "div" as const;
+export const DL: Tag = "dl" as const;
+export const DT: Tag = "dt" as const;
+export const EM: Tag = "em" as const;
+export const EMBED: Tag = "embed" as const;
+export const FIELDSET: Tag = "fieldset" as const;
+export const FIGCAPTION: Tag = "figcaption" as const;
+export const FIGURE: Tag = "figure" as const;
+export const FOOTER: Tag = "footer" as const;
+export const FORM: Tag = "form" as const;
+export const H1: Tag = "h1" as const;
+export const H2: Tag = "h2" as const;
+export const H3: Tag = "h3" as const;
+export const H4: Tag = "h4" as const;
+export const H5: Tag = "h5" as const;
+export const H6: Tag = "h6" as const;
+export const HEAD: Tag = "head" as const;
+export const HEADER: Tag = "header" as const;
+export const HGROUP: Tag = "hgroup" as const;
+export const HR: Tag = "hr" as const;
+export const HTML: Tag = "html" as const;
+export const I: Tag = "i" as const;
+export const IFRAME: Tag = "iframe" as const;
+export const IMG: Tag = "img" as const;
+export const INPUT: Tag = "input" as const;
+export const INS: Tag = "ins" as const;
+export const KBD: Tag = "kbd" as const;
+export const LABEL: Tag = "label" as const;
+export const LEGEND: Tag = "legend" as const;
+export const LI: Tag = "li" as const;
+export const LINK: Tag = "link" as const;
+export const MAIN: Tag = "main" as const;
+export const MAP: Tag = "map" as const;
+export const MARK: Tag = "mark" as const;
+export const MENU: Tag = "menu" as const;
+export const META: Tag = "meta" as const;
+export const METER: Tag = "meter" as const;
+export const NAV: Tag = "nav" as const;
+export const NOSCRIPT: Tag = "noscript" as const;
+export const OBJECT: Tag = "object" as const;
+export const OL: Tag = "ol" as const;
+export const OPTGROUP: Tag = "optgroup" as const;
+export const OPTION: Tag = "option" as const;
+export const OUTPUT: Tag = "output" as const;
+export const P: Tag = "p" as const;
+export const PICTURE: Tag = "picture" as const;
+export const PRE: Tag = "pre" as const;
+export const PROGRESS: Tag = "progress" as const;
+export const Q: Tag = "q" as const;
+export const RP: Tag = "rp" as const;
+export const RT: Tag = "rt" as const;
+export const RUBY: Tag = "ruby" as const;
+export const S: Tag = "s" as const;
+export const SAMP: Tag = "samp" as const;
+export const SCRIPT: Tag = "script" as const;
+export const SEARCH: Tag = "search" as const;
+export const SECTION: Tag = "section" as const;
+export const SELECT: Tag = "select" as const;
+export const SLOT: Tag = "slot" as const;
+export const SMALL: Tag = "small" as const;
+export const SOURCE: Tag = "source" as const;
+export const SPAN: Tag = "span" as const;
+export const STRONG: Tag = "strong" as const;
+export const STYLE: Tag = "style" as const;
+export const SUB: Tag = "sub" as const;
+export const SUMMARY: Tag = "summary" as const;
+export const SUP: Tag = "sup" as const;
+export const TABLE: Tag = "table" as const;
+export const TBODY: Tag = "tbody" as const;
+export const TD: Tag = "td" as const;
+export const TEMPLATE: Tag = "template" as const;
+export const TEXTAREA: Tag = "textarea" as const;
+export const TFOOT: Tag = "tfoot" as const;
+export const TH: Tag = "th" as const;
+export const THEAD: Tag = "thead" as const;
+export const TIME: Tag = "time" as const;
+export const TITLE: Tag = "title" as const;
+export const TR: Tag = "tr" as const;
+export const TRACK: Tag = "track" as const;
+export const U: Tag = "u" as const;
+export const UL: Tag = "ul" as const;
+export const VAR: Tag = "var" as const;
+export const VIDEO: Tag = "video" as const;
+export const WBR: Tag = "wbr" as const;
 
-//=== SVG =========================================================================================
-export const ANIMATE: Tag = "animate";
-export const ANIMATEMOTION: Tag = "animateMotion";
-export const ANIMATETRANSFORM: Tag = "animateTransform";
-export const CIRCLE: Tag = "circle";
-export const CLIPPATH: Tag = "clipPath";
-export const DEFS: Tag = "defs";
-export const DESC: Tag = "desc";
-export const ELLIPSE: Tag = "ellipse";
-export const FEBLEND: Tag = "feBlend";
-export const FECOLORMATRIX: Tag = "feColorMatrix";
-export const FECOMPONENTTRANSFER: Tag = "feComponentTransfer";
-export const FECOMPOSITE: Tag = "feComposite";
-export const FECONVOLVEMATRIX: Tag = "feConvolveMatrix";
-export const FEDIFFUSELIGHTING: Tag = "feDiffuseLighting";
-export const FEDISPLACEMENTMAP: Tag = "feDisplacementMap";
-export const FEDISTANTLIGHT: Tag = "feDistantLight";
-export const FEDROPSHADOW: Tag = "feDropShadow";
-export const FEFLOOD: Tag = "feFlood";
-export const FEFUNCA: Tag = "feFuncA";
-export const FEFUNCB: Tag = "feFuncB";
-export const FEFUNCG: Tag = "feFuncG";
-export const FEFUNCR: Tag = "feFuncR";
-export const FEGAUSSIANBLUR: Tag = "feGaussianBlur";
-export const FEIMAGE: Tag = "feImage";
-export const FEMERGE: Tag = "feMerge";
-export const FEMERGENODE: Tag = "feMergeNode";
-export const FEMORPHOLOGY: Tag = "feMorphology";
-export const FEOFFSET: Tag = "feOffset";
-export const FEPOINTLIGHT: Tag = "fePointLight";
-export const FESPECULARLIGHTING: Tag = "feSpecularLighting";
-export const FESPOTLIGHT: Tag = "feSpotLight";
-export const FETILE: Tag = "feTile";
-export const FETURBULENCE: Tag = "feTurbulence";
-export const FILTER: Tag = "filter";
-export const FOREIGNOBJECT: Tag = "foreignObject";
-export const G: Tag = "g";
-export const IMAGE: Tag = "image";
-export const LINE: Tag = "line";
-export const LINEARGRADIENT: Tag = "linearGradient";
-export const MARKER: Tag = "marker";
-export const MASK: Tag = "mask";
-export const METADATA: Tag = "metadata";
-export const MPATH: Tag = "mpath";
-export const PATH: Tag = "path";
-export const PATTERN: Tag = "pattern";
-export const POLYGON: Tag = "polygon";
-export const POLYLINE: Tag = "polyline";
-export const RADIALGRADIENT: Tag = "radialGradient";
-export const RECT: Tag = "rect";
-export const SET: Tag = "set";
-export const STOP: Tag = "stop";
-export const SVG: Tag = "svg";
-export const SWITCH: Tag = "switch";
-export const SYMBOL: Tag = "symbol";
-export const TEXT: Tag = "text";
-export const TEXTPATH: Tag = "textPath";
-export const TSPAN: Tag = "tspan";
-export const USE: Tag = "use";
-export const VIEW: Tag = "view";
+//=== SVG =====================================================
+export const ANIMATE: Tag = "animate" as const;
+export const ANIMATEMOTION: Tag = "animateMotion" as const;
+export const ANIMATETRANSFORM: Tag = "animateTransform" as const;
+export const CIRCLE: Tag = "circle" as const;
+export const CLIPPATH: Tag = "clipPath" as const;
+export const DEFS: Tag = "defs" as const;
+export const DESC: Tag = "desc" as const;
+export const ELLIPSE: Tag = "ellipse" as const;
+export const FEBLEND: Tag = "feBlend" as const;
+export const FECOLORMATRIX: Tag = "feColorMatrix" as const;
+export const FECOMPONENTTRANSFER: Tag = "feComponentTransfer" as const;
+export const FECOMPOSITE: Tag = "feComposite" as const;
+export const FECONVOLVEMATRIX: Tag = "feConvolveMatrix" as const;
+export const FEDIFFUSELIGHTING: Tag = "feDiffuseLighting" as const;
+export const FEDISPLACEMENTMAP: Tag = "feDisplacementMap" as const;
+export const FEDISTANTLIGHT: Tag = "feDistantLight" as const;
+export const FEDROPSHADOW: Tag = "feDropShadow" as const;
+export const FEFLOOD: Tag = "feFlood" as const;
+export const FEFUNCA: Tag = "feFuncA" as const;
+export const FEFUNCB: Tag = "feFuncB" as const;
+export const FEFUNCG: Tag = "feFuncG" as const;
+export const FEFUNCR: Tag = "feFuncR" as const;
+export const FEGAUSSIANBLUR: Tag = "feGaussianBlur" as const;
+export const FEIMAGE: Tag = "feImage" as const;
+export const FEMERGE: Tag = "feMerge" as const;
+export const FEMERGENODE: Tag = "feMergeNode" as const;
+export const FEMORPHOLOGY: Tag = "feMorphology" as const;
+export const FEOFFSET: Tag = "feOffset" as const;
+export const FEPOINTLIGHT: Tag = "fePointLight" as const;
+export const FESPECULARLIGHTING: Tag = "feSpecularLighting" as const;
+export const FESPOTLIGHT: Tag = "feSpotLight" as const;
+export const FETILE: Tag = "feTile" as const;
+export const FETURBULENCE: Tag = "feTurbulence" as const;
+export const FILTER: Tag = "filter" as const;
+export const FOREIGNOBJECT: Tag = "foreignObject" as const;
+export const G: Tag = "g" as const;
+export const IMAGE: Tag = "image" as const;
+export const LINE: Tag = "line" as const;
+export const LINEARGRADIENT: Tag = "linearGradient" as const;
+export const MARKER: Tag = "marker" as const;
+export const MASK: Tag = "mask" as const;
+export const METADATA: Tag = "metadata" as const;
+export const MPATH: Tag = "mpath" as const;
+export const PATH: Tag = "path" as const;
+export const PATTERN: Tag = "pattern" as const;
+export const POLYGON: Tag = "polygon" as const;
+export const POLYLINE: Tag = "polyline" as const;
+export const RADIALGRADIENT: Tag = "radialGradient" as const;
+export const RECT: Tag = "rect" as const;
+export const SET: Tag = "set" as const;
+export const STOP: Tag = "stop" as const;
+export const SVG: Tag = "svg" as const;
+export const SWITCH: Tag = "switch" as const;
+export const SYMBOL: Tag = "symbol" as const;
+export const TEXT: Tag = "text" as const;
+export const TEXTPATH: Tag = "textPath" as const;
+export const TSPAN: Tag = "tspan" as const;
+export const USE: Tag = "use" as const;
+export const VIEW: Tag = "view" as const;
 
-//=== MathML ======================================================================================
-
-export const ANNOTATION: Tag = "annotation";
-export const ANNOTATION_XML: Tag = "annotation-xml";
-export const MACTION: Tag = "maction";
-export const MATH: Tag = "math";
-export const MERROR: Tag = "merror";
-export const MFRAC: Tag = "mfrac";
-export const MI: Tag = "mi";
-export const MMULTISCRIPTS: Tag = "mmultiscripts";
-export const MN: Tag = "mn";
-export const MO: Tag = "mo";
-export const MOVER: Tag = "mover";
-export const MPADDED: Tag = "mpadded";
-export const MPHANTOM: Tag = "mphantom";
-export const MPRESCRIPTS: Tag = "mprescripts";
-export const MROOT: Tag = "mroot";
-export const MROW: Tag = "mrow";
-export const MS: Tag = "ms";
-export const MSPACE: Tag = "mspace";
-export const MSQRT: Tag = "msqrt";
-export const MSTYLE: Tag = "mstyle";
-export const MSUB: Tag = "msub";
-export const MSUBSUP: Tag = "msubsup";
-export const MSUP: Tag = "msup";
-export const MTABLE: Tag = "mtable";
-export const MTD: Tag = "mtd";
-export const MTEXT: Tag = "mtext";
-export const MTR: Tag = "mtr";
-export const MUNDER: Tag = "munder";
-export const MUNDEROVER: Tag = "munderover";
-export const SEMANTICS: Tag = "semantics";
+//=== MathML ==================================================
+export const ANNOTATION: Tag = "annotation" as const;
+export const ANNOTATION_XML: Tag = "annotation-xml" as const;
+export const MACTION: Tag = "maction" as const;
+export const MATH: Tag = "math" as const;
+export const MERROR: Tag = "merror" as const;
+export const MFRAC: Tag = "mfrac" as const;
+export const MI: Tag = "mi" as const;
+export const MMULTISCRIPTS: Tag = "mmultiscripts" as const;
+export const MN: Tag = "mn" as const;
+export const MO: Tag = "mo" as const;
+export const MOVER: Tag = "mover" as const;
+export const MPADDED: Tag = "mpadded" as const;
+export const MPHANTOM: Tag = "mphantom" as const;
+export const MPRESCRIPTS: Tag = "mprescripts" as const;
+export const MROOT: Tag = "mroot" as const;
+export const MROW: Tag = "mrow" as const;
+export const MS: Tag = "ms" as const;
+export const MSPACE: Tag = "mspace" as const;
+export const MSQRT: Tag = "msqrt" as const;
+export const MSTYLE: Tag = "mstyle" as const;
+export const MSUB: Tag = "msub" as const;
+export const MSUBSUP: Tag = "msubsup" as const;
+export const MSUP: Tag = "msup" as const;
+export const MTABLE: Tag = "mtable" as const;
+export const MTD: Tag = "mtd" as const;
+export const MTEXT: Tag = "mtext" as const;
+export const MTR: Tag = "mtr" as const;
+export const MUNDER: Tag = "munder" as const;
+export const MUNDEROVER: Tag = "munderover" as const;
+export const SEMANTICS: Tag = "semantics" as const;

package/src/vode.ts

@@ -265,17 +265,17 @@ export function hydrate<S = unknown>(element: Element | Text, prepareForRender?:
  * `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");
+    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> { 
+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>; 
+    return state as PatchableState<S>;
 }
 
 /** type safe way to create a patch. useful for type inference and autocompletion. */
@@ -414,7 +414,7 @@ function mergeState(target: any, source: any, allowDeletion: boolean) {
     return target;
 };
 
-function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, svg?: boolean): AttachedVode<S> | undefined {
+function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, xmlns?: string): AttachedVode<S> | undefined {
     // unwrap component if it is memoized
     newVode = remember(state, newVode, oldVode) as ChildVode<S>;
 
@@ -473,20 +473,21 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
     // falsy|text|element(A) -> element(B) 
     if (
         (isNode && (!oldNode || oldIsText || (<Vode<S>>oldVode)[0] !== (<Vode<S>>newVode)[0]))
-    ) {
-        svg = svg || (<Vode<S>>newVode)[0] === "svg";
-        const newNode: ChildNode = svg
-            ? document.createElementNS("http://www.w3.org/2000/svg", (<Vode<S>>newVode)[0])
-            : document.createElement((<Vode<S>>newVode)[0]);
-        (<AttachedVode<S>>newVode).node = newNode;
-
+    ) {        
         const newvode = <Vode<S>>newVode;
         if (1 in newvode) {
             newvode[1] = remember(state, newvode[1], undefined) as Vode<S>;
         }
-
+        
         const properties = props(newVode);
-        patchProperties(patch, newNode, undefined, properties, svg);
+
+        xmlns = properties?.xmlns as string || xmlns;
+        const newNode: ChildNode = xmlns
+            ? document.createElementNS(xmlns, (<Vode<S>>newVode)[0])
+            : document.createElement((<Vode<S>>newVode)[0]);
+        (<AttachedVode<S>>newVode).node = newNode;
+
+        patchProperties(patch, newNode, undefined, properties);
 
         if (oldNode) {
             (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
@@ -503,7 +504,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
         if (newChildren) {
             for (let i = 0; i < newChildren.length; i++) {
                 const child = newChildren[i];
-                const attached = render(state, patch, newNode as Element, i, undefined, child, svg);
+                const attached = render(state, patch, newNode as Element, i, undefined, child, xmlns);
                 (<Vode<S>>newVode!)[properties ? i + 2 : i + 1] = <Vode<S>>attached;
             }
         }
@@ -514,7 +515,6 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
 
     //element(A) -> element(A) 
     if (!oldIsText && isNode && (<Vode<S>>oldVode)[0] === (<Vode<S>>newVode)[0]) {
-        svg = svg || (<Vode<S>>newVode)[0] === "svg";
         (<AttachedVode<S>>newVode).node = oldNode;
 
         const newvode = <Vode<S>>newVode;
@@ -526,13 +526,13 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
             if (prev !== newvode[1]) {
                 const properties = props(newVode);
-                patchProperties(patch, oldNode!, props(oldVode), properties, svg);
+                patchProperties(patch, oldNode!, props(oldVode), properties);
                 hasProps = !!properties;
             }
         }
         else {
             const properties = props(newVode);
-            patchProperties(patch, oldNode!, props(oldVode), properties, svg);
+            patchProperties(patch, oldNode!, props(oldVode), properties);
             hasProps = !!properties;
         }
 
@@ -543,7 +543,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
                 const child = newKids[i];
                 const oldChild = oldKids && oldKids[i];
 
-                const attached = render(state, patch, oldNode as Element, i, oldChild, child, svg);
+                const attached = render(state, patch, oldNode as Element, i, oldChild, child, xmlns);
                 if (attached) {
                     (<Vode<S>>newVode)[hasProps ? i + 2 : i + 1] = <Vode<S>>attached;
                 }
@@ -611,7 +611,7 @@ function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
     }
 }
 
-function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>, isSvg?: boolean) {
+function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>) {
     if (!newProps && !oldProps) return;
 
     // match existing properties
@@ -621,8 +621,8 @@ function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Prop
             const newValue = newProps?.[key as keyof Props<S>] as PropertyValue<S>;
 
             if (oldValue !== newValue) {
-                if (newProps) newProps[key as keyof Props<S>] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
-                else patchProperty(patch, node, key, oldValue, undefined, isSvg);
+                if (newProps) newProps[key as keyof Props<S>] = patchProperty(patch, node, key, oldValue, newValue);
+                else patchProperty(patch, node, key, oldValue, undefined);
             }
         }
     }
@@ -632,7 +632,7 @@ function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Prop
         for (const key in newProps) {
             if (!(key in oldProps)) {
                 const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-                newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue, isSvg);
+                newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue);
             }
         }
     }
@@ -640,12 +640,12 @@ function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Prop
     else if (newProps) {
         for (const key in newProps) {
             const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-            newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue, isSvg);
+            newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue);
         }
     }
 }
 
-function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | keyof ElementEventMap, oldValue?: PropertyValue<S>, newValue?: PropertyValue<S>, isSvg?: boolean) {
+function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | keyof ElementEventMap, oldValue?: PropertyValue<S>, newValue?: PropertyValue<S>) {
     if (key === "style") {
         if (!newValue) {
             (node as HTMLElement).style.cssText = "";
@@ -666,20 +666,10 @@ function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | key
             }
         }
     } else if (key === "class") {
-        if (isSvg) {
-            if (newValue) {
-                const newClass = classString(newValue as ClassProp);
-                (<SVGSVGElement>node).classList.value = newClass;
-            } else {
-                (<SVGSVGElement>node).classList.value = '';
-            }
+        if (newValue) {
+            (<HTMLElement>node).setAttribute("class", classString(newValue as ClassProp));
         } else {
-            if (newValue) {
-                const newClass = classString(newValue as ClassProp);
-                (<HTMLElement>node).className = newClass;
-            } else {
-                (<HTMLElement>node).className = '';
-            }
+            (<HTMLElement>node).removeAttribute("class");
         }
     } else if (key[0] === "o" && key[1] === "n") {
         if (newValue) {
@@ -721,5 +711,5 @@ function classString(classProp: ClassProp): string {
     else if (typeof classProp === "object")
         return Object.keys(classProp!).filter(k => classProp![k]).join(" ");
     else
-        return "";
+        return '';
 }

package/icon.svg

@@ -1,33 +0,0 @@
-<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

@@ -1,57 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35">
-    <style>
-        text {
-        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%;
-        }
-
-        .tag {
-        font-size: 200%;
-        }
-
-        .props {
-        font-size: 135%;
-        }
-
-        .child {
-        font-size: 150%;
-        }
-
-        .braces {
-        font-size: 250%;
-        }
-
-        .comma-text {
-        font-size: 80%;
-        }
-    </style>
-
-    <!-- Opening bracket -->
-    <text x="3%" y="47%" class="braces">[</text>
-
-    <!-- V -->
-    <text x="18%" y="53%" class="tag">V</text>
-    <text x="24%" y="65%" 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="64%" y="58%" class="child">d</text>
-    <text x="75%" y="65%" class="comma-text">,</text>
-
-    <!-- e -->
-    <text x="86.5%" y="58%" class="child">e</text>
-
-    <!-- Closing bracket -->
-    <text x="97%" y="47%" class="braces">]</text>
-</svg>