@assistant-ui/tap 0.3.6 → 0.4.2

package/src/__tests__/basic/tapResources.basic.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, afterEach } from "vitest";
 import { tapResources } from "../../hooks/tap-resources";
 import { tapState } from "../../hooks/tap-state";
 import { resource } from "../../core/resource";
+import { withKey } from "../../core/withKey";
 import {
   createTestResource,
   renderTest,
@@ -59,8 +60,11 @@ describe("tapResources - Basic Functionality", () => {
     it("should render multiple resources with keys", () => {
       const testFiber = createTestResource(() => {
         const results = tapResources(
-          { a: 10, b: 20, c: 30 },
-          (value) => SimpleCounter({ value }),
+          () => [
+            withKey("a", SimpleCounter({ value: 10 })),
+            withKey("b", SimpleCounter({ value: 20 })),
+            withKey("c", SimpleCounter({ value: 30 })),
+          ],
           [],
         );
 
@@ -68,11 +72,7 @@ describe("tapResources - Basic Functionality", () => {
       });
 
       const result = renderTest(testFiber, undefined);
-      expect(result).toEqual({
-        a: { count: 10 },
-        b: { count: 20 },
-        c: { count: 30 },
-      });
+      expect(result).toEqual([{ count: 10 }, { count: 20 }, { count: 30 }]);
     });
 
     it("should work with resource constructor syntax", () => {
@@ -82,15 +82,17 @@ describe("tapResources - Basic Functionality", () => {
       });
 
       const testFiber = createTestResource(() => {
-        const items = {
-          first: { value: 5 },
-          second: { value: 10 },
-          third: { value: 15 },
-        };
+        const items = [
+          { key: "first", value: 5 },
+          { key: "second", value: 10 },
+          { key: "third", value: 15 },
+        ];
 
         const results = tapResources(
-          items,
-          (item) => Counter({ value: item.value }),
+          () =>
+            items.map((item) =>
+              withKey(item.key, Counter({ value: item.value })),
+            ),
           [],
         );
 
@@ -98,56 +100,66 @@ describe("tapResources - Basic Functionality", () => {
       });
 
       const result = renderTest(testFiber, undefined);
-      expect(result).toEqual({
-        first: { count: 5, double: 10 },
-        second: { count: 10, double: 20 },
-        third: { count: 15, double: 30 },
-      });
+      expect(result).toEqual([
+        { count: 5, double: 10 },
+        { count: 10, double: 20 },
+        { count: 15, double: 30 },
+      ]);
     });
   });
 
   describe("Instance Preservation", () => {
     it("should maintain resource instances when keys remain the same", () => {
       const testFiber = createTestResource(
-        (props: { items: Record<string, { value: number; id: string }> }) => {
-          return tapResources(
-            props.items,
-            (item) => TrackingCounter({ value: item.value, id: item.id }),
-
-            [],
-          );
+        (props: {
+          items: Array<{ key: string; value: number; id: string }>;
+        }) => {
+          return tapResources(() => {
+            return props.items.map((item) =>
+              withKey(
+                item.key,
+                TrackingCounter({ value: item.value, id: item.id }),
+              ),
+            );
+          }, [props.items]);
         },
       );
 
       // Initial render
       const result1 = renderTest(testFiber, {
-        items: { a: { value: 1, id: "a" }, b: { value: 2, id: "b" } },
+        items: [
+          { key: "a", value: 1, id: "a" },
+          { key: "b", value: 2, id: "b" },
+        ],
       });
 
       // Verify initial state
-      expect(result1.a).toMatchObject({
+      expect(result1[0]).toMatchObject({
         id: "a",
         value: 1,
         renderCount: 1,
       });
-      expect(result1.b).toMatchObject({
+      expect(result1[1]).toMatchObject({
         id: "b",
         value: 2,
         renderCount: 1,
       });
 
-      // Re-render with same keys but different values
+      // Re-render with same keys but different order and values
       const result2 = renderTest(testFiber, {
-        items: { b: { value: 20, id: "b" }, a: { value: 10, id: "a" } },
+        items: [
+          { key: "b", value: 20, id: "b" },
+          { key: "a", value: 10, id: "a" },
+        ],
       });
 
-      // Verify instances are preserved
-      expect(result2.b).toMatchObject({
+      // Verify instances are preserved (renderCount should be 2)
+      expect(result2[0]).toMatchObject({
         id: "b",
         value: 20,
         renderCount: 2,
       });
-      expect(result2.a).toMatchObject({
+      expect(result2[1]).toMatchObject({
         id: "a",
         value: 10,
         renderCount: 2,
@@ -158,65 +170,73 @@ describe("tapResources - Basic Functionality", () => {
   describe("Dynamic List Management", () => {
     it("should handle adding and removing resources", () => {
       const testFiber = createTestResource(
-        (props: { items: Record<string, number> }) => {
-          const results = tapResources(
-            props.items,
-            (value) => SimpleCounter({ value }),
-
-            [],
-          );
+        (props: { items: Array<{ key: string; value: number }> }) => {
+          const results = tapResources(() => {
+            return props.items.map((item) =>
+              withKey(item.key, SimpleCounter({ value: item.value })),
+            );
+          }, [props.items]);
           return results;
         },
       );
 
       // Initial render with 3 items
-      const result1 = renderTest(testFiber, { items: { a: 0, b: 10, c: 20 } });
-      expect(result1).toEqual({
-        a: { count: 0 },
-        b: { count: 10 },
-        c: { count: 20 },
+      const result1 = renderTest(testFiber, {
+        items: [
+          { key: "a", value: 0 },
+          { key: "b", value: 10 },
+          { key: "c", value: 20 },
+        ],
       });
+      expect(result1).toEqual([{ count: 0 }, { count: 10 }, { count: 20 }]);
 
       // Remove middle item
-      const result2 = renderTest(testFiber, { items: { a: 0, c: 10 } });
-      expect(result2).toEqual({
-        a: { count: 0 },
-        c: { count: 10 },
+      const result2 = renderTest(testFiber, {
+        items: [
+          { key: "a", value: 0 },
+          { key: "c", value: 10 },
+        ],
       });
+      expect(result2).toEqual([{ count: 0 }, { count: 10 }]);
 
       // Add new item
-      const result3 = renderTest(testFiber, { items: { a: 0, c: 10, d: 20 } });
-      expect(result3).toEqual({
-        a: { count: 0 },
-        c: { count: 10 },
-        d: { count: 20 },
+      const result3 = renderTest(testFiber, {
+        items: [
+          { key: "a", value: 0 },
+          { key: "c", value: 10 },
+          { key: "d", value: 20 },
+        ],
       });
+      expect(result3).toEqual([{ count: 0 }, { count: 10 }, { count: 20 }]);
     });
 
     it("should handle changing resource types for the same key", () => {
       const testFiber = createTestResource((props: { useCounter: boolean }) => {
         const results = tapResources(
-          { item: props.useCounter },
-          (useCounter) =>
-            useCounter
-              ? StatefulCounter({ initial: 42 })
-              : Display({ text: "Hello" }),
-          [],
+          () => [
+            withKey(
+              "item",
+              props.useCounter
+                ? StatefulCounter({ initial: 42 })
+                : Display({ text: "Hello" }),
+            ),
+          ],
+          [props.useCounter],
         );
         return results;
       });
 
       // Start with Counter
       const result1 = renderTest(testFiber, { useCounter: true });
-      expect(result1).toEqual({ item: { count: 42 } });
+      expect(result1).toEqual([{ count: 42 }]);
 
       // Switch to Display
       const result2 = renderTest(testFiber, { useCounter: false });
-      expect(result2).toEqual({ item: { type: "display", text: "Hello" } });
+      expect(result2).toEqual([{ type: "display", text: "Hello" }]);
 
       // Switch back to Counter (new instance)
       const result3 = renderTest(testFiber, { useCounter: true });
-      expect(result3).toEqual({ item: { count: 42 } });
+      expect(result3).toEqual([{ count: 42 }]);
     });
   });
 });

package/src/__tests__/basic/tapState.basic.test.ts

@@ -6,7 +6,7 @@ import {
   renderTest,
   cleanupAllResources,
   waitForNextTick,
-  getCommittedState,
+  getCommittedOutput,
 } from "../test-utils";
 
 describe("tapState - Basic Functionality", () => {
@@ -85,7 +85,7 @@ describe("tapState - Basic Functionality", () => {
       await waitForNextTick();
 
       // Check that state was updated
-      expect(getCommittedState(testFiber)).toEqual({
+      expect(getCommittedOutput(testFiber)).toEqual({
         count: 10,
         renderCount: 2,
       });
@@ -136,19 +136,19 @@ describe("tapState - Basic Functionality", () => {
 
       // Initial render
       renderTest(testFiber, undefined);
-      expect(getCommittedState(testFiber)).toBe(10);
+      expect(getCommittedOutput(testFiber)).toBe(10);
 
       // Functional update
       setCountFn!((prev) => prev * 2);
 
       await waitForNextTick();
-      expect(getCommittedState(testFiber)).toBe(20);
+      expect(getCommittedOutput(testFiber)).toBe(20);
 
       // Another functional update
       setCountFn!((prev) => prev + 5);
 
       await waitForNextTick();
-      expect(getCommittedState(testFiber)).toBe(25);
+      expect(getCommittedOutput(testFiber)).toBe(25);
     });
   });
 
@@ -192,18 +192,18 @@ describe("tapState - Basic Functionality", () => {
 
       // Initial render
       renderTest(testFiber, undefined);
-      expect(getCommittedState(testFiber)).toEqual({ a: "a", b: "b", c: "c" });
+      expect(getCommittedOutput(testFiber)).toEqual({ a: "a", b: "b", c: "c" });
 
       // Update only B
       setters.setB("B");
       await waitForNextTick();
-      expect(getCommittedState(testFiber)).toEqual({ a: "a", b: "B", c: "c" });
+      expect(getCommittedOutput(testFiber)).toEqual({ a: "a", b: "B", c: "c" });
 
       // Update A and C
       setters.setA("A");
       setters.setC("C");
       await waitForNextTick();
-      expect(getCommittedState(testFiber)).toEqual({ a: "A", b: "B", c: "C" });
+      expect(getCommittedOutput(testFiber)).toEqual({ a: "A", b: "B", c: "C" });
     });
   });
 

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

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/useExhaustiveDependencies: tests */
 import { describe, it, expect, vi } from "vitest";
 import { tapEffect } from "../../hooks/tap-effect";
 import { tapState } from "../../hooks/tap-state";
@@ -81,9 +82,13 @@ describe("Errors - Effect Errors", () => {
       return null;
     });
 
-    // Should throw first error
-    expect(() => renderTest(resource, undefined)).toThrow(error1);
-    expect(goodEffect).not.toHaveBeenCalled();
+    // Should throw aggregate error
+    expect(() =>
+      renderTest(resource, undefined),
+    ).toThrowErrorMatchingInlineSnapshot(`
+      [AggregateError: Errors during commit]
+    `);
+    expect(goodEffect).toHaveBeenCalledTimes(1);
   });
 
   it("should continue cleanup on unmount despite errors", () => {

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

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/useExhaustiveDependencies: tests */
 import { describe, it, expect, vi } from "vitest";
 import { tapEffect } from "../../hooks/tap-effect";
 import { tapState } from "../../hooks/tap-state";
@@ -232,9 +233,9 @@ describe("Lifecycle - Dependencies", () => {
 
     // Change to no deps
     useDeps = false;
-    const ctx = renderResourceFiber(resource, undefined);
 
-    expect(() => commitResourceFiber(resource, ctx)).toThrow(
+    // Error now throws during render (fail-fast validation)
+    expect(() => renderResourceFiber(resource, undefined)).toThrow(
       "tapEffect called with and without dependencies across re-renders",
     );
   });

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

@@ -54,7 +54,7 @@ describe("Lifecycle - Mount/Unmount", () => {
     renderTest(resource, undefined);
     unmountResource(resource);
 
-    expect(order).toEqual([3, 2, 1]);
+    expect(order).toEqual([1, 2, 3]);
   });
 
   it("should preserve state across re-renders", () => {
@@ -150,7 +150,7 @@ describe("Lifecycle - Mount/Unmount", () => {
 
     // Unmount
     unmountResourceFiber(resource);
-    expect(log).toEqual(["cleanup-2", "cleanup-1"]);
+    expect(log).toEqual(["cleanup-1", "cleanup-2"]);
   });
 
   it("should handle cleanup errors gracefully", () => {

package/src/__tests__/react/concurrent-mode.test.tsx

@@ -0,0 +1,243 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, act } from "@testing-library/react";
+import { Suspense, startTransition, use, useState } from "react";
+import { resource } from "../../core/resource";
+import { useResource } from "../../react/use-resource";
+import { tapState } from "../../hooks/tap-state";
+
+const ShouldNeverFallback = () => {
+  throw new Error("should never fallback");
+};
+
+describe("Concurrent Mode with useResource", () => {
+  // TODO: tapState updates are not rolled back when React discards a concurrent render
+  // This requires architectural changes to make tapState updates "tentative" until React commits
+  // For now, tapState behaves like external state (Zustand, Jotai) which has the same limitation
+  it.skip("should not commit tapState updates when render is discarded", async () => {
+    const TestResource = resource(() => {
+      return tapState(false);
+    });
+
+    let resolve: (value: number) => void;
+
+    const suspendPromise = new Promise<number>((r) => {
+      resolve = r;
+    });
+
+    function Suspender() {
+      const result = use(suspendPromise);
+      return result;
+    }
+
+    function App() {
+      const [load, setLoading] = useResource(TestResource());
+      const [message, setMessage] = useState("none");
+
+      return (
+        <>
+          <button data-testid="hello-btn" onClick={() => setMessage("hello")} />
+          <div data-testid="message">{message}</div>
+          <div data-testid="load">{load ? "true" : "false"}</div>
+
+          <button
+            data-testid="suspend-btn"
+            onClick={() => {
+              startTransition(() => {
+                setLoading(true);
+              });
+            }}
+          />
+          <Suspense fallback={<ShouldNeverFallback />}>
+            <div data-testid="value">{load ? <Suspender /> : "none"}</div>
+          </Suspense>
+        </>
+      );
+    }
+
+    render(<App />);
+    expect(screen.getByTestId("message").textContent).toBe("none");
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => screen.getByTestId("suspend-btn").click());
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => screen.getByTestId("hello-btn").click());
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("message").textContent).toBe("hello");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => resolve!(10));
+
+    expect(screen.getByTestId("value").textContent).toBe("10");
+    expect(screen.getByTestId("message").textContent).toBe("hello");
+  });
+
+  it("react should not commit tapState updates when render is discarded", async () => {
+    let resolve: (value: number) => void;
+
+    const suspendPromise = new Promise<number>((r) => {
+      resolve = r;
+    });
+
+    function Suspender() {
+      const result = use(suspendPromise);
+      return result;
+    }
+
+    function App() {
+      const [load, setLoading] = useState(false);
+      const [message, setMessage] = useState("none");
+
+      return (
+        <>
+          <button data-testid="hello-btn" onClick={() => setMessage("hello")} />
+          <div data-testid="message">{message}</div>
+          <div data-testid="load">{load ? "true" : "false"}</div>
+
+          <button
+            data-testid="suspend-btn"
+            onClick={() => {
+              startTransition(() => {
+                setLoading(true);
+              });
+            }}
+          />
+          <Suspense fallback={<ShouldNeverFallback />}>
+            <div data-testid="value">{load ? <Suspender /> : "none"}</div>
+          </Suspense>
+        </>
+      );
+    }
+
+    render(<App />);
+    expect(screen.getByTestId("message").textContent).toBe("none");
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => screen.getByTestId("suspend-btn").click());
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => screen.getByTestId("hello-btn").click());
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("message").textContent).toBe("hello");
+    expect(screen.getByTestId("load").textContent).toBe("false"); // no tearing
+
+    await act(async () => resolve!(10));
+
+    expect(screen.getByTestId("value").textContent).toBe("10");
+    expect(screen.getByTestId("message").textContent).toBe("hello");
+  });
+
+  it("should keep old UI during startTransition when resource suspends", async () => {
+    let resolve: () => void;
+    let shouldSuspend = false;
+
+    const TestResource = resource((props: { id: number }) => {
+      if (shouldSuspend) {
+        throw new Promise<void>((r) => {
+          resolve = r;
+        });
+      }
+      return { value: `content-${props.id}` };
+    });
+
+    function Inner({ id }: { id: number }) {
+      const result = useResource(TestResource({ id }));
+      return <div data-testid="result">{result.value}</div>;
+    }
+
+    function App() {
+      const [id, setId] = useState(1);
+      return (
+        <div>
+          <button
+            data-testid="btn"
+            onClick={() => {
+              shouldSuspend = true;
+              startTransition(() => setId(2));
+            }}
+          />
+          <Suspense fallback={<div data-testid="fallback">Loading</div>}>
+            <Inner id={id} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    render(<App />);
+    expect(screen.getByTestId("result").textContent).toBe("content-1");
+
+    // Click triggers transition that suspends
+    act(() => screen.getByTestId("btn").click());
+
+    // Old UI preserved during transition
+    expect(screen.getByTestId("result").textContent).toBe("content-1");
+
+    // Resolve suspension
+    shouldSuspend = false;
+    await act(async () => resolve());
+
+    // New UI shown
+    expect(screen.getByTestId("result").textContent).toBe("content-2");
+  });
+
+  it("react test", async () => {
+    let resolve: (value: number) => void;
+
+    const suspendPromise = new Promise<number>((r) => {
+      resolve = r;
+    });
+
+    function Suspender() {
+      const result = use(suspendPromise);
+      return result;
+    }
+
+    function App() {
+      const [load, setLoading] = useState(false);
+      const [message, setMessage] = useState("none");
+
+      return (
+        <>
+          <button data-testid="hello-btn" onClick={() => setMessage("hello")} />
+          <div data-testid="message">{message}</div>
+          <div data-testid="load">{load ? "true" : "false"}</div>
+
+          <button
+            data-testid="suspend-btn"
+            onClick={() => {
+              startTransition(() => {
+                setLoading(true);
+              });
+            }}
+          />
+          <Suspense fallback={<ShouldNeverFallback />}>
+            <div data-testid="value">{load ? <Suspender /> : "none"}</div>
+          </Suspense>
+        </>
+      );
+    }
+
+    render(<App />);
+    expect(screen.getByTestId("message").textContent).toBe("none");
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => screen.getByTestId("suspend-btn").click());
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("load").textContent).toBe("false");
+
+    await act(async () => screen.getByTestId("hello-btn").click());
+    expect(screen.getByTestId("value").textContent).toBe("none");
+    expect(screen.getByTestId("message").textContent).toBe("hello");
+    expect(screen.getByTestId("load").textContent).toBe("false"); // no tearing
+
+    await act(async () => resolve!(10));
+
+    expect(screen.getByTestId("value").textContent).toBe("10");
+    expect(screen.getByTestId("message").textContent).toBe("hello");
+  });
+});