@assistant-ui/tap 0.3.4 → 0.3.5

package/src/__tests__/lifecycle/lifecycle.dependencies.test.ts

@@ -0,0 +1,241 @@
+import { describe, it, expect, vi } from "vitest";
+import { tapEffect } from "../../hooks/tap-effect";
+import { tapState } from "../../hooks/tap-state";
+import { createTestResource, renderTest, waitForNextTick } from "../test-utils";
+import {
+  renderResourceFiber,
+  commitResourceFiber,
+  unmountResourceFiber,
+} from "../../core/ResourceFiber";
+
+describe("Lifecycle - Dependencies", () => {
+  it("should re-run effect when deps change", async () => {
+    const effect = vi.fn();
+    let setDep: any;
+
+    const resource = createTestResource(() => {
+      const [dep, _setDep] = tapState(1);
+      setDep = _setDep;
+
+      tapEffect(effect, [dep]);
+      return dep;
+    });
+
+    renderTest(resource, undefined);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Change dependency - this triggers automatic re-render
+    setDep(2);
+
+    // Wait for scheduled re-render
+    await waitForNextTick();
+    expect(effect).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not re-run effect when deps are same", async () => {
+    const effect = vi.fn();
+    let triggerRerender: any;
+
+    const resource = createTestResource(() => {
+      const [count, setCount] = tapState(0);
+      const [dep] = tapState("constant");
+      triggerRerender = setCount;
+
+      tapEffect(effect, [dep]);
+      return { count, dep };
+    });
+
+    renderTest(resource, undefined);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Trigger re-render without changing dep
+    triggerRerender(1);
+
+    // Wait for scheduled re-render
+    await waitForNextTick();
+    expect(effect).toHaveBeenCalledTimes(1); // Should not re-run
+  });
+
+  it("should run cleanup before effect re-runs", () => {
+    const log: string[] = [];
+    let setDep: any;
+
+    const resource = createTestResource(() => {
+      const [dep, _setDep] = tapState(1);
+      setDep = _setDep;
+
+      tapEffect(() => {
+        log.push(`effect-${dep}`);
+        return () => log.push(`cleanup-${dep}`);
+      }, [dep]);
+
+      return dep;
+    });
+
+    renderTest(resource, undefined);
+    expect(log).toEqual(["effect-1"]);
+
+    // Change dep
+    setDep(2);
+    const ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+
+    expect(log).toEqual(["effect-1", "cleanup-1", "effect-2"]);
+  });
+
+  it("should handle undefined deps (always re-run)", async () => {
+    const effect = vi.fn();
+    let triggerRerender: any;
+
+    const resource = createTestResource(() => {
+      const [count, setCount] = tapState(0);
+      triggerRerender = setCount;
+
+      tapEffect(effect); // No deps = always re-run
+      return count;
+    });
+
+    renderTest(resource, undefined);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Re-render
+    triggerRerender(1);
+
+    await waitForNextTick();
+
+    expect(effect).toHaveBeenCalledTimes(2); // Should re-run
+  });
+
+  it("should handle empty deps array (run once)", () => {
+    const effect = vi.fn();
+    let triggerRerender: any;
+
+    const resource = createTestResource(() => {
+      const [count, setCount] = tapState(0);
+      triggerRerender = setCount;
+
+      tapEffect(effect, []); // Empty deps = run once
+      return count;
+    });
+
+    renderTest(resource, undefined);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Re-render
+    triggerRerender(1);
+    const ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+
+    expect(effect).toHaveBeenCalledTimes(1); // Should not re-run
+  });
+
+  it("should handle multiple dependencies", () => {
+    const effect = vi.fn();
+    let setDep1: any, setDep2: any;
+
+    const resource = createTestResource(() => {
+      const [dep1, _setDep1] = tapState("a");
+      const [dep2, _setDep2] = tapState(1);
+      setDep1 = _setDep1;
+      setDep2 = _setDep2;
+
+      tapEffect(effect, [dep1, dep2]);
+      return { dep1, dep2 };
+    });
+
+    // Initial render
+    let ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Change first dep
+    setDep1("b");
+    ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    // Change second dep
+    setDep2(2);
+    ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+    expect(effect).toHaveBeenCalledTimes(3);
+
+    // Change both deps
+    setDep1("c");
+    setDep2(3);
+    ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+    expect(effect).toHaveBeenCalledTimes(4);
+
+    unmountResourceFiber(resource);
+  });
+
+  it("should use Object.is for dependency comparison", () => {
+    const effect = vi.fn();
+    let setObj: any;
+
+    const resource = createTestResource(() => {
+      const [obj, _setObj] = tapState({ value: 1 });
+      setObj = _setObj;
+
+      tapEffect(effect, [obj]);
+      return obj;
+    });
+
+    renderTest(resource, undefined);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Set to new object with same shape
+    setObj({ value: 1 });
+    const ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+
+    expect(effect).toHaveBeenCalledTimes(2); // Should re-run (different object)
+  });
+
+  it("should handle NaN in dependencies", () => {
+    const effect = vi.fn();
+    let setValue: any;
+
+    const resource = createTestResource(() => {
+      const [value, _setValue] = tapState(NaN);
+      setValue = _setValue;
+
+      tapEffect(effect, [value]);
+      return value;
+    });
+
+    renderTest(resource, undefined);
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Set to NaN again
+    const ctx = renderResourceFiber(resource, undefined);
+    setValue(NaN);
+    commitResourceFiber(resource, ctx);
+
+    expect(effect).toHaveBeenCalledTimes(1); // Should not re-run (NaN === NaN in Object.is)
+  });
+
+  it("should throw error when mixing deps and no-deps", () => {
+    let useDeps = true;
+
+    const resource = createTestResource(() => {
+      if (useDeps) {
+        tapEffect(() => {}, [1]);
+      } else {
+        tapEffect(() => {}); // No deps
+      }
+      return null;
+    });
+
+    renderTest(resource, undefined);
+
+    // Change to no deps
+    useDeps = false;
+    const ctx = renderResourceFiber(resource, undefined);
+
+    expect(() => commitResourceFiber(resource, ctx)).toThrow(
+      "tapEffect called with and without dependencies across re-renders",
+    );
+  });
+});

