@ryupold/vode 1.8.4 → 1.8.6

package/dist/vode.mjs

@@ -1,13 +1,13 @@
 // 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
+  requestAnimationFrame: typeof window !== "undefined" && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : ((cb) => cb()),
+  startViewTransition: typeof document !== "undefined" && typeof document.startViewTransition === "function" ? 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;
-  else if (props2) return [tag2, props2, ...children2];
+  else if (typeof props2 === "object") return [tag2, props2, ...children2];
   else return [tag2, ...children2];
 }
 function app(container, state, dom, ...initialPatches) {
@@ -20,6 +20,7 @@ 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];
@@ -90,7 +91,7 @@ function app(container, state, dom, ...initialPatches) {
   function renderDom(isAsync) {
     const sw = Date.now();
     const vom = dom(_vode.state);
-    _vode.vode = render(_vode.state, container.parentElement, 0, 0, _vode.vode, vom);
+    _vode.vode = render(_vode.state, container.parentElement, 0, 0, _vode.vode, vom, null, _vode.unmounts, 0);
     if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
       container = _vode.vode.node;
       container._vode = _vode;
@@ -143,14 +144,20 @@ function app(container, state, dom, ...initialPatches) {
   const root = container;
   root._vode = _vode;
   const indexInParent = Array.from(container.parentElement.children).indexOf(container);
+  _vode.isRendering = true;
   _vode.vode = render(
     state,
     container.parentElement,
     indexInParent,
     indexInParent,
     hydrate(container, true),
-    dom(state)
+    dom(state),
+    null,
+    _vode.unmounts,
+    0
   );
+  _vode.isRendering = false;
+  if (_vode.qSync) _vode.renderSync();
   for (const effect of initialPatches) {
     patchableState.patch(effect);
   }
@@ -200,8 +207,6 @@ function hydrate(element, prepareForRender) {
     if (element.nodeValue?.trim() !== "")
       return prepareForRender ? element : element.nodeValue;
     return void 0;
-  } else if (element.nodeType === Node.COMMENT_NODE) {
-    return void 0;
   } else if (element.nodeType === Node.ELEMENT_NODE) {
     const tag2 = element.tagName.toLowerCase();
     const root = [tag2];
@@ -319,7 +324,7 @@ function mergeState(target, source, allowDeletion) {
   }
   return target;
 }
-function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmlns) {
+function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmlns, unmounts, unmountStart) {
   try {
     newVode = remember(state, newVode, oldVode);
     const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
@@ -329,7 +334,17 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
     const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
     const oldNode = oldIsText ? oldVode : oldVode?.node;
     if (isNoVode) {
-      oldNode?.onUnmount && state.patch(oldNode.onUnmount(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;
+          }
+        }
+      }
       oldNode?.remove();
       return void 0;
     }
@@ -352,7 +367,17 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
     if (isText && (!oldNode || !oldIsText)) {
       const text = document.createTextNode(newVode);
       if (oldNode) {
-        oldNode.onUnmount && state.patch(oldNode.onUnmount(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;
+            }
+          }
+        }
         oldNode.replaceWith(text);
       } else {
         let inserted = false;
@@ -385,9 +410,21 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
         newVode.node.removeAttribute("catch");
       }
       if (oldNode) {
-        oldNode.onUnmount && state.patch(oldNode.onUnmount(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;
         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];
@@ -401,18 +438,27 @@ 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 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);
+          const attached = render(state, newNode, i, indexP, void 0, child2, xmlns ?? null, unmounts, childUnmountStart);
           newVode[i + childOffset] = attached;
-          if (attached) indexP++;
+          if (attached) {
+            indexP++;
+            const childUnmounts = attached.unmountCount || 0;
+            totalChildUnmounts += childUnmounts;
+            childUnmountStart += childUnmounts;
+          }
         }
       }
       newNode.onMount && state.patch(newNode.onMount(newNode));
+      newVode.unmountCount = 1 + totalChildUnmounts;
+      newVode.unmountStart = unmountStart;
       return newVode;
     }
     if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
@@ -435,6 +481,9 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
         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) {
@@ -443,17 +492,24 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
         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);
