@ryupold/vode 1.8.6 → 1.8.8

package/dist/vode.mjs

@@ -20,7 +20,6 @@ function app(container, state, dom, ...initialPatches) {
   _vode.qSync = null;
   _vode.qAsync = null;
   _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
-  _vode.unmounts = [];
   const patchableState = state;
   if ("patch" in state && typeof state.patch === "function" && Array.isArray(state.patch.initialPatches)) {
     initialPatches = [...state.patch.initialPatches, ...initialPatches];
@@ -89,15 +88,15 @@ function app(container, state, dom, ...initialPatches) {
     }
   });
   function renderDom(isAsync) {
-    const sw = Date.now();
+    const sw = performance.now();
     const vom = dom(_vode.state);
-    _vode.vode = render(_vode.state, container.parentElement, 0, 0, _vode.vode, vom, null, _vode.unmounts, 0);
+    _vode.vode = render(_vode.state, container.parentElement, 0, 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.lastSyncRenderTime = performance.now() - sw;
       _vode.stats.syncRenderCount++;
       _vode.isRendering = false;
       if (_vode.qSync) _vode.renderSync();
@@ -126,14 +125,14 @@ function app(container, state, dom, ...initialPatches) {
       await globals.currentViewTransition?.updateCallbackDone;
       if (_vode.isAnimating || !_vode.qAsync || document.hidden) return;
       _vode.isAnimating = true;
-      const sw = Date.now();
+      const sw = performance.now();
       try {
         _vode.state = mergeState(_vode.state, _vode.qAsync, true);
         _vode.qAsync = null;
         globals.currentViewTransition = _vode.asyncRenderer(ar);
         await globals.currentViewTransition?.updateCallbackDone;
       } finally {
-        _vode.stats.lastAsyncRenderTime = Date.now() - sw;
+        _vode.stats.lastAsyncRenderTime = performance.now() - sw;
         _vode.stats.asyncRenderCount++;
         _vode.isAnimating = false;
       }
@@ -151,10 +150,7 @@ function app(container, state, dom, ...initialPatches) {
     indexInParent,
     indexInParent,
     hydrate(container, true),
-    dom(state),
-    null,
-    _vode.unmounts,
-    0
+    dom(state)
   );
   _vode.isRendering = false;
   if (_vode.qSync) _vode.renderSync();
@@ -235,11 +231,15 @@ function hydrate(element, prepareForRender) {
     return void 0;
   }
 }
-function memo(compare, componentOrProps) {
+function memo(compare, component) {
   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;
+  if (typeof component !== "function") throw new Error("second argument to memo() must be a function that returns a child vode");
+  if (component.__memo) {
+    const comp = component;
+    component = (s) => comp(s);
+  }
+  component.__memo = compare;
+  return component;
 }
 function createState(state) {
   if (!state || typeof state !== "object") throw new Error("createState() must be called with a state object");
@@ -324,7 +324,7 @@ function mergeState(target, source, allowDeletion) {
   }
   return target;
 }
-function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmlns, unmounts, unmountStart) {
+function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmlns) {
   try {
     newVode = remember(state, newVode, oldVode);
     const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
@@ -334,17 +334,7 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
     const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
     const oldNode = oldIsText ? oldVode : oldVode?.node;
     if (isNoVode) {
-      if (!oldIsText && typeof oldVode?.unmountCount === "number") {
-        const start = oldVode.unmountStart;
-        const count = oldVode.unmountCount;
-        for (let i = count - 1; i >= 0; i--) {
-          const fn = unmounts[start + i];
-          if (fn) {
-            state.patch(fn(state, oldNode));
-            unmounts[start + i] = null;
-          }
-        }
-      }
+      unmountTree(state, oldVode);
       oldNode?.remove();
       return void 0;
     }
@@ -367,24 +357,14 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
     if (isText && (!oldNode || !oldIsText)) {
       const text = document.createTextNode(newVode);
       if (oldNode) {
-        if (!oldIsText && typeof oldVode?.unmountCount === "number") {
-          const start = oldVode.unmountStart;
-          const count = oldVode.unmountCount;
-          for (let i = count - 1; i >= 0; i--) {
-            const fn = unmounts[start + i];
-            if (fn) {
-              state.patch(fn(state, oldNode));
-              unmounts[start + i] = null;
-            }
-          }
-        }
+        unmountTree(state, oldVode);
         oldNode.replaceWith(text);
       } else {
         let inserted = false;
         for (let i = indexInParent; i < parent.childNodes.length; i++) {
           const nextSibling = parent.childNodes[i];
           if (nextSibling) {
-            nextSibling.before(text, nextSibling);
+            nextSibling.before(text);
             inserted = true;
             break;
           }
@@ -410,26 +390,14 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
         newVode.node.removeAttribute("catch");
       }
       if (oldNode) {
-        if (!oldIsText && typeof oldVode?.unmountCount === "number") {
-          const start = oldVode.unmountStart;
-          const count = oldVode.unmountCount;
-          for (let i = count - 1; i >= 0; i--) {
-            const fn = unmounts[start + i];
-            if (fn) {
-              state.patch(fn(state, oldNode));
-              unmounts[start + i] = null;
-            }
-          }
-        }
-        unmounts[unmountStart] = properties?.onUnmount ?? null;
+        unmountTree(state, oldVode);
         oldNode.replaceWith(newNode);
       } else {
-        unmounts[unmountStart] = properties?.onUnmount ?? null;
         let inserted = false;
         for (let i = indexInParent; i < parent.childNodes.length; i++) {
           const nextSibling = parent.childNodes[i];
           if (nextSibling) {
-            nextSibling.before(newNode, nextSibling);
+            nextSibling.before(newNode);
             inserted = true;
             break;
           }
@@ -438,78 +406,53 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
           parent.appendChild(newNode);
         }
       }
-      let totalChildUnmounts = 0;
-      let childUnmountStart = unmountStart + 1;
-      const newKids = children(newVode);
-      if (newKids) {
+      const newStart = childrenStart(newVode);
+      if (newStart > 0) {
         const childOffset = !!properties ? 2 : 1;
         let indexP = 0;
-        for (let i = 0; i < newKids.length; i++) {
-          const child2 = newKids[i];
-          const attached = render(state, newNode, i, indexP, void 0, child2, xmlns ?? null, unmounts, childUnmountStart);
+        for (let i = 0; i < newVode.length - newStart; i++) {
+          const child2 = newVode[i + newStart];
+          const attached = render(state, newNode, i, indexP, void 0, child2, xmlns ?? null);
           newVode[i + childOffset] = attached;
-          if (attached) {
-            indexP++;
-            const childUnmounts = attached.unmountCount || 0;
-            totalChildUnmounts += childUnmounts;
-            childUnmountStart += childUnmounts;
-          }
+          if (attached) indexP++;
         }
       }
-      newNode.onMount && state.patch(newNode.onMount(newNode));
-      newVode.unmountCount = 1 + totalChildUnmounts;
-      newVode.unmountStart = unmountStart;
+      newVode._unmountCount = (properties?.onUnmount ? 1 : 0) + sumChildUnmountCounts(newVode);
+      if (typeof properties?.onMount === "function") {
+        state.patch(properties.onMount(state, newNode));
+      }
       return newVode;
     }
     if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
       newVode.node = oldNode;
-      const newvode = newVode;
-      const oldvode = oldVode;
       const properties = props(newVode);
       const oldProps = props(oldVode);
-      if (properties?.xmlns !== void 0) xmlns = properties.xmlns;
-      if (newvode[1]?.__memo) {
-        const prev = newvode[1];
-        newvode[1] = remember(state, newvode[1], oldvode[1]);
-        if (prev !== newvode[1]) {
-          patchProperties(state, oldNode, oldProps, properties, xmlns);
-        }
-      } else {
-        patchProperties(state, oldNode, oldProps, properties, xmlns);
-      }
+      if (properties?.xmlns !== void 0)
+        xmlns = properties.xmlns;
+      patchProperties(state, oldNode, oldProps, properties, xmlns);
       if (!!properties?.catch && oldProps?.catch !== properties.catch) {
         newVode.node["catch"] = null;
         newVode.node.removeAttribute("catch");
       }
-      unmounts[unmountStart] = properties?.onUnmount ?? null;
-      let totalChildUnmounts = 0;
-      let childUnmountStart = unmountStart + 1;
-      const newKids = children(newVode);
-      const oldKids = children(oldVode);
-      if (newKids) {
-        const childOffset = !!properties ? 2 : 1;
+      const newStart = childrenStart(newVode);
+      const oldStart = childrenStart(oldVode);
+      if (newStart > 0) {
         let indexP = 0;
-        for (let i = 0; i < newKids.length; i++) {
-          const child2 = newKids[i];
-          const oldChild = oldKids && oldKids[i];
-          const attached = render(state, oldNode, i, indexP, oldChild, child2, xmlns, unmounts, childUnmountStart);
-          newVode[i + childOffset] = attached;
-          if (attached) {
-            indexP++;
-            const childUnmounts = attached.unmountCount || 0;
-            totalChildUnmounts += childUnmounts;
-            childUnmountStart += childUnmounts;
-          }
+        for (let i = 0; i < newVode.length - newStart; i++) {
+          const child2 = newVode[i + newStart];
+          const oldChild = oldStart > 0 ? oldVode[i + oldStart] : void 0;
+          const attached = render(state, oldNode, i, indexP, oldChild, child2, xmlns);
+          newVode[i + newStart] = attached;
+          if (attached) indexP++;
         }
       }
-      if (oldKids) {
-        const newKidsCount = newKids ? newKids.length : 0;
-        for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-          render(state, oldNode, i, i, oldKids[i], void 0, xmlns, unmounts, oldKids[i].unmountStart);
+      if (oldStart > 0) {
+        const newKidsCount = newStart > 0 ? newVode.length - newStart : 0;
+        for (let i = oldVode.length - 1 - oldStart; i >= newKidsCount; i--) {
+          render(state, oldNode, i, i, oldVode[i + oldStart], void 0, xmlns);
         }
       }
-      newVode.unmountCount = 1 + totalChildUnmounts;
-      newVode.unmountStart = unmountStart;
+      newVode._unmountCount = (properties?.onUnmount ? 1 : 0) + sumChildUnmountCounts(newVode);
       return newVode;
     }
   } catch (error) {
@@ -523,9 +466,7 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
         indexInParent,
         hydrate(newVode?.node || oldVode?.node, true),
         handledVode,
-        xmlns,
-        unmounts,
-        unmountStart
+        xmlns
       );
     } else {
       throw error;
@@ -533,6 +474,31 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
   }
   return void 0;
 }
+function unmountTree(state, v) {
+  if (!v || !Array.isArray(v)) return;
+  if ((v._unmountCount | 0) === 0) return;
+  const kids = children(v);
+  if (kids) {
+    for (let i = kids.length - 1; i >= 0; i--) {
+      unmountTree(state, kids[i]);
+    }
+  }
+  const p = props(v);
+  if (typeof p?.onUnmount === "function") {
+    state.patch(p.onUnmount(state, v.node));
+  }
+}
+function sumChildUnmountCounts(v) {
+  const kids = children(v);
+  if (!kids) return 0;
+  let n = 0;
+  for (const k of kids) {
+    if (k && Array.isArray(k)) {
+      n += k._unmountCount | 0;
+    }
+  }
+  return n;
+}
 function isNaturalVode(x) {
   return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
 }
@@ -540,6 +506,9 @@ function isTextVode(x) {
   return typeof x === "string" || x?.nodeType === Node.TEXT_NODE;
 }
 function remember(state, present, past) {
+  while (typeof present === "function" && !present.__memo) {
+    present = present(state);
+  }
   if (typeof present !== "function")
     return present;
   const presentMemo = present?.__memo;
@@ -554,37 +523,13 @@ function remember(state, present, past) {
     }
     if (same) return past;
   }
-  const result = present(state);
-  if (typeof result === "function" && result?.__memo) {
-    const resultMemo = result.__memo;
-    if (Array.isArray(resultMemo) && Array.isArray(pastMemo) && resultMemo.length === pastMemo.length) {
-      let same = true;
-      for (let i = 0; i < resultMemo.length; i++) {
-        if (resultMemo[i] !== pastMemo[i]) {
-          same = false;
-          break;
-        }
-      }
-      if (same) return past;
-    }
-    const innerRender = result(state);
-    if (typeof innerRender === "object") {
-      innerRender.__memo = resultMemo;
-    }
-    return innerRender;
+  while (typeof present === "function") {
+    present = present(state);
   }
-  const newRender = typeof result === "function" ? unwrap(result, state) : result;
-  if (typeof newRender === "object") {
-    newRender.__memo = result?.__memo || present?.__memo;
-  }
-  return newRender;
-}
-function unwrap(c, s) {
-  if (typeof c === "function") {
-    return unwrap(c(s), s);
-  } else {
-    return c;
+  if (typeof present === "object") {
+    present.__memo = presentMemo;
   }
+  return present;
 }
 function patchProperties(s, node, oldProps, newProps, xmlns) {
   if (!newProps && !oldProps) return;
@@ -1001,10 +946,11 @@ var ProxyStateContextImpl = class _ProxyStateContextImpl {
         }
         raw[keys[i]] = value;
       } else if (keys.length === 1) {
-        if (typeof target[keys[0]] === "object" && typeof value === "object")
+        if (typeof target[keys[0]] === "object" && typeof value === "object" && value !== null) {
           Object.assign(target[keys[0]], value);
-        else
+        } else {
           target[keys[0]] = value;
+        }
       } else {
         Object.assign(target, value);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.8.6",
+    "version": "1.8.8",
     "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",

package/src/state-context.ts

@@ -41,13 +41,13 @@ export interface SubContext<SubState> {
 }
 
 export type ProxyStateContext<S extends PatchableState, SubState> = StateContext<S, SubState> & {
-    [K in keyof SubState]-?: SubState[K] extends object
+    [K in keyof SubState]-?: SubState[K] extends object | null
     ? ProxyStateContext<S, SubState[K]>
     : StateContext<S, SubState[K]>
 };
 
 export type ProxySubContext<SubState> = SubContext<SubState> & {
-    [K in keyof SubState]-?: SubState[K] extends object
+    [K in keyof SubState]-?: SubState[K] extends object | null
     ? ProxySubContext<SubState[K]>
     : SubContext<SubState[K]>
 };
@@ -107,10 +107,12 @@ class ProxyStateContextImpl<S extends PatchableState, SubState>
                 }
                 raw[keys[i]] = value;
             } else if (keys.length === 1) {
-                if (typeof (<any>target)[keys[0]] === "object" && typeof value === "object")
+                if (typeof (<any>target)[keys[0]] === "object" && typeof value === "object" && value !== null) {
                     Object.assign((<any>target)[keys[0]], value);
-                else
+                }
+                else {
                     (<any>target)[keys[0]] = value;
+                }
             } else {
                 Object.assign(target, value as DeepPartial<S>);
             }