@ryupold/vode 1.1.9 → 1.3.0

package/README.md

@@ -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,
@@ -399,6 +399,17 @@ const ComponentEwww = (s) => {
 
     return [DIV, s.loading ? [PROGRESS] : s.title];
 }
+
+// ✨ experimental view transitions support ✨
+// patch with a render via view transition
+s.patch([{}, (s) => {/*...*/}]); //all given patches will be part of a view transition
+
+// empty array patches command to skip the current view transition
+// and set the queued animated patches until now as current state with a sync patch
+s.patch([]);
+
+// skip current view transition and start this view transition instead
+s.patch([[], { loading: true }]);
 ```
 
 ### memoization
@@ -452,6 +463,7 @@ import { tag, props, children, mergeClass, hydrate } from '@ryupold/vode';
 // Merge class props intelligently
 mergeClass('foo', ['baz', 'bar']);  // -> 'foo bar baz'
 mergeClass(['foo'], { bar: true, baz: false }); // -> 'foo bar'
+mergeClass({zig: true, zag: false}, 'foo', ['baz', 'bar']);  // -> 'zig foo bar baz'
 
 const myVode = [DIV, { class: 'foo' }, [SPAN, 'hello'], [STRONG, 'world']];
 
@@ -473,6 +485,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
@@ -504,6 +540,24 @@ The memo with empty dependency array prevents further render calls from the oute
 so rendering of the subtree inside is controlled by the inner app.
 Take note of the fact that the top-level element of the inner app refers to the surrounding element and will change its state accordingly.
 
+#### view transitions
+The library has experimental support for [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API).
+You can pass an array of patches to the `patch` function where each patch will be applied with the next available view transition.
+
+Patching an empty array `[]` will skip the current view transition and set the queued animated patches until now as current state with a sync patch. 
+> Keep in mind that view transitions are not supported in all browsers yet and only one active transition can happen at a time. This feature may change significantly in the future, so do not rely on it heavily.
+
+Scheduling behaviour can in theory be overridden with `containerNode._vode.asyncRenderer`.
+
+```js
+// or globally disable view transitions for the vode framework
+import { globals } from '@ryupold/vode';
+globals.startViewTransition = null;
+
+// set to disable view transitions for specific vode-app
+containerNode._vode.asyncRenderer = null;
+```
+
 ### performance
 
 There are some metrics available on the appNode. 

package/dist/vode.js

@@ -61,6 +61,7 @@ var V = (() => {
     DIV: () => DIV,
     DL: () => DL,
     DT: () => DT,
+    DelegateStateContext: () => DelegateStateContext,
     ELLIPSE: () => ELLIPSE,
     EM: () => EM,
     EMBED: () => EMBED,
@@ -115,6 +116,7 @@ var V = (() => {
     INPUT: () => INPUT,
     INS: () => INS,
     KBD: () => KBD,
+    KeyStateContext: () => KeyStateContext,
     LABEL: () => LABEL,
     LEGEND: () => LEGEND,
     LI: () => LI,
@@ -182,6 +184,7 @@ var V = (() => {
     S: () => S,
     SAMP: () => SAMP,
     SCRIPT: () => SCRIPT,
+    SEARCH: () => SEARCH,
     SECTION: () => SECTION,
     SELECT: () => SELECT,
     SEMANTICS: () => SEMANTICS,
@@ -217,6 +220,7 @@ var V = (() => {
     U: () => U,
     UL: () => UL,
     USE: () => USE,
+    VAR: () => VAR,
     VIDEO: () => VIDEO,
     VIEW: () => VIEW,
     WBR: () => WBR,
@@ -227,6 +231,7 @@ var V = (() => {
     childrenStart: () => childrenStart,
     createPatch: () => createPatch,
     createState: () => createState,
+    globals: () => globals,
     hydrate: () => hydrate,
     memo: () => memo,
     mergeClass: () => mergeClass,
@@ -236,6 +241,11 @@ var V = (() => {
   });
 
   // src/vode.ts
+  var globals = {
+    currentViewTransition: void 0,
+    requestAnimationFrame: !!window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : ((cb) => cb()),
+    startViewTransition: !!document.startViewTransition ? document.startViewTransition.bind(document) : null
+  };
   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;
@@ -247,12 +257,16 @@ var V = (() => {
     if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
     if (typeof dom !== "function") throw new Error("third argument to app() must be a function that returns a vode");
     const _vode = {};
-    _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+    _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++;
         if (action?.next) {
@@ -263,13 +277,13 @@ var V = (() => {
             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--;
           }
@@ -277,57 +291,91 @@ var V = (() => {
           _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) return;
+      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(
@@ -402,47 +450,6 @@ var V = (() => {
     }
     return void 0;
   }
-  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 = /* @__PURE__ */ new Set([...aSplit, ...bSplit]);
-      return Array.from(classSet).join(" ").trim();
-    } else if (typeof a === "string" && Array.isArray(b)) {
-      const classSet = /* @__PURE__ */ new Set([...b, ...a.split(" ")]);
-      return Array.from(classSet).join(" ").trim();
-    } else if (Array.isArray(a) && typeof b === "string") {
-      const classSet = /* @__PURE__ */ new Set([...a, ...b.split(" ")]);
-      return Array.from(classSet).join(" ").trim();
-    } else if (Array.isArray(a) && Array.isArray(b)) {
-      const classSet = /* @__PURE__ */ 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) {
@@ -490,7 +497,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 +541,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(state, patch, newNode, void 0, properties);
       if (oldNode) {
         oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(newNode);
@@ -557,7 +564,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 +572,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 +581,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(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);
@@ -589,7 +595,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 +651,15 @@ var V = (() => {
       return c;
     }
   }
-  function patchProperties(patch, node, oldProps, newProps, isSvg) {
+  function patchProperties(s, 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(s, patch, node, key, oldValue, newValue);
+          else patchProperty(s, patch, node, key, oldValue, void 0);
         }
       }
     }
@@ -661,17 +667,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(s, 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(s, patch, node, key, void 0, 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 = "";
@@ -691,35 +697,17 @@ 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) {
         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);
         }
@@ -829,6 +817,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 +843,7 @@ var V = (() => {
   var TRACK = "track";
   var U = "u";
   var UL = "ul";
+  var VAR = "var";
   var VIDEO = "video";
   var WBR = "wbr";
   var ANIMATE = "animate";
@@ -945,5 +935,136 @@ var V = (() => {
   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 = /* @__PURE__ */ new Set([...aSplit, ...bSplit]);
+        finalClass = Array.from(classSet).join(" ").trim();
+      } else if (typeof a === "string" && Array.isArray(b)) {
+        const classSet = /* @__PURE__ */ new Set([...b, ...a.split(" ")]);
+        finalClass = Array.from(classSet).join(" ").trim();
+      } else if (Array.isArray(a) && typeof b === "string") {
+        const classSet = /* @__PURE__ */ new Set([...a, ...b.split(" ")]);
+        finalClass = Array.from(classSet).join(" ").trim();
+      } else if (Array.isArray(a) && Array.isArray(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 };
+      } 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
+  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]] : void 0;
+      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));
+    }
+    /**
+     * Creates a render-patch for the parent state by setting a nested sub-state value while creating necessary structure. 
+     * 
+     * @example
+     * ```typescript
+     * const ctx = new StateContext(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);
+      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;
+      }
+    }
+  };
+  var DelegateStateContext = class {
+    constructor(state, get, put, patch) {
+      this.state = state;
+      this.get = get;
+      this.put = put;
+      this.patch = patch;
+    }
+  };
   return __toCommonJS(index_exports);
 })();