@ryupold/vode 1.8.10 → 1.8.12

package/log.txt

@@ -0,0 +1 @@
+npm warn gitignore-fallback No .npmignore file found, using .gitignore for file exclusion. Consider creating a .npmignore file to explicitly control published files.

package/package.json

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

package/src/merge-class.ts

@@ -38,9 +38,7 @@ export function mergeClass(...classes: ClassProp[]): ClassProp {
         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)) {
+        else if (typeof a === "object" && Array.isArray(b)) {
             const aa = { ...a };
             for (const item of b as string[]) {
                 (<Record<string, boolean | null | undefined>>aa)[item] = true;
@@ -55,6 +53,8 @@ export function mergeClass(...classes: ClassProp[]): ClassProp {
                 aa[bKey] = (<Record<string, boolean | null | undefined>>b)[bKey];
             }
             finalClass = aa;
+        } else if (typeof a === "object" && typeof b === "object") {
+            finalClass = { ...a, ...b };
         }
         else throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
     }

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,
@@ -247,7 +255,7 @@ export class Expectation {
                                     } else {
                                         attributeValue = (e as HTMLElement).getAttribute(k);
                                     }
-                                    if (!attributeValue) {
+                                    if (attributeValue === null) {
                                         throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)?.toUpperCase()}>\n\nwith attribute [${k}="${val}"]\n\nbut it was not found${failSuffix}`);
                                     }
                                     if (attributeValue !== val) {

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-app.ts

@@ -339,4 +339,45 @@ export default {
         const el = (container as any)._vode.vode.node;
         expect(el.onclick).toBeA("function");
     },
+
+    "app(): class as array renders correctly": async () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        app(container, {}, () =>
+            [DIV, { class: ["foo", "bar", "baz"] }, "text"]
+        );
+
+        await expect(container).toMatch([DIV, { class: "foo bar baz" }, "text"]);
+    },
+
+    "app(): class as number becomes empty string": async () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        app(container, {}, () =>
+            [DIV, { class: 123 as any }, "text"]
+        );
+
+        await expect(container).toMatch([DIV, { class: "" }, "text"]);
+    },
+
+    "app(): style object to string transition": async () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        const state: any = { useObject: true };
+
+        app(container, state, (s: any) =>
+            [DIV, { style: s.useObject ? { color: "red" } : "color: blue" }, "text"]
+        );
+
+        await expect(container).toMatch([DIV, "text"]);
+
+        state.patch({ useObject: false });
+
+        await expect(container).toMatch([DIV, "text"]);
+    },
 };

package/test/tests-examples.ts

@@ -91,7 +91,7 @@ export default {
                 [INPUT],
                 [BUTTON, "Add"],
                 [NAV,
-                    [BUTTON, "All"],
+                    [BUTTON, { class: 'active' }, "All"],
                     [BUTTON, "Active"],
                     [BUTTON, "Done"],
                 ],
@@ -115,7 +115,7 @@ export default {
                 [BUTTON, "Add"],
                 [NAV,
                     [BUTTON, "All"],
-                    [BUTTON, "Active"],
+                    [BUTTON, { class: 'active' }, "Active"],
                     [BUTTON, "Done"],
                 ],
                 [UL,
@@ -135,7 +135,7 @@ export default {
                 [NAV,
                     [BUTTON, "All"],
                     [BUTTON, "Active"],
-                    [BUTTON, "Done"],
+                    [BUTTON, { class: 'active' }, "Done"],
                 ],
                 [UL,
                     [LI, "[X] Walk dog"],

package/test/tests-mergeClass.ts

@@ -43,12 +43,14 @@ export default {
         await expect(mergeClass({ foo: true, bar: true }, { bar: false, baz: true })).toEqual({ foo: true, bar: false, baz: true });
     },
 
-    "mergeClass(): object and array": async () => {
-        await expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, 0: "bar", 1: "baz" });
+    "mergeClass(): object and array (array items become class names with true)": async () => {
+        await expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, bar: true, baz: true });
+        await expect(mergeClass({ active: true }, ["btn", "primary"])).toEqual({ active: true, btn: true, primary: true });
     },
 
-    "mergeClass(): array and object": async () => {
-        await expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ 0: "foo", 1: "bar", baz: true, qux: false });
+    "mergeClass(): array and object (object keys become class names)": async () => {
+        await expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ foo: true, bar: true, baz: true, qux: false });
+        await expect(mergeClass(["a", "b"], { c: true, d: false })).toEqual({ a: true, b: true, c: true, d: false });
     },
 
     "mergeClass(): falsy entries are skipped": async () => {
@@ -59,5 +61,10 @@ export default {
     "mergeClass(): multiple args (3+)": async () => {
         await expect(mergeClass("a", "b", "c")).toEqual("a b c");
         await expect(mergeClass("x", null, ["y", "z"], "w")).toEqual("y z x w");
+    },
+
+    "mergeClass(): incompatible types throw": async () => {
+        await expect(() => (mergeClass as any)(123 as any, "foo")).toFail();
+        await expect(() => (mergeClass as any)("foo", 456 as any)).toFail();
     }
 };

package/test/tests-mergeProps.ts

@@ -11,6 +11,11 @@ export default {
         await expect(mergeProps(p) === p).toEqual(true);
     },
 
+    "mergeProps(): single falsy arg returns undefined": async () => {
+        await expect(mergeProps(null)).toEqual(undefined);
+        await expect(mergeProps(undefined)).toEqual(undefined);
+    },
+
     "mergeProps(): two plain objects merged": async () => {
         await expect(mergeProps({ a: 1 }, { b: 2 })).toEqual({ a: 1, b: 2 });
     },