@ryupold/vode 1.1.9 → 1.3.0

package/dist/vode.mjs

@@ -1,4 +1,9 @@
 // src/vode.ts
+var globals = {
+  currentViewTransition: undefined,
+  requestAnimationFrame: window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : (cb) => cb(),
+  startViewTransition: document.startViewTransition ? document.startViewTransition.bind(document) : null
+};
 function vode(tag, props, ...children) {
   if (!tag)
     throw new Error("first argument to vode() must be a tag name or a vode");
@@ -17,12 +22,16 @@ function app(container, state, dom, ...initialPatches) {
   if (typeof dom !== "function")
     throw new Error("third argument to app() must be a function that returns a vode");
   const _vode = {};
-  _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+  _vode.syncRenderer = globals.requestAnimationFrame;
+  _vode.asyncRenderer = globals.startViewTransition;
+  _vode.qSync = null;
+  _vode.qAsync = null;
+  _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
   Object.defineProperty(state, "patch", {
     enumerable: false,
     configurable: true,
     writable: false,
-    value: async (action) => {
+    value: async (action, isAsync) => {
       if (!action || typeof action !== "function" && typeof action !== "object")
         return;
       _vode.stats.patchCount++;
@@ -34,13 +43,13 @@ function app(container, state, dom, ...initialPatches) {
           while (v.done === false) {
             _vode.stats.liveEffectCount++;
             try {
-              _vode.patch(v.value);
+              _vode.patch(v.value, isAsync);
               v = await generator.next();
             } finally {
               _vode.stats.liveEffectCount--;
             }
           }
-          _vode.patch(v.value);
+          _vode.patch(v.value, isAsync);
         } finally {
           _vode.stats.liveEffectCount--;
         }
@@ -48,60 +57,96 @@ function app(container, state, dom, ...initialPatches) {
         _vode.stats.liveEffectCount++;
         try {
           const nextState = await action;
-          _vode.patch(nextState);
+          _vode.patch(nextState, isAsync);
         } 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));
+        if (action.length > 0) {
+          for (const p of action) {
+            _vode.patch(p, !document.hidden && !!_vode.asyncRenderer);
+          }
         } else {
-          _vode.stats.patchCount--;
+          _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
+          _vode.qAsync = null;
+          globals.currentViewTransition?.skipTransition();
+          _vode.stats.syncRenderPatchCount++;
+          _vode.renderSync();
         }
       } else if (typeof action === "function") {
-        _vode.patch(action(_vode.state));
+        _vode.patch(action(_vode.state), isAsync);
       } else {
-        _vode.stats.renderPatchCount++;
-        _vode.q = mergeState(_vode.q || {}, action, false);
-        if (!_vode.isRendering)
-          _vode.render();
+        if (isAsync) {
+          _vode.stats.asyncRenderPatchCount++;
+          _vode.qAsync = mergeState(_vode.qAsync || {}, action, false);
+          await _vode.renderAsync();
+        } else {
+          _vode.stats.syncRenderPatchCount++;
+          _vode.qSync = mergeState(_vode.qSync || {}, action, false);
+          _vode.renderSync();
+        }
       }
     }
   });
-  Object.defineProperty(_vode, "render", {
+  function renderDom(isAsync) {
+    const sw = Date.now();
+    const vom = dom(_vode.state);
+    _vode.vode = render(_vode.state, _vode.patch, container.parentElement, 0, _vode.vode, vom);
+    if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
+      container = _vode.vode.node;
+      container._vode = _vode;
+    }
+    if (!isAsync) {
+      _vode.stats.lastSyncRenderTime = Date.now() - sw;
+      _vode.stats.syncRenderCount++;
+      _vode.isRendering = false;
+      if (_vode.qSync)
+        _vode.renderSync();
+    }
+  }
+  const sr = renderDom.bind(null, false);
+  const ar = renderDom.bind(null, true);
+  Object.defineProperty(_vode, "renderSync", {
     enumerable: false,
     configurable: true,
     writable: false,
-    value: () => requestAnimationFrame(() => {
-      if (_vode.isRendering || !_vode.q)
+    value: () => {
+      if (_vode.isRendering || !_vode.qSync)
         return;
       _vode.isRendering = true;
+      _vode.state = mergeState(_vode.state, _vode.qSync, true);
+      _vode.qSync = null;
+      _vode.syncRenderer(sr);
+    }
+  });
+  Object.defineProperty(_vode, "renderAsync", {
+    enumerable: false,
+    configurable: true,
+    writable: false,
+    value: async () => {
+      if (_vode.isAnimating || !_vode.qAsync)
+        return;
+      await globals.currentViewTransition?.updateCallbackDone;
+      if (_vode.isAnimating || !_vode.qAsync || document.hidden)
+        return;
+      _vode.isAnimating = true;
       const sw = Date.now();
       try {
-        _vode.state = mergeState(_vode.state, _vode.q, true);
-        _vode.q = null;
-        const vom = dom(_vode.state);
-        _vode.vode = render(_vode.state, _vode.patch, container.parentElement, 0, _vode.vode, vom);
-        if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
-          container = _vode.vode.node;
-          container._vode = _vode;
-        }
+        _vode.state = mergeState(_vode.state, _vode.qAsync, true);
+        _vode.qAsync = null;
+        globals.currentViewTransition = _vode.asyncRenderer(ar);
+        await globals.currentViewTransition?.updateCallbackDone;
       } finally {
-        _vode.isRendering = false;
-        _vode.stats.renderCount++;
-        _vode.stats.lastRenderTime = Date.now() - sw;
-        if (_vode.q) {
-          _vode.render();
-        }
+        _vode.stats.lastAsyncRenderTime = Date.now() - sw;
+        _vode.stats.asyncRenderCount++;
+        _vode.isAnimating = false;
       }
-    })
+      if (_vode.qAsync)
+        _vode.renderAsync();
+    }
   });
   _vode.patch = state.patch;
   _vode.state = state;
-  _vode.q = null;
   const root = container;
   root._vode = _vode;
   _vode.vode = render(state, _vode.patch, container.parentElement, Array.from(container.parentElement.children).indexOf(container), hydrate(container, true), dom(state));
@@ -175,49 +220,6 @@ function props(vode2) {
   }
   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 Object.keys(b)) {
-      aa[bKey] = b[bKey];
-    }
-    return aa;
-  }
-  throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
-}
 function children(vode2) {
   const start = childrenStart(vode2);
   if (start > 0) {
@@ -269,7 +271,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 +315,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(state, patch, newNode, undefined, properties);
     if (oldNode) {
       oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
       oldNode.replaceWith(newNode);
@@ -336,7 +338,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 +346,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 +355,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(state, patch, oldNode, props(oldVode), properties);
         hasProps = !!properties;
       }
     } else {
       const properties = props(newVode);
-      patchProperties(patch, oldNode, props(oldVode), properties, svg);
+      patchProperties(state, patch, oldNode, props(oldVode), properties);
       hasProps = !!properties;
     }
     const newKids = children(newVode);
@@ -368,7 +369,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 +426,7 @@ function unwrap(c, s) {
     return c;
   }
 }
