@assistant-ui/tap 0.3.6 → 0.4.0

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");
+  });
+});