+          const attached = render(state, oldNode, i, indexP, oldChild, child2, xmlns, unmounts, childUnmountStart);
           newVode[i + childOffset] = attached;
-          if (attached) indexP++;
+          if (attached) {
+            indexP++;
+            const childUnmounts = attached.unmountCount || 0;
+            totalChildUnmounts += childUnmounts;
+            childUnmountStart += childUnmounts;
+          }
         }
       }
       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);
+          render(state, oldNode, i, i, oldKids[i], void 0, xmlns, unmounts, oldKids[i].unmountStart);
         }
       }
+      newVode.unmountCount = 1 + totalChildUnmounts;
+      newVode.unmountStart = unmountStart;
       return newVode;
     }
   } catch (error) {
@@ -467,7 +523,9 @@ function render(state, parent, childIndex, indexInParent, oldVode, newVode, xmln
         indexInParent,
         hydrate(newVode?.node || oldVode?.node, true),
         handledVode,
-        xmlns
+        xmlns,
+        unmounts,
+        unmountStart
       );
     } else {
       throw error;
@@ -496,9 +554,28 @@ function remember(state, present, past) {
     }
     if (same) return past;
   }
-  const newRender = unwrap(present, state);
+  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;
+  }
+  const newRender = typeof result === "function" ? unwrap(result, state) : result;
   if (typeof newRender === "object") {
-    newRender.__memo = present?.__memo;
+    newRender.__memo = result?.__memo || present?.__memo;
   }
   return newRender;
 }
@@ -857,8 +934,11 @@ function mergeClass(...classes) {
 }
 
 // src/merge-style.ts
