bippy 0.6.1 → 0.7.0-dev.697d535

package/src/react.ts

@@ -0,0 +1,76 @@
+import "./install-hook-only.js";
+import * as React from "react";
+import { isFiber } from "./core.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");
+
+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.
+  const bindProxy = new Proxy(originalBind, {
+    apply: (bind, functionToBind, boundArguments) => {
+      const fiber = boundArguments[1];
+      if (!capturedFiber && isFiber(fiber)) {
+        capturedFiber = fiber;
+      }
+      return Reflect.apply(bind, functionToBind, boundArguments);
+    },
+  });
+  Reflect.set(Function.prototype, "bind", bindProxy);
+
+  try {
+    useCaptureHook();
+  } finally {
+    if (Function.prototype.bind === bindProxy) {
+      Reflect.set(Function.prototype, "bind", originalBind);
+    }
+  }
+
+  return capturedFiber;
+};
+
+const useExternalStoreCapture = (): void => {
+  Reflect.apply(useSyncExternalStore, React, [
+    subscribeToEmptyStore,
+    readEmptySnapshot,
+    readEmptySnapshot,
+  ]);
+};
+
+const useReducerCapture = (): void => {
+  React.useReducer(preserveState, undefined);
+};
+
+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;
+
+  React.useEffect(() => {
+    committedFiberRef.current = fiber;
+  }, [fiber]);
+
+  return fiber ?? undefined;
+};
+
+export const useFiber =
+  typeof useSyncExternalStore === "function" ? useFiberWithExternalStore : useFiberWithReducer;

package/src/source/constants.ts

@@ -18,7 +18,7 @@ export const SERVER_COMPONENT_URL_PREFIXES = ["rsc://", ABOUT_REACT_PREFIX] as c
 
 export const ANONYMOUS_FILE_PATTERNS = ["<anonymous>", "eval", ""] as const;
 
-export const SOURCE_FILE_EXTENSION_REGEX = /\.(jsx|tsx|ts|js)$/;
+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;

package/src/source/error-stack.ts

@@ -0,0 +1,11 @@
+interface ErrorConstructorWithPrepareStackTrace {
+  prepareStackTrace?: unknown;
+}
+
+const errorConstructor: ErrorConstructorWithPrepareStackTrace = Error;
+
+export const getPrepareStackTrace = (): unknown => errorConstructor.prepareStackTrace;
+
+export const setPrepareStackTrace = (prepareStackTrace: unknown): void => {
+  errorConstructor.prepareStackTrace = prepareStackTrace;
+};

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

