bippy 0.7.2 → 0.7.3-dev.0c7e504

package/src/react.ts

@@ -1,76 +1,152 @@
 import "./install-hook-only.js";
-import * as React from "react";
-import { isFiber } from "./core.js";
+import React from "react";
+import { isFiber, traverseFiber } from "./core.js";
+import { _renderers } from "./rdt-hook.js";
 import type { Fiber } from "./react-internals/index.js";
 
 export type { Fiber } from "./react-internals/index.js";
 
-const preserveState = (state: undefined): undefined => state;
-const readEmptySnapshot = (): undefined => undefined;
-const unsubscribeFromEmptyStore = (): void => {};
-const subscribeToEmptyStore = (): (() => void) => unsubscribeFromEmptyStore;
-const useSyncExternalStore: unknown = Reflect.get(React, "useSyncExternalStore");
+interface RenderMarker {
+  (state: undefined): undefined;
+}
 
-const captureFiberFromHook = (useCaptureHook: () => void): Fiber | null => {
-  const originalBind = Function.prototype.bind;
-  let capturedFiber: Fiber | null = null;
-  // HACK: React binds hook callbacks to the rendering Fiber in production but exposes no public API for it.
+interface ReducerQueue {
+  lastRenderedReducer: unknown;
+}
+
+interface FiberCapture {
+  fiber: Fiber;
+  queue: ReducerQueue | null;
+}
+
+const isReducerQueue = (value: unknown): value is ReducerQueue =>
+  typeof value === "object" && value !== null && "lastRenderedReducer" in value;
+
+const hasRenderMarker = (fiber: Fiber, renderMarker: RenderMarker): boolean => {
+  for (let hook = fiber.memoizedState; hook; hook = hook.next) {
+    if (Array.isArray(hook.memoizedState) && hook.memoizedState[0] === renderMarker) return true;
+  }
+  return false;
+};
+
+const getReducerQueue = (fiber: Fiber, renderMarker: RenderMarker): ReducerQueue | null => {
+  for (let hook = fiber.memoizedState; hook; hook = hook.next) {
+    if (isReducerQueue(hook.queue) && hook.queue.lastRenderedReducer === renderMarker)
+      return hook.queue;
+  }
+  return null;
+};
+
+const getDevToolsFiber = (renderMarker: RenderMarker): Fiber | null => {
+  for (const renderer of _renderers) {
+    try {
+      const fiber = renderer.getCurrentFiber?.();
+      if (fiber && isFiber(fiber) && hasRenderMarker(fiber, renderMarker)) return fiber;
+    } catch {}
+  }
+  return null;
+};
+
+const captureReducerFiber = (
+  renderMarker: RenderMarker,
+  shouldCapture: boolean,
+): FiberCapture | null => {
+  let originalBind: typeof Function.prototype.bind | undefined;
+  if (shouldCapture) {
+    try {
+      originalBind = Function.prototype.bind;
+    } catch {}
+  }
+  if (!originalBind) {
+    React.useReducer(renderMarker, undefined);
+    return null;
+  }
+
+  let capture: FiberCapture | null = null;
+  let isCapturing = true;
+  // HACK: Production React binds a new reducer's Fiber and queue; validate the private reducer marker, not argument positions.
   const bindProxy = new Proxy(originalBind, {
-    apply: (bind, functionToBind, boundArguments) => {
-      const fiber = boundArguments[1];
-      if (!capturedFiber && isFiber(fiber)) {
-        capturedFiber = fiber;
+    apply: (bind, callback, boundArguments) => {
+      if (isCapturing && !capture) {
+        try {
+          const queue = boundArguments.find(
+            (argument): argument is ReducerQueue =>
+              isReducerQueue(argument) && argument.lastRenderedReducer === renderMarker,
+          );
+          if (queue) {
+            const fiber = boundArguments.find(
+              (argument): argument is Fiber => isFiber(argument) && isFiber(argument.return),
+            );
+            if (fiber) capture = { fiber, queue };
+          }
+        } catch {}
       }
-      return Reflect.apply(bind, functionToBind, boundArguments);
+      return Reflect.apply(bind, callback, boundArguments);
     },
   });
-  Reflect.set(Function.prototype, "bind", bindProxy);
 
   try {
-    useCaptureHook();
+    try {
+      Reflect.set(Function.prototype, "bind", bindProxy);
+    } catch {}
+    React.useReducer(renderMarker, undefined);
+    return capture;
   } finally {
-    if (Function.prototype.bind === bindProxy) {
-      Reflect.set(Function.prototype, "bind", originalBind);
-    }
+    isCapturing = false;
+    capture = null;
+    try {
+      if (Function.prototype.bind === bindProxy) {
+        Reflect.set(Function.prototype, "bind", originalBind);
+      }
+    } catch {}
   }
-
-  return capturedFiber;
 };
 
-const useExternalStoreCapture = (): void => {
-  Reflect.apply(useSyncExternalStore, React, [
-    subscribeToEmptyStore,
-    readEmptySnapshot,
-    readEmptySnapshot,
-  ]);
-};
-
-const useReducerCapture = (): void => {
-  React.useReducer(preserveState, undefined);
+// HACK: React <16.13 attaches hooks after render; the shared reducer queue validates the root-walk fallback.
+const getRenderingFiberFromRoot = (
+  { fiber, queue }: FiberCapture,
+  renderMarker: RenderMarker,
+): Fiber | null => {
+  if (queue?.lastRenderedReducer !== renderMarker) return null;
+  let rootFiber = fiber;
+  while (rootFiber.return) rootFiber = rootFiber.return;
+  const root = rootFiber.stateNode;
+  if (typeof root !== "object" || root === null || !("current" in root) || !isFiber(root.current)) {
+    return null;
+  }
+  const renderingRoot = root.current.alternate;
+  return traverseFiber(renderingRoot, (candidate) => {
+    if (candidate !== fiber && candidate !== fiber.alternate) return false;
+    let parent = candidate;
+    while (parent.return) parent = parent.return;
+    return parent === renderingRoot;
+  });
 };
 
-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);
+export const useFiber = (): Fiber | undefined => {
+  "use no memo";
+  const fiberRef = React.useRef<FiberCapture | null>(null);
+  const renderMarker: RenderMarker = (state) => state;
+  React.useMemo(() => renderMarker, [renderMarker]);
+  const devToolsFiber = fiberRef.current ? null : getDevToolsFiber(renderMarker);
+  const capture = captureReducerFiber(renderMarker, !fiberRef.current && !devToolsFiber);
+  if (devToolsFiber) {
+    fiberRef.current = {
+      fiber: devToolsFiber,
+      queue: getReducerQueue(devToolsFiber, renderMarker),
+    };
+    return devToolsFiber;
+  }
+  const knownCapture = capture ?? fiberRef.current;
+  if (!knownCapture) return undefined;
+  const knownFiber = knownCapture.fiber;
   const fiber =
-    hookFiber ??
-    (renderedFiberRef.current !== committedFiberRef.current
-      ? renderedFiberRef.current
-      : committedFiberRef.current?.alternate) ??
-    committedFiberRef.current;
-
-  renderedFiberRef.current = fiber;
-
-  React.useEffect(() => {
-    committedFiberRef.current = fiber;
-  }, [fiber]);
-
+    capture?.fiber ??
+    (hasRenderMarker(knownFiber, renderMarker)
+      ? knownFiber
+      : knownFiber.alternate && hasRenderMarker(knownFiber.alternate, renderMarker)
+        ? knownFiber.alternate
+        : getRenderingFiberFromRoot(knownCapture, renderMarker));
+  if (fiber) fiberRef.current = { fiber, queue: knownCapture.queue };
   return fiber ?? undefined;
 };
-
-export const useFiber =
-  typeof useSyncExternalStore === "function" ? useFiberWithExternalStore : useFiberWithReducer;

package/src/source/constants.ts

@@ -25,9 +25,7 @@ export const BUNDLED_FILE_PATTERN_REGEX =
 
 export const QUERY_PARAMETER_PATTERN_REGEX = /^\?[\w~.-]+(?:=[^&#]*)?(?:&[\w~.-]+(?:=[^&#]*)?)*$/;
 
-export const SERVER_FRAME_MARKER = "(at Server)";
-
-export const SERVER_ENV_PATTERN = /\(at [^)]+\)$/;
+export const SERVER_ENV_PATTERN = /\[[^\]]+\]$/;
 
 export const REACT_STACK_BOTTOM_FRAME_PATTERNS = [
   "react_stack_bottom_frame",

package/src/source/get-display-name-from-source.ts

@@ -6,6 +6,7 @@ import {
   getSourceFromSourceMap,
   getSourceMap,
   type SourceFetch,
+  type SourceMapRequestOptions,
 } from "./symbolication.js";
 import type { StackFrame } from "./parse-stack.js";
 
@@ -53,8 +54,9 @@ const extractComponentNameFromSource = (
 
 export const getDisplayNameFromSource = async (
   fiber: Fiber,
-  cache = true,
-  fetchFn?: SourceFetch,
+  shouldUseCache = true,
+  sourceFetch?: SourceFetch,
+  requestOptions: SourceMapRequestOptions = {},
 ): Promise<string | null> => {
   const stackFrame =
     getDefinitionFrameFromOwnedChild(fiber) ??
@@ -64,7 +66,12 @@ export const getDisplayNameFromSource = async (
     return getDisplayName(fiber.type);
   }
 
-  const bundleSourceMap = await getSourceMap(stackFrame.fileName, cache, fetchFn);
+  const bundleSourceMap = await getSourceMap(
+    stackFrame.fileName,
+    shouldUseCache,
+    sourceFetch,
+    requestOptions,
+  );
 
   if (!bundleSourceMap) {
     return getDisplayName(fiber.type);

package/src/source/get-source.ts

@@ -19,6 +19,7 @@ import {
   getSourceMap,
   symbolicateStack,
   type SourceFetch,
+  type SourceMapRequestOptions,
 } from "./symbolication.js";
 
 export const hasDebugSource = (
@@ -67,10 +68,17 @@ const getUsageFrameFromDebugStack = (fiber: Fiber): StackFrame | null => {
   return null;
 };
 
+export const getRawSource = (fiber: Fiber): FiberSource | null => {
+  if (hasDebugSource(fiber)) return fiber._debugSource;
+  const stackFrame = getUsageFrameFromDebugStack(fiber) ?? getDefinitionFrameFromOwnedChild(fiber);
+  return stackFrame ? toFiberSource(stackFrame) : null;
+};
+
 const getSourceByComponentName = async (
   fiber: Fiber,
-  cache: boolean,
-  fetchFn: SourceFetch | undefined,
+  shouldUseCache: boolean,
+  sourceFetch: SourceFetch | undefined,
+  requestOptions: SourceMapRequestOptions,
 ): Promise<FiberSource | null> => {
   const functionName = getDisplayName(fiber.type);
   if (!functionName) return null;
@@ -83,7 +91,7 @@ const getSourceByComponentName = async (
       continue;
     }
     visitedFileNames.add(fileName);
-    const sourceMap = await getSourceMap(fileName, cache, fetchFn);
+    const sourceMap = await getSourceMap(fileName, shouldUseCache, sourceFetch, requestOptions);
     if (!sourceMap) continue;
     const source = getSourceFromSourceMapByFunctionName(sourceMap, functionName);
     if (source && !source.isIgnoreListed) return toFiberSource(source);
@@ -119,30 +127,42 @@ const getSourceByComponentName = async (
  */
 export const getSource = async (
   fiber: Fiber,
-  cache = true,
-  fetchFn?: SourceFetch,
+  shouldUseCache = true,
+  sourceFetch?: SourceFetch,
+  requestOptions: SourceMapRequestOptions = {},
 ): Promise<FiberSource | null> => {
-  if (hasDebugSource(fiber)) {
-    return fiber._debugSource;
-  }
-
-  const debugStackFrame =
-    getUsageFrameFromDebugStack(fiber) ?? getDefinitionFrameFromOwnedChild(fiber);
-  if (debugStackFrame) {
-    const [symbolicatedFrame] = await symbolicateStack([debugStackFrame], cache, fetchFn);
-    const debugStackSource = toFiberSource(symbolicatedFrame);
-    if (debugStackSource) {
-      return debugStackSource;
-    }
+  if (hasDebugSource(fiber)) return fiber._debugSource;
+  const rawSource = getRawSource(fiber);
+  if (rawSource) {
+    const [symbolicatedFrame] = await symbolicateStack(
+      [
+        {
+          columnNumber: rawSource.columnNumber,
+          fileName: rawSource.fileName,
+          functionName: rawSource.functionName,
+          lineNumber: rawSource.lineNumber,
+        },
+      ],
+      shouldUseCache,
+      sourceFetch,
+      requestOptions,
+    );
+    const symbolicatedSource = toFiberSource(symbolicatedFrame);
+    if (symbolicatedSource) return symbolicatedSource;
   }
 
-  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
+  const parentStackFrames = await getParentStack(
+    fiber,
+    shouldUseCache,
+    sourceFetch,
+    requestOptions,
+  );
   for (const stackFrame of parentStackFrames) {
     if (stackFrame.fileName) {
       return toFiberSource(stackFrame);
     }
   }
-  return getSourceByComponentName(fiber, cache, fetchFn);
+  return getSourceByComponentName(fiber, shouldUseCache, sourceFetch, requestOptions);
 };
 
 const getPathSegmentCount = (path: string): number => path.split("/").filter(Boolean).length;

package/src/source/index.ts

@@ -1,5 +1,13 @@
-export { formatOwnerStack, getOwnerStack, getParentStack, hasDebugStack } from "./owner-stack.js";
-export { getSource, isSourceFile, normalizeFileName } from "./get-source.js";
+export {
+  formatOwnerStack,
+  getDefinitionFrameFromOwnedChild,
+  getFallbackParentStack,
+  getOwnerStack,
+  getParentStack,
+  getRawOwnerStack,
+  hasDebugStack,
+} from "./owner-stack.js";
+export { getRawSource, getSource, isSourceFile, normalizeFileName } from "./get-source.js";
 export {
   getSourceContentFromSourceMap,
   getSourceFromSourceMap,
@@ -23,5 +31,11 @@ export {
   BippySourceMapError,
   BippyUnsupportedHookError,
 } from "../errors.js";
-export { getFiberHooks, type HookSource, type HooksNode, type HooksTree } from "./inspect-hooks.js";
+export {
+  getFiberHooks,
+  inspectHooks,
+  type HookSource,
+  type HooksNode,
+  type HooksTree,
+} from "./inspect-hooks.js";
 export { parseHookNames, type HookNames } from "./parse-hook-names.js";