@ryupold/vode 1.8.7 → 1.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.8.7",
+    "version": "1.8.10",
     "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -25,11 +25,10 @@
     },
     "homepage": "https://github.com/ryupold/vode#readme",
     "type": "module",
-    "main": "./dist/vode.mjs",
-    "types": "./dist/vode.d.ts",
     "exports": {
         ".": {
             "types": "./dist/vode.d.ts",
+            "tests": "./dist/vode.tests.mjs",
             "import": "./dist/vode.min.mjs",
             "require": "./dist/vode.cjs.min.js",
             "default": "./dist/vode.min.js"
@@ -43,11 +42,12 @@
         "build-classic-min": "esbuild index.ts --outfile=dist/vode.min.js --bundle --format=iife  --global-name=V --minify",
         "babel": "npx babel dist/vode.mjs --out-file dist/vode.cjs.min.js",
         "babel-classic": "npx babel dist/vode.js --out-file dist/vode.es5.min.js",
-        "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",
+        "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 && npm run build-tests",
         "publish": "npm publish --access public",
         "clean": "tsc -b --clean && rm dist/*",
         "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"
+        "test": "tsc -p tsconfig.test.json && esbuild test/run-tests.ts --bundle --outfile=test/run-tests.js --platform=node && node test/run-tests.js",
+        "build-tests": "esbuild test/index.ts --bundle --format=esm --outfile=dist/vode.tests.mjs"
     },
     "devDependencies": {
         "@babel/cli": "7.28.6",

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>);
             }

package/src/vode.ts

@@ -1,5 +1,5 @@
 export type Vode<S = PatchableState> = FullVode<S> | JustTagVode | NoPropsVode<S>;
-export type FullVode<S = PatchableState> = [tag: Tag, props: Props<S>, ...children: ChildVode<S>[]];
+export type FullVode<S = PatchableState> = [tag: Tag, props: Props<S> | ChildVode<S>, ...children: ChildVode<S>[]];
 export type NoPropsVode<S = PatchableState> = [tag: Tag, ...children: ChildVode<S>[]] | (TextVode[]);
 export type JustTagVode = [tag: Tag];
 export type ChildVode<S = PatchableState> = Vode<S> | TextVode | NoVode | Component<S>;
@@ -7,7 +7,7 @@ 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 Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap & MathMLElementTagNameMap) | (string & {});
-export type Component<S> = (s: S) => ChildVode<S>;
+export type Component<S = PatchableState> = (s: S) => ChildVode<S>;
 
 export type Patch<S> =
     | IgnoredPatch // ignored
@@ -37,9 +37,9 @@ export interface Props<S = PatchableState> extends Partial<
     class?: ClassProp,
     style?: StyleProp,
     /** called after the element was attached */
-    onMount?: MountFunction<S>,
+    onMount?: MountFunction<S> | null | false,
     /** called before the element is detached */
-    onUnmount?: MountFunction<S>,
+    onUnmount?: MountFunction<S> | null | false,
     /** used instead of original vode when an error occurs during rendering */
     catch?: ((s: S, error: Error) => ChildVode<S>) | ChildVode<S>;
 };
