bippy 0.7.2 → 0.7.3-dev.09bae5a

package/src/react.ts

@@ -1,76 +1,162 @@
 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 { getCurrentFiberFromRoot } from "./react-internals/current-fiber.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;
+  const renderingFiber = getCurrentFiberFromRoot(fiber)?.alternate;
+  if (renderingFiber) {
+    let ancestor = renderingFiber;
+    while (ancestor.return) ancestor = ancestor.return;
+    if (ancestor === renderingRoot) return renderingFiber;
+  }
+  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) {
+    knownCapture.fiber = fiber;
+    fiberRef.current = knownCapture;
+  }
   return fiber ?? undefined;
 };
-
-export const useFiber =
-  typeof useSyncExternalStore === "function" ? useFiberWithExternalStore : useFiberWithReducer;

package/src/source/constants.ts

@@ -1,15 +1,19 @@
 export const SCHEME_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
 
 export const INTERNAL_SCHEME_PREFIXES = [
-  "rsc://",
-  "file:///",
+  "rspack-internal://",
   "webpack-internal://",
-  "webpack://",
-  "node:",
   "turbopack://",
+  "webpack://",
+  "rspack://",
+  "parcel://",
   "metro://",
-  "/app-pages-browser/",
+  "file:///",
+  "rsc://",
+  "node:",
+  "bun:",
   "/(app-pages-browser)/",
+  "/app-pages-browser/",
 ] as const;
 
 export const ABOUT_REACT_PREFIX = "about://React/";
@@ -21,13 +25,11 @@ export const ANONYMOUS_FILE_PATTERNS = ["<anonymous>", "eval", ""] as const;
 export const SOURCE_FILE_EXTENSION_REGEX = /\.(cjs|cts|js|jsx|mdx|mjs|mts|ts|tsx)$/;
 
 export const BUNDLED_FILE_PATTERN_REGEX =
