npm - @ryupold/vode - Versions diffs - 1.5.1 → 1.6.0 - Mend

@ryupold/vode 1.5.1 → 1.6.0

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

Files changed (10) hide show

package/.github/workflows/npm-publish.yml +1 -2
package/README.md +5 -1
package/dist/vode.js +62 -41
package/dist/vode.min.js +1 -1
package/dist/vode.min.mjs +1 -1
package/dist/vode.mjs +395 -381
package/index.ts +1 -0
package/package.json +7 -8
package/src/merge-style.ts +23 -0
package/src/vode.ts +53 -44

package/dist/vode.mjs CHANGED Viewed

@@ -1,39 +1,32 @@
 // src/vode.ts
 var globals = {
-  currentViewTransition: undefined,
-  requestAnimationFrame: window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : (cb) => cb(),
-  startViewTransition: document.startViewTransition ? document.startViewTransition.bind(document) : null
+  currentViewTransition: void 0,
+  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");
-  if (Array.isArray(tag))
-    return tag;
-  else if (props)
-    return [tag, props, ...children];
-  else
-    return [tag, ...children];
+function vode(tag2, props2, ...children2) {
+  if (!tag2) throw new Error("first argument to vode() must be a tag name or a vode");
+  if (Array.isArray(tag2)) return tag2;
+  else if (props2) return [tag2, props2, ...children2];
+  else return [tag2, ...children2];
 }
 function app(container, state, dom, ...initialPatches) {
-  if (!container?.parentElement)
-    throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
-  if (!state || typeof state !== "object")
-    throw new Error("second argument to app() must be a state object");
-  if (typeof dom !== "function")
-    throw new Error("third argument to app() must be a function that returns a vode");
+  if (!container?.parentElement) throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
+  if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
+  if (typeof dom !== "function") throw new Error("third argument to app() must be a function that returns a vode");
   const _vode = {};
   _vode.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 };
+  const patchableState = state;
   Object.defineProperty(state, "patch", {
     enumerable: false,
     configurable: true,
     writable: false,
     value: async (action, isAsync) => {
-      if (!action || typeof action !== "function" && typeof action !== "object")
-        return;
+      if (!action || typeof action !== "function" && typeof action !== "object") return;
       _vode.stats.patchCount++;
       if (action?.next) {
         const generator = action;
@@ -43,40 +36,41 @@ function app(container, state, dom, ...initialPatches) {
           while (v.done === false) {
             _vode.stats.liveEffectCount++;
             try {
-              _vode.patch(v.value, isAsync);
+              patchableState.patch(v.value, isAsync);
               v = await generator.next();
             } finally {
               _vode.stats.liveEffectCount--;
             }
           }
-          _vode.patch(v.value, isAsync);
+          patchableState.patch(v.value, isAsync);
         } finally {
           _vode.stats.liveEffectCount--;
         }
       } else if (action.then) {
         _vode.stats.liveEffectCount++;
         try {
-          const nextState = await action;
-          _vode.patch(nextState, isAsync);
+          const resolvedPatch = await action;
+          patchableState.patch(resolvedPatch, isAsync);
         } finally {
           _vode.stats.liveEffectCount--;
         }
       } else if (Array.isArray(action)) {
         if (action.length > 0) {
           for (const p of action) {
-            _vode.patch(p, !document.hidden && !!_vode.asyncRenderer);
+            patchableState.patch(p, !document.hidden && !!_vode.asyncRenderer);
           }
         } else {
           _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
           _vode.qAsync = null;
           try {
             globals.currentViewTransition?.skipTransition();
-          } catch {}
+          } catch {
+          }
           _vode.stats.syncRenderPatchCount++;
           _vode.renderSync();
         }
       } else if (typeof action === "function") {
-        _vode.patch(action(_vode.state), isAsync);
+        patchableState.patch(action(_vode.state), isAsync);
       } else {
         if (isAsync) {
           _vode.stats.asyncRenderPatchCount++;
@@ -93,7 +87,7 @@ function app(container, state, dom, ...initialPatches) {
   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);
+    _vode.vode = render(_vode.state, container.parentElement, 0, _vode.vode, vom);
     if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
       container = _vode.vode.node;
       container._vode = _vode;
@@ -102,8 +96,7 @@ function app(container, state, dom, ...initialPatches) {
       _vode.stats.lastSyncRenderTime = Date.now() - sw;
       _vode.stats.syncRenderCount++;
       _vode.isRendering = false;
-      if (_vode.qSync)
-        _vode.renderSync();
+      if (_vode.qSync) _vode.renderSync();
     }
   }
   const sr = renderDom.bind(null, false);
@@ -113,8 +106,7 @@ function app(container, state, dom, ...initialPatches) {
     configurable: true,
     writable: false,
     value: () => {
-      if (_vode.isRendering || !_vode.qSync)
-        return;
+      if (_vode.isRendering || !_vode.qSync) return;
       _vode.isRendering = true;
       _vode.state = mergeState(_vode.state, _vode.qSync, true);
       _vode.qSync = null;
@@ -126,11 +118,9 @@ function app(container, state, dom, ...initialPatches) {
     configurable: true,
     writable: false,
     value: async () => {
-      if (_vode.isAnimating || !_vode.qAsync)
-        return;
+      if (_vode.isAnimating || !_vode.qAsync) return;
       await globals.currentViewTransition?.updateCallbackDone;
-      if (_vode.isAnimating || !_vode.qAsync || document.hidden)
-        return;
+      if (_vode.isAnimating || !_vode.qAsync || document.hidden) return;
       _vode.isAnimating = true;
       const sw = Date.now();
       try {
@@ -143,25 +133,28 @@ function app(container, state, dom, ...initialPatches) {
         _vode.stats.asyncRenderCount++;
         _vode.isAnimating = false;
       }
-      if (_vode.qAsync)
-        _vode.renderAsync();
+      if (_vode.qAsync) _vode.renderAsync();
     }
   });
-  _vode.patch = state.patch;
-  _vode.state = state;
+  _vode.state = patchableState;
   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));
+  _vode.vode = render(
+    state,
+    container.parentElement,
+    Array.from(container.parentElement.children).indexOf(container),
+    hydrate(container, true),
+    dom(state)
+  );
   for (const effect of initialPatches) {
-    _vode.patch(effect);
+    patchableState.patch(effect);
   }
-  return _vode.patch;
+  return (action) => patchableState.patch(action);
 }
 function defuse(container) {
   if (container?._vode) {
-    let clearEvents = function(av) {
-      if (!av?.node)
-        return;
+    let clearEvents2 = function(av) {
+      if (!av?.node) return;
       const p = props(av);
       if (p) {
         for (const key in p) {
@@ -173,75 +166,72 @@ function defuse(container) {
       }
       const kids = children(av);
       if (kids) {
-        for (let child of kids) {
-          clearEvents(child);
+        for (let child2 of kids) {
+          clearEvents2(child2);
         }
       }
     };
+    var clearEvents = clearEvents2;
     const v = container._vode;
     delete container["_vode"];
-    Object.defineProperty(v.state, "patch", { value: undefined });
-    Object.defineProperty(v, "renderSync", { value: () => {} });
-    Object.defineProperty(v, "renderAsync", { value: () => {} });
-    clearEvents(v.vode);
+    Object.defineProperty(v.state, "patch", { value: void 0 });
+    Object.defineProperty(v, "renderSync", { value: () => {
+    } });
+    Object.defineProperty(v, "renderAsync", { value: () => {
+    } });
+    clearEvents2(v.vode);
   }
 }
 function hydrate(element, prepareForRender) {
   if (element?.nodeType === Node.TEXT_NODE) {
     if (element.nodeValue?.trim() !== "")
       return prepareForRender ? element : element.nodeValue;
-    return;
+    return void 0;
   } else if (element.nodeType === Node.COMMENT_NODE) {
-    return;
+    return void 0;
   } else if (element.nodeType === Node.ELEMENT_NODE) {
-    const tag = element.tagName.toLowerCase();
-    const root = [tag];
-    if (prepareForRender)
-      root.node = element;
+    const tag2 = element.tagName.toLowerCase();
+    const root = [tag2];
+    if (prepareForRender) root.node = element;
     if (element?.hasAttributes()) {
-      const props = {};
+      const props2 = {};
       const attr = element.attributes;
       for (let a of attr) {
-        props[a.name] = a.value;
+        props2[a.name] = a.value;
       }
-      root.push(props);
+      root.push(props2);
     }
     if (element.hasChildNodes()) {
       const remove = [];
-      for (let child of element.childNodes) {
-        const wet = child && hydrate(child, prepareForRender);
-        if (wet)
-          root.push(wet);
-        else if (child && prepareForRender)
-          remove.push(child);
+      for (let child2 of element.childNodes) {
+        const wet = child2 && hydrate(child2, prepareForRender);
+        if (wet) root.push(wet);
+        else if (child2 && prepareForRender) remove.push(child2);
       }
-      for (let child of remove) {
-        child.remove();
+      for (let child2 of remove) {
+        child2.remove();
       }
     }
     return root;
   } else {
-    return;
+    return void 0;
   }
 }
 function memo(compare, componentOrProps) {
-  if (!compare || !Array.isArray(compare))
-    throw new Error("first argument to memo() must be an array of values to compare");
-  if (typeof componentOrProps !== "function")
-    throw new Error("second argument to memo() must be a function that returns a vode or props object");
+  if (!compare || !Array.isArray(compare)) throw new Error("first argument to memo() must be an array of values to compare");
+  if (typeof componentOrProps !== "function") throw new Error("second argument to memo() must be a function that returns a vode or props object");
   componentOrProps.__memo = compare;
   return componentOrProps;
 }
 function createState(state) {
-  if (!state || typeof state !== "object")
-    throw new Error("createState() must be called with a state object");
+  if (!state || typeof state !== "object") throw new Error("createState() must be called with a state object");
   return state;
 }
 function createPatch(p) {
   return p;
 }
 function tag(v) {
-  return v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : undefined : undefined;
+  return !!v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : void 0 : void 0;
 }
 function props(vode2) {
   if (Array.isArray(vode2) && vode2.length > 1 && vode2[1] && !Array.isArray(vode2[1])) {
@@ -249,7 +239,7 @@ function props(vode2) {
       return vode2[1];
     }
   }
-  return;
+  return void 0;
 }
 function children(vode2) {
   const start = childrenStart(vode2);
@@ -260,23 +250,19 @@ function children(vode2) {
 }
 function childCount(vode2) {
   const start = childrenStart(vode2);
-  if (start < 0)
-    return 0;
+  if (start < 0) return 0;
   return vode2.length - start;
 }
 function child(vode2, index) {
   const start = childrenStart(vode2);
-  if (start > 0)
-    return vode2[index + start];
-  else
-    return;
+  if (start > 0) return vode2[index + start];
+  else return void 0;
 }
 function childrenStart(vode2) {
   return props(vode2) ? vode2.length > 2 ? 2 : -1 : Array.isArray(vode2) && vode2.length > 1 ? 1 : -1;
 }
 function mergeState(target, source, allowDeletion) {
-  if (!source)
-    return target;
+  if (!source) return target;
   for (const key in source) {
     const value = source[key];
     if (value && typeof value === "object") {
@@ -287,12 +273,9 @@ function mergeState(target, source, allowDeletion) {
         } else if (value instanceof Date && targetValue !== value) {
           target[key] = new Date(value);
         } else {
-          if (Array.isArray(targetValue))
-            target[key] = mergeState({}, value, allowDeletion);
-          else if (typeof targetValue === "object")
-            mergeState(target[key], value, allowDeletion);
-          else
-            target[key] = mergeState({}, value, allowDeletion);
+          if (Array.isArray(targetValue)) target[key] = mergeState({}, value, allowDeletion);
+          else if (typeof targetValue === "object") mergeState(target[key], value, allowDeletion);
+          else target[key] = mergeState({}, value, allowDeletion);
         }
       } else if (Array.isArray(value)) {
         target[key] = [...value];
@@ -301,7 +284,7 @@ function mergeState(target, source, allowDeletion) {
       } else {
         target[key] = mergeState({}, value, allowDeletion);
       }
-    } else if (value === undefined && allowDeletion) {
+    } else if (value === void 0 && allowDeletion) {
       delete target[key];
     } else {
       target[key] = value;
@@ -309,7 +292,7 @@ function mergeState(target, source, allowDeletion) {
   }
   return target;
 }
-function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
+function render(state, parent, childIndex, oldVode, newVode, xmlns) {
   try {
     newVode = remember(state, newVode, oldVode);
     const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
@@ -319,9 +302,9 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
     const oldNode = oldIsText ? oldVode : oldVode?.node;
     if (isNoVode) {
-      oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
+      oldNode?.onUnmount && state.patch(oldNode.onUnmount(oldNode));
       oldNode?.remove();
-      return;
+      return void 0;
     }
     const isText = !isNoVode && isTextVode(newVode);
     const isNode = !isNoVode && isNaturalVode(newVode);
@@ -342,7 +325,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     if (isText && (!oldNode || !oldIsText)) {
       const text = document.createTextNode(newVode);
       if (oldNode) {
-        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode.onUnmount && state.patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(text);
       } else {
         if (parent.childNodes[childIndex]) {
@@ -356,15 +339,19 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
       const newvode = newVode;
       if (1 in newvode) {
-        newvode[1] = remember(state, newvode[1], undefined);
+        newvode[1] = remember(state, newvode[1], void 0);
       }
       const properties = props(newVode);
       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);
+      patchProperties(state, newNode, void 0, properties);
+      if (!!properties && "catch" in properties) {
+        newVode.node["catch"] = null;
+        newVode.node.removeAttribute("catch");
+      }
       if (oldNode) {
-        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode.onUnmount && state.patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(newNode);
       } else {
         if (parent.childNodes[childIndex]) {
@@ -375,44 +362,42 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
       }
       const newChildren = children(newVode);
       if (newChildren) {
-        for (let i = 0;i < newChildren.length; i++) {
+        for (let i = 0; i < newChildren.length; i++) {
           const child2 = newChildren[i];
-          const attached = render(state, patch, newNode, i, undefined, child2, xmlns);
+          const attached = render(state, newNode, i, void 0, child2, xmlns);
           newVode[properties ? i + 2 : i + 1] = attached;
         }
       }
-      newNode.onMount && patch(newNode.onMount(newNode));
+      newNode.onMount && state.patch(newNode.onMount(newNode));
       return newVode;
     }
     if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
       newVode.node = oldNode;
       const newvode = newVode;
       const oldvode = oldVode;
-      let hasProps = false;
+      const properties = props(newVode);
+      let hasProps = !!properties;
+      const oldProps = props(oldVode);
       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(state, patch, oldNode, props(oldVode), properties);
-          hasProps = !!properties;
+          patchProperties(state, oldNode, oldProps, properties);
         }
       } else {
-        const properties = props(newVode);
-        patchProperties(state, patch, oldNode, props(oldVode), properties);
-        hasProps = !!properties;
-        if (hasProps && "catch" in properties) {
-          newVode.node["catch"] = null;
-          newVode.node.removeAttribute("catch");
-        }
+        patchProperties(state, oldNode, oldProps, properties);
+      }
+      if (!!properties?.catch && oldProps?.catch !== properties.catch) {
+        newVode.node["catch"] = null;
+        newVode.node.removeAttribute("catch");
       }
       const newKids = children(newVode);
       const oldKids = children(oldVode);
       if (newKids) {
-        for (let i = 0;i < newKids.length; i++) {
+        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, xmlns);
+          const attached = render(state, oldNode, i, oldChild, child2, xmlns);
           if (attached) {
             newVode[hasProps ? i + 2 : i + 1] = attached;
           }
@@ -420,8 +405,8 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
       }
       if (oldKids) {
         const newKidsCount = newKids ? newKids.length : 0;
-        for (let i = oldKids.length - 1;i >= newKidsCount; i--) {
-          render(state, patch, oldNode, i, oldKids[i], undefined, xmlns);
+        for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
+          render(state, oldNode, i, oldKids[i], void 0, xmlns);
         }
       }
       return newVode;
@@ -430,12 +415,19 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     const catchVode = props(newVode)?.catch;
     if (catchVode) {
       const handledVode = typeof catchVode === "function" ? catchVode(state, error) : catchVode;
-      return render(state, patch, parent, childIndex, hydrate(newVode?.node || oldVode?.node, true), handledVode, xmlns);
+      return render(
+        state,
+        parent,
+        childIndex,
+        hydrate(newVode?.node || oldVode?.node, true),
+        handledVode,
+        xmlns
+      );
     } else {
       throw error;
     }
   }
-  return;
+  return void 0;
 }
 function isNaturalVode(x) {
   return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
@@ -450,14 +442,13 @@ function remember(state, present, past) {
   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++) {
+    for (let i = 0; i < presentMemo.length; i++) {
       if (presentMemo[i] !== pastMemo[i]) {
         same = false;
         break;
       }
     }
-    if (same)
-      return past;
+    if (same) return past;
   }
   const newRender = unwrap(present, state);
   if (typeof newRender === "object") {
@@ -472,18 +463,15 @@ function unwrap(c, s) {
     return c;
   }
 }
-function patchProperties(s, patch, node, oldProps, newProps) {
-  if (!newProps && !oldProps)
-    return;
+function patchProperties(s, 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(s, patch, node, key, oldValue, newValue);
-        else
-          patchProperty(s, patch, node, key, oldValue, undefined);
+        if (newProps) newProps[key] = patchProperty(s, node, key, oldValue, newValue);
+        else patchProperty(s, node, key, oldValue, void 0);
       }
     }
   }
@@ -491,23 +479,22 @@ function patchProperties(s, patch, node, oldProps, newProps) {
     for (const key in newProps) {
       if (!(key in oldProps)) {
         const newValue = newProps[key];
-        newProps[key] = patchProperty(s, patch, node, key, undefined, newValue);
+        newProps[key] = patchProperty(s, node, key, void 0, newValue);
       }
     }
   } else if (newProps) {
     for (const key in newProps) {
       const newValue = newProps[key];
-      newProps[key] = patchProperty(s, patch, node, key, undefined, newValue);
+      newProps[key] = patchProperty(s, node, key, void 0, newValue);
     }
   }
 }
-function patchProperty(s, patch, node, key, oldValue, newValue) {
+function patchProperty(s, node, key, oldValue, newValue) {
   if (key === "style") {
     if (!newValue) {
       node.style.cssText = "";
     } else if (typeof newValue === "string") {
-      if (oldValue !== newValue)
-        node.style.cssText = newValue;
+      if (oldValue !== newValue) node.style.cssText = newValue;
     } else if (oldValue && typeof oldValue === "object") {
       for (let k in oldValue) {
         const nv = newValue[k];
@@ -538,9 +525,9 @@ function patchProperty(s, patch, node, key, oldValue, newValue) {
       let eventHandler = null;
       if (typeof newValue === "function") {
         const action = newValue;
-        eventHandler = (evt) => patch(action(s, evt));
+        eventHandler = (evt) => s.patch(action(s, evt));
       } else if (typeof newValue === "object") {
-        eventHandler = () => patch(newValue);
+        eventHandler = () => s.patch(newValue);
       }
       node[key] = eventHandler;
     } else {
@@ -548,7 +535,7 @@ function patchProperty(s, patch, node, key, oldValue, newValue) {
     }
   } else {
     node[key] = newValue;
-    if (newValue === undefined || newValue === null || newValue === false)
+    if (newValue === void 0 || newValue === null || newValue === false)
       node.removeAttribute(key);
     else
       node.setAttribute(key, newValue);
@@ -565,6 +552,7 @@ function classString(classProp) {
   else
     return "";
 }
 // src/vode-tags.ts
 var A = "a";
 var ABBR = "abbr";
@@ -767,14 +755,13 @@ 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];
+  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++) {
+  for (let index = 1; index < classes.length; index++) {
     const a = finalClass, b = classes[index];
     if (!a) {
       finalClass = b;
@@ -783,16 +770,16 @@ function mergeClass(...classes) {
     } else if (typeof a === "string" && typeof b === "string") {
       const aSplit = a.split(" ");
       const bSplit = b.split(" ");
-      const classSet = new Set([...aSplit, ...bSplit]);
+      const classSet = /* @__PURE__ */ 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(" ")]);
+      const classSet = /* @__PURE__ */ 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(" ")]);
+      const classSet = /* @__PURE__ */ 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]);
+      const classSet = /* @__PURE__ */ new Set([...a, ...b]);
       finalClass = Array.from(classSet).join(" ").trim();
     } else if (typeof a === "string" && typeof b === "object") {
       finalClass = { [a]: true, ...b };
@@ -815,25 +802,43 @@ function mergeClass(...classes) {
         aa[bKey] = b[bKey];
       }
       finalClass = aa;
-    } else
-      throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
+    } else throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
   }
   return finalClass;
 }
+// src/merge-style.ts
+var tempDivForStyling = document.createElement("div");
+function mergeStyle(...props2) {
+  try {
+    const merged = tempDivForStyling.style;
+    for (const style of props2) {
+      if (typeof style === "object" && style !== null) {
+        for (const key in style) {
+          merged[key] = style[key];
+        }
+      } else if (typeof style === "string") {
+        merged.cssText += ";" + style;
+      }
+    }
+    return merged.cssText;
+  } finally {
+    tempDivForStyling.style.cssText = "";
+  }
+}
 // src/state-context.ts
-class KeyStateContext {
-  state;
-  path;
-  keys;
+var KeyStateContext = class {
   constructor(state, path) {
     this.state = state;
     this.path = path;
     this.keys = path.split(".");
   }
+  keys;
   get() {
     const keys = this.keys;
-    let raw = this.state ? this.state[keys[0]] : undefined;
-    for (let i = 1;i < keys.length && !!raw; i++) {
+    let raw = this.state ? this.state[keys[0]] : void 0;
+    for (let i = 1; i < keys.length && !!raw; i++) {
       raw = raw[keys[i]];
     }
     return raw;
@@ -852,6 +857,19 @@ class KeyStateContext {
       this.state.patch(this.createPatch(value));
     }
   }
+  /**
+   * Creates a render-patch for the parent state by setting a nested sub-state value while creating necessary structure.
+   *
+   * @example
+   * ```typescript
+   * const ctx = new KeyStateContext(state, 'user.profile.settings');
+   * const patch = ctx.createPatch({ theme: 'light' });
+   * // patch is { user: { profile: { settings: { theme: 'light' } } } }
+   * ```
+   *
+   * @param value
+   * @returns {{key-path}:{...: value}} render-patch for the parent state
+   */
   createPatch(value) {
     const renderPatch = {};
     this.putDeep(value, renderPatch);
@@ -865,7 +883,7 @@ class KeyStateContext {
       if (typeof raw !== "object" || raw === null) {
         target[keys[i]] = raw = {};
       }
-      for (i = 1;i < keys.length - 1; i++) {
+      for (i = 1; i < keys.length - 1; i++) {
         const p = raw;
         raw = raw[keys[i]];
         if (typeof raw !== "object" || raw === null) {
@@ -880,237 +898,233 @@ class KeyStateContext {
         target[keys[0]] = value;
     }
   }
-}
-class DelegateStateContext {
-  state;
-  get;
-  put;
-  patch;
+};
+var DelegateStateContext = class {
   constructor(state, get, put, patch) {
     this.state = state;
     this.get = get;
     this.put = put;
     this.patch = patch;
   }
-}
+};
 export {
-  vode,
-  tag,
-  props,
-  mergeClass,
-  memo,
-  hydrate,
-  globals,
-  defuse,
-  createState,
-  createPatch,
-  childrenStart,
-  children,
-  childCount,
-  child,
-  app,
-  WBR,
-  VIEW,
-  VIDEO,
-  VAR,
-  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,
-  SEARCH,
-  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,
-  KeyStateContext,
-  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,
-  EMBED,
-  EM,
-  ELLIPSE,
-  DelegateStateContext,
-  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,
+  A,
   ABBR,
-  A
+  ADDRESS,
+  ANIMATE,
+  ANIMATEMOTION,
+  ANIMATETRANSFORM,
+  ANNOTATION,
+  ANNOTATION_XML,
+  AREA,
+  ARTICLE,
+  ASIDE,
+  AUDIO,
+  B,
+  BASE,
+  BDI,
+  BDO,
+  BLOCKQUOTE,
+  BODY,
+  BR,
+  BUTTON,
+  CANVAS,
+  CAPTION,
+  CIRCLE,
+  CITE,
+  CLIPPATH,
+  CODE,
+  COL,
+  COLGROUP,
+  DATA,
+  DATALIST,
+  DD,
+  DEFS,
+  DEL,
+  DESC,
+  DETAILS,
+  DFN,
+  DIALOG,
+  DIV,
+  DL,
+  DT,
+  DelegateStateContext,
+  ELLIPSE,
+  EM,
+  EMBED,
+  FEBLEND,
+  FECOLORMATRIX,
+  FECOMPONENTTRANSFER,
+  FECOMPOSITE,
+  FECONVOLVEMATRIX,
+  FEDIFFUSELIGHTING,
+  FEDISPLACEMENTMAP,
+  FEDISTANTLIGHT,
+  FEDROPSHADOW,
+  FEFLOOD,
+  FEFUNCA,
+  FEFUNCB,
+  FEFUNCG,
+  FEFUNCR,
+  FEGAUSSIANBLUR,
+  FEIMAGE,
+  FEMERGE,
+  FEMERGENODE,
+  FEMORPHOLOGY,
+  FEOFFSET,
+  FEPOINTLIGHT,
+  FESPECULARLIGHTING,
+  FESPOTLIGHT,
+  FETILE,
+  FETURBULENCE,
+  FIELDSET,
+  FIGCAPTION,
+  FIGURE,
+  FILTER,
+  FOOTER,
+  FOREIGNOBJECT,
+  FORM,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  HEAD,
+  HEADER,
+  HGROUP,
+  HR,
+  HTML,
+  I,
+  IFRAME,
+  IMAGE,
+  IMG,
+  INPUT,
+  INS,
+  KBD,
+  KeyStateContext,
+  LABEL,
+  LEGEND,
+  LI,
+  LINE,
+  LINEARGRADIENT,
+  LINK,
+  MACTION,
+  MAIN,
+  MAP,
+  MARK,
+  MARKER,
+  MASK,
+  MATH,
+  MENU,
+  MERROR,
+  META,
+  METADATA,
+  METER,
+  MFRAC,
+  MI,
+  MMULTISCRIPTS,
+  MN,
+  MO,
+  MOVER,
+  MPADDED,
+  MPATH,
+  MPHANTOM,
+  MPRESCRIPTS,
+  MROOT,
+  MROW,
+  MS,
+  MSPACE,
+  MSQRT,
+  MSTYLE,
+  MSUB,
+  MSUBSUP,
+  MSUP,
+  MTABLE,
+  MTD,
+  MTEXT,
+  MTR,
+  MUNDER,
+  MUNDEROVER,
+  NAV,
+  NOSCRIPT,
+  OBJECT,
+  OL,
+  OPTGROUP,
+  OPTION,
+  OUTPUT,
+  P,
+  PATH,
+  PATTERN,
+  PICTURE,
+  POLYGON,
+  POLYLINE,
+  PRE,
+  PROGRESS,
+  Q,
+  RADIALGRADIENT,
+  RECT,
+  RP,
+  RT,
+  RUBY,
+  S,
+  SAMP,
+  SCRIPT,
+  SEARCH,
+  SECTION,
+  SELECT,
+  SEMANTICS,
+  SET,
+  SLOT,
+  SMALL,
+  SOURCE,
+  SPAN,
+  STOP,
+  STRONG,
+  STYLE,
+  SUB,
+  SUMMARY,
+  SUP,
+  SVG,
+  SWITCH,
+  SYMBOL,
+  TABLE,
+  TBODY,
+  TD,
+  TEMPLATE,
+  TEXT,
+  TEXTAREA,
+  TEXTPATH,
+  TFOOT,
+  TH,
+  THEAD,
+  TIME,
+  TITLE,
+  TR,
+  TRACK,
+  TSPAN,
+  U,
+  UL,
+  USE,
+  VAR,
+  VIDEO,
+  VIEW,
+  WBR,
+  app,
+  child,
+  childCount,
+  children,
+  childrenStart,
+  createPatch,
+  createState,
+  defuse,
+  globals,
+  hydrate,
+  memo,
+  mergeClass,
+  mergeStyle,
+  props,
+  tag,
+  vode
 };