@assistant-ui/tap 0.6.0 → 0.7.1

package/src/__tests__/bench/tree.bench.tsx

@@ -0,0 +1,166 @@
+/**
+ * Tree-shaped benchmark: M leaf resources with K hooks each; the update
+ * scenario dispatches into a single leaf. React renders the leaves as
+ * memo'd components, so a clean sibling costs nothing; tap currently
+ * re-renders the whole tree (no subtree bailout). This bench exists to
+ * measure that gap and to validate the bailout work. Build first, then:
+ *
+ *   pnpm build
+ *   pnpm exec vitest bench --run --project prod src/__tests__/bench/tree.bench.tsx
+ */
+/* oxlint-disable react/rules-of-hooks -- fixed-count hook loops, benchmark only */
+import { bench, describe } from "vitest";
+import { createElement, Fragment, memo, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import {
+  createTapRoot,
+  flushTapSync,
+  resource,
+  useResource,
+  useTapRoot,
+} from "@assistant-ui/tap";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = false;
+
+const M = 500;
+const K = 10;
+
+type Bump = (updater: (v: number) => number) => void;
+const leafSetters: Bump[] = [];
+
+const useLeafBody = (id: number): number => {
+  let sum = 0;
+  let set!: Bump;
+  for (let i = 0; i < K; i++) {
+    const [v, setV] = useState(0);
+    sum += v;
+    set = setV;
+  }
+  leafSetters[id] = set;
+  return sum;
+};
+
+const Leaf = resource((props: { id: number }) => useLeafBody(props.id));
+
+const useTree = () => {
+  let total = 0;
+  for (let i = 0; i < M; i++) {
+    total += useResource(Leaf({ id: i }));
+  }
+  return total;
+};
+
+const useTreeDeps = () => {
+  let total = 0;
+  for (let i = 0; i < M; i++) {
+    total += useResource(Leaf({ id: i }), [i]);
+  }
+  return total;
+};
+
+// Stable element identities, like React Compiler output.
+const leafElements = Array.from({ length: M }, (_, id) => Leaf({ id }));
+const useTreeStable = () => {
+  let total = 0;
+  for (let i = 0; i < M; i++) {
+    total += useResource(leafElements[i]!);
+  }
+  return total;
+};
+
+const LeafComponent = memo(function LeafComponent({ id }: { id: number }) {
+  useLeafBody(id);
+  return null;
+});
+
+const leafIds = Array.from({ length: M }, (_, i) => i);
+
+type Host = { flush: (fn: () => void) => void; unmount: () => void };
+
+const HOSTS: Record<string, () => Host> = {
+  react: () => {
+    function Tree() {
+      return createElement(
+        Fragment,
+        null,
+        leafIds.map((id) => createElement(LeafComponent, { key: id, id })),
+      );
+    }
+    const root = createRoot(document.createElement("div"));
+    flushSync(() => root.render(createElement(Tree)));
+    return {
+      flush: (fn) => flushSync(fn),
+      unmount: () => flushSync(() => root.unmount()),
+    };
+  },
+  tapRoot: () => {
+    function Probe() {
+      useTapRoot(function Root() {
+        return useTree();
+      });
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    flushSync(() => root.render(createElement(Probe)));
+    return {
+      flush: (fn) => flushTapSync(fn),
+      unmount: () => flushSync(() => root.unmount()),
+    };
+  },
+  createTapRoot: () => {
+    const root = createTapRoot(function Root() {
+      return useTree();
+    });
+    return {
+      flush: (fn) => flushTapSync(fn),
+      unmount: () => root.unmount(),
+    };
+  },
+  createTapRootDeps: () => {
+    const root = createTapRoot(function Root() {
+      return useTreeDeps();
+    });
+    return {
+      flush: (fn) => flushTapSync(fn),
+      unmount: () => root.unmount(),
+    };
+  },
+  createTapRootStable: () => {
+    const root = createTapRoot(function Root() {
+      return useTreeStable();
+    });
+    return {
+      flush: (fn) => flushTapSync(fn),
+      unmount: () => root.unmount(),
+    };
+  },
+};
+
+describe(`tree mount+unmount, ${M} leaves x ${K} hooks`, () => {
+  for (const [name, make] of Object.entries(HOSTS)) {
+    bench(name, () => {
+      make().unmount();
+    });
+  }
+});
+
+describe(`tree update: one leaf dispatch, ${M} leaves x ${K} hooks`, () => {
+  for (const [name, make] of Object.entries(HOSTS)) {
+    let host: Host;
+    bench(
+      name,
+      () => {
+        host.flush(() => leafSetters[M >> 1]!((v) => v + 1));
+      },
+      {
+        setup: () => {
+          host = make();
+        },
+        teardown: () => {
+          host.unmount();
+        },
+      },
+    );
+  }
+});

package/src/__tests__/errors/errors.effect-errors.test.ts

@@ -1,7 +1,7 @@
 /* oxlint-disable react/exhaustive-deps -- tests deliberately exercise invalid dep arrays */
 import { describe, it, expect, vi } from "vitest";
-import { useEffect } from "../../hooks/useEffect";
-import { useState } from "../../hooks/useState";
+import { useEffect } from "../../react-hooks/useEffect";
+import { useState } from "../../react-hooks/useState";
 import { createTestResource, renderTest, unmountResource } from "../test-utils";
 import {
   renderResourceFiber,
@@ -19,7 +19,7 @@ describe("Errors - Effect Errors", () => {
       return null;
     });
 
-    expect(() => renderTest(resource, undefined)).toThrow(error);
+    expect(() => renderTest(resource)).toThrow(error);
   });
 
   it("should propagate errors from cleanup functions", () => {
@@ -39,14 +39,14 @@ describe("Errors - Effect Errors", () => {
     });
 
     // First render and commit - establishes the effect
-    const ctx1 = renderResourceFiber(resource, undefined);
+    const ctx1 = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx1);
 
     // Change dep to trigger cleanup on next render
     dep = 1;
 
     // Second render with different dep should trigger cleanup that throws
-    const ctx2 = renderResourceFiber(resource, undefined);
+    const ctx2 = renderResourceFiber(resource, []);
     expect(() => commitResourceFiber(resource, ctx2)).toThrow(error);
   });
 
