bippy 0.6.1-dev.b88fcb4 → 0.6.1-dev.f9e6c65

package/src/source/owner-stack.ts

@@ -1,5 +1,4 @@
 import { getDisplayName, getType, traverseFiber } from "../core.js";
-import { _renderers, getRDTHook } from "../rdt-hook.js";
 import { getReactWorkTagsForFiber } from "../react-internals/index.js";
 import type {
   Fiber,
@@ -7,14 +6,20 @@ import type {
   ServerComponentInfo,
 } from "../react-internals/index.js";
 import {
+  REACT_STACK_BOTTOM_FRAME_PATTERNS,
   SERVER_FRAME_MARKER,
   SERVER_ENV_PATTERN,
   SERVER_COMPONENT_URL_PREFIXES,
 } from "./constants.js";
 import { getPrepareStackTrace, setPrepareStackTrace } from "./error-stack.js";
 import { parseDebugStack } from "./parse-debug-stack.js";
-import { parseStack, StackFrame } from "./parse-stack.js";
-import { symbolicateStack } from "./symbolication.js";
+import { parseStack, type StackFrame } from "./parse-stack.js";
+import {
+  getRendererDispatcherRefs,
+  readDispatcher,
+  writeDispatcher,
+} from "./renderer-dispatchers.js";
+import { symbolicateStack, type SourceFetch } from "./symbolication.js";
 
 interface RendererDispatcherSnapshot {
   currentDispatcherRef: RendererDispatcherRef;
@@ -32,9 +37,6 @@ export const hasDebugStack = (
 const isFiberOwner = (owner: Fiber | ServerComponentInfo): owner is Fiber =>
   "tag" in owner && typeof owner.tag === "number";
 
-const getDebugOwner = (fiber: Fiber): Fiber | ServerComponentInfo | undefined =>
-  fiber._debugOwner ?? undefined;
-
 /**
  * Locates a frame inside the fiber's own function body without invoking it:
  * any child fiber owned by this fiber was created by JSX inside its body, so
@@ -80,42 +82,18 @@ export const getDefinitionFrameFromOwnedChild = (fiber: Fiber): StackFrame | nul
   return null;
 };
 
-const getRendererDispatcherRefs = (): RendererDispatcherRef[] => {
-  const rdtHook = getRDTHook();
-  const renderers = new Set([..._renderers, ...rdtHook.renderers.values()]);
-  const currentDispatcherRefs: RendererDispatcherRef[] = [];
-  const seenCurrentDispatcherRefs = new Set<object>();
-  for (const renderer of renderers) {
-    const currentDispatcherRef = renderer.currentDispatcherRef;
-    if (!currentDispatcherRef || seenCurrentDispatcherRefs.has(currentDispatcherRef)) continue;
-    seenCurrentDispatcherRefs.add(currentDispatcherRef);
-    currentDispatcherRefs.push(currentDispatcherRef);
-  }
-  return currentDispatcherRefs;
-};
-
 const clearRendererDispatchers = (): RendererDispatcherSnapshot[] => {
   const dispatcherSnapshots: RendererDispatcherSnapshot[] = [];
   for (const currentDispatcherRef of getRendererDispatcherRefs()) {
-    const value =
-      "H" in currentDispatcherRef ? currentDispatcherRef.H : currentDispatcherRef.current;
-    dispatcherSnapshots.push({ currentDispatcherRef, value });
-    if ("H" in currentDispatcherRef) {
-      currentDispatcherRef.H = null;
-    } else {
-      currentDispatcherRef.current = null;
-    }
+    dispatcherSnapshots.push({ currentDispatcherRef, value: readDispatcher(currentDispatcherRef) });
+    writeDispatcher(currentDispatcherRef, null);
   }
   return dispatcherSnapshots;
 };
 
 const restoreRendererDispatchers = (dispatcherSnapshots: RendererDispatcherSnapshot[]): void => {
   for (const { currentDispatcherRef, value } of dispatcherSnapshots) {
-    if ("H" in currentDispatcherRef) {
-      currentDispatcherRef.H = value;
-    } else {
-      currentDispatcherRef.current = value;
-    }
+    writeDispatcher(currentDispatcherRef, value);
   }
 };
 
@@ -294,6 +272,10 @@ const describeNativeComponentFrame = (
               if (controlIndex < 0 || sampleLines[sampleIndex] !== controlLines[controlIndex]) {
                 // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
                 let stackFrame = `\n${sampleLines[sampleIndex].replace(" at new ", " at ")}`;
+                const [parsedStackFrame] = parseStack(stackFrame);
+                if (!parsedStackFrame?.fileName) {
+                  continue;
+                }
 
                 const displayName = getDisplayName(component);
                 // If our component frame is labeled "<anonymous>"
@@ -322,7 +304,7 @@ const describeNativeComponentFrame = (
     console.warn = previousConsoleWarn;
   }
 
-  const componentName = component ? getDisplayName(component) : "";
+  const componentName = getDisplayName(component);
   const syntheticFrame = componentName ? describeBuiltInComponentFrame(componentName) : "";
   componentFrameCache.set(component, syntheticFrame);
   return syntheticFrame;
@@ -344,7 +326,7 @@ export const describeFiber = (fiber: Fiber, childFiber: Fiber | null): string =>
       break;
     case workTags.FunctionComponent:
     case workTags.SimpleMemoComponent:
-      stackFrame = describeNativeComponentFrame(fiber.type, false);
+      stackFrame = describeNativeComponentFrame(getType(fiber.type) ?? fiber.type, false);
       break;
     case workTags.HostComponent:
     case workTags.HostHoistable:
@@ -411,7 +393,7 @@ export const getFallbackParentStack = (thisFiber: Fiber): string => {
     return componentStack;
   } catch (error) {
     if (error instanceof Error) {
-      return `\nError generating stack: ${error.message}\n${error.stack}`;
+      return `\nBippy couldn’t generate the stack: ${error.message}\n${error.stack}`;
     }
     return "";
   }
@@ -452,8 +434,7 @@ export const formatOwnerStack = (stack: string): string => {
     formattedStack = formattedStack.slice(firstNewlineIndex + 1);
   }
   let bottomFrameIndex = Math.max(
-    formattedStack.indexOf("react_stack_bottom_frame"),
-    formattedStack.indexOf("react-stack-bottom-frame"),
+    ...REACT_STACK_BOTTOM_FRAME_PATTERNS.map((pattern) => formattedStack.indexOf(pattern)),
   );
   if (bottomFrameIndex !== -1) {
     bottomFrameIndex = formattedStack.lastIndexOf("\n", bottomFrameIndex);
@@ -470,11 +451,6 @@ export const formatOwnerStack = (stack: string): string => {
   return formattedStack;
 };
 
-interface DebugStackEntry {
-  componentName: string;
-  stackFrames: StackFrame[];
-}
-
 const isReactServerComponentFrame = (stackFrame: StackFrame): boolean =>
   Boolean(
     stackFrame.functionName && stackFrame.fileName && isServerComponentUrl(stackFrame.fileName),
@@ -486,24 +462,22 @@ const areStackFramesEqual = (firstFrame: StackFrame, secondFrame: StackFrame): b
   firstFrame.columnNumber === secondFrame.columnNumber;
 
 const buildFunctionNameToRscFramesMap = (
-  debugStackEntries: DebugStackEntry[],
+  debugStackFrames: StackFrame[],
 ): Map<string, StackFrame[]> => {
   const functionNameToRscFrames = new Map<string, StackFrame[]>();
 
-  for (const debugStackEntry of debugStackEntries) {
-    for (const stackFrame of debugStackEntry.stackFrames) {
-      if (!isReactServerComponentFrame(stackFrame)) continue;
+  for (const stackFrame of debugStackFrames) {
+    if (!isReactServerComponentFrame(stackFrame)) continue;
 
-      const functionName = stackFrame.functionName!;
-      const framesForFunction = functionNameToRscFrames.get(functionName) ?? [];
-      const isDuplicateFrame = framesForFunction.some((existingFrame) =>
-        areStackFramesEqual(existingFrame, stackFrame),
-      );
+    const functionName = stackFrame.functionName!;
+    const framesForFunction = functionNameToRscFrames.get(functionName) ?? [];
+    const isDuplicateFrame = framesForFunction.some((existingFrame) =>
+      areStackFramesEqual(existingFrame, stackFrame),
+    );
 
-      if (!isDuplicateFrame) {
-        framesForFunction.push(stackFrame);
-        functionNameToRscFrames.set(functionName, framesForFunction);
-      }
+    if (!isDuplicateFrame) {
+      framesForFunction.push(stackFrame);
+      functionNameToRscFrames.set(functionName, framesForFunction);
     }
   }
 
@@ -564,7 +538,7 @@ const getOwnerStackFromDebugStacks = (fiber: Fiber): StackFrame[] => {
   while (owner) {
     if (isFiberOwner(owner)) {
       const ownerFiber: Fiber = owner;
-      owner = getDebugOwner(ownerFiber);
+      owner = ownerFiber._debugOwner;
       if (owner && hasDebugStack(ownerFiber)) {
         const { frames, isTrusted } = parseDebugStack(ownerFiber._debugStack);
         if (isTrusted) {
@@ -588,53 +562,39 @@ const getOwnerStackFromDebugStacks = (fiber: Fiber): StackFrame[] => {
   return ownerStackFrames;
 };
 
-const getDebugStackEntries = (rootFiber: Fiber): DebugStackEntry[] => {
-  const debugStackEntries: DebugStackEntry[] = [];
+const getDebugStackFrames = (rootFiber: Fiber): StackFrame[] => {
+  const debugStackFrames: StackFrame[] = [];
 
   traverseFiber(
     rootFiber,
     (currentFiber) => {
       if (!hasDebugStack(currentFiber)) return;
 
-      const componentName =
-        typeof currentFiber.type !== "string"
-          ? getDisplayName(currentFiber.type) || "<anonymous>"
-          : currentFiber.type;
-
-      debugStackEntries.push({
-        componentName,
-        stackFrames: parseStack(formatOwnerStack(currentFiber._debugStack?.stack)),
-      });
+      const { frames, isTrusted } = parseDebugStack(currentFiber._debugStack);
+      if (isTrusted) {
+        debugStackFrames.push(...frames);
+      }
     },
     true,
   );
 
-  return debugStackEntries;
+  return debugStackFrames;
 };
 
 /**
- * Returns a stack of ALL ancestor components in the render tree (the fiber's
- * `return` chain), including wrappers that render `{children}` without having
- * created this fiber's JSX. Locations come from re-invoking each component
- * with a throwing dispatcher; server frames are enriched from debug stacks by
- * name matching. Works on every React version.
+ * The unsymbolicated frames behind {@link getParentStack}: bundle-space
+ * locations from re-invoking each component with a throwing dispatcher,
+ * with server frames enriched from debug stacks by name matching.
  */
-export const getParentStack = async (
-  fiber: Fiber,
-  shouldCache = true,
-  fetchFunction?: (url: string) => Promise<Response>,
-): Promise<StackFrame[]> => {
-  const debugStackEntries = getDebugStackEntries(fiber);
+export const getRawParentStack = (fiber: Fiber): StackFrame[] => {
+  const debugStackFrames = getDebugStackFrames(fiber);
   const fallbackStackFrames = parseStack(getFallbackParentStack(fiber));
-  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(debugStackEntries);
+  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(debugStackFrames);
   const functionNameToUsageIndex = new Map<string, number>();
 
   const enrichedStackFrames = fallbackStackFrames.map((stackFrame): StackFrame => {
     const isServerFrame =
-      (stackFrame.source?.includes(SERVER_FRAME_MARKER) ?? false) ||
-      (stackFrame.source !== null &&
-        stackFrame.source !== undefined &&
-        SERVER_ENV_PATTERN.test(stackFrame.source));
+      stackFrame.source !== undefined && SERVER_ENV_PATTERN.test(stackFrame.source);
 
     if (isServerFrame) {
       return getEnrichedServerStackFrame(
@@ -647,15 +607,26 @@ export const getParentStack = async (
     return stackFrame;
   });
 
-  const deduplicatedStackFrames = enrichedStackFrames.filter((stackFrame, index, frames) => {
+  return enrichedStackFrames.filter((stackFrame, index, frames) => {
     if (index === 0) return true;
     const previousFrame = frames[index - 1];
     return stackFrame.functionName !== previousFrame.functionName;
   });
-
-  return symbolicateStack(deduplicatedStackFrames, shouldCache, fetchFunction);
 };
 
+/**
+ * Returns a stack of ALL ancestor components in the render tree (the fiber's
+ * `return` chain), including wrappers that render `{children}` without having
+ * created this fiber's JSX. Locations come from re-invoking each component
+ * with a throwing dispatcher; server frames are enriched from debug stacks by
+ * name matching. Works on every React version.
+ */
+export const getParentStack = async (
+  fiber: Fiber,
+  shouldCache = true,
+  fetchFunction?: SourceFetch,
+): Promise<StackFrame[]> => symbolicateStack(getRawParentStack(fiber), shouldCache, fetchFunction);
+
 // an owner frame is only actionable if it can point an editor somewhere:
 // it needs a file location and must not be ignore-listed bundler/framework code
 const isLocatableFrame = (stackFrame: StackFrame): boolean =>
@@ -674,7 +645,7 @@ const isLocatableFrame = (stackFrame: StackFrame): boolean =>
 export const getOwnerStack = async (
   fiber: Fiber,
   shouldCache = true,
-  fetchFunction?: (url: string) => Promise<Response>,
+  fetchFunction?: SourceFetch,
 ): Promise<StackFrame[]> => {
   const debugStackFrames = getOwnerStackFromDebugStacks(fiber);
   if (debugStackFrames.length > 0) {

package/src/source/parse-hook-names.ts

@@ -1,5 +1,10 @@
 import type { HooksNode, HooksTree, HookSource } from "./inspect-hooks.js";
-import { getSourceMap, getSourceFromSourceMap, type SourceMap } from "./symbolication.js";
+import {
+  getSourceContentFromSourceMap,
+  getSourceFromSourceMap,
+  getSourceMap,
+  type SourceFetch,
+} from "./symbolication.js";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface HookNames extends Map<string, string> {}
@@ -33,40 +38,6 @@ const flattenHooksTree = (hooksTree: HooksTree): HooksNode[] => {
   return hooksList;
 };
 
-const findSourceContentByFileName = (
-  sources: string[],
-  sourcesContent: Array<string | null> | undefined,
-  fileName: string,
-): string | null => {
-  if (!sourcesContent) return null;
-  const sourceIndex = sources.indexOf(fileName);
-  return sourceIndex !== -1 ? (sourcesContent[sourceIndex] ?? null) : null;
-};
-
-const getSourceContentFromSourceMap = (
-  sourceMap: SourceMap,
-  originalFileName: string,
-): string | null => {
-  const directResult = findSourceContentByFileName(
-    sourceMap.sources,
-    sourceMap.sourcesContent,
-    originalFileName,
-  );
-  if (directResult) return directResult;
-
-  if (sourceMap.sections) {
-    for (const section of sourceMap.sections) {
-      const sectionResult = findSourceContentByFileName(
-        section.map.sources,
-        section.map.sourcesContent,
-        originalFileName,
-      );
-      if (sectionResult) return sectionResult;
-    }
-  }
-  return null;
-};
-
 const extractVariableNameFromBinding = (binding: string): string | null => {
   const trimmed = binding.trim();
   if (trimmed.startsWith("[")) {
@@ -109,9 +80,8 @@ interface ResolvedSource {
 }
 
 interface SourceResolutionContext {
-  sourceMapsByFile: Map<string, SourceMap | null>;
   sourceContentCache: Map<string, string | null>;
-  fetchFn?: (url: string) => Promise<Response>;
+  fetchFn?: SourceFetch;
 }
 
 const resolveOriginalSource = async (
@@ -120,25 +90,17 @@ const resolveOriginalSource = async (
   runtimeColumn: number,
   context: SourceResolutionContext,
 ): Promise<ResolvedSource | null> => {
-  const { sourceMapsByFile, sourceContentCache, fetchFn } = context;
+  const { sourceContentCache, fetchFn } = context;
 
-  if (!sourceMapsByFile.has(runtimeFileName)) {
-    sourceMapsByFile.set(runtimeFileName, await getSourceMap(runtimeFileName, true, fetchFn));
-  }
-
-  const sourceMap = sourceMapsByFile.get(runtimeFileName) ?? null;
+  const sourceMap = await getSourceMap(runtimeFileName, true, fetchFn);
 
   if (sourceMap) {
     const originalLocation = getSourceFromSourceMap(sourceMap, runtimeLine, runtimeColumn);
     if (originalLocation?.fileName && originalLocation.lineNumber !== undefined) {
-      const cacheKey = `sourcemap:${runtimeFileName}:${originalLocation.fileName}`;
-      if (!sourceContentCache.has(cacheKey)) {
-        sourceContentCache.set(
-          cacheKey,
-          getSourceContentFromSourceMap(sourceMap, originalLocation.fileName),
-        );
-      }
-      const originalSourceCode = sourceContentCache.get(cacheKey) ?? null;
+      const originalSourceCode = getSourceContentFromSourceMap(
+        sourceMap,
+        originalLocation.fileName,
+      );
       if (originalSourceCode) {
         return {
           sourceCode: originalSourceCode,
@@ -173,7 +135,7 @@ const resolveOriginalSource = async (
 
 export const parseHookNames = async (
   hooksTree: HooksTree,
-  fetchFn?: (url: string) => Promise<Response>,
+  fetchFn?: SourceFetch,
 ): Promise<HookNames> => {
   const hookNames: HookNames = new Map();
   const hooksList = flattenHooksTree(hooksTree);
@@ -181,7 +143,6 @@ export const parseHookNames = async (
   if (hooksList.length === 0) return hookNames;
 
   const resolutionContext: SourceResolutionContext = {
-    sourceMapsByFile: new Map(),
     sourceContentCache: new Map(),
     fetchFn,
   };

package/src/source/parse-stack.ts

@@ -1,5 +1,4 @@
 export interface StackFrame {
-  args?: unknown[];
   columnNumber?: number;
   lineNumber?: number;
   // start of the enclosing function (the definition, not the call site);
@@ -16,8 +15,6 @@ export interface StackFrame {
 }
 
 export interface ParseOptions {
-  slice?: number | [number, number];
-  allowEmpty?: boolean;
   includeInElement?: boolean;
 }
 
@@ -31,22 +28,22 @@ export const parseStack = (stackString: string, options?: ParseOptions): StackFr
     const frames: StackFrame[] = [];
     for (const rawLine of lines) {
       if (/^\s*at\s+/.test(rawLine)) {
-        const parsed = parseV8OrIeString(rawLine, undefined)[0];
+        const parsed = parseV8OrIeString(rawLine)[0];
         if (parsed) frames.push(parsed);
       } else if (/^\s*in\s+/.test(rawLine)) {
         const elementName = rawLine.replace(/^\s*in\s+/, "").replace(/\s*\(at .*\)$/, "");
         frames.push({ functionName: elementName, source: rawLine });
       } else if (rawLine.match(FIREFOX_SAFARI_STACK_REGEXP)) {
-        const parsed = parseFFOrSafariString(rawLine, undefined)[0];
+        const parsed = parseFFOrSafariString(rawLine)[0];
         if (parsed) frames.push(parsed);
       }
     }
-    return applySlice(frames, options);
+    return frames;
   }
   if (stackString.match(CHROME_IE_STACK_REGEXP)) {
-    return parseV8OrIeString(stackString, options);
+    return parseV8OrIeString(stackString);
   }
-  return parseFFOrSafariString(stackString, options);
+  return parseFFOrSafariString(stackString);
 };
 
 export const extractLocation = (
@@ -66,21 +63,10 @@ export const extractLocation = (
   return [parts[1], parts[2] || undefined, parts[3] || undefined] as const;
 };
 
-const applySlice = <T>(lines: T[], options?: ParseOptions): T[] => {
-  if (options && options.slice !== null && options.slice !== undefined) {
-    if (Array.isArray(options.slice)) return lines.slice(options.slice[0], options.slice[1]);
-    return lines.slice(0, options.slice);
-  }
-  return lines;
-};
-
-export const parseV8OrIeString = (stack: string, options?: ParseOptions): StackFrame[] => {
-  const filteredLines = applySlice(
-    stack.split("\n").filter((line) => {
-      return !!line.match(CHROME_IE_STACK_REGEXP);
-    }),
-    options,
-  );
+export const parseV8OrIeString = (stack: string): StackFrame[] => {
+  const filteredLines = stack.split("\n").filter((line) => {
+    return !!line.match(CHROME_IE_STACK_REGEXP);
+  });
 
   return filteredLines.map((line): StackFrame => {
     let currentLine = line;
@@ -100,7 +86,7 @@ export const parseV8OrIeString = (stack: string, options?: ParseOptions): StackF
 
     const locationParts = extractLocation(locationMatch ? locationMatch[1] : sanitizedLine);
     const functionName = (locationMatch && sanitizedLine) || undefined;
-    const fileName = ["eval", "<anonymous>"].includes(locationParts[0])
+    const fileName = ["eval", "<anonymous>", "(native)"].includes(locationParts[0])
       ? undefined
       : locationParts[0];
 
@@ -114,13 +100,10 @@ export const parseV8OrIeString = (stack: string, options?: ParseOptions): StackF
   });
 };
 
-export const parseFFOrSafariString = (stack: string, options?: ParseOptions): StackFrame[] => {
-  const filteredLines = applySlice(
-    stack.split("\n").filter((line) => {
-      return !line.match(SAFARI_NATIVE_CODE_REGEXP);
-    }),
-    options,
-  );
+export const parseFFOrSafariString = (stack: string): StackFrame[] => {
+  const filteredLines = stack.split("\n").filter((line) => {
+    return !line.match(SAFARI_NATIVE_CODE_REGEXP);
+  });
 
   return filteredLines.map((line): StackFrame => {
     let currentLine = line;

package/src/source/renderer-dispatchers.ts

@@ -0,0 +1,30 @@
+import type { RendererDispatcherRef } from "../react-internals/index.js";
+import { _renderers, getRDTHook } from "../rdt-hook.js";
+
+export const getRendererDispatcherRefs = (): RendererDispatcherRef[] => {
+  const rdtHook = getRDTHook();
+  const renderers = new Set([..._renderers, ...rdtHook.renderers.values()]);
+  const currentDispatcherRefs: RendererDispatcherRef[] = [];
+  const seenCurrentDispatcherRefs = new Set<object>();
+  for (const renderer of renderers) {
+    const currentDispatcherRef = renderer.currentDispatcherRef;
+    if (!currentDispatcherRef || seenCurrentDispatcherRefs.has(currentDispatcherRef)) continue;
+    seenCurrentDispatcherRefs.add(currentDispatcherRef);
+    currentDispatcherRefs.push(currentDispatcherRef);
+  }
+  return currentDispatcherRefs;
+};
+
+export const readDispatcher = (currentDispatcherRef: RendererDispatcherRef): unknown =>
+  "H" in currentDispatcherRef ? currentDispatcherRef.H : currentDispatcherRef.current;
+
+export const writeDispatcher = (
+  currentDispatcherRef: RendererDispatcherRef,
+  dispatcher: unknown,
+): void => {
+  if ("H" in currentDispatcherRef) {
+    currentDispatcherRef.H = dispatcher;
+  } else {
+    currentDispatcherRef.current = dispatcher;
+  }
+};