@ryupold/vode 1.8.10 → 1.8.11

package/src/vode.ts

@@ -72,7 +72,7 @@ export type PropertyValue<S> =
     | StyleProp | ClassProp
     | Patch<S>;
 
-export type Dispatch<S> = (action: Patch<S>) => void;
+export type Dispatch<S> = (action: Patch<S>) => void | Promise<void>;
 export interface Patchable<S = object> { patch: Dispatch<S>; }
 export type PatchableState<S = object> = S & Patchable<S>;
 
@@ -149,7 +149,7 @@ export function app<S extends PatchableState = PatchableState>(
     _vode.qAsync = null;
     _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
 
-    const patchableState = state as PatchableState<S> & { patch: (action: Patch<S>, animate?: boolean) => void };
+    const patchableState = state as PatchableState<S> & { patch: (action: Patch<S>, animate?: boolean) => void | Promise<void> };
 
     if ("patch" in state && typeof state.patch === "function" && Array.isArray((state as any).patch.initialPatches)) {
         initialPatches = [...(state as any).patch.initialPatches, ...initialPatches];
@@ -159,7 +159,7 @@ export function app<S extends PatchableState = PatchableState>(
         _vode.stats.liveEffectCount++;
         try {
             const resolvedPatch = await (action as Promise<S>);
-            patchableState.patch(<Patch<S>>resolvedPatch, isAnimated);
+            await patchableState.patch(<Patch<S>>resolvedPatch, isAnimated);
         } finally {
             _vode.stats.liveEffectCount--;
         }
@@ -173,13 +173,13 @@ export function app<S extends PatchableState = PatchableState>(
             while (v.done === false) {
                 _vode.stats.liveEffectCount++;
                 try {
-                    patchableState.patch(v.value, isAnimated);
+                    await patchableState.patch(v.value, isAnimated);
                     v = await generator.next();
                 } finally {
                     _vode.stats.liveEffectCount--;
                 }
             }
-            patchableState.patch(v.value as Patch<S>, isAnimated);
+            await patchableState.patch(v.value as Patch<S>, isAnimated);
         } finally {
             _vode.stats.liveEffectCount--;
         }
@@ -187,7 +187,7 @@ export function app<S extends PatchableState = PatchableState>(
 
     Object.defineProperty(state, "patch", {
         enumerable: false, configurable: true,
-        writable: false, value: (action: Patch<S>, isAnimated?: boolean) => {
+        writable: false, value: (action: Patch<S>, isAnimated?: boolean): void | Promise<void> => {
             while (typeof action === "function") {
                 action = (<(s: S) => unknown>action)(_vode.state);
             }
@@ -197,9 +197,9 @@ export function app<S extends PatchableState = PatchableState>(
             _vode.stats.patchCount++;
 
             if ((action as AsyncGenerator<Patch<S>>)?.next) {
-                generatorPatch(action as AsyncGenerator<Patch<S>>, isAnimated);
+                return generatorPatch(action as AsyncGenerator<Patch<S>>, isAnimated);
             } else if ((action as Promise<S>).then) {
-                promisePatch(action as Promise<S>, isAnimated);
+                return promisePatch(action as Promise<S>, isAnimated);
             } else if (Array.isArray(action)) {
                 if (action.length > 0) {
                     for (const p of action) {

package/test/helper.ts

@@ -143,16 +143,18 @@ export class Expectation {
         );
     }
 
-    toSucceed<Result>(): Result {
+    toSucceed<Result>(failMessage?: string): Result {
+        const failSuffix = failMessage ? `\n\n${failMessage}` : "";
         if (typeof this.what !== "function") {
-            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}`);
+            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}${failSuffix}`);
         }
         return this.what();
     }
 
-    toFail(): Error {
+    toFail(failMessage?: string): Error {
+        const failSuffix = failMessage ? `\n\n${failMessage}` : "";
         if (typeof this.what !== "function") {
-            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}`);
+            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}${failSuffix}`);
         }
 
         let r: any;
@@ -161,28 +163,34 @@ export class Expectation {
         } catch (err: any) {
             return err;
         }
-        throw new ExpectationError(this, `expected function to fail\n\nbut it succeeded with a result of type ${typeof r}\n\n${r}`);
+        throw new ExpectationError(this, `expected function to fail\n\nbut it succeeded with a result of type ${typeof r}\n\n${r}${failSuffix}`);
     }
 
-    toSucceedAsync<Result>(waitTime: number = 100): Promise<Result> {
+    toSucceedAsync<Result>(failMessage?: string, waitTime: number = 100): Promise<Result> {
+        const failSuffix = failMessage ? `\n\n${failMessage}` : "";
         if (typeof this.what !== "function") {
-            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}`);
+            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}${failSuffix}`);
         }
         return retry<Result>(() => this.what(), waitTime);
     }
 
-    async toFailAsync(): Promise<Error> {
+    async toFailAsync(failMessage?: string): Promise<Error> {
+        const failSuffix = failMessage ? `\n\n${failMessage}` : "";
+
         if (typeof this.what !== "function") {
-            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}`);
+            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}${failSuffix}`);
         }
 
         let r: any;
         try {
-            r = await this.what();
+            if(typeof this.what === "function")
+                r = await this.what();
+            else
+                r = await this.what;
         } catch (err: any) {
             return err;
         }
-        throw new ExpectationError(this, `expected function to fail\n\nbut it succeeded with a result of type ${typeof r}\n\n${r}`);
+        throw new ExpectationError(this, `expected function to fail\n\nbut it succeeded with a result of type ${typeof r}\n\n${r}${failSuffix}`);
     }
 
     async toMatch(v: ChildVode,

package/test/mocks.ts

@@ -213,7 +213,7 @@ export function resetMocks() {
         }, 16);
     }
 
-    const mockDoc: any = {
+    const fakeDocument: any = {
         createElement: (tag: string) => new FakeElement(tag),
         createTextNode: (text: string) => new FakeTextNode(text),
         createElementNS: (ns: string, tag: string) => new FakeElement(tag),
@@ -224,10 +224,11 @@ export function resetMocks() {
                 updateCallbackDone: Promise.resolve(),
                 skipTransition() { },
             };
-        }
+        },
+        _fake: true,
     };
 
-    Object.defineProperty(mockDoc, "hidden", {
+    Object.defineProperty(fakeDocument, "hidden", {
         enumerable: true,
         configurable: true,
         get: () => hidden,
@@ -239,7 +240,7 @@ export function resetMocks() {
         },
     });
 
-    const mockWin: any = {
+    const fakeWindow: any = {
         requestAnimationFrame: (cb: FrameRequestCallback) => {
             const id = ++rafHandle;
             rafQueue.set(id, cb);
@@ -248,20 +249,31 @@ export function resetMocks() {
         },
         cancelAnimationFrame: (id: number) => {
             rafQueue.delete(id);
-        }
+        },
+        _fake: true,
     };
 
-    globalThis.document ??= mockDoc as Document;
-    globalThis.window ??= mockWin as (Window & typeof globalThis);
+    if ((<typeof fakeDocument>globalThis.document)?._fake)
+        globalThis.document = undefined as any;
+    if ((<typeof fakeWindow>globalThis.window)?._fake)
+        globalThis.window = undefined as any;
+
+
+    globalThis.document ??= fakeDocument as Document;
+    globalThis.window ??= fakeWindow as (Window & typeof globalThis);
     globalThis.Node ??= NodeConstants as any;
 
-    const raf = globalThis.window?.requestAnimationFrame;
-    if (typeof raf === "function") {
-        globals.requestAnimationFrame = raf.bind(globalThis.window);
+    if ((<typeof fakeWindow>globalThis.window)?._fake) {
+        const raf = globalThis.window?.requestAnimationFrame;
+        if (typeof raf === "function") {
+            globals.requestAnimationFrame = raf.bind(globalThis.window);
+        }
     }
 
-    const startViewTransition = (globalThis.document as any)?.startViewTransition;
-    globals.startViewTransition = typeof startViewTransition === "function"
-        ? startViewTransition.bind(globalThis.document)
-        : null;
+    if ((<typeof fakeDocument>globalThis.document)?._fake) {
+        const startViewTransition = (globalThis.document as any)?.startViewTransition;
+        globals.startViewTransition = typeof startViewTransition === "function"
+            ? startViewTransition.bind(globalThis.document)
+            : null;
+    }
 }

package/test/tests-mount-unmount.ts

@@ -1,4 +1,4 @@
-import { app, ContainerNode, createState, memo } from "../src/vode"
+import { app, Component, ContainerNode, createState, memo } from "../src/vode"
 import { ARTICLE, ASIDE, DIV, INPUT, MAIN, NAV, P, SECTION, SPAN } from "../src/vode-tags";
 import { expect, ExpectationError } from "./helper";
 
@@ -448,6 +448,92 @@ export default {
         await expect(mounts).toEqual(["mount span"]);
     },
 
+    "onMount(): with catched component, replacement vode's onMount fires when error occurs": async () => {
+        const container = setup();
+        const mounts: string[] = [];
+        const broken: any = () => { throw new Error("boom"); };
+        app(container, {}, () =>
+            [DIV,
+                {
+                    catch: [SECTION,
+                        {
+                            onMount: (s: unknown, ele: HTMLElement) => {
+                                mounts.push("mount fallback");
+                            }
+                        },
+                        "fallback"
+                    ]
+                },
+                broken
+            ]
+        );
+
+        await expect(mounts).toEqual(["mount fallback"]);
+    },
+
+    "onMount(): with catched component, returned vode's onMount fires and receives error": async () => {
+        const container = setup();
+        const mounts: string[] = [];
+        const caughtErrors: string[] = [];
+        const broken: any = () => { throw new Error("boom"); };
+        app(container, {}, () =>
+            [DIV,
+                {
+                    catch: (s: unknown, err: Error) => {
+                        caughtErrors.push(err.message);
+                        return [SECTION,
+                            {
+                                onMount: (s: unknown, ele: HTMLElement) => {
+                                    mounts.push("mount fallback");
+                                }
+                            },
+                            "fallback"
+                        ];
+                    }
+                },
+                broken
+            ]
+        );
+
+        await expect(mounts).toEqual(["mount fallback"]);
+        await expect(caughtErrors).toEqual(["boom"]);
+    },
+
+    "onMount(): with catched component, original element's onMount does NOT fire when error caused replacement": async () => {
+        const container = setup();
+        const logs: string[] = [];
+        const broken: any = () => { throw new Error("boom"); };
+        app(container, {}, () =>
+            [DIV,
+                {
+                    catch: [ARTICLE,
+                        {
+                            onMount: (s: unknown, ele: HTMLElement) => {
+                                logs.push("mount fallback");
+                            }
+                        },
+                        "fallback"
+                    ]
+                },
+                [SECTION,
+                    {
+                        onMount: (s: unknown, ele: HTMLElement) => {
+                            logs.push("mount original section");
+                        },
+                        onUnmount: (s: unknown, ele: HTMLElement) => {
+                            logs.push("unmount original section");
+                        }
+                    },
+                    broken
+                ]
+            ]
+        );
+
+        // SECTION never finishes mounting (its child broke), so its onMount must not fire.
+        // The catch on DIV replaces the broken subtree with ARTICLE whose onMount must fire.
+        await expect(logs).toEqual(["mount fallback"]);
+    },
+
     "onUnmount(): called when node is removed from the DOM": async () => {
         const container = setup();
         const unmounts: string[] = [];
@@ -1173,121 +1259,6 @@ export default {
         await expect(fired).toEqual(["unmount B"]);
     },
 
-    "onMount() + onUnmount: symmetry of calls": async () => {
-        const container = setup();
-        const state = createState({
-            startTime: 0,
-            inputReady: false,
-            showInput: true,
-            showTimer: true
-        });
-        type State = typeof state;
-        const logs: string[] = [];
-
-        const patch = app<State>(container, state, (s) => {
-            return [DIV,
-                s.showInput && [INPUT, {
-                    type: 'text',
-                    placeholder: 'Auto-focused on mount',
-                    onMount: (s: State, ele: HTMLElement) => {
-                        logs.push('Input mounted');
-                        return { inputReady: true };
-                    },
-                    onUnmount: (s: State, ele: HTMLElement) => {
-                        logs.push('Input removed');
-                        return { inputReady: false };
-                    }
-                }],
-
-                s.showTimer && [P, {
-                    onMount: (s: State, ele: HTMLElement) => {
-                        logs.push('Timer started');
-                        return { startTime: Date.now() };
-                    },
-                    onUnmount: (s: State, ele: HTMLElement) => {
-                        logs.push('Timer removed');
-                    }
-                }, 'Mount/unmount lifecycle demo']
-            ]
-        }
-        );
-
-        await expect(state.inputReady)
-            .toEqual(true);
-        await expect(state.startTime != 0)
-            .toEqual(true);
-        patch({ showInput: false });
-
-        await expect(
-            async () => await expect(state.inputReady).toEqual(false, "expected: inputReady == false")
-        ).toSucceedAsync();
-
-        patch({ showTimer: false });
-
-        await expect(
-            async () => await expect(container._vode.stats.syncRenderCount >= 4)
-                .toEqual(true)
-        ).toSucceedAsync();
-
-        await expect(logs).toEqual([
-            'Input mounted',
-            'Timer started',
-            'Input removed',
-            'Timer removed'
-        ]);
-    },
-
-    "onMount(): with catched component, replacement vode's onMount fires when error occurs": async () => {
-        const container = setup();
-        const mounts: string[] = [];
-        const broken: any = () => { throw new Error("boom"); };
-        app(container, {}, () =>
-            [DIV,
-                {
-                    catch: [SECTION,
-                        {
-                            onMount: (s: unknown, ele: HTMLElement) => {
-                                mounts.push("mount fallback");
-                            }
-                        },
-                        "fallback"
-                    ]
-                },
-                broken
-            ]
-        );
-
-        await expect(mounts).toEqual(["mount fallback"]);
-    },
-
-    "onMount(): with catched component, returned vode's onMount fires and receives error": async () => {
-        const container = setup();
-        const mounts: string[] = [];
-        const caughtErrors: string[] = [];
-        const broken: any = () => { throw new Error("boom"); };
-        app(container, {}, () =>
-            [DIV,
-                {
-                    catch: (s: unknown, err: Error) => {
-                        caughtErrors.push(err.message);
-                        return [SECTION,
-                            {
-                                onMount: (s: unknown, ele: HTMLElement) => {
-                                    mounts.push("mount fallback");
-                                }
-                            },
-                            "fallback"
-                        ];
-                    }
-                },
-                broken
-            ]
-        );
-
-        await expect(mounts).toEqual(["mount fallback"]);
-        await expect(caughtErrors).toEqual(["boom"]);
-    },
-
     "onUnmount(): with catched component, replacement vode's onUnmount fires when removed": async () => {
         const container = setup();
         const unmounts: string[] = [];
@@ -1359,7 +1330,7 @@ export default {
         await expect(unmounts).toEqual(["unmount span", "unmount p", "unmount article"]);
     },
 
-    "onMount()/onUnmount(): with catched component, full lifecycle symmetry of catch replacement": async () => {
+    "onMount() + onUnmount(): with catched component, full lifecycle symmetry of catch replacement": async () => {
         const container = setup();
         const logs: string[] = [];
         const state = createState({ show: true });
@@ -1390,38 +1361,144 @@ export default {
         await expect(logs).toEqual(["mount article", "unmount article"]);
     },
 
-    "onMount(): with catched component, original element's onMount does NOT fire when error caused replacement": async () => {
+    "onMount() + onUnmount: symmetry of calls": async () => {
         const container = setup();
+        const state = createState({
+            startTime: 0,
+            inputReady: false,
+            showInput: true,
+            showTimer: true
+        });
+        type State = typeof state;
         const logs: string[] = [];
-        const broken: any = () => { throw new Error("boom"); };
-        app(container, {}, () =>
+
+        const patch = app<State>(container, state, (s) => {
+            return [DIV,
+                s.showInput && [INPUT, {
+                    type: 'text',
+                    placeholder: 'Auto-focused on mount',
+                    onMount: (s: State, ele: HTMLElement) => {
+                        logs.push('Input mounted');
+                        return { inputReady: true };
+                    },
+                    onUnmount: (s: State, ele: HTMLElement) => {
+                        logs.push('Input removed');
+                        return { inputReady: false };
+                    }
+                }],
+
+                s.showTimer && [P, {
+                    onMount: (s: State, ele: HTMLElement) => {
+                        logs.push('Timer started');
+                        return { startTime: Date.now() };
+                    },
+                    onUnmount: (s: State, ele: HTMLElement) => {
+                        logs.push('Timer removed');
+                    }
+                }, 'Mount/unmount lifecycle demo']
+            ]
+        }
+        );
+
+        await expect(state.inputReady)
+            .toEqual(true);
+        await expect(state.startTime != 0)
+            .toEqual(true);
+        patch({ showInput: false });
+
+        await expect(
+            async () => await expect(state.inputReady).toEqual(false, "expected: inputReady == false")
+        ).toSucceedAsync();
+
+        patch({ showTimer: false });
+
+        await expect(
+            async () => await expect(container._vode.stats.syncRenderCount >= 4)
+                .toEqual(true)
+        ).toSucceedAsync();
+
+        await expect(logs).toEqual([
+            'Input mounted',
+            'Timer started',
+            'Input removed',
+            'Timer removed'
+        ]);
+    },
+
+    "onMount() + onUnmount(): Not called when DOM does not require element creation or removal (same TAGs)": async () => {
+        const container = setup();
+        const logs = <string[]>[];
+
+        const Comp: (name: string) => Component = (name: string) => () => [ARTICLE,
             [DIV,
                 {
-                    catch: [ARTICLE,
-                        {
-                            onMount: (s: unknown, ele: HTMLElement) => {
-                                logs.push("mount fallback");
-                            }
-                        },
-                        "fallback"
-                    ]
+                    onMount: () => logs.push("mount " + name),
+                    onUnmount: () => logs.push("unmount " + name)
                 },
-                [SECTION,
-                    {
-                        onMount: (s: unknown, ele: HTMLElement) => {
-                            logs.push("mount original section");
-                        },
-                        onUnmount: (s: unknown, ele: HTMLElement) => {
-                            logs.push("unmount original section");
-                        }
-                    },
-                    broken
-                ]
+                "Component " + name]
+        ];
+
+        const state = createState({ showB: false, showD: false });
+        app<typeof state>(container, state, s => [DIV,
+            // this way they both "share a slot"
+            s.showB ? Comp("B") : Comp("A"),
+
+            // this way each component occupies its own "slot"
+            !s.showD && Comp("C"),
+            s.showD && Comp("D"),
+        ]);
+
+        await expect(container).toMatch(
+            [DIV,
+                [ARTICLE,
+                    [DIV, "Component A"],
+                ],
+                [ARTICLE,
+                    [DIV, "Component C"],
+                ],
             ]
         );
+        await expect(logs).toEqual(["mount A", "mount C"]);
 
-        // SECTION never finishes mounting (its child broke), so its onMount must not fire.
-        // The catch on DIV replaces the broken subtree with ARTICLE whose onMount must fire.
-        await expect(logs).toEqual(["mount fallback"]);
+        state.patch({ showB: true });
+
+        await expect(container).toMatch(
+            [DIV,
+                [ARTICLE,
+                    [DIV, "Component B"],
+                ],
+                [ARTICLE,
+                    [DIV, "Component C"],
+                ],
+            ]
+        );
+
+        // as both components result in the same structure
+        // of element types the unmount of A 
+        // and mount of B does not occur
+        await expect(logs).toEqual(["mount A", "mount C"]);
+
+
+        state.patch({ showD: true });
+
+        await expect(container).toMatch(
+            [DIV,
+                [ARTICLE,
+                    [DIV, "Component B"],
+                ],
+                [ARTICLE,
+                    [DIV, "Component D"],
+                ],
+            ]
+        );
+
+        // when the components occupy different slots in the vdom
+        // their mount/unmount functions are called
+        await expect(logs).toEqual([
+            "mount A",
+            "mount C",
+            "unmount C",
+            "mount D",
+        ]);
     },
 }