bippy 0.6.1-dev.3a24abf → 0.6.1-dev.93556ef

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;
   }
@@ -180,9 +199,6 @@ export const normalizeFileName = (fileName: string): string => {
       const parsedUrl = new URL(normalizedFileName);
       normalizedFileName = parsedUrl.pathname;
     } catch {}
-  }
-
-  if (isHttpUrl) {
     normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
   }
 
@@ -215,7 +231,7 @@ export const normalizeFileName = (fileName: string): string => {
     }
   }
 
-  if (!isWindowsDrivePath && 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";