bippy 0.7.3-dev.a6ed02c → 0.7.3-dev.e2b879b

package/src/react.ts

@@ -5,6 +5,11 @@ import type { Fiber } from "./react-internals/index.js";
 
 export type { Fiber } from "./react-internals/index.js";
 
+interface FiberHookEffect {
+  create: unknown;
+  next: unknown;
+}
+
 const preserveState = (state: undefined): undefined => state;
 const readEmptySnapshot = (): undefined => undefined;
 const unsubscribeFromEmptyStore = (): void => {};
@@ -53,24 +58,40 @@ const useReducerCapture = (): void => {
 const useFiberWithExternalStore = (): Fiber | undefined =>
   captureFiberFromHook(useExternalStoreCapture) ?? undefined;
 
-const useFiberWithReducer = (): Fiber | undefined => {
-  const committedFiberRef = React.useRef<Fiber | null>(null);
-  const renderedFiberRef = React.useRef<Fiber | null>(null);
-  const hookFiber = captureFiberFromHook(useReducerCapture);
-  const fiber =
-    hookFiber ??
-    (renderedFiberRef.current !== committedFiberRef.current
-      ? renderedFiberRef.current
-      : committedFiberRef.current?.alternate) ??
-    committedFiberRef.current;
-
-  renderedFiberRef.current = fiber;
+const isHookEffect = (value: unknown): value is FiberHookEffect =>
+  typeof value === "object" && value !== null && "create" in value && "next" in value;
 
-  React.useEffect(() => {
-    committedFiberRef.current = fiber;
-  }, [fiber]);
+const hasRenderMarker = (fiber: Fiber, renderMarker: () => void): boolean => {
+  const lastEffect = fiber.updateQueue?.lastEffect;
+  if (!isHookEffect(lastEffect)) return false;
+  let effect = lastEffect;
+  do {
+    if (effect.create === renderMarker) return true;
+    if (!isHookEffect(effect.next)) return false;
+    effect = effect.next;
+  } while (effect !== lastEffect);
+  return false;
+};
 
-  return fiber ?? undefined;
+// HACK: React 17 only binds the rendering Fiber on mount. Later renders are identified through
+// the effect list instead: renderWithHooks clears `updateQueue` on the work-in-progress Fiber,
+// so only the Fiber that is rendering right now holds this render's marker effect.
+const useFiberWithReducer = (): Fiber | undefined => {
+  const fiberRef = React.useRef<Fiber | null>(null);
+  const renderMarker = (): void => {};
+  React.useEffect(renderMarker, []);
+  const mountedFiber = captureFiberFromHook(useReducerCapture);
+  if (mountedFiber) {
+    fiberRef.current = mountedFiber;
+    return mountedFiber;
+  }
+  const knownFiber = fiberRef.current;
+  if (!knownFiber) return undefined;
+  return (
+    [knownFiber, knownFiber.alternate].find(
+      (candidate) => candidate !== null && hasRenderMarker(candidate, renderMarker),
+    ) ?? undefined
+  );
 };
 
 export const useFiber =

package/src/source/inspect-hooks.ts

@@ -87,6 +87,16 @@ let currentHook: MemoizedState | null = null;
 let currentContextDependency: ContextDependency<unknown> | null = null;
 let currentThenableIndex = 0;
 let currentThenableState: unknown[] | null = null;
+let currentMemoCacheIndex = 0;
+let isInspectingHooks = false;
+
+const assertNotInspectingHooks = (): void => {
+  if (isInspectingHooks) {
+    throw new BippyHookInspectionError(
+      "Hook inspection cannot be called during another inspection.",
+    );
+  }
+};
 
 const SuspenseException: unknown = new Error(
   "Suspense interrupted this render. This error is an internal implementation detail of `use`.",
@@ -323,16 +333,8 @@ const dispatcherUseMemoCache = (size: number): unknown[] => {
   const memoCache = fiber.updateQueue?.memoCache;
   if (memoCache === null || memoCache === undefined) return [];
 
-  let memoCacheSlots = memoCache.data[memoCache.index];
-  if (memoCacheSlots === undefined) {
-    memoCacheSlots = memoCache.data[memoCache.index] = Array.from(
-      { length: size },
-      () => REACT_MEMO_CACHE_SENTINEL,
-    );
-  }
-
-  memoCache.index++;
-  return memoCacheSlots;
+  const memoCacheSlots = memoCache.data[currentMemoCacheIndex++];
+  return memoCacheSlots?.slice() ?? Array.from({ length: size }, () => REACT_MEMO_CACHE_SENTINEL);
 };
 
 const dispatcherUseOptimistic = (passthrough: unknown): [unknown, () => void] => {
@@ -834,6 +836,7 @@ const performDispatcherInspection = <TArgs extends unknown[]>(
 ): HooksTree => {
   const previousDispatcher = readDispatcher(dispatcherRef);
   writeDispatcher(dispatcherRef, dispatcherProxy);
+  isInspectingHooks = true;
 
   let capturedHookLog: HookLogEntry[] = [];
   let ancestorStackError: Error | undefined;
@@ -846,6 +849,7 @@ const performDispatcherInspection = <TArgs extends unknown[]>(
   } finally {
     capturedHookLog = hookLog;
     hookLog = [];
+    isInspectingHooks = false;
     writeDispatcher(dispatcherRef, previousDispatcher);
   }
 
@@ -938,6 +942,7 @@ export const inspectHooks = (
   props: Record<string, unknown>,
   target: ReactDevToolsTarget = globalThis,
 ): HooksTree => {
+  assertNotInspectingHooks();
   const dispatcherRef = requireDispatcherRef(undefined, target);
   getPrimitiveStackCache();
   currentHook = null;
@@ -961,6 +966,7 @@ export const inspectHooks = (
 };
 
 export const getFiberHooks = (fiber: Fiber): HooksTree => {
+  assertNotInspectingHooks();
   const dispatcherRef = requireDispatcherRef(fiber);
   const workTags = getReactWorkTagsForFiber(fiber);
 
@@ -976,6 +982,7 @@ export const getFiberHooks = (fiber: Fiber): HooksTree => {
 
   currentHook = fiber.memoizedState;
   currentFiber = fiber;
+  currentMemoCacheIndex = 0;
 
   const debugThenableState = fiber.dependencies?._debugThenableState;
   const usedThenables = Array.isArray(debugThenableState)
@@ -984,18 +991,16 @@ export const getFiberHooks = (fiber: Fiber): HooksTree => {
   currentThenableState = Array.isArray(usedThenables) ? usedThenables : null;
   currentThenableIndex = 0;
 
-  resolveContextDependency(fiber);
-
-  const type = fiber.type;
-  let props = fiber.memoizedProps;
-  if (type !== fiber.elementType) {
-    props = resolveDefaultProps(type, props);
-  }
-
   const originalConsoleMethods = suppressConsole();
   const contextMap = new Map<ReactContext<unknown>, unknown>();
 
   try {
+    resolveContextDependency(fiber);
+    const type = fiber.type;
+    const props =
+      type !== fiber.elementType
+        ? resolveDefaultProps(type, fiber.memoizedProps)
+        : fiber.memoizedProps;
     if (
       currentContextDependency !== null &&
       !Object.hasOwn(currentContextDependency, "memoizedValue")
@@ -1030,6 +1035,7 @@ export const getFiberHooks = (fiber: Fiber): HooksTree => {
     currentContextDependency = null;
     currentThenableState = null;
     currentThenableIndex = 0;
+    currentMemoCacheIndex = 0;
     restoreContexts(contextMap);
     restoreConsole(originalConsoleMethods);
   }