bippy 0.6.1-dev.051a9b2 → 0.6.1-dev.3702582

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

@@ -1,9 +1,33 @@
-import { Fiber } from "../types.js";
+import { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
-import { getParentStack } from "./owner-stack.js";
-import { getSourceFromSourceMap, getSourceMap } from "./symbolication.js";
+import { getRawParentStack } from "./owner-stack.js";
+import {
+  getSourceContentFromSourceMap,
+  getSourceFromSourceMap,
+  getSourceMap,
+  type SourceFetch,
+} from "./symbolication.js";
 import { 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;
+
+// the frame points inside the component, so the nearest declaration wins;
+// searching by pattern over the whole window instead would let an adjacent
+// component's declaration shadow the right one
 const extractComponentNameFromSource = (
   sourceContent: string,
   lineNumber: number,
@@ -15,27 +39,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 +57,9 @@ 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 = getRawParentStack(fiber).find((innerFrame) => innerFrame.fileName);
 
   if (!stackFrame?.fileName) {
     return getDisplayName(fiber.type);
@@ -73,21 +85,12 @@ export const getDisplayNameFromSource = async (
     return getDisplayName(fiber.type);
   }
 
-  if (!bundleSourceMap.sourcesContent) {
+  const sourceContent = getSourceContentFromSourceMap(bundleSourceMap, source.fileName);
+  if (!sourceContent) {
     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);
-
-  if (extractedName) {
-    return extractedName;
-  }
-
-  return getDisplayName(fiber.type);
+  return (
+    extractComponentNameFromSource(sourceContent, source.lineNumber) ?? getDisplayName(fiber.type)
+  );
 };

package/src/source/get-source.ts

@@ -1,6 +1,6 @@
-import { Fiber } from "../types.js";
+import type { Fiber } from "../react-internals/index.js";
 
-import { FiberSource } from "./types.js";
+import type { FiberSource } from "./types.js";
 import {
   SCHEME_REGEX,
   INTERNAL_SCHEME_PREFIXES,
@@ -13,7 +13,7 @@ import {
 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 { symbolicateStack, type SourceFetch } from "./symbolication.js";
 
 export const hasDebugSource = (
   fiber: Fiber,
@@ -26,10 +26,7 @@ export const hasDebugSource = (
   }
   return (
     typeof debugSource === "object" &&
-    debugSource !== null &&
-    "fileName" in debugSource &&
     typeof debugSource.fileName === "string" &&
-    "lineNumber" in debugSource &&
     typeof debugSource.lineNumber === "number"
   );
 };
@@ -92,11 +89,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 =
@@ -120,11 +116,6 @@ export const getSource = async (
 
 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 +132,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 +159,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 +168,6 @@ export const normalizeFileName = (fileName: string): string => {
       const parsedUrl = new URL(normalizedFileName);
       normalizedFileName = parsedUrl.pathname;
     } catch {}
-  }
-
-  if (isHttpUrl) {
     normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
   }
 
@@ -214,7 +200,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

@@ -6,12 +6,20 @@ export {
   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";