package/src/__tests__/lifecycle/lifecycle.mount-unmount.test.ts

@@ -0,0 +1,211 @@
+import { describe, it, expect, vi } from "vitest";
+import { tapEffect } from "../../hooks/tap-effect";
+import { tapState } from "../../hooks/tap-state";
+import { createTestResource, renderTest, unmountResource } from "../test-utils";
+import {
+  renderResourceFiber,
+  commitResourceFiber,
+  unmountResourceFiber,
+} from "../../core/ResourceFiber";
+
+describe("Lifecycle - Mount/Unmount", () => {
+  it("should run all effects on mount", () => {
+    const effects = [vi.fn(), vi.fn(), vi.fn()];
+
+    const resource = createTestResource(() => {
+      effects.forEach((fn) => tapEffect(fn));
+      return null;
+    });
+
+    renderTest(resource, undefined);
+
+    effects.forEach((fn) => {
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("should cleanup all effects on unmount", () => {
+    const cleanups = [vi.fn(), vi.fn(), vi.fn()];
+
+    const resource = createTestResource(() => {
+      cleanups.forEach((cleanup) => {
+        tapEffect(() => cleanup);
+      });
+      return null;
+    });
+
+    renderTest(resource, undefined);
+    cleanups.forEach((fn) => expect(fn).not.toHaveBeenCalled());
+
+    unmountResource(resource);
+    cleanups.forEach((fn) => expect(fn).toHaveBeenCalledTimes(1));
+  });
+
+  it("should cleanup effects in reverse order", () => {
+    const order: number[] = [];
+
+    const resource = createTestResource(() => {
+      tapEffect(() => () => order.push(1));
+      tapEffect(() => () => order.push(2));
+      tapEffect(() => () => order.push(3));
+      return null;
+    });
+
+    renderTest(resource, undefined);
+    unmountResource(resource);
+
+    expect(order).toEqual([3, 2, 1]);
+  });
+
+  it("should preserve state across re-renders", () => {
+    let renderCount = 0;
+    let setState: any;
+    let effectRunCount = 0;
+
+    const resource = createTestResource((props: number) => {
+      renderCount++;
+      const [state, _setState] = tapState({ count: 0 });
+      setState = _setState;
+
+      // Simple effect that tracks runs
+      tapEffect(() => {
+        effectRunCount++;
+      });
+
+      return { ...state, renderCount, currentProps: props };
+    });
+
+    const result1 = renderTest(resource, 1);
+    expect(result1.count).toBe(0);
+    expect(result1.renderCount).toBe(1);
+    expect(effectRunCount).toBe(1);
+
+    // Update state manually - should trigger re-render
+    setState({ count: 42 });
+
+    // Re-render with same input - note: renderTest always renders
+    const result2 = renderTest(resource, 1);
+    expect(result2.count).toBe(42); // State preserved
+    expect(result2.currentProps).toBe(1); // Same props
+    expect(result2.renderCount).toBe(3); // 1 initial + 1 from setState + 1 from renderResource
+
+    // Re-render with new input
+    const result3 = renderTest(resource, 2);
+    expect(result3.count).toBe(42); // State still preserved
+    expect(result3.currentProps).toBe(2); // New props used
+    expect(result3.renderCount).toBe(4); // Another render
+  });
+
+  it("should handle mixed state and effects lifecycle", () => {
+    const log: string[] = [];
+
+    const resource = createTestResource(() => {
+      const [mounted, setMounted] = tapState(false);
+
+      log.push("render");
+
+      tapEffect(() => {
+        log.push("effect-1");
+        setMounted(true);
+
+        return () => log.push("cleanup-1");
+      });
+
+      tapEffect(() => {
+        log.push("effect-2");
+        return () => log.push("cleanup-2");
+      });
+
+      return mounted;
+    });
+
+    // Initial render
+    const ctx = renderResourceFiber(resource, undefined);
+    expect(log).toEqual(["render"]);
+
+    // Commit - effects will run
+    commitResourceFiber(resource, ctx);
+    // After commit: initial render + effects
+    expect(log).toEqual(["render", "effect-1", "effect-2"]);
+
+    // The setState in effect schedules a re-render
+    // With the new architecture, we need to manually trigger it
+    const ctx2 = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx2);
+
+    // Now we should see the re-render and cleanup/re-run of effects
+    expect(log).toEqual([
+      "render",
+      "effect-1",
+      "effect-2",
+      "render", // Re-render triggered by setMounted(true)
+      "cleanup-1", // Cleanup from first render
+      "effect-1", // Effect from re-render
+      "cleanup-2", // Cleanup from first render
+      "effect-2", // Effect from re-render
+    ]);
+
+    // Clear log for unmount testing
+    log.length = 0;
+
+    // Unmount
+    unmountResourceFiber(resource);
+    expect(log).toEqual(["cleanup-2", "cleanup-1"]);
+  });
+
+  it("should handle cleanup errors gracefully", () => {
+    const error = new Error("Cleanup error");
+    const goodCleanup = vi.fn();
+
+    const resource = createTestResource(() => {
+      tapEffect(() => () => {
+        throw error;
+      });
+      tapEffect(() => goodCleanup);
+      return null;
+    });
+
+    renderTest(resource, undefined);
+
+    // Unmount should throw the error
+    expect(() => unmountResource(resource)).toThrow(error);
+    expect(goodCleanup).toHaveBeenCalled();
+  });
+
+  it("should not run cleanup if effect never ran", () => {
+    const cleanup = vi.fn();
+    const skipEffect = true;
+
+    const resource = createTestResource(() => {
+      if (!skipEffect) {
+        tapEffect(() => cleanup);
+      }
+      return null;
+    });
+
+    renderTest(resource, undefined);
+    unmountResource(resource);
+
+    expect(cleanup).not.toHaveBeenCalled();
+  });
+
+  it("should handle immediate unmount after mount", () => {
+    const effect = vi.fn();
+    const cleanup = vi.fn();
+
+    const resource = createTestResource(() => {
+      tapEffect(() => {
+        effect();
+        return cleanup;
+      });
+      return null;
+    });
+
+    const ctx = renderResourceFiber(resource, undefined);
+    commitResourceFiber(resource, ctx);
+    unmountResourceFiber(resource);
+
+    expect(effect).toHaveBeenCalledTimes(1);
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/rules/rules.hook-count.test.ts

@@ -0,0 +1,200 @@
+import { describe, it, expect } from "vitest";
+import { tapEffect } from "../../hooks/tap-effect";
+import { tapState } from "../../hooks/tap-state";
+import { createTestResource, renderTest } from "../test-utils";
+import { renderResourceFiber } from "../../core/ResourceFiber";
+
+describe("Rules of Hooks - Hook Count", () => {
+  it("should establish hook count on first render", () => {
+    const resource = createTestResource(() => {
+      const [a] = tapState(1);
+      const [b] = tapState(2);
+      const [c] = tapState(3);
+      tapEffect(() => {});
+      tapEffect(() => {});
+
+      return { a, b, c };
+    });
+
+    // First render establishes 5 hooks
+    renderTest(resource, undefined);
+
+    // Second render should work with same count
+    expect(() => {
+      renderTest(resource, undefined);
+    }).not.toThrow();
+  });
+
+  it("should throw when rendering more hooks than first render", () => {
+    let addExtraHook = false;
+
+    const resource = createTestResource(() => {
+      tapState(1);
+      tapState(2);
+
+      if (addExtraHook) {
+        tapState(3); // Extra hook
+      }
+
+      return null;
+    });
+
+    // First render with 2 hooks
+    renderResourceFiber(resource, undefined);
+
+    // Try to render with 3 hooks
+    addExtraHook = true;
+
+    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+      "Rendered more hooks than during the previous render",
+    );
+  });
+
+  it("should throw when rendering fewer hooks than first render", () => {
+    let skipHook = false;
+
+    const resource = createTestResource(() => {
+      tapState(1);
+
+      if (!skipHook) {
+        tapState(2);
+      }
+
+      tapState(3);
+      return null;
+    });
+
+    // First render with 3 hooks
+    renderResourceFiber(resource, undefined);
+
+    // Try to render with 2 hooks
+    skipHook = true;
+
+    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+      "Rendered 2 hooks but expected 3",
+    );
+  });
+
+  it("should detect hook count mismatch with effects", () => {
+    let includeEffect = true;
+
+    const resource = createTestResource(() => {
+      tapState(1);
+      tapState(2);
+
+      if (includeEffect) {
+        tapEffect(() => {});
+      }
+      return null;
+    });
+
+    renderResourceFiber(resource, undefined);
+
+    includeEffect = false;
+
+    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+      "Rendered 2 hooks but expected 3",
+    );
+  });
+
+  it("should handle zero hooks consistently", () => {
+    const resource = createTestResource(() => {
+      // No hooks
+      return "no hooks";
+    });
+
+    renderTest(resource, undefined);
+
+    // Should allow multiple renders with zero hooks
+    expect(() => renderTest(resource, undefined)).not.toThrow();
+  });
+
+  it("should detect dynamic hook creation", () => {
+    let hookCount = 2;
+
+    const resource = createTestResource(() => {
+      for (let i = 0; i < hookCount; i++) {
+        tapState(i);
+      }
+      return null;
+    });
+
+    renderResourceFiber(resource, undefined);
+
+    // Change hook count
+    hookCount = 3;
+
+    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+      "Rendered more hooks than during the previous render",
+    );
+  });
+
+  it("should maintain count across multiple re-renders", () => {
+    let renderCount = 0;
+
+    const resource = createTestResource(() => {
+      renderCount++;
+      const [a] = tapState(1);
+      const [b] = tapState(2);
+      tapEffect(() => {});
+
+      return { a, b, renderCount };
+    });
+
+    // Multiple renders should all maintain same hook count
+    for (let i = 0; i < 5; i++) {
+      expect(() => renderTest(resource, undefined)).not.toThrow();
+    }
+
+    expect(renderCount).toBe(5);
+  });
+
+  it("should track count separately for different resource instances", () => {
+    const resource1 = createTestResource(() => {
+      tapState(1);
+      tapState(2);
+      return "two hooks";
+    });
+
+    const resource2 = createTestResource(() => {
+      tapState(1);
+      tapState(2);
+      tapState(3);
+      tapEffect(() => {});
+      return "four hooks";
+    });
+
+    // Render both
+    renderTest(resource1, undefined);
+    renderTest(resource2, undefined);
+
+    // Each should maintain its own count
+    expect(() => renderTest(resource1, undefined)).not.toThrow();
+    expect(() => renderTest(resource2, undefined)).not.toThrow();
+  });
+
+  it("should detect hook count changes in nested function calls", () => {
+    let useExtraHooks = false;
+
+    const useFeature = () => {
+      tapState("feature");
+      if (useExtraHooks) {
+        tapState("extra");
+      }
+    };
+
+    const resource = createTestResource(() => {
+      tapState("main");
+      useFeature();
+      return null;
+    });
+
+    renderResourceFiber(resource, undefined);
+
+    useExtraHooks = true;
+
+    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+      "Rendered more hooks than during the previous render",
+    );
+  });
+});