@ryupold/vode 0.9.6 → 0.10.0

package/.github/workflows/npm-publish.yml

@@ -6,17 +6,13 @@ on:
       - 'main'
 
 jobs:
-  build:
+  test-build-and-publish-to-npm:
     runs-on: ubuntu-latest
     permissions:
       contents: read
       id-token: write
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22.x'
-          registry-url: 'https://registry.npmjs.org'
       - uses: oven-sh/setup-bun@v2
       - run: bun run build
       - run: |

package/README.md

@@ -7,7 +7,14 @@ The state is a singleton object that can be updated, and the UI will re-render w
 ## Install
 
 ```bash
+# npm
 npm install @ryupold/vode --save
+
+# yarn
+yarn add @ryupold/vode
+
+# bun
+bun add @ryupold/vode
 ```
 
 ## Patch

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "0.9.6",
+    "version": "0.10.0",
     "description": "Small web framework for minimal websites",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -22,7 +22,8 @@
     "homepage": "https://github.com/ryupold/vode#readme",
     "module": "index.ts",
     "scripts": {
-        "build": "bun build index.ts --outfile index.js",
+        "build": "bun build index.ts --outfile vode.mjs",
+        "build-min": "bun build index.ts --outfile vode.min.mjs --minify",
         "pack": "rm *.tgz && bun run build && bun pm pack",
         "publish": "bun publish --provenance --access public",
         "clean": "tsc -b --clean",

package/src/vode.ts

@@ -69,21 +69,23 @@ export type EventsMap =
 export type PropertyValue<S> = string | boolean | null | undefined | StyleProp | ClassProp | Patch<S> | void;
 
 export type ContainerNode<S> = HTMLElement & {
-    state: PatchableState<S>,
-    vode: AttachedVode<S>,
-    patch: Dispatch<S>,
-    render: () => void,
-    q: Patch<S>[]
-    isRendering: boolean,
-    stats: {
-        patchCount: number,
-        liveEffectCount: number,
-        renderPatchCount: number,
-        renderCount: number,
-        renderTime: number,
-        queueLengthBeforeRender: number,
-        queueLengthAfterRender: number,
-    },
+    _vode: {
+        state: PatchableState<S>,
+        vode: AttachedVode<S>,
+        patch: Dispatch<S>,
+        render: () => void,
+        q: Patch<S>[]
+        isRendering: boolean,
+        stats: {
+            patchCount: number,
+            liveEffectCount: number,
+            renderPatchCount: number,
+            renderCount: number,
+            renderTime: number,
+            queueLengthBeforeRender: number,
+            queueLengthAfterRender: number,
+        },
+    }
 };
 
 /** type-safe way to create a vode. useful for type inference and autocompletion.
@@ -120,98 +122,102 @@ export function patch<S>(p: DeepPartial<S> | Effect<S> | NoRenderPatch): typeof
  * @returns a patch function that can be used to update the state
  */
 export function app<S>(container: HTMLElement, initialState: Omit<S, "patch">, dom: Component<S>, ...initialPatches: Patch<S>[]) {
-    const root = container as ContainerNode<S>;
-    root.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+    const _vode = {} as ContainerNode<S>["_vode"];
+    _vode.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
 
     Object.defineProperty(initialState, "patch", {
         enumerable: false, configurable: true,
         writable: false, value: async (action: Patch<S>) => {
             if (!action || (typeof action !== "function" && typeof action !== "object")) return;
-            root.stats.patchCount++;
+            _vode.stats.patchCount++;
 
             if ((action as AsyncGenerator<Patch<S>, unknown, void>)?.next) {
                 const generator = action as AsyncGenerator<Patch<S>, unknown, void>;
-                root.stats.liveEffectCount++;
+                _vode.stats.liveEffectCount++;
                 try {
                     let v = await generator.next();
                     while (v.done === false) {
-                        root.stats.liveEffectCount++;
+                        _vode.stats.liveEffectCount++;
                         try {
-                            root.patch!(v.value);
+                            _vode.patch!(v.value);
                             v = await generator.next();
                         } finally {
-                            root.stats.liveEffectCount--;
+                            _vode.stats.liveEffectCount--;
                         }
                     }
-                    root.patch!(v.value as Patch<S>);
+                    _vode.patch!(v.value as Patch<S>);
                 } finally {
-                    root.stats.liveEffectCount--;
+                    _vode.stats.liveEffectCount--;
                 }
             } else if ((action as Promise<S>).then) {
-                root.stats.liveEffectCount++;
+                _vode.stats.liveEffectCount++;
                 try {
                     const nextState = await (action as Promise<S>);
-                    root.patch!(<Patch<S>>nextState);
+                    _vode.patch!(<Patch<S>>nextState);
                 } finally {
-                    root.stats.liveEffectCount--;
+                    _vode.stats.liveEffectCount--;
                 }
             } else if (Array.isArray(action)) {
                 if (typeof action[0] === "function") {
                     if (action.length > 1)
-                        root.patch!(action[0](root.state!, ...(action as any[]).slice(1)));
-                    else root.patch!(action[0](root.state!));
+                        _vode.patch!(action[0](_vode.state!, ...(action as any[]).slice(1)));
+                    else _vode.patch!(action[0](_vode.state!));
                 } else {
-                    root.stats.patchCount--;
+                    _vode.stats.patchCount--;
                 }
             } else if (typeof action === "function") {
-                root.patch!((<EffectFunction<S>>action)(root.state));
+                _vode.patch!((<EffectFunction<S>>action)(_vode.state));
             } else {
-                root.stats.renderPatchCount++;
-                root.q!.push(<Patch<S>>action);
-                if (!root.isRendering) root.render!();
+                _vode.stats.renderPatchCount++;
+                _vode.q!.push(<Patch<S>>action);
+                if (!_vode.isRendering) _vode.render!();
             }
         }
     });
 
-    Object.defineProperty(root, "render", {
+    Object.defineProperty(_vode, "render", {
         enumerable: false, configurable: true,
         writable: false, value: () => requestAnimationFrame(() => {
-            if (root.isRendering || root.q!.length === 0) return;
-            root.isRendering = true;
+            if (_vode.isRendering || _vode.q!.length === 0) return;
+            _vode.isRendering = true;
             const sw = Date.now();
             try {
-                root.stats.queueLengthBeforeRender = root.q!.length;
+                _vode.stats.queueLengthBeforeRender = _vode.q!.length;
 
-                while (root.q!.length > 0) {
-                    const patch = root.q!.shift();
-                    if(patch === EmptyPatch) continue;
-                    mergeState(root.state, patch);
+                while (_vode.q!.length > 0) {
+                    const patch = _vode.q!.shift();
+                    if (patch === EmptyPatch) continue;
+                    mergeState(_vode.state, patch);
                 }
-                root.vode = render(root.state, root.patch, container, 0, root.vode, dom(root.state))!;
+                _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state))!;
             } finally {
-                root.isRendering = false;
-                root.stats.renderCount++;
-                root.stats.renderTime = Date.now() - sw;
-                root.stats.queueLengthAfterRender = root.q!.length;
-                if (root.q!.length > 0) {
-                    root.render!();
+                _vode.isRendering = false;
+                _vode.stats.renderCount++;
+                _vode.stats.renderTime = Date.now() - sw;
+                _vode.stats.queueLengthAfterRender = _vode.q!.length;
+                if (_vode.q!.length > 0) {
+                    _vode.render!();
                 }
             }
         })
     });
 
-    root.patch = (<PatchableState<S>>initialState).patch;
-    root.state = <PatchableState<S>>initialState;
-    root.q = [];
+    _vode.patch = (<PatchableState<S>>initialState).patch;
+    _vode.state = <PatchableState<S>>initialState;
+    _vode.q = [];
+    
+    const root = container as ContainerNode<S>;
+    root._vode = _vode;
+
     const initialVode = dom(<S>initialState);
-    root.vode = <AttachedVode<S>>initialVode;
-    root.vode = render(<S>initialState, root.patch!, container, 0, undefined, initialVode)!;
+    _vode.vode = <AttachedVode<S>>initialVode;
+    _vode.vode = render(<S>initialState, _vode.patch!, container, 0, undefined, initialVode)!;
 
     for (const effect of initialPatches) {
-        root.patch!(effect);
+        _vode.patch!(effect);
     }
 
-    return root.patch;
+    return _vode.patch;
 }
 
 /** get properties of a vode, if there are any */

package/vode.mjs

@@ -0,0 +1,962 @@
+// src/vode.ts
+var EmptyPatch = {};
+function vode(tag, props, ...children) {
+  if (Array.isArray(tag)) {
+    return tag;
+  }
+  if (props) {
+    return [tag, props, ...children];
+  }
+  return [tag, ...children];
+}
+function createState(state) {
+  return state;
+}
+function patch(p) {
+  return p;
+}
+function app(container, initialState, dom, ...initialPatches) {
+  const _vode = {};
+  _vode.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+  Object.defineProperty(initialState, "patch", {
+    enumerable: false,
+    configurable: true,
+    writable: false,
+    value: async (action) => {
+      if (!action || typeof action !== "function" && typeof action !== "object")
+        return;
+      _vode.stats.patchCount++;
+      if (action?.next) {
+        const generator = action;
+        _vode.stats.liveEffectCount++;
+        try {
+          let v = await generator.next();
+          while (v.done === false) {
+            _vode.stats.liveEffectCount++;
+            try {
+              _vode.patch(v.value);
+              v = await generator.next();
+            } finally {
+              _vode.stats.liveEffectCount--;
+            }
+          }
+          _vode.patch(v.value);
+        } finally {
+          _vode.stats.liveEffectCount--;
+        }
+      } else if (action.then) {
+        _vode.stats.liveEffectCount++;
+        try {
+          const nextState = await action;
+          _vode.patch(nextState);
+        } finally {
+          _vode.stats.liveEffectCount--;
+        }
+      } else if (Array.isArray(action)) {
+        if (typeof action[0] === "function") {
+          if (action.length > 1)
+            _vode.patch(action[0](_vode.state, ...action.slice(1)));
+          else
+            _vode.patch(action[0](_vode.state));
+        } else {
+          _vode.stats.patchCount--;
+        }
+      } else if (typeof action === "function") {
+        _vode.patch(action(_vode.state));
+      } else {
+        _vode.stats.renderPatchCount++;
+        _vode.q.push(action);
+        if (!_vode.isRendering)
+          _vode.render();
+      }
+    }
+  });
+  Object.defineProperty(_vode, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: false,
+    value: () => requestAnimationFrame(() => {
+      if (_vode.isRendering || _vode.q.length === 0)
+        return;
+      _vode.isRendering = true;
+      const sw = Date.now();
+      try {
+        _vode.stats.queueLengthBeforeRender = _vode.q.length;
+        while (_vode.q.length > 0) {
+          const patch2 = _vode.q.shift();
+          if (patch2 === EmptyPatch)
+            continue;
+          mergeState(_vode.state, patch2);
+        }
+        _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
+      } finally {
+        _vode.isRendering = false;
+        _vode.stats.renderCount++;
+        _vode.stats.renderTime = Date.now() - sw;
+        _vode.stats.queueLengthAfterRender = _vode.q.length;
+        if (_vode.q.length > 0) {
+          _vode.render();
+        }
+      }
+    })
+  });
+  _vode.patch = initialState.patch;
+  _vode.state = initialState;
+  _vode.q = [];
+  const root = container;
+  root._vode = _vode;
+  const initialVode = dom(initialState);
+  _vode.vode = initialVode;
+  _vode.vode = render(initialState, _vode.patch, container, 0, undefined, initialVode);
+  for (const effect of initialPatches) {
+    _vode.patch(effect);
+  }
+  return _vode.patch;
+}
+function props(vode2) {
+  if (Array.isArray(vode2) && vode2.length > 1 && vode2[1] && !Array.isArray(vode2[1])) {
+    if (typeof vode2[1] === "object" && vode2[1].nodeType !== Node.TEXT_NODE) {
+      return vode2[1];
+    }
+  }
+  return;
+}
+function mergeClass(a, b) {
+  if (!a)
+    return b;
+  if (!b)
+    return a;
+  if (typeof a === "string" && typeof b === "string") {
+    const aSplit = a.split(" ");
+    const bSplit = b.split(" ");
+    const classSet = new Set([...aSplit, ...bSplit]);
+    return Array.from(classSet).join(" ").trim();
+  } else if (typeof a === "string" && Array.isArray(b)) {
+    const classSet = new Set([...b, ...a.split(" ")]);
+    return Array.from(classSet).join(" ").trim();
+  } else if (Array.isArray(a) && typeof b === "string") {
+    const classSet = new Set([...a, ...b.split(" ")]);
+    return Array.from(classSet).join(" ").trim();
+  } else if (Array.isArray(a) && Array.isArray(b)) {
+    const classSet = new Set([...a, ...b]);
+    return Array.from(classSet).join(" ").trim();
+  } else if (typeof a === "string" && typeof b === "object") {
+    return { [a]: true, ...b };
+  } else if (typeof a === "object" && typeof b === "string") {
+    return { ...a, [b]: true };
+  } else if (typeof a === "object" && typeof b === "object") {
+    return { ...a, ...b };
+  } else if (typeof a === "object" && Array.isArray(b)) {
+    const aa = { ...a };
+    for (const item of b) {
+      aa[item] = true;
+    }
+    return aa;
+  } else if (Array.isArray(a) && typeof b === "object") {
+    const aa = {};
+    for (const item of a) {
+      aa[item] = true;
+    }
+    for (const bKey of b.keys) {
+      aa[bKey] = b[bKey];
+    }
+    return b;
+  }
+  throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
+}
+function patchProps(vode2, props2) {
+  if (!Array.isArray(vode2))
+    return;
+  if (vode2.length > 1) {
+    if (!Array.isArray(vode2[1]) && typeof vode2[1] === "object") {
+      vode2[1] = merge(vode2[1], props2);
+      return;
+    }
+    if (childCount(vode2) > 0) {
+      vode2.push(null);
+    }
+    for (let i = vode2.length - 1;i > 0; i--) {
+      if (i > 1)
+        vode2[i] = vode2[i - 1];
+    }
+    vode2[1] = props2;
+  } else {
+    vode2.push(props2);
+  }
+}
+function children(vode2) {
+  const start = childrenStart(vode2);
+  if (start > 0) {
+    return vode2.slice(start);
+  }
+  return;
+}
+function childrenStart(vode2) {
+  return props(vode2) ? 2 : 1;
+}
+function tag(v) {
+  return v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : undefined : undefined;
+}
+function childCount(vode2) {
+  return vode2.length - childrenStart(vode2);
+}
+function child(vode2, index) {
+  return vode2[index + childrenStart(vode2)];
+}
+function merge(first, ...p) {
+  first = mergeState({}, first);
+  for (const pp of p) {
+    if (!pp)
+      continue;
+    first = mergeState(first, pp);
+  }
+  return first;
+}
+function classString(classProp) {
+  if (typeof classProp === "string") {
+    return classProp;
+  } else if (Array.isArray(classProp)) {
+    return classProp.map(classString).join(" ");
+  } else if (typeof classProp === "object") {
+    return Object.keys(classProp).filter((k) => classProp[k]).join(" ");
+  } else {
+    return "";
+  }
+}
+function isNaturalVode(x) {
+  return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
+}
+function isTextVode(x) {
+  return typeof x === "string" || x?.nodeType === Node.TEXT_NODE;
+}
+function unwrap(c, s) {
+  if (typeof c === "function") {
+    return unwrap(c(s), s);
+  } else {
+    return c;
+  }
+}
+function memo(compare, componentOrProps) {
+  componentOrProps.__memo = compare;
+  return componentOrProps;
+}
+function remember(state, present, past) {
+  if (typeof present !== "function")
+    return present;
+  const presentMemo = present?.__memo;
+  const pastMemo = past?.__memo;
+  if (Array.isArray(presentMemo) && Array.isArray(pastMemo) && presentMemo.length === pastMemo.length) {
+    let same = true;
+    for (let i = 0;i < presentMemo.length; i++) {
+      if (presentMemo[i] !== pastMemo[i]) {
+        same = false;
+        break;
+      }
+    }
+    if (same)
+      return past;
+  }
+  const newRender = unwrap(present, state);
+  if (typeof newRender === "object") {
+    newRender.__memo = present?.__memo;
+  }
+  return newRender;
+}
+function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
+  newVode = remember(state, newVode, oldVode);
+  const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
+  if (newVode === oldVode || !oldVode && isNoVode) {
+    return oldVode;
+  }
+  const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
+  const oldNode = oldIsText ? oldVode : oldVode?.node;
+  if (isNoVode) {
+    oldNode?.onUnmount && patch2(oldNode.onUnmount(oldNode));
+    oldNode?.remove();
+    return;
+  }
+  const isText = !isNoVode && isTextVode(newVode);
+  const isNode = !isNoVode && isNaturalVode(newVode);
+  const alreadyAttached = !!newVode && typeof newVode !== "string" && !!(newVode?.node || newVode?.nodeType === Node.TEXT_NODE);
+  if (!isText && !isNode && !alreadyAttached && !oldVode) {
+    throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
+  } else if (alreadyAttached && isText) {
+    newVode = newVode.wholeText;
+  } else if (alreadyAttached && isNode) {
+    newVode = [...newVode];
+  }
+  if (oldIsText && isText) {
+    if (oldNode.nodeValue !== newVode) {
+      oldNode.nodeValue = newVode;
+    }
+    return oldVode;
+  }
+  if (isText && (!oldNode || !oldIsText)) {
+    const text = document.createTextNode(newVode);
+    if (oldNode) {
+      oldNode.onUnmount && patch2(oldNode.onUnmount(oldNode));
+      oldNode.replaceWith(text);
+    } else {
+      if (parent.childNodes[childIndex]) {
+        parent.insertBefore(text, parent.childNodes[childIndex]);
+      } else {
+        parent.appendChild(text);
+      }
+    }
+    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(patch2, newNode, undefined, properties, svg);
+    if (oldNode) {
+      oldNode.onUnmount && patch2(oldNode.onUnmount(oldNode));
+      oldNode.replaceWith(newNode);
+    } else {
+      if (parent.childNodes[childIndex]) {
+        parent.insertBefore(newNode, parent.childNodes[childIndex]);
+      } else {
+        parent.appendChild(newNode);
+      }
+    }
+    const newChildren = children(newVode);
+    if (newChildren) {
+      for (let i = 0;i < newChildren.length; i++) {
+        const child2 = newChildren[i];
+        const attached = render(state, patch2, newNode, i, undefined, child2, svg);
+        newVode[properties ? i + 2 : i + 1] = attached;
+      }
+    }
+    newNode.onMount && patch2(newNode.onMount(newNode));
+    return newVode;
+  }
+  if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
+    svg = svg || newVode[0] === "svg";
+    newVode.node = oldNode;
+    const newvode = newVode;
+    const oldvode = oldVode;
+    let hasProps = false;
+    if (newvode[1]?.__memo) {
+      const prev = newvode[1];
+      newvode[1] = remember(state, newvode[1], oldvode[1]);
+      if (prev !== newvode[1]) {
+        const properties = props(newVode);
+        patchProperties(patch2, oldNode, props(oldVode), properties, svg);
+        hasProps = !!properties;
+      }
+    } else {
+      const properties = props(newVode);
+      patchProperties(patch2, oldNode, props(oldVode), properties, svg);
+      hasProps = !!properties;
+    }
+    const newKids = children(newVode);
+    const oldKids = children(oldVode);
+    if (newKids) {
+      for (let i = 0;i < newKids.length; i++) {
+        const child2 = newKids[i];
+        const oldChild = oldKids && oldKids[i];
+        const attached = render(state, patch2, oldNode, i, oldChild, child2, svg);
+        if (attached) {
+          newVode[hasProps ? i + 2 : i + 1] = attached;
+        }
+      }
+      for (let i = newKids.length;oldKids && i < oldKids.length; i++) {
+        if (oldKids[i]?.node)
+          oldKids[i].node.remove();
+        else if (oldKids[i]?.nodeType === Node.TEXT_NODE)
+          oldKids[i].remove();
+      }
+    }
+    for (let i = newKids?.length || 0;i < oldKids?.length; i++) {
+      if (oldKids[i]?.node)
+        oldKids[i].node.remove();
+      else if (oldKids[i]?.nodeType === Node.TEXT_NODE)
+        oldKids[i].remove();
+    }
+    return newVode;
+  }
+  return;
+}
+function patchProperties(patch2, node, oldProps, newProps, isSvg) {
+  if (!newProps && !oldProps)
+    return;
+  if (!oldProps) {
+    for (const key in newProps) {
+      const newValue = newProps[key];
+      newProps[key] = patchProperty(patch2, node, key, undefined, newValue, isSvg);
+    }
+  } else if (newProps) {
+    const combinedKeys = new Set([...Object.keys(oldProps), ...Object.keys(newProps)]);
+    for (const key of combinedKeys) {
+      const oldValue = oldProps[key];
+      const newValue = newProps[key];
+      if (key[0] === "o" && key[1] === "n") {
+        const oldEvent = node["__" + key];
+        if (oldEvent && oldEvent !== newValue || !oldEvent && oldValue !== newValue) {
+          newProps[key] = patchProperty(patch2, node, key, oldValue, newValue, isSvg);
+        }
+        node["__" + key] = newValue;
+      } else if (oldValue !== newValue) {
+        newProps[key] = patchProperty(patch2, node, key, oldValue, newValue, isSvg);
+      }
+    }
+  } else {
+    for (const key in oldProps) {
+      const oldValue = oldProps[key];
+      oldProps[key] = patchProperty(patch2, node, key, oldValue, undefined, isSvg);
+    }
+  }
+}
+function patchProperty(patch2, node, key, oldValue, newValue, isSvg) {
+  if (key === "style") {
+    if (!newValue) {
+      node.style.cssText = "";
+    } else if (oldValue) {
+      for (let k in { ...oldValue, ...newValue }) {
+        if (!oldValue || newValue[k] !== oldValue[k]) {
+          node.style[k] = newValue[k];
+        } else if (oldValue[k] && !newValue[k]) {
+          node.style[k] = undefined;
+        }
+      }
+    } else {
+      for (let k in newValue) {
+        node.style[k] = newValue[k];
+      }
+    }
+  } else if (key === "class") {
+    if (isSvg) {
+      if (newValue) {
+        const newClass = classString(newValue);
+        node.classList.value = newClass;
+      } else {
+        node.classList.value = "";
+      }
+    } else {
+      if (newValue) {
+        const newClass = classString(newValue);
+        node.className = newClass;
+      } else {
+        node.className = "";
+      }
+    }
+  } else if (key[0] === "o" && key[1] === "n") {
+    if (newValue) {
+      let eventHandler = null;
+      if (typeof newValue === "function") {
+        const action = newValue;
+        eventHandler = (evt) => patch2([action, evt]);
+      } else if (Array.isArray(newValue)) {
+        const arr = newValue;
+        const action = newValue[0];
+        if (arr.length > 1) {
+          eventHandler = () => patch2([action, ...arr.slice(1)]);
+        } else {
+          eventHandler = (evt) => patch2([action, evt]);
+        }
+      } else if (typeof newValue === "object") {
+        eventHandler = () => patch2(newValue);
+      }
+      node[key] = eventHandler;
+    } else {
+      node[key] = null;
+    }
+  } else if (newValue !== null && newValue !== undefined && newValue !== false) {
+    node.setAttribute(key, newValue);
+  } else {
+    node.removeAttribute(key);
+  }
+  return newValue;
+}
+function mergeState(target, source) {
+  if (!source)
+    return target;
+  for (const key in source) {
+    const value = source[key];
+    if (value && typeof value === "object") {
+      const targetValue = target[key];
+      if (targetValue) {
+        if (Array.isArray(value)) {
+          target[key] = [...value];
+        } else if (value instanceof Date && targetValue !== value) {
+          target[key] = new Date(value);
+        } else {
+          if (Array.isArray(targetValue))
+            target[key] = mergeState({}, value);
+          else if (typeof targetValue === "object")
+            mergeState(target[key], value);
+          else
+            target[key] = mergeState({}, value);
+        }
+      } else if (Array.isArray(value)) {
+        target[key] = [...value];
+      } else if (value instanceof Date) {
+        target[key] = new Date(value);
+      } else {
+        target[key] = mergeState({}, value);
+      }
+    } else if (value === undefined) {
+      delete target[key];
+    } else {
+      target[key] = value;
+    }
+  }
+  return target;
+}
+// src/vode-tags.ts
+var A = "a";
+var ABBR = "abbr";
+var ADDRESS = "address";
+var AREA = "area";
+var ARTICLE = "article";
+var ASIDE = "aside";
+var AUDIO = "audio";
+var B = "b";
+var BASE = "base";
+var BDI = "bdi";
+var BDO = "bdo";
+var BLOCKQUOTE = "blockquote";
+var BODY = "body";
+var BR = "br";
+var BUTTON = "button";
+var CANVAS = "canvas";
+var CAPTION = "caption";
+var CITE = "cite";
+var CODE = "code";
+var COL = "col";
+var COLGROUP = "colgroup";
+var DATA = "data";
+var DATALIST = "datalist";
+var DD = "dd";
+var DEL = "del";
+var DETAILS = "details";
+var DFN = "dfn";
+var DIALOG = "dialog";
+var DIV = "div";
+var DL = "dl";
+var DT = "dt";
+var EM = "em";
+var EMBED = "embed";
+var FIELDSET = "fieldset";
+var FIGCAPTION = "figcaption";
+var FIGURE = "figure";
+var FOOTER = "footer";
+var FORM = "form";
+var H1 = "h1";
+var H2 = "h2";
+var H3 = "h3";
+var H4 = "h4";
+var H5 = "h5";
+var H6 = "h6";
+var HEAD = "head";
+var HEADER = "header";
+var HGROUP = "hgroup";
+var HR = "hr";
+var HTML = "html";
+var I = "i";
+var IFRAME = "iframe";
+var IMG = "img";
+var INPUT = "input";
+var INS = "ins";
+var KBD = "kbd";
+var LABEL = "label";
+var LEGEND = "legend";
+var LI = "li";
+var LINK = "link";
+var MAIN = "main";
+var MAP = "map";
+var MARK = "mark";
+var MENU = "menu";
+var META = "meta";
+var METER = "meter";
+var NAV = "nav";
+var NOSCRIPT = "noscript";
+var OBJECT = "object";
+var OL = "ol";
+var OPTGROUP = "optgroup";
+var OPTION = "option";
+var OUTPUT = "output";
+var P = "p";
+var PICTURE = "picture";
+var PRE = "pre";
+var PROGRESS = "progress";
+var Q = "q";
+var RP = "rp";
+var RT = "rt";
+var RUBY = "ruby";
+var S = "s";
+var SAMP = "samp";
+var SCRIPT = "script";
+var SECTION = "section";
+var SELECT = "select";
+var SLOT = "slot";
+var SMALL = "small";
+var SOURCE = "source";
+var SPAN = "span";
+var STRONG = "strong";
+var STYLE = "style";
+var SUB = "sub";
+var SUMMARY = "summary";
+var SUP = "sup";
+var TABLE = "table";
+var TBODY = "tbody";
+var TD = "td";
+var TEMPLATE = "template";
+var TEXTAREA = "textarea";
+var TFOOT = "tfoot";
+var TH = "th";
+var THEAD = "thead";
+var TIME = "time";
+var TITLE = "title";
+var TR = "tr";
+var TRACK = "track";
+var U = "u";
+var UL = "ul";
+var VIDEO = "video";
+var WBR = "wbr";
+var ANIMATE = "animate";
+var ANIMATEMOTION = "animateMotion";
+var ANIMATETRANSFORM = "animateTransform";
+var CIRCLE = "circle";
+var CLIPPATH = "clipPath";
+var DEFS = "defs";
+var DESC = "desc";
+var ELLIPSE = "ellipse";
+var FEBLEND = "feBlend";
+var FECOLORMATRIX = "feColorMatrix";
+var FECOMPONENTTRANSFER = "feComponentTransfer";
+var FECOMPOSITE = "feComposite";
+var FECONVOLVEMATRIX = "feConvolveMatrix";
+var FEDIFFUSELIGHTING = "feDiffuseLighting";
+var FEDISPLACEMENTMAP = "feDisplacementMap";
+var FEDISTANTLIGHT = "feDistantLight";
+var FEDROPSHADOW = "feDropShadow";
+var FEFLOOD = "feFlood";
+var FEFUNCA = "feFuncA";
+var FEFUNCB = "feFuncB";
+var FEFUNCG = "feFuncG";
+var FEFUNCR = "feFuncR";
+var FEGAUSSIANBLUR = "feGaussianBlur";
+var FEIMAGE = "feImage";
+var FEMERGE = "feMerge";
+var FEMERGENODE = "feMergeNode";
+var FEMORPHOLOGY = "feMorphology";
+var FEOFFSET = "feOffset";
+var FEPOINTLIGHT = "fePointLight";
+var FESPECULARLIGHTING = "feSpecularLighting";
+var FESPOTLIGHT = "feSpotLight";
+var FETILE = "feTile";
+var FETURBULENCE = "feTurbulence";
+var FILTER = "filter";
+var FOREIGNOBJECT = "foreignObject";
+var G = "g";
+var IMAGE = "image";
+var LINE = "line";
+var LINEARGRADIENT = "linearGradient";
+var MARKER = "marker";
+var MASK = "mask";
+var METADATA = "metadata";
+var MPATH = "mpath";
+var PATH = "path";
+var PATTERN = "pattern";
+var POLYGON = "polygon";
+var POLYLINE = "polyline";
+var RADIALGRADIENT = "radialGradient";
+var RECT = "rect";
+var SET = "set";
+var STOP = "stop";
+var SVG = "svg";
+var SWITCH = "switch";
+var SYMBOL = "symbol";
+var TEXT = "text";
+var TEXTPATH = "textPath";
+var TSPAN = "tspan";
+var USE = "use";
+var VIEW = "view";
+var ANNOTATION = "annotation";
+var ANNOTATION_XML = "annotation-xml";
+var MACTION = "maction";
+var MATH = "math";
+var MERROR = "merror";
+var MFRAC = "mfrac";
+var MI = "mi";
+var MMULTISCRIPTS = "mmultiscripts";
+var MN = "mn";
+var MO = "mo";
+var MOVER = "mover";
+var MPADDED = "mpadded";
+var MPHANTOM = "mphantom";
+var MPRESCRIPTS = "mprescripts";
+var MROOT = "mroot";
+var MROW = "mrow";
+var MS = "ms";
+var MSPACE = "mspace";
+var MSQRT = "msqrt";
+var MSTYLE = "mstyle";
+var MSUB = "msub";
+var MSUBSUP = "msubsup";
+var MSUP = "msup";
+var MTABLE = "mtable";
+var MTD = "mtd";
+var MTEXT = "mtext";
+var MTR = "mtr";
+var MUNDER = "munder";
+var MUNDEROVER = "munderover";
+var SEMANTICS = "semantics";
+// src/html.ts
+function htmlToVode(html) {
+  const div = document.createElement("div");
+  div.innerHTML = html.trim();
+  const vodes = [];
+  for (const child2 of div.childNodes) {
+    const v = elementToVode(child2);
+    if (v != null)
+      vodes.push(v);
+  }
+  return vodes;
+}
+function elementToVode(element) {
+  if (element.nodeType === Node.TEXT_NODE) {
+    return element.textContent;
+  }
+  if (element.nodeType !== Node.ELEMENT_NODE) {
+    return;
+  }
+  const vode2 = [element.tagName.toLowerCase()];
+  if (element.hasAttributes()) {
+    const props2 = {};
+    for (const att of element.attributes) {
+      props2[att.name] = att.value;
+    }
+    vode2.push(props2);
+  }
+  for (const child2 of element.childNodes) {
+    const v = elementToVode(child2);
+    if (v && (typeof v !== "string" || v.length > 0))
+      vode2.push(v);
+  }
+  return vode2;
+}
+export {
+  vode,
+  tag,
+  props,
+  patchProps,
+  patch,
+  mergeClass,
+  merge,
+  memo,
+  htmlToVode,
+  createState,
+  childrenStart,
+  children,
+  childCount,
+  child,
+  app,
+  WBR,
+  VIEW,
+  VIDEO,
+  USE,
+  UL,
+  U,
+  TSPAN,
+  TRACK,
+  TR,
+  TITLE,
+  TIME,
+  THEAD,
+  TH,
+  TFOOT,
+  TEXTPATH,
+  TEXTAREA,
+  TEXT,
+  TEMPLATE,
+  TD,
+  TBODY,
+  TABLE,
+  SYMBOL,
+  SWITCH,
+  SVG,
+  SUP,
+  SUMMARY,
+  SUB,
+  STYLE,
+  STRONG,
+  STOP,
+  SPAN,
+  SOURCE,
+  SMALL,
+  SLOT,
+  SET,
+  SEMANTICS,
+  SELECT,
+  SECTION,
+  SCRIPT,
+  SAMP,
+  S,
+  RUBY,
+  RT,
+  RP,
+  RECT,
+  RADIALGRADIENT,
+  Q,
+  PROGRESS,
+  PRE,
+  POLYLINE,
+  POLYGON,
+  PICTURE,
+  PATTERN,
+  PATH,
+  P,
+  OUTPUT,
+  OPTION,
+  OPTGROUP,
+  OL,
+  OBJECT,
+  NOSCRIPT,
+  NAV,
+  MUNDEROVER,
+  MUNDER,
+  MTR,
+  MTEXT,
+  MTD,
+  MTABLE,
+  MSUP,
+  MSUBSUP,
+  MSUB,
+  MSTYLE,
+  MSQRT,
+  MSPACE,
+  MS,
+  MROW,
+  MROOT,
+  MPRESCRIPTS,
+  MPHANTOM,
+  MPATH,
+  MPADDED,
+  MOVER,
+  MO,
+  MN,
+  MMULTISCRIPTS,
+  MI,
+  MFRAC,
+  METER,
+  METADATA,
+  META,
+  MERROR,
+  MENU,
+  MATH,
+  MASK,
+  MARKER,
+  MARK,
+  MAP,
+  MAIN,
+  MACTION,
+  LINK,
+  LINEARGRADIENT,
+  LINE,
+  LI,
+  LEGEND,
+  LABEL,
+  KBD,
+  INS,
+  INPUT,
+  IMG,
+  IMAGE,
+  IFRAME,
+  I,
+  HTML,
+  HR,
+  HGROUP,
+  HEADER,
+  HEAD,
+  H6,
+  H5,
+  H4,
+  H3,
+  H2,
+  H1,
+  G,
+  FORM,
+  FOREIGNOBJECT,
+  FOOTER,
+  FILTER,
+  FIGURE,
+  FIGCAPTION,
+  FIELDSET,
+  FETURBULENCE,
+  FETILE,
+  FESPOTLIGHT,
+  FESPECULARLIGHTING,
+  FEPOINTLIGHT,
+  FEOFFSET,
+  FEMORPHOLOGY,
+  FEMERGENODE,
+  FEMERGE,
+  FEIMAGE,
+  FEGAUSSIANBLUR,
+  FEFUNCR,
+  FEFUNCG,
+  FEFUNCB,
+  FEFUNCA,
+  FEFLOOD,
+  FEDROPSHADOW,
+  FEDISTANTLIGHT,
+  FEDISPLACEMENTMAP,
+  FEDIFFUSELIGHTING,
+  FECONVOLVEMATRIX,
+  FECOMPOSITE,
+  FECOMPONENTTRANSFER,
+  FECOLORMATRIX,
+  FEBLEND,
+  EmptyPatch,
+  EMBED,
+  EM,
+  ELLIPSE,
+  DT,
+  DL,
+  DIV,
+  DIALOG,
+  DFN,
+  DETAILS,
+  DESC,
+  DEL,
+  DEFS,
+  DD,
+  DATALIST,
+  DATA,
+  COLGROUP,
+  COL,
+  CODE,
+  CLIPPATH,
+  CITE,
+  CIRCLE,
+  CAPTION,
+  CANVAS,
+  BUTTON,
+  BR,
+  BODY,
+  BLOCKQUOTE,
+  BDO,
+  BDI,
+  BASE,
+  B,
+  AUDIO,
+  ASIDE,
+  ARTICLE,
+  AREA,
+  ANNOTATION_XML,
+  ANNOTATION,
+  ANIMATETRANSFORM,
+  ANIMATEMOTION,
+  ANIMATE,
+  ADDRESS,
+  ABBR,
+  A
+};