signalium 0.2.7 → 0.3.0

package/src/__tests__/hooks/nesting.test.ts

@@ -0,0 +1,303 @@
+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', () => {
+      const inner = create2((a: number, b: number) => {
+        return a + b;
+      });
+
+      const outer = create1((a: number) => {
+        return inner(a, 2);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(3, { compute: 1 });
+      expect(outer).withParams(2).toHaveValueAndCounts(4, { compute: 2 });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(3, { compute: 2 });
+      expect(outer).withParams(2).toHaveValueAndCounts(4, { compute: 2 });
+    });
+
+    test('outer state + params', () => {
+      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);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(3, { compute: 1 });
+      expect(outer).withParams(2).toHaveValueAndCounts(5, { compute: 2 });
+
+      val.set(2);
+      expect(outer).withParams(1).toHaveValueAndCounts(3, { compute: 2 });
+      expect(outer).withParams(2).toHaveValueAndCounts(6, { compute: 3 });
+    });
+
+    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);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(3, { compute: 1 });
+      expect(outer).withParams(2).toHaveValueAndCounts(5, { compute: 2 });
+
+      val.set(2);
+
+      expect(outer).withParams(1).toHaveValueAndCounts(3, { compute: 2 });
+
+      // Wait for async with subscriptions
+      await nextTick();
+
+      expect(outer).withParams(2).toHaveValueAndCounts(6, { compute: 3 });
+    });
+  });
+
+  permute(3, (create1, create2, create3) => {
+    test('simple nesting', () => {
+      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);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(6, { compute: 1 });
+    });
+
+    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);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(6, { compute: 1 });
+      expect(middle).toHaveCounts({ compute: 1 });
+      expect(inner).toHaveCounts({ compute: 1 });
+
+      expect(outer).withParams(2).toHaveValueAndCounts(8, { compute: 2 });
+      expect(middle).toHaveCounts({ compute: 2 });
+      expect(inner).toHaveCounts({ compute: 2 });
+
+      val.set(2);
+
+      expect(outer).withParams(1).toHaveValueAndCounts(6, { compute: 2 });
+      expect(middle).toHaveCounts({ compute: 2 });
+      expect(inner).toHaveCounts({ compute: 2 });
+
+      // Wait for async with subscriptions
+      await nextTick();
+
+      expect(outer).withParams(2).toHaveValueAndCounts(9, { compute: 3 });
+      expect(middle).toHaveCounts({ compute: 3 });
+      expect(inner).toHaveCounts({ compute: 2 });
+    });
+
+    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);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(6, { compute: 1 });
+      expect(middle).toHaveCounts({ compute: 1 });
+      expect(inner).toHaveCounts({ compute: 1 });
+
+      expect(outer).withParams(2).toHaveValueAndCounts(8, { compute: 2 });
+      expect(middle).toHaveCounts({ compute: 2 });
+      expect(inner).toHaveCounts({ compute: 2 });
+
+      val.set(2);
+
+      // Wait for async with subscriptions
+      await nextTick();
+
+      // Flush all first
+      expect(outer).withParams(1).toHaveHookValue(6);
+      expect(outer).withParams(2).toHaveHookValue(9);
+
+      // Then check counts
+      expect(outer).toHaveCounts({ compute: 3 });
+      expect(middle).toHaveCounts({ compute: 3 });
+      expect(inner).toHaveCounts({ compute: 3 });
+    });
+
+    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)!;
+      });
+
+      expect(outer).withParams(1, 2).toHaveValueAndCounts(17, { compute: 1 });
+      expect(outer).withParams(1, 2).toHaveValueAndCounts(17, { compute: 1 });
+      expect(inner1).toHaveCounts({ compute: 2 });
+      expect(inner2).toHaveCounts({ compute: 1 });
+
+      expect(outer).withParams(2, 2).toHaveValueAndCounts(18, { compute: 2 });
+      expect(outer).withParams(2, 2).toHaveValueAndCounts(18, { compute: 2 });
+      expect(inner1).toHaveCounts({ compute: 2 });
+      expect(inner2).toHaveCounts({ compute: 1 });
+
+      expect(outer).withParams(2, 3).toHaveValueAndCounts(20, { compute: 3 });
+      expect(outer).withParams(2, 3).toHaveValueAndCounts(20, { compute: 3 });
+      expect(inner1).toHaveCounts({ compute: 3 });
+      expect(inner2).toHaveCounts({ compute: 2 });
+    });
+
+    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)!;
+      });
+
+      expect(outer).withParams(1, 2).toHaveValueAndCounts(18, { compute: 1 });
+      expect(inner1).toHaveCounts({ compute: 2 });
+      expect(inner2).toHaveCounts({ compute: 1 });
+
+      expect(outer).withParams(2, 2).toHaveValueAndCounts(19, { compute: 2 });
+      expect(inner1).toHaveCounts({ compute: 2 });
+      expect(inner2).toHaveCounts({ compute: 1 });
+
+      expect(outer).withParams(2, 3).toHaveValueAndCounts(21, { compute: 3 });
+      expect(inner1).toHaveCounts({ compute: 3 });
+      expect(inner2).toHaveCounts({ compute: 2 });
+
+      expect(outer).withParams(3, 3).toHaveValueAndCounts(22, { compute: 4 });
+      expect(inner1).toHaveCounts({ compute: 3 });
+      expect(inner2).toHaveCounts({ compute: 2 });
+
+      val.set(2);
+
+      // Wait for async with subscriptions
+      await nextTick();
+
+      // Flush all first
+      expect(outer).withParams(1, 2).toHaveHookValue(19);
+      expect(outer).withParams(2, 2).toHaveHookValue(20);
+      expect(outer).withParams(2, 3).toHaveHookValue(22);
+      expect(outer).withParams(3, 3).toHaveHookValue(23);
+
+      // Then check counts
+      expect(outer).toHaveCounts({ compute: 8 });
+      expect(inner1).toHaveCounts({ compute: 3 });
+      expect(inner2).toHaveCounts({ compute: 4 });
+    });
+
+    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);
+      });
+
+      expect(outer).withParams(1).toHaveValueAndCounts(2, { compute: 1 });
+      expect(inner1).toHaveCounts({ compute: 1 });
+      expect(inner2).toHaveCounts({ compute: 0 });
+
+      expect(outer).withParams(3).toHaveValueAndCounts(10, { compute: 2 });
+      expect(inner1).toHaveCounts({ compute: 2 });
+      expect(inner2).toHaveCounts({ compute: 1 });
+
+      stateA.set(2);
+      await nextTick();
+
+      expect(outer).withParams(1).toHaveHookValue(3);
+      expect(outer).withParams(3).toHaveHookValue(11);
+      expect(outer).toHaveCounts({ compute: 4 });
+      expect(inner1).toHaveCounts({ compute: 4 });
+      expect(inner2).toHaveCounts({ compute: 1 });
+
+      stateB.set(3);
+
+      await nextTick();
+      expect(outer).withParams(1).toHaveHookValue(3);
+      expect(outer).withParams(3).toHaveHookValue(14);
+      expect(outer).toHaveCounts({ compute: 5 });
+      expect(inner1).toHaveCounts({ compute: 4 });
+      expect(inner2).toHaveCounts({ compute: 2 });
+    });
+  });
+});

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

