@assistant-ui/tap 0.4.5 → 0.5.0

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { createResource } from "../../core/createResource";
+import { createResourceRoot } from "../../core/createResourceRoot";
 import { resource } from "../../core/resource";
 
 describe("ResourceHandle - Basic Usage", () => {
@@ -10,41 +10,44 @@ describe("ResourceHandle - Basic Usage", () => {
         propsUsed: props,
       };
     });
-    const handle = createResource(TestResource(5));
+    const root = createResourceRoot();
+    const sub = root.render(TestResource(5));
 
-    // The handle provides a const API
-    expect(typeof handle.getValue).toBe("function");
-    expect(typeof handle.subscribe).toBe("function");
-    expect(typeof handle.render).toBe("function");
+    // The subscribable provides getValue and subscribe
+    expect(typeof sub.getValue).toBe("function");
+    expect(typeof sub.subscribe).toBe("function");
+    expect(typeof root.render).toBe("function");
 
     // Initial state
-    expect(handle.getValue().value).toBe(10);
-    expect(handle.getValue().propsUsed).toBe(5);
+    expect(sub.getValue().value).toBe(10);
+    expect(sub.getValue().propsUsed).toBe(5);
   });
 
   it("should allow updating props", () => {
     const TestResource = resource((props: { multiplier: number }) => {
       return { result: 10 * props.multiplier };
     });
-    const handle = createResource(TestResource({ multiplier: 2 }));
+    const root = createResourceRoot();
+    const sub = root.render(TestResource({ multiplier: 2 }));
 
     // Initial state
-    expect(handle.getValue().result).toBe(20);
+    expect(sub.getValue().result).toBe(20);
 
     // Can call render to update props
-    expect(() => handle.render(TestResource({ multiplier: 3 }))).not.toThrow();
+    expect(() => root.render(TestResource({ multiplier: 3 }))).not.toThrow();
   });
 
   it("should support subscribing and unsubscribing", () => {
     const TestResource = resource(() => ({ timestamp: Date.now() }));
-    const handle = createResource(TestResource());
+    const root = createResourceRoot();
+    const sub = root.render(TestResource());
 
     const subscriber1 = vi.fn();
     const subscriber2 = vi.fn();
 
     // Can subscribe multiple callbacks
-    const unsub1 = handle.subscribe(subscriber1);
-    const unsub2 = handle.subscribe(subscriber2);
+    const unsub1 = sub.subscribe(subscriber1);
+    const unsub2 = sub.subscribe(subscriber2);
 
     // Can unsubscribe individually
     expect(typeof unsub1).toBe("function");

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

@@ -0,0 +1,200 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { tapReducer } from "../../hooks/tap-reducer";
+import { tapEffect } from "../../hooks/tap-effect";
+import {
+  createTestResource,
+  renderTest,
+  cleanupAllResources,
+  waitForNextTick,
+  getCommittedOutput,
+} from "../test-utils";
+
+describe("tapReducer - Basic Functionality", () => {
+  afterEach(() => {
+    cleanupAllResources();
+  });
+
+  describe("Initialization", () => {
+    it("should initialize with direct value", () => {
+      const reducer = (state: number, action: number) => state + action;
+
+      const testFiber = createTestResource(() => {
+        const [count] = tapReducer(reducer, 0);
+        return count;
+      });
+
+      const result = renderTest(testFiber, undefined);
+      expect(result).toBe(0);
+    });
+
+    it("should initialize with init function", () => {
+      let initCalled = 0;
+      const reducer = (state: number, action: number) => state + action;
+
+      const testFiber = createTestResource(() => {
+        const [count] = tapReducer(reducer, 10, (arg) => {
+          initCalled++;
+          return arg * 2;
+        });
+        return count;
+      });
+
+      const result = renderTest(testFiber, undefined);
+      expect(result).toBe(20);
+      expect(initCalled).toBe(1);
+
+      // Re-render should not call init again
+      renderTest(testFiber, undefined);
+      expect(initCalled).toBe(1);
+    });
+  });
+
+  describe("Dispatch and re-render", () => {
+    it("should dispatch actions and trigger re-render", async () => {
+      type Action = { type: "increment" } | { type: "decrement" };
+      const reducer = (state: number, action: Action) => {
+        switch (action.type) {
+          case "increment":
+            return state + 1;
+          case "decrement":
+            return state - 1;
+        }
+      };
+
+      let dispatchFn: ((action: Action) => void) | null = null;
+
+      const testFiber = createTestResource(() => {
+        const [count, dispatch] = tapReducer(reducer, 0);
+
+        tapEffect(() => {
+          dispatchFn = dispatch;
+        });
+
+        return count;
+      });
+
+      renderTest(testFiber, undefined);
+      expect(getCommittedOutput(testFiber)).toBe(0);
+
+      dispatchFn!({ type: "increment" });
+      await waitForNextTick();
+      expect(getCommittedOutput(testFiber)).toBe(1);
+
+      dispatchFn!({ type: "increment" });
+      await waitForNextTick();
+      expect(getCommittedOutput(testFiber)).toBe(2);
+
+      dispatchFn!({ type: "decrement" });
+      await waitForNextTick();
+      expect(getCommittedOutput(testFiber)).toBe(1);
+    });
+  });
+
+  describe("Same-state bailout", () => {
+    it("should not re-render when reducer returns same state (Object.is)", async () => {
+      let renderCount = 0;
+      const reducer = (state: number, action: number) =>
+        action === 0 ? state : state + action;
+
+      let dispatchFn: ((action: number) => void) | null = null;
+
+      const testFiber = createTestResource(() => {
+        renderCount++;
+        const [count, dispatch] = tapReducer(reducer, 42);
+
+        tapEffect(() => {
+          dispatchFn = dispatch;
+        });
+
+        return count;
+      });
+
+      renderTest(testFiber, undefined);
+      expect(renderCount).toBe(1);
+
+      // Dispatch action that returns same state
+      dispatchFn!(0);
+      await waitForNextTick();
+      expect(renderCount).toBe(1);
+    });
+  });
+
+  describe("Reducer function updates", () => {
+    it("should use latest reducer reference", async () => {
+      let multiplier = 1;
+      let dispatchFn: ((action: number) => void) | null = null;
+
+      const testFiber = createTestResource(() => {
+        const reducer = (state: number, action: number) =>
+          state + action * multiplier;
+        const [count, dispatch] = tapReducer(reducer, 0);
+
+        tapEffect(() => {
+          dispatchFn = dispatch;
+        });
+
+        return count;
+      });
+
+      renderTest(testFiber, undefined);
+      expect(getCommittedOutput(testFiber)).toBe(0);
+
+      // Dispatch with multiplier=1
+      dispatchFn!(5);
+      await waitForNextTick();
+      expect(getCommittedOutput(testFiber)).toBe(5);
+
+      // Change multiplier and dispatch
+      multiplier = 10;
+      renderTest(testFiber, undefined); // re-render to update reducer
+      dispatchFn!(5);
+      await waitForNextTick();
+      expect(getCommittedOutput(testFiber)).toBe(55); // 5 + 5*10
+    });
+  });
+
+  describe("Multiple dispatches", () => {
+    it("should handle multiple dispatches correctly", async () => {
+      const reducer = (state: number, action: number) => state + action;
+      let dispatchFn: ((action: number) => void) | null = null;
+
+      const testFiber = createTestResource(() => {
+        const [count, dispatch] = tapReducer(reducer, 0);
+
+        tapEffect(() => {
+          dispatchFn = dispatch;
+        });
+
+        return count;
+      });
+
+      renderTest(testFiber, undefined);
+      expect(getCommittedOutput(testFiber)).toBe(0);
+
+      // Multiple dispatches
+      dispatchFn!(1);
+      dispatchFn!(2);
+      dispatchFn!(3);
+      await waitForNextTick();
+      expect(getCommittedOutput(testFiber)).toBe(6);
+    });
+  });
+
+  describe("Dispatch identity stability", () => {
+    it("should return same dispatch reference across renders", () => {
+      const reducer = (state: number, action: number) => state + action;
+      const dispatches: ((action: number) => void)[] = [];
+
+      const testFiber = createTestResource(() => {
+        const [count, dispatch] = tapReducer(reducer, 0);
+        dispatches.push(dispatch);
+        return count;
+      });
+
+      renderTest(testFiber, undefined);
+      renderTest(testFiber, undefined);
+
+      expect(dispatches[0]).toBe(dispatches[1]);
+    });
+  });
+});

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

@@ -10,10 +10,7 @@ const ShouldNeverFallback = () => {
 };
 
 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 () => {
+  it("should not commit tapState updates when render is discarded", async () => {
     const TestResource = resource(() => {
       return tapState(false);
     });

package/src/__tests__/strictmode/react-strictmode-behavior.test.tsx

@@ -5,7 +5,15 @@
 
 import { describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
-import { StrictMode, useState, useEffect, useMemo, useRef } from "react";
+import { act } from "react";
+import {
+  StrictMode,
+  useState,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from "react";
 
 describe("React Strict Mode Behavior Verification", () => {
   describe("Test 1: Effect + setState behavior in strict mode", () => {
@@ -489,7 +497,212 @@ describe("React Strict Mode Behavior Verification", () => {
     });
   });
 
-  describe("Test 5: setState in effect - strict mode edge cases", () => {
+  describe("Test 5: useMemo strict mode behavior", () => {
+    it("should double-invoke useMemo factory and use the first result", () => {
+      const events: string[] = [];
+      let memoCallCount = 0;
+
+      function TestComponent() {
+        const memoValue = useMemo(() => {
+          memoCallCount++;
+          events.push(`memo-${memoCallCount}`);
+          return memoCallCount;
+        }, []);
+
+        events.push(`render memoValue=${memoValue}`);
+
+        return <div>{memoValue}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      expect(events).toEqual([
+        "memo-1",
+        "memo-2",
+        "render memoValue=1",
+        "render memoValue=1",
+      ]);
+    });
+  });
+
+  describe("Test 6: useReducer strict mode behavior", () => {
+    it("should double-invoke useReducer initializer and use the first result", () => {
+      const events: string[] = [];
+      let initCallCount = 0;
+
+      function TestComponent() {
+        const [state] = useReducer(
+          (s: number, a: number) => s + a,
+          0,
+          (arg) => {
+            initCallCount++;
+            events.push(`init-${initCallCount}`);
+            return arg + initCallCount * 10;
+          },
+        );
+
+        events.push(`render state=${state}`);
+
+        return <div>{state}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      expect(events).toEqual([
+        "init-1",
+        "init-2",
+        "render state=10",
+        "render state=10",
+      ]);
+    });
+
+    it("should double-invoke useReducer reducer on dispatch and use the first result", () => {
+      const events: string[] = [];
+      let reducerCallCount = 0;
+
+      function TestComponent() {
+        const [state, dispatch] = useReducer((s: number, _a: number) => {
+          reducerCallCount++;
+          const result = reducerCallCount * 100;
+          events.push(`reducer-${reducerCallCount} state=${s} -> ${result}`);
+          return result;
+        }, 0);
+
+        events.push(`render state=${state}`);
+
+        useEffect(() => {
+          if (state === 0) {
+            events.push("dispatch");
+            dispatch(1);
+          }
+        }, [state]);
+
+        return <div>{state}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // React behavior: reducer is called 4 times (2 dispatches × 2 strict mode double-calls)
+      // Dispatch #1 (effect mount): reducer called twice, SECOND result (200) kept
+      // Dispatch #2 (effect remount): reducer called twice, SECOND result (400) kept
+      // Note: this is opposite to useMemo/useState which keep the FIRST result!
+      expect(reducerCallCount).toBe(4);
+      expect(events).toEqual([
+        "render state=0",
+        "render state=0",
+        "dispatch",
+        "dispatch",
+        "reducer-1 state=0 -> 100",
+        "reducer-2 state=0 -> 200",
+        "reducer-3 state=200 -> 300",
+        "reducer-4 state=200 -> 400",
+        "render state=400",
+        "render state=400",
+      ]);
+    });
+  });
+
+  describe("Test 7: useState/useReducer dispatch double-invoke (isolated from effects)", () => {
+    it("should double-invoke useState updater and use the first result", () => {
+      const events: string[] = [];
+      let updaterCallCount = 0;
+      let setCountRef: ((fn: (prev: number) => number) => void) | null = null;
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        setCountRef = setCount;
+
+        events.push(`render count=${count}`);
+
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      events.length = 0;
+      updaterCallCount = 0;
+
+      act(() => {
+        setCountRef!((prev) => {
+          updaterCallCount++;
+          const result = updaterCallCount * 100;
+          events.push(`updater-${updaterCallCount} prev=${prev} -> ${result}`);
+          return result;
+        });
+      });
+
+      // useState updater is double-invoked, FIRST result kept
+      // (same as useMemo/useState init — NOT like useReducer dispatch!)
+      expect(updaterCallCount).toBe(2);
+      expect(events).toEqual([
+        "updater-1 prev=0 -> 100",
+        "updater-2 prev=0 -> 200",
+        "render count=100",
+        "render count=100",
+      ]);
+    });
+
+    it("should double-invoke useReducer reducer and use the first result", () => {
+      const events: string[] = [];
+      let reducerCallCount = 0;
+      let dispatchRef: ((a: number) => void) | null = null;
+
+      function TestComponent() {
+        const [state, dispatch] = useReducer((s: number, _a: number) => {
+          reducerCallCount++;
+          const result = reducerCallCount * 100;
+          events.push(`reducer-${reducerCallCount} state=${s} -> ${result}`);
+          return result;
+        }, 0);
+        dispatchRef = dispatch;
+
+        events.push(`render state=${state}`);
+
+        return <div>{state}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      events.length = 0;
+      reducerCallCount = 0;
+
+      act(() => {
+        dispatchRef!(1);
+      });
+
+      // useReducer reducer is double-invoked, SECOND result kept!
+      // This differs from useState updater which keeps the FIRST result.
+      expect(reducerCallCount).toBe(2);
+      expect(events).toEqual([
+        "reducer-1 state=0 -> 100",
+        "reducer-2 state=0 -> 200",
+        "render state=200",
+        "render state=200",
+      ]);
+    });
+  });
+
+  describe("Test 8: setState in effect - strict mode edge cases", () => {
     it("should verify which setState is applied when effect calls setState only on first mount", () => {
       const events: string[] = [];
       let effectRunCount = 0;

package/src/__tests__/strictmode/react-strictmode-rerender-sources.test.tsx

@@ -389,4 +389,81 @@ describe("React Strict Mode - Rerender Sources", () => {
       ]);
     });
   });
+
+  describe("Source 9: Effect with dependencies calling setState (derived state)", () => {
+    it("should handle effect with dependencies and setState", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count] = useState(0);
+        const [doubled, setDoubled] = useState(0);
+        events.push(`render count=${count} doubled=${doubled}`);
+
+        useEffect(() => {
+          events.push(`effect count=${count}`);
+          setDoubled(count * 2);
+          return () => {
+            events.push(`cleanup count=${count}`);
+          };
+        }, [count]);
+
+        return <div>{doubled}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // setDoubled(0*2) = setDoubled(0) is a no-op, so no extra render
+      expect(events).toEqual([
+        "render count=0 doubled=0",
+        "render count=0 doubled=0",
+        "effect count=0",
+        "cleanup count=0",
+        "effect count=0",
+      ]);
+    });
+
+    it("should handle effect with dependencies and setState after state change", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        const [doubled, setDoubled] = useState(0);
+        events.push(`render count=${count} doubled=${doubled}`);
+
+        useEffect(() => {
+          events.push(`effect count=${count}`);
+          setDoubled(count * 2);
+          return () => {
+            events.push(`cleanup count=${count}`);
+          };
+        }, [count]);
+
+        return <button onClick={() => setCount((c) => c + 1)}>Click</button>;
+      }
+
+      const { getByRole } = render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      events.length = 0;
+
+      fireEvent.click(getByRole("button"));
+
+      // Double-render with new count, effect sets doubled=2, triggers another double-render
+      expect(events).toEqual([
+        "render count=1 doubled=0",
+        "render count=1 doubled=0",
+        "cleanup count=0",
+        "effect count=1",
+        "render count=1 doubled=2",
+        "render count=1 doubled=2",
+      ]);
+    });
+  });
 });