-function patchProperties(patch, node, oldProps, newProps, isSvg) {
+function patchProperties(s, patch, node, oldProps, newProps) {
   if (!newProps && !oldProps)
     return;
   if (oldProps) {
@@ -434,9 +435,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(s, patch, node, key, oldValue, newValue);
         else
-          patchProperty(patch, node, key, oldValue, undefined, isSvg);
+          patchProperty(s, patch, node, key, oldValue, undefined);
       }
     }
   }
@@ -444,17 +445,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(s, 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(s, patch, node, key, undefined, newValue);
     }
   }
 }
-function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
+function patchProperty(s, patch, node, key, oldValue, newValue) {
   if (key === "style") {
     if (!newValue) {
       node.style.cssText = "";
@@ -475,35 +476,17 @@ 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) {
       let eventHandler = null;
       if (typeof newValue === "function") {
         const action = newValue;
-        eventHandler = (evt) => patch([action, evt]);
-      } else if (Array.isArray(newValue)) {
-        const arr = newValue;
-        const action = newValue[0];
-        if (arr.length > 1) {
-          eventHandler = () => patch([action, ...arr.slice(1)]);
-        } else {
-          eventHandler = (evt) => patch([action, evt]);
-        }
+        eventHandler = (evt) => patch(action(s, evt));
       } else if (typeof newValue === "object") {
         eventHandler = () => patch(newValue);
       }
@@ -612,6 +595,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 +621,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";
@@ -728,6 +713,132 @@ var MTR = "mtr";
 var MUNDER = "munder";
 var MUNDEROVER = "munderover";
 var SEMANTICS = "semantics";
+// src/merge-class.ts
+function mergeClass(...classes) {
+  if (!classes || classes.length === 0)
+    return null;
+  if (classes.length === 1)
+    return classes[0];
+  let finalClass = classes[0];
+  for (let index = 1;index < classes.length; index++) {
+    const a = finalClass, b = classes[index];
+    if (!a) {
+      finalClass = b;
+    } else if (!b) {
+      continue;
+    } else if (typeof a === "string" && typeof b === "string") {
+      const aSplit = a.split(" ");
+      const bSplit = b.split(" ");
+      const classSet = new Set([...aSplit, ...bSplit]);
+      finalClass = Array.from(classSet).join(" ").trim();
+    } else if (typeof a === "string" && Array.isArray(b)) {
+      const classSet = new Set([...b, ...a.split(" ")]);
+      finalClass = Array.from(classSet).join(" ").trim();
+    } else if (Array.isArray(a) && typeof b === "string") {
+      const classSet = new Set([...a, ...b.split(" ")]);
+      finalClass = Array.from(classSet).join(" ").trim();
+    } else if (Array.isArray(a) && Array.isArray(b)) {
+      const classSet = new Set([...a, ...b]);
+      finalClass = Array.from(classSet).join(" ").trim();
+    } else if (typeof a === "string" && typeof b === "object") {
+      finalClass = { [a]: true, ...b };
+    } else if (typeof a === "object" && typeof b === "string") {
+      finalClass = { ...a, [b]: true };
+    } else if (typeof a === "object" && typeof b === "object") {
+      finalClass = { ...a, ...b };
+    } else if (typeof a === "object" && Array.isArray(b)) {
+      const aa = { ...a };
+      for (const item of b) {
+        aa[item] = true;
+      }
+      finalClass = aa;
+    } else if (Array.isArray(a) && typeof b === "object") {
+      const aa = {};
+      for (const item of a) {
+        aa[item] = true;
+      }
+      for (const bKey of Object.keys(b)) {
+        aa[bKey] = b[bKey];
+      }
+      finalClass = aa;
+    } else
+      throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
+  }
+  return finalClass;
+}
+// src/state-context.ts
+class KeyStateContext {
+  state;
+  path;
+  keys;
+  constructor(state, path) {
+    this.state = state;
+    this.path = path;
+    this.keys = path.split(".");
+  }
+  get() {
+    const keys = this.keys;
+    let raw = this.state ? this.state[keys[0]] : undefined;
+    for (let i = 1;i < keys.length && !!raw; i++) {
+      raw = raw[keys[i]];
+    }
+    return raw;
+  }
+  put(value) {
+    this.putDeep(value, this.state);
+  }
+  patch(value) {
+    if (Array.isArray(value)) {
+      const animation = [];
+      for (const v of value) {
+        animation.push(this.createPatch(v));
+      }
+      this.state.patch(animation);
+    }
+    this.state.patch(this.createPatch(value));
+  }
+  createPatch(value) {
+    const renderPatch = {};
+    this.putDeep(value, renderPatch);
+    return renderPatch;
+  }
+  putDeep(value, target) {
+    const keys = this.keys;
+    if (keys.length > 1) {
+      let i = 0;
+      let raw = target[keys[i]];
+      if (typeof raw !== "object" || raw === null) {
+        target[keys[i]] = raw = {};
+      }
+      for (i = 1;i < keys.length - 1; i++) {
+        const p = raw;
+        raw = raw[keys[i]];
+        if (typeof raw !== "object" || raw === null) {
+          p[keys[i]] = raw = {};
+        }
+      }
+      raw[keys[i]] = value;
+    } else {
+      if (typeof target[keys[0]] === "object" && typeof value === "object")
+        Object.assign(target[keys[0]], value);
+      else
+        target[keys[0]] = value;
+    }
+  }
+}
+
+class DelegateStateContext {
+  state;
+  get;
+  put;
+  patch;
+  constructor(state, get, put, patch) {
+    this.state = state;
+    this.get = get;
+    this.put = put;
+    this.patch = patch;
+  }
+}
 export {
   vode,
   tag,
@@ -735,6 +846,7 @@ export {
   mergeClass,
   memo,
   hydrate,
+  globals,
   createState,
   createPatch,
   childrenStart,
@@ -745,6 +857,7 @@ export {
   WBR,
   VIEW,
   VIDEO,
+  VAR,
   USE,
   UL,
   U,
@@ -780,6 +893,7 @@ export {
   SEMANTICS,
   SELECT,
   SECTION,
+  SEARCH,
   SCRIPT,
   SAMP,
   S,
@@ -847,6 +961,7 @@ export {
   LI,
   LEGEND,
   LABEL,
+  KeyStateContext,
   KBD,
   INS,
   INPUT,
@@ -901,6 +1016,7 @@ export {
   EMBED,
   EM,
   ELLIPSE,
+  DelegateStateContext,
   DT,
   DL,
   DIV,

package/index.ts

@@ -1,2 +1,6 @@
 export * from "./src/vode.js";
-export * from "./src/vode-tags.js";
+
+// utilities
+export * from "./src/vode-tags.js";
+export * from "./src/merge-class.js";
+export * from "./src/state-context.js";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.1.9",
-    "description": "Small web framework for minimal websites",
+    "version": "1.3.0",
+    "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
     "icon": "icon.webp",
@@ -33,8 +33,8 @@
         "watch": "tsc -b -w"
     },
     "devDependencies": {
-        "bun": "1.2.23",
-        "esbuild": "0.25.10",
+        "bun": "1.3.1",
+        "esbuild": "0.25.11",
         "typescript": "5.9.3"
     }
 }

package/src/merge-class.ts

@@ -0,0 +1,62 @@
+import { ClassProp } from "./vode.js";
+
+/** merge `ClassProp`s regardless of structure */
+export function mergeClass(...classes: ClassProp[]): ClassProp {
+    if ((!classes || classes.length === 0)) return null;
+    if (classes.length === 1) return classes[0];
+
+    let finalClass: ClassProp = classes[0];
+    for (let index = 1; index < classes.length; index++) {
+        const a = finalClass, b = classes[index];
+        if (!a) {
+            finalClass = b;
+        }
+        else if (!b) {
+            continue;
+        }
+        else if (typeof a === "string" && typeof b === "string") {
+            const aSplit = a.split(" ");
+            const bSplit = b.split(" ");
+            const classSet = new Set([...aSplit, ...bSplit]);
+            finalClass = Array.from(classSet).join(" ").trim();
+        }
+        else if (typeof a === "string" && Array.isArray(b)) {
+            const classSet = new Set([...b, ...a.split(" ")]);
+            finalClass = Array.from(classSet).join(" ").trim();
+        }
+        else if (Array.isArray(a) && typeof b === "string") {
+            const classSet = new Set([...a, ...b.split(" ")]);
+            finalClass = Array.from(classSet).join(" ").trim();
+        }
+        else if (Array.isArray(a) && Array.isArray(b)) {
+            const classSet = new Set([...a, ...b]);
+            finalClass = Array.from(classSet).join(" ").trim();
+        }
+        else if (typeof a === "string" && typeof b === "object") {
+            finalClass = { [a]: true, ...b };
+        }
+        else if (typeof a === "object" && typeof b === "string") {
+            finalClass = { ...a, [b]: true };
+        }
+        else if (typeof a === "object" && typeof b === "object") {
+            finalClass = { ...a, ...b };
+        } else if (typeof a === "object" && Array.isArray(b)) {
+            const aa = { ...a };
+            for (const item of b as string[]) {
+                (<Record<string, boolean | null | undefined>>aa)[item] = true;
+            }
+            finalClass = aa;
+        } else if (Array.isArray(a) && typeof b === "object") {
+            const aa: Record<string, any> = {};
+            for (const item of a as string[]) {
+                aa[item] = true;
+            }
+            for (const bKey of Object.keys(b!)) {
+                aa[bKey] = (<Record<string, boolean | null | undefined>>b)[bKey];
+            }
+            finalClass = aa;
+        }
+        else throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
+    }
+    return finalClass;
+}