@@ -93,9 +93,8 @@ export interface ContainerNode<S = PatchableState> extends HTMLElement {
         renderAsync: () => Promise<unknown>,
         syncRenderer: (cb: () => void) => void,
         asyncRenderer: ((cb: () => void) => ViewTransition) | null | undefined,
-        qSync: {} | undefined | null,  // next patch aggregate to be applied
         qAsync: {} | undefined | null,  // next render-patches to be animated after another
-        isRendering: boolean,
+        isRendering: number,
         isAnimating: boolean,
         /** stats about the overall patches & last render time */
         stats: {
@@ -146,7 +145,7 @@ export function app<S extends PatchableState = PatchableState>(
     const _vode = {} as ContainerNode<S>["_vode"];
     _vode.syncRenderer = globals.requestAnimationFrame;
     _vode.asyncRenderer = globals.startViewTransition;
-    _vode.qSync = null;
+    _vode.isRendering = 0;
     _vode.qAsync = null;
     _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
 
@@ -156,68 +155,79 @@ export function app<S extends PatchableState = PatchableState>(
         initialPatches = [...(state as any).patch.initialPatches, ...initialPatches];
     }
 
-    Object.defineProperty(state, "patch", {
-        enumerable: false, configurable: true,
-        writable: false, value: async (action: Patch<S>, isAsync?: boolean) => {
-            if (!action || (typeof action !== "function" && typeof action !== "object")) return;
-            _vode.stats.patchCount++;
+    async function promisePatch(action: Promise<Patch<S>>, isAnimated?: boolean) {
+        _vode.stats.liveEffectCount++;
+        try {
+            const resolvedPatch = await (action as Promise<S>);
+            patchableState.patch(<Patch<S>>resolvedPatch, isAnimated);
+        } finally {
+            _vode.stats.liveEffectCount--;
+        }
+    }
 
-            if ((action as AsyncGenerator<Patch<S>>)?.next) {
-                const generator = action as AsyncGenerator<Patch<S>>;
+    async function generatorPatch(action: AsyncGenerator<Patch<S>>, isAnimated?: boolean) {
+        const generator = action as AsyncGenerator<Patch<S>>;
+        _vode.stats.liveEffectCount++;
+        try {
+            let v = await generator.next();
+            while (v.done === false) {
                 _vode.stats.liveEffectCount++;
                 try {
-                    let v = await generator.next();
-                    while (v.done === false) {
-                        _vode.stats.liveEffectCount++;
-                        try {
-                            patchableState.patch(v.value, isAsync);
-                            v = await generator.next();
-                        } finally {
-                            _vode.stats.liveEffectCount--;
-                        }
-                    }
-                    patchableState.patch(v.value as Patch<S>, isAsync);
+                    patchableState.patch(v.value, isAnimated);
+                    v = await generator.next();
                 } finally {
                     _vode.stats.liveEffectCount--;
                 }
+            }
+            patchableState.patch(v.value as Patch<S>, isAnimated);
+        } finally {
+            _vode.stats.liveEffectCount--;
+        }
+    }
+
+    Object.defineProperty(state, "patch", {
+        enumerable: false, configurable: true,
+        writable: false, value: (action: Patch<S>, isAnimated?: boolean) => {
+            while (typeof action === "function") {
+                action = (<(s: S) => unknown>action)(_vode.state);
+            }
+
+            if (!action || typeof action !== "object") return;
+
+            _vode.stats.patchCount++;
+
+            if ((action as AsyncGenerator<Patch<S>>)?.next) {
+                generatorPatch(action as AsyncGenerator<Patch<S>>, isAnimated);
             } else if ((action as Promise<S>).then) {
-                _vode.stats.liveEffectCount++;
-                try {
-                    const resolvedPatch = await (action as Promise<S>);
-                    patchableState.patch(<Patch<S>>resolvedPatch, isAsync);
-                } finally {
-                    _vode.stats.liveEffectCount--;
-                }
+                promisePatch(action as Promise<S>, isAnimated);
             } else if (Array.isArray(action)) {
                 if (action.length > 0) {
                     for (const p of action) {
                         patchableState.patch(p, !document.hidden && !!_vode.asyncRenderer);
                     }
                 } else { //when [] is patched: 1. skip current animation 2. merge all queued async patches into synced queue
-                    _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
+                    mergeState(_vode.state, _vode.qAsync, true);
                     _vode.qAsync = null;
                     try { globals.currentViewTransition?.skipTransition(); } catch { }
                     _vode.stats.syncRenderPatchCount++;
                     _vode.renderSync();
                 }
-            } else if (typeof action === "function") {
-                patchableState.patch((<(s: S) => unknown>action)(_vode.state), isAsync);
             } else {
-                if (isAsync) {
+                if (isAnimated) {
                     _vode.stats.asyncRenderPatchCount++;
                     _vode.qAsync = mergeState(_vode.qAsync || {}, action, false);
-                    await _vode.renderAsync();
+                    _vode.renderAsync();
                 } else {
                     _vode.stats.syncRenderPatchCount++;
-                    _vode.qSync = mergeState(_vode.qSync || {}, action, false);
+                    mergeState(_vode.state, action, true);
                     _vode.renderSync();
                 }
             }
         }
     });
 
-    function renderDom(isAsync: boolean) {
-        const sw = Date.now();
+    function renderDom(isAnimated: boolean) {
+        const sw = performance.now();
         const vom = dom(_vode.state);
         _vode.vode = render<S>(_vode.state, container.parentElement as Element, 0, 0, _vode.vode, vom)!;
 
@@ -226,11 +236,13 @@ export function app<S extends PatchableState = PatchableState>(
             (<ContainerNode<S>>container)._vode = _vode
         }
 
-        if (!isAsync) {
-            _vode.stats.lastSyncRenderTime = Date.now() - sw;
+        if (!isAnimated) {
+            _vode.stats.lastSyncRenderTime = performance.now() - sw;
+            const changesSinceRender = _vode.isRendering !== _vode.stats.syncRenderPatchCount;
             _vode.stats.syncRenderCount++;
-            _vode.isRendering = false;
-            if (_vode.qSync) _vode.renderSync();
+            _vode.isRendering = 0;
+            if (changesSinceRender)
+                _vode.renderSync();
         }
     }
     const sr = renderDom.bind(null, false);
@@ -239,13 +251,9 @@ export function app<S extends PatchableState = PatchableState>(
     Object.defineProperty(_vode, "renderSync", {
         enumerable: false, configurable: true,
         writable: false, value: () => {
-            if (_vode.isRendering || !_vode.qSync) return;
-
-            _vode.isRendering = true;
-
-            _vode.state = mergeState(_vode.state, _vode.qSync, true);
-            _vode.qSync = null;
+            if (_vode.isRendering) return;
 
+            _vode.isRendering = _vode.stats.syncRenderPatchCount;
             _vode.syncRenderer(sr);
         }
     });
@@ -258,7 +266,7 @@ export function app<S extends PatchableState = PatchableState>(
             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;
@@ -267,7 +275,7 @@ export function app<S extends PatchableState = PatchableState>(
 
                 await globals.currentViewTransition?.updateCallbackDone;
             } finally {
-                _vode.stats.lastAsyncRenderTime = Date.now() - sw;
+                _vode.stats.lastAsyncRenderTime = performance.now() - sw;
                 _vode.stats.asyncRenderCount++;
                 _vode.isAnimating = false;
             }
@@ -281,7 +289,8 @@ export function app<S extends PatchableState = PatchableState>(
     root._vode = _vode;
     const indexInParent = Array.from(container.parentElement.children).indexOf(container);
 
-    _vode.isRendering = true;
+    const patchCountBefore = _vode.stats.syncRenderPatchCount;
+    _vode.isRendering = _vode.stats.syncRenderPatchCount;
     _vode.vode = render(
         <S>state,
         container.parentElement,
@@ -290,8 +299,10 @@ export function app<S extends PatchableState = PatchableState>(
         hydrate<S>(container, true) as AttachedVode<S>,
         dom(<S>state)
     )!;
-    _vode.isRendering = false;
-    if (_vode.qSync) _vode.renderSync();
+    const continueRendering = _vode.stats.syncRenderPatchCount !== patchCountBefore;
+    _vode.isRendering = 0;
+    _vode.stats.syncRenderCount++;
+    if (continueRendering) _vode.renderSync();
 
     for (const effect of initialPatches) {
         patchableState.patch(effect);
@@ -384,13 +395,20 @@ export function hydrate<S = PatchableState>(element: Element | Text, prepareForR
 }
 
 /** memoizes the resulting component or props by comparing element by element (===) with the
- * `compare` of the previous render. otherwise skips the render step (not calling `componentOrProps`)*/
-export function memo<S = PatchableState>(compare: any[], componentOrProps: Component<S> | ((s: S) => Props<S>)): typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S> {
+ * `compare` of the previous render. otherwise skips the render step (not calling `componentOrProps`)
+ */
+export function memo<S = PatchableState>(compare: any[], component: Component<S>): Component<S> {
     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 (typeof component !== "function") throw new Error("second argument to memo() must be a function that returns a child vode");
+
+    if ((<any>component).__memo) { // wrap to prevent double memoization
+        const comp = component;
+        component = (s: S) => comp(s);
+    }
+
+    (<any>component).__memo = compare;
 
-    (<any>componentOrProps).__memo = compare;
-    return componentOrProps as typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S>;
+    return component;
 }
 
 /** 
@@ -559,7 +577,7 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
                 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;
                     }
@@ -605,7 +623,7 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
                 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;
                     }
@@ -615,12 +633,12 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
                 }
             }
 
-            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 child = newKids[i];
+                for (let i = 0; i < (<Vode<S>>newVode).length - newStart; i++) {
+                    const child = (<Vode<S>>newVode)[i + newStart] as ChildVode<S>;
                     // 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;
@@ -639,49 +657,37 @@ function render<S extends PatchableState>(state: S, parent: Element, childIndex:
         if (!oldIsText && isNode && (<Vode<S>>oldVode)[0] === (<Vode<S>>newVode)[0]) {
             (<AttachedVode<S>>newVode).node = oldNode;
 
-            const newvode = <Vode<S>>newVode;
-            const oldvode = <Vode<S>>oldVode;
-
             const properties = props(newVode);
             const oldProps = props(oldVode);
 
-            if (properties?.xmlns !== undefined) xmlns = properties.xmlns;
+            if (properties?.xmlns !== undefined)
+                xmlns = properties.xmlns;
 
-            if ((<any>newvode[1])?.__memo) {
-                const prev = newvode[1] as any;
-                newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
-                if (prev !== newvode[1]) {
-                    patchProperties(state, oldNode!, oldProps, properties, xmlns);
-                }
-            }
-            else {
-                patchProperties(state, oldNode!, oldProps, properties, xmlns);
-            }
+            patchProperties(state, oldNode!, oldProps, properties, xmlns);
 
             if (!!properties?.catch && oldProps?.catch !== properties.catch) {
                 (<any>newVode).node['catch'] = null;
                 (<any>newVode).node.removeAttribute('catch');
             }
 
-            const newKids = children(newVode);
-            const oldKids = children(oldVode) as AttachedVode<S>[];
-            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 child = newKids[i];
-                    const oldChild = oldKids && oldKids[i];
+                for (let i = 0; i < (<Vode<S>>newVode).length - newStart; i++) {
+                    const child = (<Vode<S>>newVode)[i + newStart] as ChildVode<S>;
+                    const oldChild = oldStart > 0 ? (<Vode<S>>oldVode)[i + oldStart] as AttachedVode<S> : undefined;
 
                     const attached = render(state, oldNode as Element, i, indexP, oldChild, child, xmlns);
-                    (<Vode<S>>newVode)[i + childOffset] = <Vode<S>>attached;
+                    (<any>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 as Element, i, i, oldKids[i], undefined, xmlns);
+            if (oldStart > 0) {
+                const newKidsCount = newStart > 0 ? (<Vode<S>>newVode).length - newStart : 0;
+                for (let i = (<Vode<S>>oldVode).length - 1 - oldStart; i >= newKidsCount; i--) {
+                    render(state, oldNode as Element, i, i, (<any>oldVode)[i + oldStart], undefined, xmlns);
                 }
             }
 
@@ -745,14 +751,19 @@ function isTextVode<S>(x: ChildVode<S>): x is TextVode {
 }
 
 function remember<S>(state: S, present: any, past: any): ChildVode<S> | AttachedVode<S> {
+    while (typeof present === "function" && !present.__memo) {
+        present = present(state);
+    }
+
     if (typeof present !== "function")
         return present;
 
-    const presentMemo = present?.__memo;
-    const pastMemo = past?.__memo;
 
-    if (Array.isArray(presentMemo)
-        && Array.isArray(pastMemo)
+    const presentMemo: unknown[] = present?.__memo;
+    const pastMemo: unknown[] = past?.__memo;
+
+    if (
+        Array.isArray(presentMemo) && Array.isArray(pastMemo)
         && presentMemo.length === pastMemo.length
     ) {
         let same = true;
@@ -765,40 +776,17 @@ function remember<S>(state: S, present: any, past: any): ChildVode<S> | Attached
         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;
+    // memos are not equal so we unwrap the present
+    while (typeof present === "function") {
+        present = present(state);
     }
 
-    const newRender = typeof result === "function" ? unwrap(result, state) : result;
-    if (typeof newRender === "object") {
-        (<any>newRender).__memo = result?.__memo || present?.__memo;
+    // attach memo to the unwrapped present for future comparisons
+    if (typeof present === "object") {
+        (<any>present).__memo = presentMemo;
     }
-    return newRender;
-}
 
-function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
-    if (typeof c === "function") {
-        return unwrap(c(s), s);
-    } else {
-        return c;
-    }
+    return present;
 }
 
 function patchProperties<S extends PatchableState>(