@@ -58,7 +58,7 @@ describe("Errors - Effect Errors", () => {
       return null;
     });
 
-    expect(() => renderTest(resource, undefined)).toThrow(
+    expect(() => renderTest(resource)).toThrow(
       "An effect function must either return a cleanup function or nothing",
     );
   });
@@ -83,8 +83,7 @@ describe("Errors - Effect Errors", () => {
     });
 
     // Should throw aggregate error
-    expect(() => renderTest(resource, undefined))
-      .toThrowErrorMatchingInlineSnapshot(`
+    expect(() => renderTest(resource)).toThrowErrorMatchingInlineSnapshot(`
       [AggregateError: Errors during commit]
     `);
     expect(goodEffect).toHaveBeenCalledTimes(1);
@@ -105,7 +104,7 @@ describe("Errors - Effect Errors", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
 
     // Unmount should throw the error but should still run all cleanups
     expect(() => unmountResource(resource)).toThrow(cleanupError);
@@ -140,7 +139,7 @@ describe("Errors - Effect Errors", () => {
 
     // The initial render will trigger setState which causes flushSync
     // The flushed re-render will throw the error
-    expect(() => renderTest(resource, undefined)).toThrow(error);
+    expect(() => renderTest(resource)).toThrow(error);
   });
 
   it("should handle async errors in effects", async () => {
@@ -165,7 +164,7 @@ describe("Errors - Effect Errors", () => {
     });
 
     // This won't throw synchronously
-    expect(() => renderTest(resource, undefined)).not.toThrow();
+    expect(() => renderTest(resource)).not.toThrow();
 
     // Wait for the async error to be handled
     await new Promise((resolve) => setTimeout(resolve, 10));
@@ -186,7 +185,7 @@ describe("Errors - Effect Errors", () => {
       return value;
     });
 
-    expect(() => renderTest(resource, undefined)).toThrow(error);
+    expect(() => renderTest(resource)).toThrow(error);
     expect(effectRan).toBe(true);
 
     // Resource should not have committed state since commit failed
@@ -221,6 +220,6 @@ describe("Errors - Effect Errors", () => {
 
     // The initial render will trigger setState which causes flushSync
     // During the flush, the cleanup will run and throw
-    expect(() => renderTest(resource, undefined)).toThrow(cleanupError);
+    expect(() => renderTest(resource)).toThrow(cleanupError);
   });
 });

package/src/__tests__/errors/errors.render-errors.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
-import { useEffect } from "../../hooks/useEffect";
-import { useState } from "../../hooks/useState";
+import { useEffect } from "../../react-hooks/useEffect";
+import { useState } from "../../react-hooks/useState";
 import { createTestResource, renderTest } from "../test-utils";
 import {
   renderResourceFiber,
@@ -16,7 +16,7 @@ describe("Errors - Render Errors", () => {
       throw error;
     });
 
-    expect(() => renderResourceFiber(resource, undefined)).toThrow(error);
+    expect(() => renderResourceFiber(resource, [])).toThrow(error);
   });
 
   it("should throw when hooks are called outside render context", () => {
@@ -40,24 +40,67 @@ describe("Errors - Render Errors", () => {
       return value;
     });
 
-    expect(() => renderResourceFiber(resource, undefined)).toThrow(error);
+    expect(() => renderResourceFiber(resource, [])).toThrow(error);
   });
 
-  it("should detect render during render", () => {
+  it("should process setState during render as a render-phase update", () => {
     const resource = createTestResource(() => {
       const [count, setCount] = useState(0);
+      if (count < 5) setCount(count + 1);
+      return count;
+    });
 
-      // This violates the rules - no state updates during render
-      if (count < 5) {
-        expect(() => setCount(count + 1)).toThrow(
-          "Resource updated during render",
-        );
-      }
+    expect(renderResourceFiber(resource, []).value).toBe(5);
+  });
+
+  it("should throw when updating a different resource during render", () => {
+    let setOther!: (value: number) => void;
+    const other = createTestResource(() => {
+      const [value, setValue] = useState(0);
+      setOther = setValue;
+      return value;
+    });
+    renderTest(other);
+
+    const resource = createTestResource(() => {
+      setOther(1);
+      return null;
+    });
+
+    expect(() => renderResourceFiber(resource, [])).toThrow(
+      "Cannot update a resource while rendering a different resource",
+    );
+  });
+
+  it("should throw when a child updates its parent mid-render", () => {
+    let setParent!: (value: number) => void;
+    const child = createTestResource(() => {
+      setParent(1);
+      return null;
+    });
+
+    const parent = createTestResource(() => {
+      const [value, setValue] = useState(0);
+      setParent = setValue;
+      renderResourceFiber(child, []);
+      return value;
+    });
 
+    expect(() => renderResourceFiber(parent, [])).toThrow(
+      "Cannot update a resource while rendering a different resource",
+    );
+  });
+
+  it("should throw on unbounded render-phase updates", () => {
+    const resource = createTestResource(() => {
+      const [count, setCount] = useState(0);
+      setCount(count + 1);
       return count;
     });
 
-    renderResourceFiber(resource, undefined);
+    expect(() => renderResourceFiber(resource, [])).toThrow(
+      "Too many re-renders",
+    );
   });
 
   it("should allow setState during commit (effects)", () => {
@@ -74,7 +117,7 @@ describe("Errors - Render Errors", () => {
       return count;
     });
 
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     // This should not throw - setState in effects is allowed
     expect(() => commitResourceFiber(resource, ctx)).not.toThrow();
     unmountResourceFiber(resource);
@@ -94,11 +137,11 @@ describe("Errors - Render Errors", () => {
       return null;
     });
 
-    renderResourceFiber(resource, undefined);
+    renderResourceFiber(resource, []);
 
     useStateFirst = false;
 
-    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+    expect(() => renderResourceFiber(resource, [])).toThrow(
       "Hook order changed between renders",
     );
   });
@@ -117,12 +160,12 @@ describe("Errors - Render Errors", () => {
     });
 
     // First successful render
-    const result = renderTest(resource, undefined);
+    const result = renderTest(resource);
     expect(result).toBe(42);
 
     // Failed render
     shouldThrow = true;
-    expect(() => renderTest(resource, undefined)).toThrow("Render failed");
+    expect(() => renderTest(resource)).toThrow("Render failed");
 
     // State should be unchanged after failed render
     // The resource state is preserved
@@ -153,19 +196,19 @@ describe("Errors - Render Errors", () => {
     });
 
     // Successful render
-    renderTest(resource, undefined);
+    renderTest(resource);
 
     // Render error
     phase = "render-error";
-    expect(() => renderTest(resource, undefined)).toThrow("Render error");
+    expect(() => renderTest(resource)).toThrow("Render error");
 
     // Hook order error
     phase = "hook-order";
-    expect(() => renderTest(resource, undefined)).toThrow("Hook order changed");
+    expect(() => renderTest(resource)).toThrow("Hook order changed");
 
     // Effect error
     phase = "effect-error";
-    expect(() => renderTest(resource, undefined)).toThrow("Effect error");
+    expect(() => renderTest(resource)).toThrow("Effect error");
   });
 
   it("should handle errors in nested hook calls", () => {
@@ -184,7 +227,7 @@ describe("Errors - Render Errors", () => {
       return feature;
     });
 
-    const result = renderTest(resource, undefined);
+    const result = renderTest(resource);
     expect(result).toBe("feature");
   });
 });

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

@@ -1,7 +1,7 @@
 /* oxlint-disable react/exhaustive-deps -- tests deliberately exercise invalid dep arrays */
 import { describe, it, expect, vi } from "vitest";
-import { useEffect } from "../../hooks/useEffect";
-import { useState } from "../../hooks/useState";
+import { useEffect } from "../../react-hooks/useEffect";
+import { useState } from "../../react-hooks/useState";
 import { createTestResource, renderTest, waitForNextTick } from "../test-utils";
 import {
   renderResourceFiber,
@@ -22,7 +22,7 @@ describe("Lifecycle - Dependencies", () => {
       return dep;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Change dependency - this triggers automatic re-render
@@ -46,7 +46,7 @@ describe("Lifecycle - Dependencies", () => {
       return { count, dep };
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Trigger re-render without changing dep
@@ -73,12 +73,12 @@ describe("Lifecycle - Dependencies", () => {
       return dep;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(log).toEqual(["effect-1"]);
 
     // Change dep
     setDep(2);
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
 
     expect(log).toEqual(["effect-1", "cleanup-1", "effect-2"]);
@@ -96,7 +96,7 @@ describe("Lifecycle - Dependencies", () => {
       return count;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Re-render
@@ -119,12 +119,12 @@ describe("Lifecycle - Dependencies", () => {
       return count;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Re-render
     triggerRerender(1);
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
 
     expect(effect).toHaveBeenCalledTimes(1); // Should not re-run
@@ -145,26 +145,26 @@ describe("Lifecycle - Dependencies", () => {
     });
 
     // Initial render
-    let ctx = renderResourceFiber(resource, undefined);
+    let ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Change first dep
     setDep1("b");
-    ctx = renderResourceFiber(resource, undefined);
+    ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
     expect(effect).toHaveBeenCalledTimes(2);
 
     // Change second dep
     setDep2(2);
-    ctx = renderResourceFiber(resource, undefined);
+    ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
     expect(effect).toHaveBeenCalledTimes(3);
 
     // Change both deps
     setDep1("c");
     setDep2(3);
-    ctx = renderResourceFiber(resource, undefined);
+    ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
     expect(effect).toHaveBeenCalledTimes(4);
 
@@ -183,12 +183,12 @@ describe("Lifecycle - Dependencies", () => {
       return obj;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Set to new object with same shape
     setObj({ value: 1 });
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
 
     expect(effect).toHaveBeenCalledTimes(2); // Should re-run (different object)
@@ -206,11 +206,11 @@ describe("Lifecycle - Dependencies", () => {
       return value;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     expect(effect).toHaveBeenCalledTimes(1);
 
     // Set to NaN again
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     setValue(NaN);
     commitResourceFiber(resource, ctx);
 
@@ -229,13 +229,13 @@ describe("Lifecycle - Dependencies", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
 
     // Change to no deps
     useDeps = false;
 
     // Error throws during render (fail-fast validation)
-    expect(() => renderResourceFiber(resource, undefined)).toThrow(
+    expect(() => renderResourceFiber(resource, [])).toThrow(
       "useEffect called with and without dependencies across re-renders",
     );
   });

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
-import { useEffect } from "../../hooks/useEffect";
-import { useState } from "../../hooks/useState";
+import { useEffect } from "../../react-hooks/useEffect";
+import { useState } from "../../react-hooks/useState";
 import { createTestResource, renderTest, unmountResource } from "../test-utils";
 import {
   renderResourceFiber,
@@ -17,7 +17,7 @@ describe("Lifecycle - Mount/Unmount", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
 
     effects.forEach((fn) => {
       expect(fn).toHaveBeenCalledTimes(1);
@@ -34,7 +34,7 @@ describe("Lifecycle - Mount/Unmount", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     cleanups.forEach((fn) => expect(fn).not.toHaveBeenCalled());
 
     unmountResource(resource);
@@ -51,7 +51,7 @@ describe("Lifecycle - Mount/Unmount", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     unmountResource(resource);
 
     expect(order).toEqual([1, 2, 3]);
@@ -120,7 +120,7 @@ describe("Lifecycle - Mount/Unmount", () => {
     });
 
     // Initial render
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     expect(log).toEqual(["render"]);
 
     // Commit - effects will run
@@ -129,7 +129,7 @@ describe("Lifecycle - Mount/Unmount", () => {
     expect(log).toEqual(["render", "effect-1", "effect-2"]);
 
     // The setState in effect schedules a re-render; trigger it manually
-    const ctx2 = renderResourceFiber(resource, undefined);
+    const ctx2 = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx2);
 
     // Now we should see the re-render and cleanup/re-run of effects
@@ -138,10 +138,10 @@ describe("Lifecycle - Mount/Unmount", () => {
       "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
+      "cleanup-1", // Cleanups from first render run first, like React
+      "cleanup-2",
+      "effect-1", // Then the re-render's effects
+      "effect-2",
     ]);
 
     // Clear log for unmount testing
@@ -164,7 +164,7 @@ describe("Lifecycle - Mount/Unmount", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
 
     // Unmount should throw the error
     expect(() => unmountResource(resource)).toThrow(error);
@@ -182,7 +182,7 @@ describe("Lifecycle - Mount/Unmount", () => {
       return null;
     });
 
-    renderTest(resource, undefined);
+    renderTest(resource);
     unmountResource(resource);
 
     expect(cleanup).not.toHaveBeenCalled();
@@ -200,7 +200,7 @@ describe("Lifecycle - Mount/Unmount", () => {
       return null;
     });
 
-    const ctx = renderResourceFiber(resource, undefined);
+    const ctx = renderResourceFiber(resource, []);
     commitResourceFiber(resource, ctx);
     unmountResourceFiber(resource);