@assistant-ui/tap 0.3.6 → 0.4.2

package/src/hooks/tap-effect.ts

@@ -1,35 +1,12 @@
-import { getCurrentResourceFiber } from "../core/execution-context";
 import { Cell } from "../core/types";
+import { depsShallowEqual } from "./utils/depsShallowEqual";
+import { tapHook, registerRenderMountTask } from "./utils/tapHook";
 
-function getEffectCell(): number {
-  const fiber = getCurrentResourceFiber();
-  const index = fiber.currentIndex++;
-
-  // Check if we're trying to use more hooks than in previous renders
-  if (!fiber.isFirstRender && index >= fiber.cells.length) {
-    throw new Error(
-      "Rendered more hooks than during the previous render. " +
-        "Hooks must be called in the exact same order in every render.",
-    );
-  }
-
-  if (!fiber.cells[index]) {
-    // Create the effect cell
-    const cell: Cell & { type: "effect" } = {
-      type: "effect",
-      mounted: false,
-    };
-
-    fiber.cells[index] = cell;
-  }
-
-  const cell = fiber.cells[index];
-  if (cell.type !== "effect") {
-    throw new Error("Hook order changed between renders");
-  }
-
-  return index;
-}
+const newEffect = (): Cell & { type: "effect" } => ({
+  type: "effect",
+  cleanup: undefined,
+  deps: null, // null means the effect has never been run
+});
 
 export namespace tapEffect {
   export type Destructor = () => void;
@@ -45,15 +22,51 @@ export function tapEffect(
   effect: tapEffect.EffectCallback,
   deps?: readonly unknown[],
 ): void {
-  const fiber = getCurrentResourceFiber();
+  const cell = tapHook("effect", newEffect);
+
+  if (deps && cell.deps && depsShallowEqual(cell.deps, deps)) return;
+  if (cell.deps !== null && !!deps !== !!cell.deps)
+    throw new Error(
+      "tapEffect called with and without dependencies across re-renders",
+    );
+
+  registerRenderMountTask(() => {
+    const errors: unknown[] = [];
+
+    try {
+      cell.cleanup?.();
+    } catch (error) {
+      errors.push(error);
+    } finally {
+      cell.cleanup = undefined;
+    }
+
+    try {
+      const cleanup = effect();
+
+      if (cleanup !== undefined && typeof cleanup !== "function") {
+        throw new Error(
+          "An effect function must either return a cleanup function or nothing. " +
+            `Received: ${typeof cleanup}`,
+        );
+      }
+
+      cell.cleanup = cleanup;
+    } catch (error) {
+      errors.push(error);
+    }
 
-  // Reserve a spot for the effect cell and get its index
-  const cellIndex = getEffectCell();
+    cell.deps = deps;
 
-  // Add task to render context for execution in commit phase
-  fiber.renderContext!.commitTasks.push({
-    effect,
-    deps,
-    cellIndex,
+    if (errors.length > 0) {
+      if (errors.length === 1) {
+        throw errors[0];
+      } else {
+        for (const error of errors) {
+          console.error(error);
+        }
+        throw new AggregateError(errors, "Errors during commit");
+      }
+    }
   });
 }

package/src/hooks/tap-inline-resource.ts

@@ -1,8 +1,8 @@
-import { ExtractResourceOutput, ResourceElement } from "../core/types";
+import { ExtractResourceReturnType, ResourceElement } from "../core/types";
 import { callResourceFn } from "../core/callResourceFn";
 
 export function tapInlineResource<E extends ResourceElement<any, any>>(
   element: E,
-): ExtractResourceOutput<E> {
+): ExtractResourceReturnType<E> {
   return callResourceFn(element.type, element.props);
 }

package/src/hooks/tap-memo.ts

@@ -1,9 +1,18 @@
+import { isDevelopment } from "../core/env";
+import { getCurrentResourceFiber } from "../core/execution-context";
 import { tapRef } from "./tap-ref";
-import { depsShallowEqual } from "./depsShallowEqual";
+import { depsShallowEqual } from "./utils/depsShallowEqual";
 
 export const tapMemo = <T>(fn: () => T, deps: readonly unknown[]) => {
   const dataRef = tapRef<{ value: T; deps: readonly unknown[] }>();
   if (!dataRef.current) {
+    if (isDevelopment) {
+      const fiber = getCurrentResourceFiber();
+      if (fiber.devStrictMode) {
+        void fn();
+      }
+    }
+
     dataRef.current = { value: fn(), deps };
   }
 

package/src/hooks/tap-resource.ts

@@ -1,4 +1,4 @@
-import { ExtractResourceOutput, ResourceElement } from "../core/types";
+import { ExtractResourceReturnType, ResourceElement } from "../core/types";
 import { tapEffect } from "./tap-effect";
 import {
   createResourceFiber,
@@ -8,37 +8,41 @@ import {
 } from "../core/ResourceFiber";
 import { tapMemo } from "./tap-memo";
 import { tapState } from "./tap-state";
+import { tapConst } from "./tap-const";
 
 export function tapResource<E extends ResourceElement<any, any>>(
   element: E,
-): ExtractResourceOutput<E>;
+): ExtractResourceReturnType<E>;
 export function tapResource<E extends ResourceElement<any, any>>(
   element: E,
-  deps: readonly unknown[],
-): ExtractResourceOutput<E>;
+  propsDeps: readonly unknown[],
+): ExtractResourceReturnType<E>;
 export function tapResource<E extends ResourceElement<any, any>>(
   element: E,
-  deps?: readonly unknown[],
-): ExtractResourceOutput<E> {
-  const [stateVersion, rerender] = tapState({});
-  const fiber = tapMemo(
-    () => createResourceFiber(element.type, () => rerender({})),
-    [element.type],
-  );
+  propsDeps?: readonly unknown[],
+): ExtractResourceReturnType<E> {
+  const [version, setVersion] = tapState(0);
+  const rerender = tapConst(() => () => setVersion((v) => v + 1), []);
 
-  const props = deps ? tapMemo(() => element.props, deps) : element.props;
-  const result = tapMemo(
-    () => renderResourceFiber(fiber, props),
-    [fiber, props, stateVersion],
-  );
+  const fiber = tapMemo(() => {
+    void element.key;
+    return createResourceFiber(element.type, (callback) => {
+      if (callback()) rerender();
+    });
+  }, [element.type, element.key]);
 
-  tapEffect(() => {
-    return () => unmountResourceFiber(fiber);
-  }, [fiber]);
+  const result = propsDeps
+    ? // biome-ignore lint/correctness/useExhaustiveDependencies: user provided deps instead of prop identity
+      tapMemo(
+        () => renderResourceFiber(fiber, element.props),
+        [fiber, ...propsDeps, version],
+      )
+    : renderResourceFiber(fiber, element.props);
 
+  tapEffect(() => () => unmountResourceFiber(fiber), [fiber]);
   tapEffect(() => {
     commitResourceFiber(fiber, result);
   }, [fiber, result]);
 
-  return result.state;
+  return result.output;
 }

package/src/hooks/tap-resources.ts

@@ -1,5 +1,5 @@
 import {
-  ExtractResourceOutput,
+  ExtractResourceReturnType,
   RenderResult,
   ResourceElement,
   ResourceFiber,
@@ -14,99 +14,122 @@ import {
   renderResourceFiber,
   commitResourceFiber,
 } from "../core/ResourceFiber";
-
-export type TapResourcesRenderResult<R, K extends string | number | symbol> = {
-  add: [K, ResourceFiber<R, any>][];
-  remove: K[];
-  commit: [K, RenderResult][];
-  return: Record<K, R>;
+import { tapConst } from "./tap-const";
+
+type FiberState = {
+  fiber: ResourceFiber<unknown, unknown>;
+  next:
+    | RenderResult
+    | [ResourceFiber<unknown, unknown>, RenderResult]
+    | "delete";
 };
 
-export function tapResources<
-  M extends Record<string | number | symbol, any>,
-  E extends ResourceElement<any, any>,
->(
-  map: M,
-  getElement: (t: M[keyof M], key: keyof M) => E,
-  getElementDeps: any[],
-): { [K in keyof M]: ExtractResourceOutput<E> } {
-  type R = ExtractResourceOutput<E>;
+export function tapResources<E extends ResourceElement<any, any>>(
+  getElements: () => readonly E[],
+  getElementsDeps?: readonly unknown[],
+): ExtractResourceReturnType<E>[] {
   const [version, setVersion] = tapState(0);
-  const rerender = tapCallback(() => setVersion((v) => v + 1), []);
+  const rerender = tapConst(() => () => setVersion((v) => v + 1), []);
 
-  type K = keyof M;
-  const [fibers] = tapState(() => new Map<K, ResourceFiber<R, any>>());
+  const fibers = tapConst(() => new Map<string | number, FiberState>(), []);
 
-  const getElementMemo = tapMemo(() => getElement, getElementDeps);
+  const getElementsMemo = getElementsDeps
+    ? // biome-ignore lint/correctness/useExhaustiveDependencies: library code
+      tapCallback(getElements, getElementsDeps)
+    : getElements;
 
   // Process each element
 
-  const results = tapMemo(() => {
-    const results: TapResourcesRenderResult<R, K> = {
-      remove: [],
-      add: [],
-      commit: [],
-      return: {} as Record<K, R>,
-    };
-
-    // Create/update fibers and render
-    for (const key in map) {
-      const value = map[key as K];
-      const element = getElementMemo(value, key);
+  const res = tapMemo(() => {
+    void version;
 
-      let fiber = fibers.get(key);
+    const elementsArray = getElementsMemo();
+    const seenKeys = new Set<string | number>();
+    const results: any[] = [];
+    let newCount = 0;
 
-      // Create new fiber if needed or type changed
-      if (!fiber || fiber.resource !== element.type) {
-        if (fiber) results.remove.push(key);
-        fiber = createResourceFiber(element.type, rerender);
-        results.add.push([key, fiber]);
+    // Create/update fibers and render
+    for (let i = 0; i < elementsArray.length; i++) {
+      const element = elementsArray[i]!;
+
+      const elementKey = element.key;
+      if (elementKey === undefined) {
+        throw new Error(
+          `tapResources did not provide a key for array at index ${i}`,
+        );
       }
 
-      // Render with current props
-      const renderResult = renderResourceFiber(fiber, element.props);
-      results.commit.push([key, renderResult]);
-
-      results.return[key] = renderResult.state;
+      if (seenKeys.has(elementKey))
+        throw new Error(`Duplicate key ${elementKey} in tapResources`);
+      seenKeys.add(elementKey);
+
+      let state = fibers.get(elementKey);
+      if (!state) {
+        const fiber = createResourceFiber(element.type, (callback) => {
+          if (callback()) rerender();
+        });
+        const result = renderResourceFiber(fiber, element.props);
+        state = {
+          fiber,
+          next: result,
+        };
+        newCount++;
+        fibers.set(elementKey, state);
+        results.push(result.output);
+      } else if (state.fiber.type !== element.type) {
+        const fiber = createResourceFiber(element.type, (callback) => {
+          if (callback()) rerender();
+        });
+        const result = renderResourceFiber(fiber, element.props);
+        state.next = [fiber, result];
+        results.push(result.output);
+      } else {
+        state.next = renderResourceFiber(state.fiber, element.props);
+        results.push(state.next.output);
+      }
     }
 
     // Clean up removed fibers (only if there might be stale ones)
-    if (
-      fibers.size >
-      results.commit.length - results.add.length + results.remove.length
-    ) {
+    if (fibers.size > results.length - newCount) {
       for (const key of fibers.keys()) {
-        if (!(key in map)) {
-          results.remove.push(key);
+        if (!seenKeys.has(key)) {
+          fibers.get(key)!.next = "delete";
         }
       }
     }
 
     return results;
-  }, [map, getElementMemo, version]);
+  }, [getElementsMemo, version]);
 
   // Cleanup on unmount
   tapEffect(() => {
     return () => {
       for (const key of fibers.keys()) {
-        unmountResourceFiber(fibers.get(key)!);
-        fibers.delete(key);
+        const fiber = fibers.get(key)!.fiber;
+        unmountResourceFiber(fiber);
       }
     };
   }, []);
 
   tapEffect(() => {
-    for (const key of results.remove) {
-      unmountResourceFiber(fibers.get(key)!);
-      fibers.delete(key);
-    }
-    for (const [key, fiber] of results.add) {
-      fibers.set(key, fiber);
-    }
-    for (const [key, result] of results.commit) {
-      commitResourceFiber(fibers.get(key)!, result);
+    res; // as a performance optimization, we only run if the results have changed
+
+    for (const [key, state] of fibers.entries()) {
+      if (state.next === "delete") {
+        if (state.fiber.isMounted) {
+          unmountResourceFiber(state.fiber);
+        }
+
+        fibers.delete(key);
+      } else if (Array.isArray(state.next)) {
+        unmountResourceFiber(state.fiber);
+        state.fiber = state.next[0];
+        commitResourceFiber(state.fiber, state.next[1]);
+      } else {
+        commitResourceFiber(state.fiber, state.next);
+      }
     }
-  }, [results]);
+  }, [res]);
 
-  return results.return;
+  return res;
 }

package/src/hooks/tap-state.ts

@@ -1,3 +1,4 @@
+import { isDevelopment } from "../core/env";
 import { getCurrentResourceFiber } from "../core/execution-context";
 import { Cell, ResourceFiber } from "../core/types";
 
@@ -5,17 +6,22 @@ export namespace tapState {
   export type StateUpdater<S> = S | ((prev: S) => S);
 }
 
-const rerender = (fiber: ResourceFiber<any, any>) => {
+const dispatchOnFiber = (
+  fiber: ResourceFiber<any, any>,
+  callback: () => boolean,
+) => {
   if (fiber.renderContext) {
     throw new Error("Resource updated during render");
   }
 
   if (fiber.isMounted) {
     // Only schedule rerender if currently mounted
-    fiber.scheduleRerender();
+    fiber.dispatchUpdate(callback);
   } else if (fiber.isNeverMounted) {
     throw new Error("Resource updated before mount");
   }
+
+  // TODO mark dirty
 };
 
 function getStateCell<T>(
@@ -32,39 +38,56 @@ function getStateCell<T>(
     );
   }
 
-  if (!fiber.cells[index]) {
-    // Initialize the value immediately
-    const value =
-      typeof initialValue === "function"
-        ? (initialValue as () => T)()
-        : initialValue;
-
-    const cell: Cell & { type: "state" } = {
-      type: "state",
-      value,
-      set: (updater: tapState.StateUpdater<T>) => {
-        const currentValue = cell.value;
+  const cell = fiber.cells[index];
+  if (cell) {
+    if (cell.type !== "state")
+      throw new Error("Hook order changed between renders");
+
+    return cell as Cell & { type: "state" };
+  }
+
+  const value =
+    typeof initialValue === "function"
+      ? (initialValue as () => T)()
+      : initialValue;
+
+  if (
+    isDevelopment &&
+    fiber.devStrictMode &&
+    typeof initialValue === "function"
+  ) {
+    void (initialValue as () => T)();
+  }
+
+  const newCell: Cell & { type: "state" } = {
+    type: "state",
+    value,
+    set: (updater: tapState.StateUpdater<T>) => {
+      dispatchOnFiber(fiber, () => {
+        const currentValue = newCell.value;
         const nextValue =
           typeof updater === "function"
             ? (updater as (prev: T) => T)(currentValue)
             : updater;
 
-        if (!Object.is(currentValue, nextValue)) {
-          cell.value = nextValue;
-          rerender(fiber);
+        if (
+          isDevelopment &&
+          fiber.devStrictMode &&
+          typeof updater === "function"
+        ) {
+          void (updater as (prev: T) => T)(currentValue);
         }
-      },
-    };
 
-    fiber.cells[index] = cell;
-  }
+        if (Object.is(currentValue, nextValue)) return false;
 
-  const cell = fiber.cells[index];
-  if (cell.type !== "state") {
-    throw new Error("Hook order changed between renders");
-  }
+        newCell.value = nextValue;
+        return true;
+      });
+    },
+  };
 
-  return cell as Cell & { type: "state" };
+  fiber.cells[index] = newCell;
+  return newCell;
 }
 
 export function tapState<S = undefined>(): [

package/src/hooks/utils/tapHook.ts

@@ -0,0 +1,35 @@
+import { getCurrentResourceFiber } from "../../core/execution-context";
+import { Cell } from "../../core/types";
+
+export const tapHook = <T extends "effect" | "memo">(
+  type: T,
+  init: () => Cell,
+): Cell & { type: T } => {
+  const fiber = getCurrentResourceFiber();
+  const index = fiber.currentIndex++;
+
+  if (!fiber.isFirstRender && index >= fiber.cells.length) {
+    // Check if we're trying to use more hooks than in previous renders
+    throw new Error(
+      "Rendered more hooks than during the previous render. " +
+        "Hooks must be called in the exact same order in every render.",
+    );
+  }
+
+  let cell = fiber.cells[index];
+  if (!cell) {
+    cell = init();
+    fiber.cells[index] = cell;
+  }
+
+  if (cell.type !== type) {
+    throw new Error("Hook order changed between renders");
+  }
+
+  return cell as Cell & { type: T };
+};
+
+export const registerRenderMountTask = (task: () => void) => {
+  const fiber = getCurrentResourceFiber();
+  fiber.renderContext!.commitTasks.push(task);
+};

package/src/index.ts

@@ -1,4 +1,5 @@
 export { resource } from "./core/resource";
+export { withKey } from "./core/withKey";
 
 // primitive hooks
 export { tapState } from "./hooks/tap-state";
@@ -6,6 +7,7 @@ export { tapEffect } from "./hooks/tap-effect";
 
 // utility hooks
 export { tapRef } from "./hooks/tap-ref";
+export { tapConst } from "./hooks/tap-const";
 export { tapMemo } from "./hooks/tap-memo";
 export { tapCallback } from "./hooks/tap-callback";
 export { tapEffectEvent } from "./hooks/tap-effect-event";
@@ -17,15 +19,18 @@ export { tapResources } from "./hooks/tap-resources";
 
 // imperative
 export { createResource } from "./core/createResource";
-export { flushSync } from "./core/scheduler";
+export { flushResourcesSync } from "./core/scheduler";
 
 // context
-export { createContext, tapContext, withContextProvider } from "./core/context";
+export {
+  createResourceContext,
+  tap,
+  withContextProvider,
+} from "./core/context";
 
 // types
 export type {
   Resource,
   ContravariantResource,
   ResourceElement,
-  ExtractResourceOutput,
 } from "./core/types";

package/src/react/use-resource.ts

@@ -1,35 +1,46 @@
-import { useEffect, useLayoutEffect, useMemo, useState } from "react";
-import { ExtractResourceOutput, ResourceElement } from "../core/types";
+import { useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import type { ExtractResourceReturnType, ResourceElement } from "../core/types";
 import {
   createResourceFiber,
   unmountResourceFiber,
   renderResourceFiber,
   commitResourceFiber,
 } from "../core/ResourceFiber";
+import { isDevelopment } from "../core/env";
 
-const shouldAvoidLayoutEffect =
-  (globalThis as any).__ASSISTANT_UI_DISABLE_LAYOUT_EFFECT__ === true;
+const useDevStrictMode = () => {
+  if (!isDevelopment) return null;
 
-const useIsomorphicLayoutEffect = shouldAvoidLayoutEffect
-  ? useEffect
-  : useLayoutEffect;
+  const count = useRef(0);
+  const isFirstRender = count.current === 0;
+  useState(() => count.current++);
+  if (count.current !== 2) return null;
+  return isFirstRender ? ("child" as const) : ("root" as const);
+};
+
+const resourceReducer = (version: number, callback: () => boolean) => {
+  return version + (callback() ? 1 : 0);
+};
 
 export function useResource<E extends ResourceElement<any, any>>(
   element: E,
-): ExtractResourceOutput<E> {
-  const [, rerender] = useState({});
-  const fiber = useMemo(
-    () => createResourceFiber(element.type, () => rerender({})),
-    [element.type],
-  );
+): ExtractResourceReturnType<E> {
+  const [, dispatch] = useReducer(resourceReducer, 0);
+
+  const devStrictMode = useDevStrictMode();
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: user provided deps instead of prop identity
+  const fiber = useMemo(() => {
+    return createResourceFiber(element.type, dispatch, devStrictMode);
+  }, [element.type, element.key]);
 
   const result = renderResourceFiber(fiber, element.props);
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     return () => unmountResourceFiber(fiber);
   }, [fiber]);
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     commitResourceFiber(fiber, result);
   });
 
-  return result.state;
+  return result.output;
 }

package/dist/hooks/depsShallowEqual.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"depsShallowEqual.d.ts","sourceRoot":"","sources":["../../src/hooks/depsShallowEqual.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAC3B,GAAG,SAAS,OAAO,EAAE,EACrB,GAAG,SAAS,OAAO,EAAE,YAOtB,CAAC"}

package/dist/hooks/depsShallowEqual.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"depsShallowEqual.js","sourceRoot":"","sources":["../../src/hooks/depsShallowEqual.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,CAAqB,EACrB,CAAqB,EACrB,EAAE;IACF,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACxC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAAE,OAAO,KAAK,CAAC;IAC3C,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}