@assistant-ui/tap 0.6.1 → 0.7.1

package/src/__tests__/strictmode/strictmode.test.ts

@@ -1,12 +1,17 @@
+/**
+ * tap-only strict-mode behaviors: nested child resources and withKey identity.
+ * Children render inline during the parent's render (unlike React components),
+ * so these sequences have no React analog to compare against; everything that
+ * does is covered differentially in strictmode-parity.test.tsx.
+ */
+
 import { describe, it, expect } from "vitest";
 import { resource } from "../../core/resource";
 import { isDevelopment } from "../../core/helpers/env";
-import { useRef } from "../../hooks/useRef";
-import { useState } from "../../hooks/useState";
-import { useEffect } from "../../hooks/useEffect";
-import { useMemo } from "../../hooks/useMemo";
+import { useState } from "../../react-hooks/useState";
+import { useEffect } from "../../react-hooks/useEffect";
 import { useResource } from "../../hooks/useResource";
-import { createResourceRoot } from "../../core/createResourceRoot";
+import { createTapRoot } from "../../core/createTapRoot";
 import { withKey } from "../../core/withKey";
 
 describe("Strict Mode", () => {
@@ -14,209 +19,29 @@ describe("Strict Mode", () => {
     expect(isDevelopment).toBe(true);
   });
 
-  it("should persist useMemo cache across strict mode double render", () => {
-    const events: string[] = [];
-    let outerCount = 0;
-    let memoCount = 0;
-
-    const TestResource = resource(function TestResource() {
-      const idx = outerCount++;
-      events.push(`outer-${idx}`);
-
-      useMemo(() => {
-        events.push(`memo-${memoCount++}`);
-        return {};
-      }, []);
-
-      events.push(`outerend-${idx}`);
-    });
-
-    const root = createResourceRoot();
-    root.render(TestResource());
-
-    console.log("Events:", events);
-
-    // useMemo factory runs twice during first render (strict mode double-call)
-    // but should NOT run during second render (cache should persist)
-    expect(events).toEqual([
-      "outer-0",
-      "memo-0",
-      "memo-1",
-      "outerend-0",
-      "outer-1",
-      // no memo call here — cache should be reused
-      "outerend-1",
-    ]);
-  });
-
-  it("should double-invoke useMemo factory and use the first result", () => {
-    const events: string[] = [];
-    let memoCallCount = 0;
-
-    const TestResource = resource(function TestResource() {
-      const memoValue = useMemo(() => {
-        memoCallCount++;
-        events.push(`memo-${memoCallCount}`);
-        return memoCallCount;
-      }, []);
-
-      events.push(`render memoValue=${memoValue}`);
-    });
-
-    const root = createResourceRoot();
-    root.render(TestResource());
-
-    // Matches React useMemo behavior: factory is double-invoked,
-    // first result is kept
-    expect(events).toEqual([
-      "memo-1",
-      "memo-2",
-      "render memoValue=1",
-      "render memoValue=1",
-    ]);
-  });
-
-  it("should double-render on first render", () => {
-    let renderCount = 0;
-
-    const TestResource = resource(function TestResource() {
-      renderCount++;
-      return { renderCount };
-    });
-
-    const root = createResourceRoot();
-    const sub = root.render(TestResource());
-    const output = sub.getValue();
-
-    expect(renderCount).toBe(2);
-    expect(output.renderCount).toBe(2);
-  });
-
-  it("should double-call hook fns", () => {
-    let renderCount = 0;
-
-    const TestResource = resource(function TestResource() {
-      const ref = useRef(0);
-      const [count] = useState(() => {
-        renderCount++;
-        return ++ref.current;
-      });
-      const [count2] = useState(() => {
-        renderCount++;
-        return ++ref.current;
-      });
-
-      expect(count).toBe(1);
-      expect(count2).toBe(3);
-      expect(ref.current).toBe(4);
-    });
-
-    const root = createResourceRoot();
-    root.render(TestResource());
-
-    expect(renderCount).toBe(4);
-  });
-
-  it("should double-commit effects", () => {
-    const events: string[] = [];
-    const TestResource = resource(function TestResource() {
-      const ref = useRef(0);
-      ref.current++;
-      const count = ref.current;
-
-      useEffect(() => {
-        events.push("mount-1");
-
-        return () => {
-          events.push("unmount-1");
-        };
-      });
-
-      useEffect(() => {
-        events.push("mount-2");
-
-        return () => {
-          events.push("unmount-2");
-        };
-      }, []);
-
-      useEffect(() => {
-        expect(count).toBe(2);
-
-        events.push("mount-3");
-
-        return () => {
-          events.push("unmount-3");
-        };
-      }, [count]);
-    });
-
-    const root = createResourceRoot();
-    root.render(TestResource());
-
-    expect(events).toEqual([
-      "mount-1",
-      "mount-2",
-      "mount-3",
-      "unmount-1",
-      "unmount-2",
-      "unmount-3",
-      "mount-1",
-      "mount-2",
-      "mount-3",
-    ]);
-  });
-
   it("should double-render on child render", () => {
     let renderCount = 0;
 
-    const TestChildResource = resource(function TestChildResource() {
+    const useTestChildResource = () => {
       renderCount++;
       return { renderCount };
-    });
+    };
+
+    const TestChildResource = resource(useTestChildResource);
 
-    const TestResource = resource(function TestResource() {
+    const useTestResource = () => {
       return useResource(TestChildResource());
-    });
+    };
 
-    const root = createResourceRoot();
-    const sub = root.render(TestResource());
+    const sub = createTapRoot(function Root() {
+      return useTestResource();
+    });
     const output = sub.getValue();
 
     expect(renderCount).toBe(2);
     expect(output.renderCount).toBe(2);
   });
 
-  it("should double-mount before handling state updates", () => {
-    const events: string[] = [];
-    const TestResource = resource(function TestResource() {
-      const [id, setId] = useState(0);
-      events.push(`render-${id}`);
-      useEffect(() => {
-        events.push(`mount-${id}`);
-        setId(1);
-        return () => {
-          events.push(`unmount-${id}`);
-        };
-      });
-    });
-
-    const root = createResourceRoot();
-    root.render(TestResource());
-
-    expect(events).toEqual([
-      "render-0",
-      "render-0",
-      "mount-0",
-      "unmount-0",
-      "mount-0",
-      "render-1",
-      "render-1",
-      "unmount-0",
-      "mount-1",
-    ]);
-  });
-
   it("should double-render on child render change", () => {
     let renderCount = 0;
     let fnCount = 0;
@@ -228,7 +53,7 @@ describe("Strict Mode", () => {
       return renderCount;
     };
 
-    const TestChildResource = resource(function TestChildResource() {
+    const useTestChildResource = () => {
       const [fnState] = useState(() => {
         fnCount++;
         return fnCount;
@@ -244,18 +69,21 @@ describe("Strict Mode", () => {
         };
       }, [fnState, count]);
       return { renderCount, fnCount, fnState };
-    });
+    };
 
-    const TestResource = resource(function TestResource() {
+    const TestChildResource = resource(useTestChildResource);
+
+    const useTestResource = () => {
       const [id, setId] = useState(0);
       useEffect(() => {
         setId(1);
       });
       return useResource(withKey(id, TestChildResource()));
-    });
+    };
 
-    const root = createResourceRoot();
-    const sub = root.render(TestResource());
+    const sub = createTapRoot(function Root() {
+      return useTestResource();
+    });
     const output = sub.getValue();
 
     expect(renderCount).toBe(4);
@@ -267,10 +95,10 @@ describe("Strict Mode", () => {
     expect(unmountCount).toBe(3);
   });
 
-  it("should double-render on child render change", () => {
+  it("should sequence child remounts on key change", () => {
     let renderCount = 0;
     const events: string[] = [];
-    const TestChildResource = resource(function TestChildResource() {
+    const useTestChildResource = () => {
       renderCount++;
       events.push(`render-${renderCount}`);
 
@@ -285,9 +113,11 @@ describe("Strict Mode", () => {
           events.push(`unmount-${count}`);
         };
       });
-    });
+    };
 
-    const TestResource = resource(function TestResource() {
+    const TestChildResource = resource(useTestChildResource);
+
+    const useTestResource = () => {
       const [id, setId] = useState(0);
       events.push(`outer-render-${id}`);
       useEffect(() => {
@@ -299,10 +129,11 @@ describe("Strict Mode", () => {
         };
       });
       return useResource(withKey(id, TestChildResource()));
-    });
+    };
 
-    const root = createResourceRoot();
-    root.render(TestResource());
+    createTapRoot(function Root() {
+      return useTestResource();
+    });
 
     expect(events).toEqual([
       "outer-render-0",
@@ -324,12 +155,11 @@ describe("Strict Mode", () => {
       "outer-render-1",
       "render-4",
       "outer-unmount-0",
-      "outer-mount-1",
       "unmount-2",
+      "outer-mount-1",
       "mount-4",
       "unmount-4",
       "mount-4",
     ]);
-    // expect(renderCount).toBe(4);
   });
 });

package/src/__tests__/test-utils.ts

@@ -1,5 +1,4 @@
 import { createResourceFiberRoot } from "../core/helpers/root";
-import { resource } from "../core/resource";
 import {
   createResourceFiber,
   unmountResourceFiber,
@@ -7,29 +6,33 @@ import {
   commitResourceFiber,
 } from "../core/ResourceFiber";
 import type { ResourceFiber } from "../core/types";
-import { useState } from "../hooks/useState";
+import { useState } from "../react-hooks/useState";
 
 /**
  * Creates a test resource fiber for unit testing.
  * This is a low-level utility that creates a ResourceFiber directly.
  * Sets up a rerender callback that automatically re-renders when state changes.
  */
-export function createTestResource<R, P>(fn: (props: P) => R) {
+export function createTestResource<R, A extends readonly unknown[]>(
+  fn: (...args: A) => R,
+) {
   const rerenderCallback = (callback: () => boolean) => {
     if (!callback()) return;
 
     // Re-render when state changes
     if (activeResources.has(fiber)) {
-      const lastProps = propsMap.get(fiber);
-      const result = renderResourceFiber(fiber, lastProps);
+      const lastArgs = propsMap.get(fiber);
+      const result = renderResourceFiber(fiber, lastArgs);
       commitResourceFiber(fiber, result);
       lastRenderResultMap.set(fiber, result);
     }
   };
 
   const fiber = createResourceFiber(
-    resource(fn),
+    fn,
     createResourceFiberRoot(rerenderCallback),
+    undefined,
+    null,
   );
   return fiber;
 }
@@ -44,26 +47,31 @@ const lastRenderResultMap = new WeakMap<ResourceFiber<any, any>, any>();
  * - Tracks resources for cleanup
  * - Returns the current state after render
  */
-export function renderTest<R, P>(fiber: ResourceFiber<R, P>, props: P): R {
-  propsMap.set(fiber, props);
+export function renderTest<R, A extends readonly unknown[]>(
+  fiber: ResourceFiber<R, A>,
+  ...args: A
+): R {
+  propsMap.set(fiber, args);
 
   // Track resource for cleanup
   activeResources.add(fiber);
 
-  // Render with new props
-  const result = renderResourceFiber(fiber, props);
+  // Render with new args
+  const result = renderResourceFiber(fiber, args);
   commitResourceFiber(fiber, result);
   lastRenderResultMap.set(fiber, result);
 
   // Return the committed state from the result
   // This accounts for any re-renders that happened during commit
-  return result.output;
+  return result.value;
 }
 
 /**
  * Unmounts a specific resource fiber and removes it from tracking.
  */
-export function unmountResource<R, P>(fiber: ResourceFiber<R, P>) {
+export function unmountResource<R, A extends readonly unknown[]>(
+  fiber: ResourceFiber<R, A>,
+) {
   if (activeResources.has(fiber)) {
     unmountResourceFiber(fiber);
     activeResources.delete(fiber);
@@ -82,14 +90,16 @@ export function cleanupAllResources() {
  * Gets the current committed state of a resource fiber.
  * Returns the state from the last render/commit cycle.
  */
-export function getCommittedOutput<R, P>(fiber: ResourceFiber<R, P>): R {
+export function getCommittedOutput<R, A extends readonly unknown[]>(
+  fiber: ResourceFiber<R, A>,
+): R {
   const lastResult = lastRenderResultMap.get(fiber);
   if (!lastResult) {
     throw new Error(
       "No render result found for fiber. Make sure to call renderResource first.",
     );
   }
-  return lastResult.output;
+  return lastResult.value;
 }
 
 /**
@@ -104,10 +114,10 @@ export class TestSubscriber<T> {
   constructor(fiber: ResourceFiber<any, any>) {
     this.fiber = fiber;
     // Need to render once to get initial state
-    const lastProps = propsMap.get(fiber) ?? undefined;
-    const initialResult = renderResourceFiber(fiber, lastProps as any);
+    const lastArgs = propsMap.get(fiber) ?? [];
+    const initialResult = renderResourceFiber(fiber, lastArgs as any);
     commitResourceFiber(fiber, initialResult);
-    this.lastState = initialResult.output;
+    this.lastState = initialResult.value;
     lastRenderResultMap.set(fiber, initialResult);
     activeResources.add(fiber);
   }
@@ -124,23 +134,23 @@ export class TestSubscriber<T> {
  * Helper class to manage resource lifecycle in tests with explicit control.
  * Useful when you need fine-grained control over mount/unmount timing.
  */
-export class TestResourceManager<R, P> {
+export class TestResourceManager<R, A extends readonly unknown[]> {
   private isActive = false;
 
-  constructor(public fiber: ResourceFiber<R, P>) {}
+  constructor(public fiber: ResourceFiber<R, A>) {}
 
-  renderAndMount(props: P): R {
+  renderAndMount(...args: A): R {
     if (this.isActive) {
       throw new Error("Resource already active");
     }
 
     this.isActive = true;
     activeResources.add(this.fiber);
-    propsMap.set(this.fiber, props);
-    const result = renderResourceFiber(this.fiber, props);
+    propsMap.set(this.fiber, args);
+    const result = renderResourceFiber(this.fiber, args);
     commitResourceFiber(this.fiber, result);
     lastRenderResultMap.set(this.fiber, result);
-    return result.output;
+    return result.value;
   }
 
   cleanup() {

package/src/core/ResourceFiber.ts

@@ -1,30 +1,22 @@
-import type {
-  ResourceFiber,
-  RenderResult,
-  Resource,
-  ResourceFiberRoot,
-} from "./types";
+import type { ResourceFiber, RenderResult, ResourceFiberRoot } from "./types";
 import { commitAllEffects, cleanupAllEffects } from "./helpers/commit";
-import {
-  getDevStrictMode,
-  withResourceFiber,
-} from "./helpers/execution-context";
-import { callResourceFn } from "./helpers/callResourceFn";
+import { withResourceFiber } from "./helpers/execution-context";
 import { withReactDispatcher } from "./react-dispatcher";
 import { isDevelopment } from "./helpers/env";
 
-export function createResourceFiber<R, P>(
-  type: Resource<R, P>,
+export function createResourceFiber<R, A extends readonly unknown[]>(
+  hook: (...args: A) => R,
   root: ResourceFiberRoot,
   markDirty: (() => void) | undefined = undefined,
-  strictMode: "root" | "child" | null = getDevStrictMode(false),
-): ResourceFiber<R, P> {
+  strictMode: "root" | "child" | null,
+): ResourceFiber<R, A> {
   return {
-    type,
+    hook,
     root,
     markDirty,
     devStrictMode: strictMode,
     cells: [],
+    renderPendingCells: null,
     currentIndex: 0,
     renderContext: undefined,
     isFirstRender: true,
@@ -33,7 +25,9 @@ export function createResourceFiber<R, P>(
   };
 }
 
-export function unmountResourceFiber<R, P>(fiber: ResourceFiber<R, P>): void {
+export function unmountResourceFiber<R, A extends readonly unknown[]>(
+  fiber: ResourceFiber<R, A>,
+): void {
   if (!fiber.isMounted)
     throw new Error("Tried to unmount a fiber that is already unmounted");
 
@@ -41,32 +35,46 @@ export function unmountResourceFiber<R, P>(fiber: ResourceFiber<R, P>): void {
   cleanupAllEffects(fiber);
 }
 
-export function renderResourceFiber<R, P>(
-  fiber: ResourceFiber<R, P>,
-  props: P,
+export function renderResourceFiber<R, A extends readonly unknown[]>(
+  fiber: ResourceFiber<R, A>,
+  args: Readonly<A>,
 ): RenderResult {
-  const result = {
-    effectTasks: [],
-    props,
-    output: undefined as R | undefined,
-  };
+  // Discard render-phase actions left by a previous render
+  if (fiber.renderPendingCells !== null) {
+    for (const cell of fiber.renderPendingCells) cell.renderQueue = null;
+    fiber.renderPendingCells.clear();
+  }
 
-  withResourceFiber(fiber, () => {
-    fiber.renderContext = result;
-    try {
-      result.output = withReactDispatcher(() =>
-        callResourceFn(fiber.type, props),
+  let passes = 0;
+  let result: RenderResult;
+  do {
+    if (++passes > 25) {
+      throw new Error(
+        "Too many re-renders. tap limits the number of renders to prevent " +
+          "an infinite loop.",
       );
-    } finally {
-      fiber.renderContext = undefined;
     }
-  });
+
+    result = {
+      effectTasks: [],
+      value: undefined as R | undefined,
+    };
+
+    withResourceFiber(fiber, () => {
+      fiber.renderContext = result;
+      try {
+        result.value = withReactDispatcher(() => fiber.hook(...args));
+      } finally {
+        fiber.renderContext = undefined;
+      }
+    });
+  } while ((fiber.renderPendingCells?.size ?? 0) > 0);
 
   return result;
 }
 
-export function commitResourceFiber<R, P>(
-  fiber: ResourceFiber<R, P>,
+export function commitResourceFiber<R, A extends readonly unknown[]>(
+  fiber: ResourceFiber<R, A>,
   result: RenderResult,
 ): void {
   fiber.isMounted = true;

package/src/core/createTapRoot.ts

@@ -0,0 +1,45 @@
+import {
+  createResourceFiber,
+  unmountResourceFiber,
+  renderResourceFiber,
+  commitResourceFiber,
+} from "./ResourceFiber";
+import { useTapRoot } from "../hooks/useTapRoot";
+import { isDevelopment } from "./helpers/env";
+import { flushTapSync, UpdateScheduler } from "./scheduler";
+import { createResourceFiberRoot } from "./helpers/root";
+
+export const createTapRoot = <R>(
+  render: () => R,
+): useTapRoot.Root<R> & { unmount: () => void } => {
+  const fiber = createResourceFiber(
+    useTapRoot,
+    createResourceFiberRoot((callback) => {
+      new UpdateScheduler(() => {
+        if (callback()) {
+          throw new Error("Unexpected rerender of createTapRoot outer fiber");
+        }
+        return false;
+      }).markDirty();
+    }),
+    undefined,
+    isDevelopment ? "root" : null,
+  );
+
+  // In strict mode, render twice to detect side effects
+  if (isDevelopment && fiber.devStrictMode === "root") {
+    void renderResourceFiber(fiber, [render]);
+  }
+
+  const rendered = renderResourceFiber(fiber, [render]);
+  flushTapSync(() => commitResourceFiber(fiber, rendered));
+
+  const root = rendered.value as useTapRoot.Root<R>;
+
+  return {
+    ...root,
+    unmount: () => {
+      unmountResourceFiber(fiber);
+    },
+  };
+};

package/src/core/helpers/commit.ts

@@ -5,7 +5,15 @@ export function commitAllEffects(renderResult: RenderResult): void {
 
   for (const task of renderResult.effectTasks) {
     try {
-      task();
+      task.cleanup();
+    } catch (error) {
+      errors.push(error);
+    }
+  }
+
+  for (const task of renderResult.effectTasks) {
+    try {
+      task.setup();
     } catch (error) {
       errors.push(error);
     }
@@ -23,7 +31,9 @@ export function commitAllEffects(renderResult: RenderResult): void {
   }
 }
 
-export function cleanupAllEffects<R, P>(executionContext: ResourceFiber<R, P>) {
+export function cleanupAllEffects<R, A extends readonly unknown[]>(
+  executionContext: ResourceFiber<R, A>,
+) {
   const errors: unknown[] = [];
   for (const cell of executionContext.cells) {
     if (cell?.type === "effect") {