signalium 0.3.8 → 1.0.0

package/src/__tests__/nesting.test.ts

@@ -0,0 +1,298 @@
+import { describe, expect, test, vi } from 'vitest';
+import { state } from '../index.js';
+import { nextTick } from './utils/async.js';
+import { permute } from './utils/permute.js';
+
+describe('nesting', () => {
+  permute(2, (create1, create2) => {
+    test('simple nesting', async () => {
+      const inner = create2(
+        (a: number, b: number) => {
+          return a + b;
+        },
+        {
+          desc: 'inner',
+        },
+      );
+
+      const outer = create1(
+        (a: number) => {
+          return inner(a, 2);
+        },
+        {
+          desc: 'outer',
+        },
+      );
+
+      outer.withParams(1).watch();
+      outer.withParams(2).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(4).toMatchSnapshot();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(4).toMatchSnapshot();
+    });
+
+    test('outer state + params', async () => {
+      const val = state(1);
+
+      const inner = create2((a: number, b: number) => {
+        return a + b;
+      });
+
+      const outer = create1((a: number) => {
+        if (a > 1) {
+          return inner(a, 2)! + val.get();
+        }
+
+        return inner(a, 2);
+      });
+
+      outer.withParams(1).watch();
+      outer.withParams(2).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(5).toMatchSnapshot();
+
+      val.set(2);
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(6).toMatchSnapshot();
+    });
+
+    test('inner state + params', async () => {
+      const val = state(1);
+
+      const inner = create2((a: number, b: number) => {
+        if (a > 1) {
+          return a + b + val.get();
+        }
+
+        return a + b;
+      });
+
+      const outer = create1((a: number) => {
+        return inner(a, 2);
+      });
+
+      outer.withParams(1).watch();
+      outer.withParams(2).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(5).toMatchSnapshot();
+
+      val.set(2);
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(6).toMatchSnapshot();
+    });
+  });
+
+  permute(3, (create1, create2, create3) => {
+    test('simple nesting', async () => {
+      const inner = create3((a: number, b: number, c: number) => {
+        return a + b + c;
+      });
+
+      const middle = create2((a: number, b: number) => {
+        return inner(a, b, 3);
+      });
+
+      const outer = create1((a: number) => {
+        return middle(a, 2);
+      });
+
+      outer.withParams(1).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(6).toMatchSnapshot();
+    });
+
+    test('state + params one level deep', async () => {
+      const val = state(1);
+
+      const inner = create3((a: number, b: number, c: number) => {
+        return a + b + c;
+      });
+
+      const middle = create2((a: number, b: number) => {
+        if (a > 1) {
+          return inner(a, b, 3)! + val.get();
+        }
+
+        return inner(a, b, 3);
+      });
+
+      const outer = create1((a: number) => {
+        return middle(a, 2);
+      });
+
+      outer.withParams(1).watch();
+      outer.withParams(2).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(6).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(8).toMatchSnapshot();
+
+      val.set(2);
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(6).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(9).toMatchSnapshot();
+    });
+
+    test('state + params two levels deep', async () => {
+      const val = state(1);
+
+      const inner = create3((a: number, b: number, c: number) => {
+        if (a > 1) {
+          return a + b + c + val.get();
+        }
+
+        return a + b + c;
+      });
+
+      const middle = create2((a: number, b: number) => {
+        return inner(a, b, 3);
+      });
+
+      const outer = create1((a: number) => {
+        return middle(a, 2);
+      });
+
+      outer.withParams(1).watch();
+      outer.withParams(2).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(6).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(8).toMatchSnapshot();
+
+      val.set(2);
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(6).toMatchSnapshot();
+      expect(outer.withParams(2)).toHaveSignalValue(9).toMatchSnapshot();
+    });
+
+    test('params + multiple children', async () => {
+      const inner1 = create3((a: number, b: number, c: number) => {
+        return a + b + c;
+      });
+
+      const inner2 = create2((a: number, b: number) => {
+        return a + b + inner1(a, b, 3)!;
+      });
+
+      const outer = create1((a: number, b: number) => {
+        return inner1(a, 2, 3)! + inner2(b, 2)!;
+      });
+
+      outer.withParams(1, 2).watch();
+      outer.withParams(2, 2).watch();
+      outer.withParams(2, 3).watch();
+
+      await nextTick();
+      await nextTick();
+
+      expect(outer.withParams(1, 2)).toHaveSignalValue(17).toMatchSnapshot();
+      expect(outer.withParams(2, 2)).toHaveSignalValue(18).toMatchSnapshot();
+      expect(outer.withParams(2, 3)).toHaveSignalValue(20).toMatchSnapshot();
+    });
+
+    test('params + state + multiple children', async () => {
+      const val = state(1);
+
+      const inner1 = create3((a: number, b: number, c: number) => {
+        return a + b + c;
+      });
+
+      const inner2 = create2((a: number, b: number) => {
+        if (a > 1) {
+          return a + b + inner1(a, b, 3)! + val.get();
+        }
+
+        return a + b + inner1(a, b, 3)!;
+      });
+
+      const outer = create1((a: number, b: number) => {
+        return inner1(a, 2, 3)! + inner2(b, 2)!;
+      });
+
+      outer.withParams(1, 2).watch();
+      outer.withParams(2, 2).watch();
+      outer.withParams(2, 3).watch();
+      outer.withParams(3, 3).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1, 2)).toHaveSignalValue(18).toMatchSnapshot();
+      expect(outer.withParams(2, 2)).toHaveSignalValue(19).toMatchSnapshot();
+      expect(outer.withParams(2, 3)).toHaveSignalValue(21).toMatchSnapshot();
+      expect(outer.withParams(3, 3)).toHaveSignalValue(22).toMatchSnapshot();
+
+      val.set(2);
+
+      // Wait for async with subscriptions
+      await nextTick();
+
+      expect(outer.withParams(1, 2)).toHaveSignalValue(19).toMatchSnapshot();
+      expect(outer.withParams(2, 2)).toHaveSignalValue(20).toMatchSnapshot();
+      expect(outer.withParams(2, 3)).toHaveSignalValue(22).toMatchSnapshot();
+      expect(outer.withParams(3, 3)).toHaveSignalValue(23).toMatchSnapshot();
+    });
+
+    test('passing state as params + multiple children', async () => {
+      const stateA = state(1);
+      const stateB = state(2);
+
+      const inner1 = create2((a: number, s: typeof stateA) => {
+        return a + s.get();
+      });
+
+      const inner2 = create3((b: number, s: typeof stateB) => {
+        return b * s.get();
+      });
+
+      const outer = create1((x: number) => {
+        if (x > 2) {
+          return inner1(x, stateA)! + inner2(x, stateB)!;
+        }
+        return inner1(x, stateA);
+      });
+
+      outer.withParams(1).watch();
+      outer.withParams(3).watch();
+
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(2).toMatchSnapshot();
+      expect(outer.withParams(3)).toHaveSignalValue(10).toMatchSnapshot();
+
+      stateA.set(2);
+      await nextTick();
+
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(3)).toHaveSignalValue(11).toMatchSnapshot();
+
+      stateB.set(3);
+
+      await nextTick();
+      expect(outer.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(outer.withParams(3)).toHaveSignalValue(14).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/params-and-state.test.ts

@@ -0,0 +1,230 @@
+import { describe, expect, test } from 'vitest';
+import { state } from '../index.js';
+import { permute } from './utils/permute.js';
+import { nextTick } from './utils/async.js';
+
+describe('parameters and state reactivity', () => {
+  permute(1, createHook => {
+    test('Parameters can be passed to computed', async () => {
+      const getC = createHook((a: number, b: number) => {
+        return a + b;
+      });
+
+      getC.withParams(1, 2)();
+      getC.withParams(2, 2)();
+
+      await nextTick();
+
+      expect(getC.withParams(1, 2)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(getC.withParams(2, 2)).toHaveSignalValue(4).toMatchSnapshot();
+    });
+
+    test('Computed is not recomputed when the same parameters are passed', async () => {
+      const getC = createHook((a: number, b: number) => {
+        return a + b;
+      });
+
+      getC.withParams(1, 2)();
+
+      await nextTick();
+
+      expect(getC.withParams(1, 2)).toHaveSignalValue(3).toMatchSnapshot();
+      expect(getC.withParams(1, 2)).toHaveSignalValue(3).toMatchSnapshot();
+    });
+
+    test('Computed is recomputed when state changes', async () => {
+      const stateValue = state(1);
+      const getC = createHook((a: number) => {
+        return a + stateValue.get();
+      });
+
+      getC.withParams(1)();
+
+      await nextTick();
+
+      expect(getC.withParams(1)).toHaveSignalValue(2).toMatchSnapshot();
+
+      stateValue.set(2);
+      await nextTick();
+
+      expect(getC.withParams(1)).toHaveSignalValue(3).toMatchSnapshot();
+    });
+
+    test('Computed can return complex objects', async () => {
+      const getC = createHook((a: number, b: number) => {
+        return {
+          sum: a + b,
+          product: a * b,
+        };
+      });
+
+      getC.withParams(2, 3)();
+
+      await nextTick();
+
+      expect(getC.withParams(2, 3))
+        .toHaveSignalValue({
+          sum: 5,
+          product: 6,
+        })
+        .toMatchSnapshot();
+
+      expect(getC.withParams(2, 3))
+        .toHaveSignalValue({
+          sum: 5,
+          product: 6,
+        })
+        .toMatchSnapshot();
+    });
+
+    test('Computed can take array arguments', async () => {
+      const getC = createHook((nums: number[]) => {
+        return nums.reduce((a, b) => a + b, 0);
+      });
+
+      getC.withParams([1, 2, 3])();
+      getC.withParams([4, 5, 6])();
+
+      await nextTick();
+
+      expect(getC.withParams([1, 2, 3]))
+        .toHaveSignalValue(6)
+        .toMatchSnapshot();
+      expect(getC.withParams([1, 2, 3]))
+        .toHaveSignalValue(6)
+        .toMatchSnapshot();
+      expect(getC.withParams([4, 5, 6]))
+        .toHaveSignalValue(15)
+        .toMatchSnapshot();
+    });
+
+    test('Computed can take object arguments', async () => {
+      const getC = createHook((obj: { x: number; y: number }) => {
+        return obj.x + obj.y;
+      });
+
+      getC.withParams({ x: 1, y: 2 })();
+      getC.withParams({ x: 3, y: 4 })();
+
+      await nextTick();
+
+      expect(getC.withParams({ x: 1, y: 2 }))
+        .toHaveSignalValue(3)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 1, y: 2 }))
+        .toHaveSignalValue(3)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 3, y: 4 }))
+        .toHaveSignalValue(7)
+        .toMatchSnapshot();
+    });
+
+    test('Computed memoizes based on deep equality of arguments', async () => {
+      const getC = createHook((obj: { x: number; y: number; nested: { a: number; b: number }; arr: number[] }) => {
+        return obj.x + obj.y + obj.nested.a + obj.nested.b + obj.arr.reduce((sum, n) => sum + n, 0);
+      });
+
+      getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })();
+      getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })();
+      getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })();
+      getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [1, 2] })();
+      getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [2, 2] })();
+
+      await nextTick();
+
+      expect(getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] }))
+        .toHaveSignalValue(13)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] }))
+        .toHaveSignalValue(13)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] }))
+        .toHaveSignalValue(14)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [1, 2] }))
+        .toHaveSignalValue(15)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [2, 2] }))
+        .toHaveSignalValue(16)
+        .toMatchSnapshot();
+    });
+
+    test('Computed can use custom memoization function', async () => {
+      const getC = createHook(
+        (obj: { x: number; y: number; nested: { a: number; b: number }; arr: number[] }) => {
+          return obj.x + obj.y + obj.nested.a + obj.nested.b + obj.arr.reduce((sum, n) => sum + n, 0);
+        },
+        {
+          paramKey: obj => {
+            return Object.entries(obj)
+              .map(([key, value]) => `${key}:${Array.isArray(value) ? 'array' : String(value)}`)
+              .join(',');
+          },
+        },
+      );
+
+      getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })();
+      getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })();
+      getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })();
+      getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [1, 2] })();
+      getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [2, 2] })();
+
+      await nextTick();
+
+      expect(getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] }))
+        .toHaveSignalValue(13)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] }))
+        .toHaveSignalValue(13)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] }))
+        .toHaveSignalValue(14)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [1, 2] }))
+        .toHaveSignalValue(14)
+        .toMatchSnapshot();
+      expect(getC.withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [2, 2] }))
+        .toHaveSignalValue(14)
+        .toMatchSnapshot();
+    });
+
+    test('Computed can handle undefined arguments', async () => {
+      const getC = createHook((a?: number, b?: number) => {
+        return (a ?? 0) + (b ?? 0);
+      });
+
+      getC.withParams(undefined, 2)();
+      getC.withParams(undefined, 2)();
+      getC.withParams(1, undefined)();
+
+      await nextTick();
+
+      expect(getC.withParams(undefined, 2)).toHaveSignalValue(2).toMatchSnapshot();
+      expect(getC.withParams(undefined, 2)).toHaveSignalValue(2).toMatchSnapshot();
+      expect(getC.withParams(1, undefined)).toHaveSignalValue(1).toMatchSnapshot();
+    });
+
+    test('Computed can take state as argument and handle updates', async () => {
+      const stateValue = state(1);
+      const getC = createHook((s: typeof stateValue) => {
+        return s.get() * 2;
+      });
+
+      getC.withParams(stateValue)();
+
+      await nextTick();
+
+      expect(getC.withParams(stateValue)).toHaveSignalValue(2).toMatchSnapshot();
+      expect(getC.withParams(stateValue)).toHaveSignalValue(2).toMatchSnapshot();
+
+      stateValue.set(2);
+      await nextTick();
+
+      expect(getC.withParams(stateValue)).toHaveSignalValue(4).toMatchSnapshot();
+
+      stateValue.set(3);
+      await nextTick();
+      expect(getC.withParams(stateValue)).toHaveSignalValue(6).toMatchSnapshot();
+    });
+  });
+});