@@ -0,0 +1,168 @@
+import { describe, expect, test } from 'vitest';
+import { state } from '../../index.js';
+import { permute } from '../utils/permute.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;
+      });
+
+      expect(getC).withParams(1, 2).toHaveValueAndCounts(3, { compute: 1 });
+      expect(getC).withParams(2, 2).toHaveValueAndCounts(4, { compute: 2 });
+    });
+
+    test('Computed is not recomputed when the same parameters are passed', () => {
+      const getC = createHook((a: number, b: number) => {
+        return a + b;
+      });
+
+      expect(getC).withParams(1, 2).toHaveValueAndCounts(3, { compute: 1 });
+      expect(getC).withParams(1, 2).toHaveValueAndCounts(3, { compute: 1 });
+    });
+
+    test('Computed is recomputed when state changes', () => {
+      const stateValue = state(1);
+      const getC = createHook((a: number) => {
+        return a + stateValue.get();
+      });
+
+      expect(getC).withParams(1).toHaveValueAndCounts(2, { compute: 1 });
+      stateValue.set(2);
+      expect(getC).withParams(1).toHaveValueAndCounts(3, { compute: 2 });
+    });
+
+    test('Computed can return complex objects', () => {
+      const getC = createHook((a: number, b: number) => {
+        return {
+          sum: a + b,
+          product: a * b,
+        };
+      });
+
+      expect(getC).withParams(2, 3).toHaveValueAndCounts(
+        {
+          sum: 5,
+          product: 6,
+        },
+        { compute: 1 },
+      );
+
+      expect(getC).withParams(2, 3).toHaveValueAndCounts(
+        {
+          sum: 5,
+          product: 6,
+        },
+        { compute: 1 },
+      );
+    });
+
+    test('Computed can take array arguments', () => {
+      const getC = createHook((nums: number[]) => {
+        return nums.reduce((a, b) => a + b, 0);
+      });
+
+      expect(getC).withParams([1, 2, 3]).toHaveValueAndCounts(6, { compute: 1 });
+      expect(getC).withParams([1, 2, 3]).toHaveValueAndCounts(6, { compute: 1 });
+      expect(getC).withParams([4, 5, 6]).toHaveValueAndCounts(15, { compute: 2 });
+    });
+
+    test('Computed can take object arguments', () => {
+      const getC = createHook((obj: { x: number; y: number }) => {
+        return obj.x + obj.y;
+      });
+
+      expect(getC).withParams({ x: 1, y: 2 }).toHaveValueAndCounts(3, { compute: 1 });
+      expect(getC).withParams({ x: 1, y: 2 }).toHaveValueAndCounts(3, { compute: 1 });
+      expect(getC).withParams({ x: 3, y: 4 }).toHaveValueAndCounts(7, { compute: 2 });
+    });
+
+    test('Computed memoizes based on deep equality of arguments', () => {
+      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);
+      });
+
+      expect(getC)
+        .withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })
+        .toHaveValueAndCounts(13, { compute: 1 });
+
+      expect(getC)
+        .withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })
+        .toHaveValueAndCounts(13, { compute: 1 });
+
+      expect(getC)
+        .withParams({ x: 2, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })
+        .toHaveValueAndCounts(14, { compute: 2 });
+
+      expect(getC)
+        .withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [1, 2] })
+        .toHaveValueAndCounts(15, { compute: 3 });
+
+      expect(getC)
+        .withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [2, 2] })
+        .toHaveValueAndCounts(16, { compute: 4 });
+    });
+
+    test('Computed can use custom memoization function', () => {
+      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(',');
+          },
+        },
+      );
+
+      expect(getC)
+        .withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })
+        .toHaveValueAndCounts(13, { compute: 1 });
+
+      expect(getC)
+        .withParams({ x: 1, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })
+        .toHaveValueAndCounts(13, { compute: 1 });
+
+      expect(getC)
+        .withParams({ x: 2, y: 2, nested: { a: 3, b: 4 }, arr: [1, 2] })
+        .toHaveValueAndCounts(14, { compute: 2 });
+
+      expect(getC)
+        .withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [1, 2] })
+        .toHaveValueAndCounts(14, { compute: 2 });
+
+      expect(getC)
+        .withParams({ x: 2, y: 2, nested: { a: 3, b: 5 }, arr: [2, 2] })
+        .toHaveValueAndCounts(14, { compute: 2 });
+    });
+
+    test('Computed can handle undefined arguments', () => {
+      const getC = createHook((a?: number, b?: number) => {
+        return (a ?? 0) + (b ?? 0);
+      });
+
+      expect(getC).withParams(undefined, 2).toHaveValueAndCounts(2, { compute: 1 });
+      expect(getC).withParams(undefined, 2).toHaveValueAndCounts(2, { compute: 1 });
+      expect(getC).withParams(1, undefined).toHaveValueAndCounts(1, { compute: 2 });
+    });
+
+    test('Computed can take state as argument and handle updates', () => {
+      const stateValue = state(1);
+      const getC = createHook((s: typeof stateValue) => {
+        return s.get() * 2;
+      });
+
+      expect(getC).withParams(stateValue).toHaveValueAndCounts(2, { compute: 1 });
+      expect(getC).withParams(stateValue).toHaveValueAndCounts(2, { compute: 1 });
+
+      stateValue.set(2);
+      expect(getC).withParams(stateValue).toHaveValueAndCounts(4, { compute: 2 });
+
+      stateValue.set(3);
+      expect(getC).withParams(stateValue).toHaveValueAndCounts(6, { compute: 3 });
+    });
+  });
+});