-  /(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\.webpack\.|\.vite\.|\.turbopack\./i;
+  /(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\/_next\/|\/_expo\/|\/_nuxt\/|\/@vite\/|\/@react-refresh|\/\.parcel-cache\/|\/\.expo\/|\/\.rsbuild\/|\/\.vite\/|\/\.svelte-kit\/|\/\.astro\/|\/\.nuxt\/|\/\.angular\/|\.webpack\.|\.vite\.|\.turbopack\.|\[root-of-the-server\]/i;
 
 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

@@ -2,15 +2,6 @@ import type { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
 
 import type { FiberSource } from "./types.js";
-import {
-  SCHEME_REGEX,
-  INTERNAL_SCHEME_PREFIXES,
-  ABOUT_REACT_PREFIX,
-  ANONYMOUS_FILE_PATTERNS,
-  SOURCE_FILE_EXTENSION_REGEX,
-  BUNDLED_FILE_PATTERN_REGEX,
-  QUERY_PARAMETER_PATTERN_REGEX,
-} from "./constants.js";
 import { getDefinitionFrameFromOwnedChild, getParentStack, hasDebugStack } from "./owner-stack.js";
 import { parseDebugStack } from "./parse-debug-stack.js";
 import { parseStack, type StackFrame } from "./parse-stack.js";
@@ -19,6 +10,7 @@ import {
   getSourceMap,
   symbolicateStack,
   type SourceFetch,
+  type SourceMapRequestOptions,
 } from "./symbolication.js";
 
 export const hasDebugSource = (
@@ -67,10 +59,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 +82,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,156 +118,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;
-    }
-  }
-
-  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
+  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,
+    shouldUseCache,
+    sourceFetch,
+    requestOptions,
+  );
   for (const stackFrame of parentStackFrames) {
     if (stackFrame.fileName) {
       return toFiberSource(stackFrame);
     }
   }
-  return getSourceByComponentName(fiber, cache, fetchFn);
-};
-
-const getPathSegmentCount = (path: string): number => path.split("/").filter(Boolean).length;
-
-const stripSingleBasePathPrefix = (path: string): string => {
-  const firstSlashIndex = path.indexOf("/", 1);
-  if (firstSlashIndex === -1) {
-    return path;
-  }
-
-  const basePath = path.slice(0, firstSlashIndex);
-  if (getPathSegmentCount(basePath) !== 1) {
-    return path;
-  }
-
-  const remainderPath = path.slice(firstSlashIndex);
-  if (!SOURCE_FILE_EXTENSION_REGEX.test(remainderPath)) {
-    return path;
-  }
-
-  const remainderSegments = remainderPath.split("/").filter(Boolean);
-  if (remainderSegments.length < 2) {
-    return path;
-  }
-
-  const firstRemainderSegment = remainderSegments[0];
-  if (firstRemainderSegment.startsWith("@")) {
-    return path;
-  }
-
-  if (firstRemainderSegment.length > 4) {
-    return path;
-  }
-
-  return remainderPath;
-};
-
-export const normalizeFileName = (fileName: string): string => {
-  if (!fileName) {
-    return "";
-  }
-
-  if (ANONYMOUS_FILE_PATTERNS.some((pattern) => pattern === fileName)) {
-    return "";
-  }
-
-  let normalizedFileName = fileName;
-  const isWindowsDrivePath = /^[a-zA-Z]:[\\/]/.test(normalizedFileName);
-
-  const isHttpUrl =
-    normalizedFileName.startsWith("http://") || normalizedFileName.startsWith("https://");
-  if (isHttpUrl) {
-    try {
-      const parsedUrl = new URL(normalizedFileName);
-      normalizedFileName = parsedUrl.pathname;
-    } catch {}
-    normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
-  }
-
-  if (normalizedFileName.startsWith(ABOUT_REACT_PREFIX)) {
-    const remainder = normalizedFileName.slice(ABOUT_REACT_PREFIX.length);
-    const slashIndex = remainder.indexOf("/");
-    const colonIndex = remainder.indexOf(":");
-
-    if (slashIndex !== -1 && (colonIndex === -1 || slashIndex < colonIndex)) {
-      normalizedFileName = remainder.slice(slashIndex + 1);
-    } else {
-      normalizedFileName = remainder;
-    }
-  }
-
-  let didStripPrefix = true;
-  while (didStripPrefix) {
-    didStripPrefix = false;
-    for (const prefix of INTERNAL_SCHEME_PREFIXES) {
-      if (normalizedFileName.startsWith(prefix)) {
-        normalizedFileName = normalizedFileName.slice(prefix.length);
-
-        if (prefix === "file:///") {
-          normalizedFileName = `/${normalizedFileName.replace(/^\/+/, "")}`;
-        }
-
-        didStripPrefix = true;
-        break;
-      }
-    }
-  }
-
-  if (!isWindowsDrivePath) {
-    const schemeMatch = normalizedFileName.match(SCHEME_REGEX);
-    if (schemeMatch) {
-      normalizedFileName = normalizedFileName.slice(schemeMatch[0].length);
-    }
-  }
-
-  if (normalizedFileName.startsWith("//")) {
-    const firstPathSlashIndex = normalizedFileName.indexOf("/", 2);
-    normalizedFileName =
-      firstPathSlashIndex === -1 ? "" : normalizedFileName.slice(firstPathSlashIndex);
-  }
-
-  const queryParameterIndex = normalizedFileName.indexOf("?");
-  if (queryParameterIndex !== -1) {
-    const potentialQueryParameters = normalizedFileName.slice(queryParameterIndex);
-    if (QUERY_PARAMETER_PATTERN_REGEX.test(potentialQueryParameters)) {
-      normalizedFileName = normalizedFileName.slice(0, queryParameterIndex);
-    }
-  }
-
-  return normalizedFileName;
+  return getSourceByComponentName(fiber, shouldUseCache, sourceFetch, requestOptions);
 };
 
-export const isSourceFile = (fileName: string): boolean => {
-  const normalizedFileName = normalizeFileName(fileName);
-
-  if (!normalizedFileName) {
-    return false;
-  }
-
-  if (!SOURCE_FILE_EXTENSION_REGEX.test(normalizedFileName)) {
-    return false;
-  }
-
-  if (BUNDLED_FILE_PATTERN_REGEX.test(normalizedFileName)) {
-    return false;
-  }
-
-  return true;
-};
+export { isSourceFile, normalizeFileName } from "./normalize-file-name.js";

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";