@@ -1,8 +1,29 @@
-import { Fiber } from "../types.js";
+import type { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
-import { getParentStack } from "./owner-stack.js";
-import { getSourceFromSourceMap, getSourceMap } from "./symbolication.js";
-import { StackFrame } from "./parse-stack.js";
+import { getDefinitionFrameFromOwnedChild, getRawParentStack } from "./owner-stack.js";
+import {
+  getSourceContentFromSourceMap,
+  getSourceFromSourceMap,
+  getSourceMap,
+  type SourceFetch,
+} from "./symbolication.js";
+import type { StackFrame } from "./parse-stack.js";
+
+const COMPONENT_DECLARATION_PATTERNS = [
+  /(?:^|export\s+)(?:const|let|var)\s+(\w+)\s*=/,
+  /(?:^|export\s+)function\s+(\w+)/,
+  /(?:^|export\s+)class\s+(\w+)/,
+];
+
+const findComponentDeclarationOnLine = (line: string): string | null => {
+  for (const pattern of COMPONENT_DECLARATION_PATTERNS) {
+    const match = line.match(pattern);
+    if (match?.[1]) return match[1];
+  }
+  return null;
+};
+
+const MAX_DECLARATION_LINE_DISTANCE = 5;
 
 const extractComponentNameFromSource = (
   sourceContent: string,
@@ -15,27 +36,16 @@ const extractComponentNameFromSource = (
     return null;
   }
 
-  const startLine = Math.max(0, targetLineIndex - 5);
-  const endLine = Math.min(lines.length, targetLineIndex + 5);
-  const contextLines = lines.slice(startLine, endLine).join("\n");
-
-  const arrowFunctionPattern = /(?:^|export\s+)(?:const|let|var)\s+(\w+)\s*=/m;
-  const functionPattern = /(?:^|export\s+)function\s+(\w+)/m;
-  const classPattern = /(?:^|export\s+)class\s+(\w+)/m;
-
-  const arrowMatch = contextLines.match(arrowFunctionPattern);
-  if (arrowMatch?.[1]) {
-    return arrowMatch[1];
-  }
-
-  const functionMatch = contextLines.match(functionPattern);
-  if (functionMatch?.[1]) {
-    return functionMatch[1];
-  }
-
-  const classMatch = contextLines.match(classPattern);
-  if (classMatch?.[1]) {
-    return classMatch[1];
+  for (let lineDistance = 0; lineDistance <= MAX_DECLARATION_LINE_DISTANCE; lineDistance++) {
+    const lineIndexes =
+      lineDistance === 0
+        ? [targetLineIndex]
+        : [targetLineIndex - lineDistance, targetLineIndex + lineDistance];
+    for (const lineIndex of lineIndexes) {
+      if (lineIndex < 0 || lineIndex >= lines.length) continue;
+      const declarationName = findComponentDeclarationOnLine(lines[lineIndex]);
+      if (declarationName) return declarationName;
+    }
   }
 
   return null;
@@ -44,10 +54,11 @@ const extractComponentNameFromSource = (
 export const getDisplayNameFromSource = async (
   fiber: Fiber,
   cache = true,
-  fetchFn?: (url: string) => Promise<Response>,
+  fetchFn?: SourceFetch,
 ): Promise<string | null> => {
-  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
-  const stackFrame = parentStackFrames.filter((innerFrame) => innerFrame.fileName)[0];
+  const stackFrame =
+    getDefinitionFrameFromOwnedChild(fiber) ??
+    getRawParentStack(fiber).find((innerFrame) => innerFrame.fileName);
 
   if (!stackFrame?.fileName) {
     return getDisplayName(fiber.type);
@@ -73,21 +84,14 @@ export const getDisplayNameFromSource = async (
     return getDisplayName(fiber.type);
   }
 
-  if (!bundleSourceMap.sourcesContent) {
-    return getDisplayName(fiber.type);
-  }
-
-  const sourceIndex = bundleSourceMap.sources.indexOf(source.fileName);
-  if (sourceIndex === -1 || !bundleSourceMap.sourcesContent[sourceIndex]) {
-    return getDisplayName(fiber.type);
-  }
-
-  const sourceContent = bundleSourceMap.sourcesContent[sourceIndex];
-  const extractedName = extractComponentNameFromSource(sourceContent, source.lineNumber);
+  const sourceContent = getSourceContentFromSourceMap(bundleSourceMap, source.fileName);
+  const extractedName = sourceContent
+    ? extractComponentNameFromSource(sourceContent, source.lineNumber)
+    : null;
 
   if (extractedName) {
     return extractedName;
   }
 
-  return getDisplayName(fiber.type);
+  return source.functionName ?? getDisplayName(fiber.type);
 };

package/src/source/get-source.ts

@@ -1,6 +1,7 @@
-import { Fiber } from "../types.js";
+import type { Fiber } from "../react-internals/index.js";
+import { getDisplayName } from "../core.js";
 
-import { FiberSource } from "./types.js";
+import type { FiberSource } from "./types.js";
 import {
   SCHEME_REGEX,
   INTERNAL_SCHEME_PREFIXES,
@@ -12,8 +13,13 @@ import {
 } from "./constants.js";
 import { getDefinitionFrameFromOwnedChild, getParentStack, hasDebugStack } from "./owner-stack.js";
 import { parseDebugStack } from "./parse-debug-stack.js";
-import { StackFrame } from "./parse-stack.js";
-import { symbolicateStack } from "./symbolication.js";
+import { parseStack, type StackFrame } from "./parse-stack.js";
+import {
+  getSourceFromSourceMapByFunctionName,
+  getSourceMap,
+  symbolicateStack,
+  type SourceFetch,
+} from "./symbolication.js";
 
 export const hasDebugSource = (
   fiber: Fiber,
@@ -26,10 +32,8 @@ export const hasDebugSource = (
   }
   return (
     typeof debugSource === "object" &&
-    debugSource !== null &&
-    "fileName" in debugSource &&
     typeof debugSource.fileName === "string" &&
-    "lineNumber" in debugSource &&
+    debugSource.fileName !== "(native)" &&
     typeof debugSource.lineNumber === "number"
   );
 };
@@ -63,6 +67,30 @@ const getUsageFrameFromDebugStack = (fiber: Fiber): StackFrame | null => {
   return null;
 };
 
+const getSourceByComponentName = async (
+  fiber: Fiber,
+  cache: boolean,
+  fetchFn: SourceFetch | undefined,
+): Promise<FiberSource | null> => {
+  const functionName = getDisplayName(fiber.type);
+  if (!functionName) return null;
+
+  const runtimeStackFrames = parseStack(new Error().stack ?? "");
+  const visitedFileNames = new Set<string>();
+  for (const stackFrame of runtimeStackFrames) {
+    const fileName = stackFrame.fileName;
+    if (!fileName || visitedFileNames.has(fileName)) {
+      continue;
+    }
+    visitedFileNames.add(fileName);
+    const sourceMap = await getSourceMap(fileName, cache, fetchFn);
+    if (!sourceMap) continue;
+    const source = getSourceFromSourceMapByFunctionName(sourceMap, functionName);
+    if (source && !source.isIgnoreListed) return toFiberSource(source);
+  }
+  return null;
+};
+
 /**
  * Returns the source of where the component is used. Available only in dev, for composite {@link Fiber}s.
  *
@@ -92,11 +120,10 @@ const getUsageFrameFromDebugStack = (fiber: Fiber): StackFrame | null => {
 export const getSource = async (
   fiber: Fiber,
   cache = true,
-  fetchFn?: (url: string) => Promise<Response>,
+  fetchFn?: SourceFetch,
 ): Promise<FiberSource | null> => {
   if (hasDebugSource(fiber)) {
-    const debugSource = fiber._debugSource;
-    return debugSource || null;
+    return fiber._debugSource;
   }
 
   const debugStackFrame =
@@ -115,16 +142,11 @@ export const getSource = async (
       return toFiberSource(stackFrame);
     }
   }
-  return null;
+  return getSourceByComponentName(fiber, cache, fetchFn);
 };
 
 const getPathSegmentCount = (path: string): number => path.split("/").filter(Boolean).length;
 
-const getFirstPathSegment = (path: string): string | null => {
-  const segments = path.split("/").filter(Boolean);
-  return segments[0] ?? null;
-};
-
 const stripSingleBasePathPrefix = (path: string): string => {
   const firstSlashIndex = path.indexOf("/", 1);
   if (firstSlashIndex === -1) {
@@ -141,15 +163,12 @@ const stripSingleBasePathPrefix = (path: string): string => {
     return path;
   }
 
-  if (getPathSegmentCount(remainderPath) < 2) {
-    return path;
-  }
-
-  const firstRemainderSegment = getFirstPathSegment(remainderPath);
-  if (!firstRemainderSegment) {
+  const remainderSegments = remainderPath.split("/").filter(Boolean);
+  if (remainderSegments.length < 2) {
     return path;
   }
 
+  const firstRemainderSegment = remainderSegments[0];
   if (firstRemainderSegment.startsWith("@")) {
     return path;
   }
@@ -171,6 +190,7 @@ export const normalizeFileName = (fileName: string): string => {
   }
 
   let normalizedFileName = fileName;
+  const isWindowsDrivePath = /^[a-zA-Z]:[\\/]/.test(normalizedFileName);
 
   const isHttpUrl =
     normalizedFileName.startsWith("http://") || normalizedFileName.startsWith("https://");
@@ -179,9 +199,6 @@ export const normalizeFileName = (fileName: string): string => {
       const parsedUrl = new URL(normalizedFileName);
       normalizedFileName = parsedUrl.pathname;
     } catch {}
-  }
-
-  if (isHttpUrl) {
     normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
   }
 
@@ -214,7 +231,7 @@ export const normalizeFileName = (fileName: string): string => {
     }
   }
 
-  if (SCHEME_REGEX.test(normalizedFileName)) {
+  if (!isWindowsDrivePath) {
     const schemeMatch = normalizedFileName.match(SCHEME_REGEX);
     if (schemeMatch) {
       normalizedFileName = normalizedFileName.slice(schemeMatch[0].length);

package/src/source/index.ts

@@ -1,17 +1,27 @@
 export { formatOwnerStack, getOwnerStack, getParentStack, hasDebugStack } from "./owner-stack.js";
 export { getSource, isSourceFile, normalizeFileName } from "./get-source.js";
 export {
+  getSourceContentFromSourceMap,
   getSourceFromSourceMap,
+  getSourceFromSourceMapByFunctionName,
   getSourceMap,
   symbolicateStack,
   type DecodedSourceMapSection,
   type IndexSourceMap,
-  type RawSourceMap,
+  type SourceFetch,
   type SourceMap,
+  type SourceMapRequestOptions,
   type StandardSourceMap,
 } from "./symbolication.js";
 export type { FiberSource } from "./types.js";
 export { parseStack, type ParseOptions, type StackFrame } from "./parse-stack.js";
 export { getDisplayNameFromSource } from "./get-display-name-from-source.js";
+export {
+  BippyError,
+  BippyHookInspectionError,
+  BippyHookRenderError,
+  BippySourceMapError,
+  BippyUnsupportedHookError,
+} from "../errors.js";
 export { getFiberHooks, type HookSource, type HooksNode, type HooksTree } from "./inspect-hooks.js";
 export { parseHookNames, type HookNames } from "./parse-hook-names.js";