package/src/__tests__/hooks/subscription.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, test } from 'vitest';
+import { state } from '../../index.js';
+import { subscription } from '../utils/instrumented-hooks.js';
+import { nextTick } from '../utils/async.js';
+
+describe('subscriptions', () => {
+  test('Subscription can set initial value', () => {
+    const sub = subscription(({ set }) => {
+      set(1);
+    });
+
+    expect(sub).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+  });
+
+  test('Subscription can update value', () => {
+    const value = state(1);
+    const sub = subscription(({ set }) => {
+      set(value.get());
+
+      return {
+        update: () => {
+          set(value.get());
+        },
+      };
+    });
+
+    expect(sub).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+
+    value.set(2);
+    expect(sub).toHaveValueAndCounts(2, { compute: 2, internalSet: 2 });
+  });
+
+  test('Subscription can set multiple times', () => {
+    const sub = subscription(({ set }) => {
+      set(1);
+      set(2);
+      set(3);
+    });
+
+    expect(sub).toHaveValueAndCounts(3, { compute: 1, internalSet: 3 });
+  });
+
+  test('Subscription can access parameters', () => {
+    const sub = subscription(({ set }, value: number) => {
+      set(value);
+    });
+
+    expect(sub).withParams(1).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+    expect(sub).withParams(2).toHaveValueAndCounts(2, { compute: 2, internalSet: 2 });
+  });
+
+  test('Subscription is recomputed when parameters change', () => {
+    const sub = subscription(({ set }, value: number) => {
+      set(value);
+
+      return {
+        update: () => {
+          set(value * 2);
+        },
+      };
+    });
+
+    expect(sub).withParams(1).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+    expect(sub).withParams(2).toHaveValueAndCounts(2, { compute: 2, internalSet: 2 });
+  });
+
+  test('Subscription is not recomputed when same parameters are passed', () => {
+    const sub = subscription(({ set }, value: number) => {
+      set(value);
+    });
+
+    expect(sub).withParams(1).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+    expect(sub).withParams(1).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+  });
+
+  test('Subscription updates automatically when state changes', async () => {
+    const value = state(1);
+    const sub = subscription(({ set }) => {
+      set(value.get());
+
+      return {
+        update: () => {
+          set(value.get());
+        },
+      };
+    });
+
+    expect(sub).toHaveValueAndCounts(1, { compute: 1, internalSet: 1 });
+
+    value.set(2);
+
+    await nextTick();
+
+    expect(sub).toHaveCounts({ compute: 2, internalSet: 2 });
+    expect(sub).toHaveHookValue(2);
+  });
+});