bippy 0.6.1-dev.61475ed → 0.6.1-dev.a3b3942

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

@@ -1,9 +1,28 @@
-import { Fiber } from "../types.js";
+import { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
-import { getParentStack } from "./owner-stack.js";
+import { getRawParentStack } from "./owner-stack.js";
 import { getSourceFromSourceMap, getSourceMap } 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 +34,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;
@@ -46,8 +54,7 @@ export const getDisplayNameFromSource = async (
   cache = true,
   fetchFn?: (url: string) => Promise<Response>,
 ): 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);

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,
@@ -95,8 +95,7 @@ export const getSource = async (
   fetchFn?: (url: string) => Promise<Response>,
 ): Promise<FiberSource | null> => {
   if (hasDebugSource(fiber)) {
-    const debugSource = fiber._debugSource;
-    return debugSource || null;
+    return fiber._debugSource;
   }
 
   const debugStackFrame =
@@ -171,6 +170,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://");
@@ -214,7 +214,7 @@ export const normalizeFileName = (fileName: string): string => {
     }
   }
 
-  if (SCHEME_REGEX.test(normalizedFileName)) {
+  if (!isWindowsDrivePath && SCHEME_REGEX.test(normalizedFileName)) {
     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";