-var tempDivForStyling = document.createElement("div");
+var tempDivForStyling;
 function mergeStyle(...props2) {
+  if (!tempDivForStyling) {
+    tempDivForStyling = document.createElement("div");
+  }
   try {
     const merged = tempDivForStyling.style;
     for (const style of props2) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.8.4",
+    "version": "1.8.6",
     "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -46,12 +46,13 @@
         "release": "npm run build && npm run build-min && npm run build-classic && npm run build-classic-min && npm run babel && npm run babel-classic && npm run types",
         "publish": "npm publish --access public",
         "clean": "tsc -b --clean && rm dist/*",
-        "watch": "tsc -b -w"
+        "watch": "tsc -b -w",
+        "test": "tsc -p tsconfig.test.json && esbuild test/index.ts --bundle --outfile=test/bundle.js --platform=node && node test/bundle.js"
     },
     "devDependencies": {
         "@babel/cli": "7.28.6",
         "@babel/core": "7.29.0",
-        "@babel/preset-env": "7.29.3",
+        "@babel/preset-env": "7.29.5",
         "babel-preset-minify": "0.5.2",
         "dts-bundle-generator": "9.5.1",
         "esbuild": "0.28.0",

package/src/merge-style.ts

@@ -1,10 +1,13 @@
 import { StyleProp } from "./vode";
 
-const tempDivForStyling = document.createElement('div');
+let tempDivForStyling: HTMLElement | undefined;
 
 /** merge `StyleProps`s regardless of type 
  * @returns {string} merged StyleProp */
 export function mergeStyle(...props: StyleProp[]): StyleProp {
+    if (!tempDivForStyling) {
+        tempDivForStyling = document.createElement('div');
+    }
     try{
         const merged = tempDivForStyling.style;
         for (const style of props) {

package/src/vode.ts

@@ -5,7 +5,7 @@ export type JustTagVode = [tag: Tag];
 export type ChildVode<S = PatchableState> = Vode<S> | TextVode | NoVode | Component<S>;
 export type TextVode = string & {};
 export type NoVode = undefined | null | number | boolean | bigint | void;
-export type AttachedVode<S> = Vode<S> & { node: ChildNode } | Text & { node?: never };
+export type AttachedVode<S> = Vode<S> & { node: ChildNode, unmountCount: number, unmountStart: number } | Text & { node?: never, unmounts?: never, unmountStart?: never };
 export type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap & MathMLElementTagNameMap) | (string & {});
 export type Component<S> = (s: S) => ChildVode<S>;
 
@@ -78,8 +78,8 @@ export type PatchableState<S = object> = S & Patchable<S>;
 
 export const globals = {
     currentViewTransition: <ViewTransition | null | undefined>undefined,
-    requestAnimationFrame: !!window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : ((cb: () => void) => cb()),
-    startViewTransition: !!document.startViewTransition ? document.startViewTransition.bind(document) : null,
+    requestAnimationFrame: typeof window !== "undefined" && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : ((cb: () => void) => cb()),
+    startViewTransition: typeof document !== "undefined" && typeof document.startViewTransition === "function" ? document.startViewTransition.bind(document) : null,
 };
 
 export interface ContainerNode<S = PatchableState> extends HTMLElement {
@@ -97,6 +97,7 @@ export interface ContainerNode<S = PatchableState> extends HTMLElement {
         qAsync: {} | undefined | null,  // next render-patches to be animated after another
         isRendering: boolean,
         isAnimating: boolean,
+        unmounts: (MountFunction<S> | null)[],
         /** stats about the overall patches & last render time */
         stats: {
             patchCount: number,
@@ -122,7 +123,7 @@ export function vode<S = PatchableState>(tag: Tag | Vode<S>, props?: Props<S> |
     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 as Props<S>, ...children];
+    else if (typeof props === "object") return [tag, props as Props<S>, ...children];
     else return [tag, ...children];
 }
 
@@ -149,6 +150,7 @@ export function app<S extends PatchableState = PatchableState>(
     _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 as PatchableState<S> & { patch: (action: Patch<S>, animate?: boolean) => void };
 
@@ -219,7 +221,7 @@ export function app<S extends PatchableState = PatchableState>(
     function renderDom(isAsync: boolean) {
         const sw = Date.now();
         const vom = dom(_vode.state);
-        _vode.vode = render<S>(_vode.state, container.parentElement as Element, 0, 0, _vode.vode, vom)!;
+        _vode.vode = render<S>(_vode.state, container.parentElement as Element, 0, 0, _vode.vode, vom, null, _vode.unmounts, 0)!;
 
         if ((<ContainerNode<S>>container).tagName.toUpperCase() !== (vom[0] as Tag).toUpperCase()) { //the tag name was changed during render -> update reference to vode-app-root 
             container = _vode.vode.node as Element;
@@ -280,14 +282,20 @@ export function app<S extends PatchableState = PatchableState>(
     const root = container as ContainerNode<S>;
     root._vode = _vode;
     const indexInParent = Array.from(container.parentElement.children).indexOf(container);
+    _vode.isRendering = true;
     _vode.vode = render(
         <S>state,
         container.parentElement,
         indexInParent,
         indexInParent,
         hydrate<S>(container, true) as AttachedVode<S>,
-        dom(<S>state)
+        dom(<S>state),
+        null,
+        _vode.unmounts,
+        0
     )!;
+    _vode.isRendering = false;
+    if (_vode.qSync) _vode.renderSync();
 
     for (const effect of initialPatches) {
         patchableState.patch(effect);
@@ -349,9 +357,6 @@ export function hydrate<S = PatchableState>(element: Element | Text, prepareForR
             return prepareForRender ? element as Text : (element as Text).nodeValue!;
         return undefined; //ignore (mostly html whitespace)
     }
-    else if (element.nodeType === Node.COMMENT_NODE) {
-        return undefined; //ignore (not interesting)
-    }
     else if (element.nodeType === Node.ELEMENT_NODE) {
         const tag: Tag = (<Element>element).tagName.toLowerCase();
         const root: Vode<S> = [tag];
@@ -506,14 +511,20 @@ function mergeState(target: any, source: any, allowDeletion: boolean) {
     return target;
 };
 
-function render<S extends PatchableState>(state: S, parent: Element, childIndex: number, indexInParent: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, xmlns?: string | null): AttachedVode<S> | undefined {
+function render<S extends PatchableState>(
+    state: S, parent: Element,
+    childIndex: number, indexInParent: number,
+    oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>,
+    xmlns: string | null,
+    unmounts: (MountFunction<S> | null)[], unmountStart: number
+): AttachedVode<S> | undefined {
     try {
         // unwrap component if it is memoized
         newVode = remember(state, newVode, oldVode) as ChildVode<S>;
 
         const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
         if (newVode === oldVode || (!oldVode && isNoVode)) {
-            return oldVode;
+            return oldVode as AttachedVode<S>;
         }
 
         const oldIsText = (oldVode as Text)?.nodeType === Node.TEXT_NODE;
@@ -521,7 +532,17 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
 
         // falsy|text|element(A) -> undefined 
         if (isNoVode) {
-            (<any>oldNode)?.onUnmount && state.patch((<any>oldNode).onUnmount(oldNode));
+            if (!oldIsText && typeof (<any>oldVode)?.unmountCount === "number") {
+                const start = (<any>oldVode).unmountStart;
+                const count = (<any>oldVode).unmountCount;
+                for (let i = count - 1; i >= 0; i--) {
+                    const fn = unmounts[start + i];
+                    if (fn) {
+                        state.patch(fn(state, oldNode as HTMLElement & SVGSVGElement & MathMLElement));
+                        unmounts[start + i] = null;
+                    }
+                }
+            }
             oldNode?.remove();
             return undefined;
         }
@@ -545,13 +566,23 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
             if ((<Text>oldNode).nodeValue !== <string>newVode) {
                 (<Text>oldNode).nodeValue = <string>newVode;
             }
-            return oldVode;
+            return oldVode as AttachedVode<S>;
         }
         // falsy|element -> text
         if (isText && (!oldNode || !oldIsText)) {
             const text = document.createTextNode(newVode as string)
             if (oldNode) {
-                (<any>oldNode).onUnmount && state.patch((<any>oldNode).onUnmount(oldNode));
+                if (!oldIsText && typeof (<any>oldVode)?.unmountCount === "number") {
+                    const start = (<any>oldVode).unmountStart;
+                    const count = (<any>oldVode).unmountCount;
+                    for (let i = count - 1; i >= 0; i--) {
+                        const fn = unmounts[start + i];
+                        if (fn) {
+                            state.patch(fn(state, oldNode as HTMLElement & SVGSVGElement & MathMLElement));
+                            unmounts[start + i] = null;
+                        }
+                    }
+                }
                 oldNode.replaceWith(text);
             } else {
                 let inserted = false;
@@ -597,9 +628,21 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
             }
 
             if (oldNode) {
-                (<any>oldNode).onUnmount && state.patch((<any>oldNode).onUnmount(oldNode));
+                if (!oldIsText && typeof (<any>oldVode)?.unmountCount === "number") {
+                    const start = (<any>oldVode).unmountStart;
+                    const count = (<any>oldVode).unmountCount;
+                    for (let i = count - 1; i >= 0; i--) {
+                        const fn = unmounts[start + i];
+                        if (fn) {
+                            state.patch(fn(state, oldNode as HTMLElement & SVGSVGElement & MathMLElement));
+                            unmounts[start + i] = null;
+                        }
+                    }
+                }
+                unmounts[unmountStart] = properties?.onUnmount ?? null;
                 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];
@@ -614,20 +657,28 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
                 }
             }
 
+            let totalChildUnmounts = 0;
+            let childUnmountStart = unmountStart + 1;
             const newKids = children(newVode);
             if (newKids) {
                 const childOffset = !!properties ? 2 : 1;
                 let indexP = 0;
                 for (let i = 0; i < newKids.length; i++) {
                     const child = newKids[i];
-                    // render child in xml mode to prevent using the dom properties
-                    const attached = render(state, newNode as Element, i, indexP, undefined, child, xmlns ?? null);
-                    (<Vode<S>>newVode!)[i + childOffset] = <Vode<S>>attached;
-                    if (attached) indexP++;
+                    const attached = render(state, newNode as Element, i, indexP, undefined, child, xmlns ?? null, unmounts, childUnmountStart);
+                    (<Vode<S>>newVode!)[i + childOffset] = <Vode<S> | undefined>attached;
+                    if (attached) {
+                        indexP++;
+                        const childUnmounts = (<any>attached).unmountCount || 0;
+                        totalChildUnmounts += childUnmounts;
+                        childUnmountStart += childUnmounts;
+                    }
                 }
             }
 
             (<any>newNode).onMount && state.patch((<any>newNode).onMount(newNode));
+            (<any>newVode).unmountCount = 1 + totalChildUnmounts;
+            (<any>newVode).unmountStart = unmountStart;
             return <AttachedVode<S>>newVode;
         }
 
@@ -659,6 +710,11 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
                 (<any>newVode).node.removeAttribute('catch');
             }
 
+            // own unmount slot (always reserved per element)
+            unmounts[unmountStart] = properties?.onUnmount ?? null;
+
+            let totalChildUnmounts = 0;
+            let childUnmountStart = unmountStart + 1;
             const newKids = children(newVode);
             const oldKids = children(oldVode) as AttachedVode<S>[];
             if (newKids) {
@@ -667,20 +723,26 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
                 for (let i = 0; i < newKids.length; i++) {
                     const child = newKids[i];
                     const oldChild = oldKids && oldKids[i];
-
-                    const attached = render(state, oldNode as Element, i, indexP, oldChild, child, xmlns);
+                    const attached = render(state, oldNode as Element, i, indexP, oldChild, child, xmlns, unmounts, childUnmountStart);
                     (<Vode<S>>newVode)[i + childOffset] = <Vode<S>>attached;
-                    if (attached) indexP++;
+                    if (attached) {
+                        indexP++;
+                        const childUnmounts = (<any>attached).unmountCount || 0;
+                        totalChildUnmounts += childUnmounts;
+                        childUnmountStart += childUnmounts;
+                    }
                 }
             }
 
             if (oldKids) {
                 const newKidsCount = newKids ? newKids.length : 0;
                 for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-                    render(state, oldNode as Element, i, i, oldKids[i], undefined, xmlns);
+                    render(state, oldNode as Element, i, i, oldKids[i], undefined, xmlns, unmounts, (<any>oldKids[i]).unmountStart);
                 }
             }
 
+            (<any>newVode).unmountCount = 1 + totalChildUnmounts;
+            (<any>newVode).unmountStart = unmountStart;
             return <AttachedVode<S>>newVode;
         }
     } catch (error) {
@@ -693,7 +755,7 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
             return render(state, parent, childIndex, indexInParent,
                 hydrate(((<AttachedVode<S>>newVode)?.node || oldVode?.node) as Element, true) as AttachedVode<S>,
                 handledVode,
-                xmlns);
+                xmlns, unmounts, unmountStart);
         } else {
             throw error;
         }
@@ -730,9 +792,31 @@ function remember<S>(state: S, present: any, past: any): ChildVode<S> | Attached
         }
         if (same) return past;
     }
-    const newRender = unwrap(present, state);
+
+    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;
+    }
+
+    const newRender = typeof result === "function" ? unwrap(result, state) : result;
     if (typeof newRender === "object") {
-        (<any>newRender).__memo = present?.__memo;
+        (<any>newRender).__memo = result?.__memo || present?.__memo;
     }
     return newRender;
 }