bippy 0.7.3-dev.0c7e504 → 0.7.3-dev.2c148fc

package/src/rdt-hook.ts

@@ -1,5 +1,6 @@
 // This module must load before React so renderers can inject into the hook.
 
+import { callListener } from "./call-listener.js";
 import type { FiberRoot, ReactDevToolsGlobalHook, ReactRenderer } from "./react-internals/index.js";
 
 export interface Unsubscribe extends Disposable {
@@ -23,6 +24,10 @@ interface RDTHookReplaceListener {
   (rdtHook: ReactDevToolsGlobalHook, target: ReactDevToolsTarget): void;
 }
 
+interface RDTHookReplaceSubscription {
+  listener: RDTHookReplaceListener;
+}
+
 export interface ReactDevToolsTarget {
   __REACT_DEVTOOLS_GLOBAL_HOOK__?: ReactDevToolsGlobalHook;
 }
@@ -93,7 +98,7 @@ export const _renderers = new Set<ReactRenderer>();
 
 const activeListenerTargets = new WeakMap<ActiveListener, Set<ReactDevToolsTarget>>();
 const rendererInjectSubscriptions = new Set<RendererInjectSubscription>();
-const rdtHookReplaceListeners = new Set<RDTHookReplaceListener>();
+const rdtHookReplaceSubscriptions = new Set<RDTHookReplaceSubscription>();
 const notifiedRenderersByTarget = new WeakMap<ReactDevToolsTarget, WeakSet<ReactRenderer>>();
 
 const addActiveListener = (listener: ActiveListener, target: ReactDevToolsTarget): void => {
@@ -115,9 +120,12 @@ export const removeActiveListener = (
   }
 };
 
-const notifyActiveListeners = (target: ReactDevToolsTarget): void => {
-  for (const listener of _onActiveListeners) {
-    if (activeListenerTargets.get(listener)?.has(target)) listener();
+const notifyActiveListeners = (
+  target: ReactDevToolsTarget,
+  pendingListeners = [..._onActiveListeners],
+): void => {
+  for (const listener of pendingListeners) {
+    if (activeListenerTargets.get(listener)?.has(target)) callListener(listener, undefined);
   }
 };
 
@@ -125,8 +133,11 @@ const notifyRendererInjectListeners = (
   target: ReactDevToolsTarget,
   renderer: ReactRenderer,
 ): void => {
-  for (const subscription of rendererInjectSubscriptions) {
-    if (subscription.target === target) subscription.listener(renderer);
+  const subscriptionSnapshot = [...rendererInjectSubscriptions];
+  for (const subscription of subscriptionSnapshot) {
+    if (rendererInjectSubscriptions.has(subscription) && subscription.target === target) {
+      callListener(subscription.listener, subscription, renderer);
+    }
   }
 };
 
@@ -134,8 +145,11 @@ const notifyRDTHookReplaceListeners = (
   rdtHook: ReactDevToolsGlobalHook,
   target: ReactDevToolsTarget,
 ): void => {
-  for (const listener of rdtHookReplaceListeners) {
-    listener(rdtHook, target);
+  const subscriptionSnapshot = [...rdtHookReplaceSubscriptions];
+  for (const subscription of subscriptionSnapshot) {
+    if (rdtHookReplaceSubscriptions.has(subscription)) {
+      callListener(subscription.listener, undefined, rdtHook, target);
+    }
   }
 };
 
@@ -152,9 +166,10 @@ export const onRendererInject = (
 };
 
 export const onRDTHookReplace = (listener: RDTHookReplaceListener): Unsubscribe => {
-  rdtHookReplaceListeners.add(listener);
+  const subscription = { listener };
+  rdtHookReplaceSubscriptions.add(subscription);
   return createUnsubscribe(() => {
-    rdtHookReplaceListeners.delete(listener);
+    rdtHookReplaceSubscriptions.delete(subscription);
   });
 };
 
@@ -242,10 +257,11 @@ export const installRDTHook = (
             _renderers.add(renderer);
             nextRenderers.set(rendererId, renderer);
           });
-          if (ourRenderers.size > 0 || rdtHookReplaceListeners.size > 0) {
-            patchRDTHook(onActive, target);
+          if (ourRenderers.size > 0 || rdtHookReplaceSubscriptions.size > 0) {
+            patchRDTHook(undefined, target, () => notifyRDTHookReplaceListeners(newHook, target));
+          } else {
+            notifyRDTHookReplaceListeners(newHook, target);
           }
-          notifyRDTHookReplaceListeners(rdtHook, target);
         }
       },
     });
@@ -287,9 +303,10 @@ export const installRDTHook = (
 export const patchRDTHook = (
   onActive?: ActiveListener,
   target: ReactDevToolsTarget = globalThis,
+  onReady?: () => void,
 ): void => {
   if (onActive) addActiveListener(onActive, target);
-  let didNotifyActiveListeners = false;
+  let shouldNotifyActiveListeners = false;
   const rdtHook = getTargetHook(target);
   if (!rdtHook) return;
   const renderers = getRendererMap(rdtHook);
@@ -305,28 +322,25 @@ export const patchRDTHook = (
     if (!isReactDevtools) {
       rdtHook.on = noOp;
     }
-    if (renderers.size) {
-      renderers.forEach((renderer) => _renderers.add(renderer));
-      rdtHook._instrumentationIsActive = true;
-      notifyActiveListeners(target);
-      didNotifyActiveListeners = true;
-    } else if (!isReactDevtools && isReactRefresh(rdtHook)) {
-      // HACK: react-refresh's stub inject never records renderers, so a React app
-      // that injected before bippy loaded is undetectable through the renderers map.
-      // A react-refresh hook implies a dev renderer, so activate immediately.
-      rdtHook._instrumentationIsActive = true;
-      notifyActiveListeners(target);
-      didNotifyActiveListeners = true;
-    }
+    const shouldActivate = renderers.size > 0 || (!isReactDevtools && isReactRefresh(rdtHook));
     const previousInject = rdtHook.inject;
     rdtHook.inject = (renderer) => {
       const rendererId = previousInject.call(rdtHook, renderer);
       trackInjectedRenderer(rdtHook, target, renderers, rendererId, renderer);
       return rendererId;
     };
+    if (shouldActivate) {
+      renderers.forEach((renderer) => _renderers.add(renderer));
+      rdtHook._instrumentationIsActive = true;
+      shouldNotifyActiveListeners = true;
+    }
   }
-  if (!didNotifyActiveListeners && (renderers.size || rdtHook._instrumentationIsActive)) {
-    onActive?.();
+  const pendingListeners = shouldNotifyActiveListeners ? [..._onActiveListeners] : [];
+  onReady?.();
+  if (shouldNotifyActiveListeners) {
+    notifyActiveListeners(target, pendingListeners);
+  } else if (onActive && (renderers.size || rdtHook._instrumentationIsActive)) {
+    callListener(onActive, undefined);
   }
 };
 

package/src/react-internals/generated/react-work-tags.ts

@@ -25,6 +25,9 @@ export const ReactSymbols = {
   DEPRECATED_ASYNC_MODE_SYMBOL_STRING: "Symbol(react.async_mode)",
   ELEMENT_SYMBOL_STRING: "Symbol(react.transitional.element)",
   LEGACY_ELEMENT_SYMBOL_STRING: "Symbol(react.element)",
+  STRICT_MODE_NUMBER: 60108,
+  STRICT_MODE_SYMBOL_DESCRIPTION: "react.strict_mode",
+  STRICT_MODE_SYMBOL_STRING: "Symbol(react.strict_mode)",
 } as const;
 
 export interface ReactWorkTagMap {

package/src/react-internals/index.ts

@@ -18,8 +18,24 @@ export type {
 } from "./generated/react-work-tags.js";
 export * from "./types.js";
 
+interface InheritedWorkTags {
+  workTags: Readonly<ReactWorkTagMap>;
+  generation: number;
+}
+
 const defaultReactWorkTags = getReactWorkTags();
 const fiberReactWorkTags = new WeakMap<Fiber, Readonly<ReactWorkTagMap>>();
+const inheritedFiberWorkTags = new WeakMap<Fiber, InheritedWorkTags>();
+let workTagGeneration = 0;
+
+const getCachedWorkTags = (fiber: Fiber): Readonly<ReactWorkTagMap> | undefined => {
+  const assignedWorkTags = fiberReactWorkTags.get(fiber);
+  if (assignedWorkTags) return assignedWorkTags;
+  const inheritedWorkTags = inheritedFiberWorkTags.get(fiber);
+  return inheritedWorkTags?.generation === workTagGeneration
+    ? inheritedWorkTags.workTags
+    : undefined;
+};
 
 // React's experimental channel historically reported "0.0.0-experimental-<sha>"
 // as the runtime version; those builds use modern work tags, not the 16.x rows
@@ -39,30 +55,36 @@ export const getReactWorkTagsForRenderer = (
 
 export const setReactWorkTagsForFiber = (fiber: Fiber, renderer?: ReactRenderer): void => {
   const workTags = getReactWorkTagsForRenderer(renderer);
+  if (
+    getCachedWorkTags(fiber) !== workTags ||
+    (fiber.alternate && getCachedWorkTags(fiber.alternate) !== workTags)
+  ) {
+    workTagGeneration++;
+  }
   fiberReactWorkTags.set(fiber, workTags);
   if (fiber.alternate) fiberReactWorkTags.set(fiber.alternate, workTags);
 };
 
 export const getReactWorkTagsForFiber = (fiber: Fiber): Readonly<ReactWorkTagMap> => {
-  const cachedWorkTags = fiberReactWorkTags.get(fiber);
-  if (cachedWorkTags) return cachedWorkTags;
-
-  const traversedFibers: Fiber[] = [fiber];
-  let rootFiber = fiber;
-  let workTags = defaultReactWorkTags;
-  while (rootFiber.return) {
-    rootFiber = rootFiber.return;
-    const ancestorWorkTags = fiberReactWorkTags.get(rootFiber);
-    if (ancestorWorkTags) {
-      workTags = ancestorWorkTags;
+  let workTags = getCachedWorkTags(fiber);
+  if (workTags) return workTags;
+  const traversedFibers: Fiber[] = [];
+  let ancestor = fiber;
+  while (!workTags) {
+    traversedFibers.push(ancestor);
+    const parent = ancestor.return;
+    if (!parent) {
+      workTags = inheritedFiberWorkTags.get(ancestor)?.workTags ?? defaultReactWorkTags;
       break;
     }
-    traversedFibers.push(rootFiber);
+    ancestor = parent;
+    workTags = getCachedWorkTags(ancestor);
   }
+  const inheritedWorkTags = { workTags, generation: workTagGeneration };
   for (const traversedFiber of traversedFibers) {
-    fiberReactWorkTags.set(traversedFiber, workTags);
+    inheritedFiberWorkTags.set(traversedFiber, inheritedWorkTags);
     if (traversedFiber.alternate) {
-      fiberReactWorkTags.set(traversedFiber.alternate, workTags);
+      inheritedFiberWorkTags.set(traversedFiber.alternate, inheritedWorkTags);
     }
   }
   return workTags;

package/src/react.ts

@@ -2,6 +2,7 @@ import "./install-hook-only.js";
 import React from "react";
 import { isFiber, traverseFiber } from "./core.js";
 import { _renderers } from "./rdt-hook.js";
+import { getCurrentFiberFromRoot } from "./react-internals/current-fiber.js";
 import type { Fiber } from "./react-internals/index.js";
 
 export type { Fiber } from "./react-internals/index.js";
@@ -115,6 +116,12 @@ const getRenderingFiberFromRoot = (
     return null;
   }
   const renderingRoot = root.current.alternate;
+  const renderingFiber = getCurrentFiberFromRoot(fiber)?.alternate;
+  if (renderingFiber) {
+    let ancestor = renderingFiber;
+    while (ancestor.return) ancestor = ancestor.return;
+    if (ancestor === renderingRoot) return renderingFiber;
+  }
   return traverseFiber(renderingRoot, (candidate) => {
     if (candidate !== fiber && candidate !== fiber.alternate) return false;
     let parent = candidate;
@@ -147,6 +154,9 @@ export const useFiber = (): Fiber | undefined => {
       : knownFiber.alternate && hasRenderMarker(knownFiber.alternate, renderMarker)
         ? knownFiber.alternate
         : getRenderingFiberFromRoot(knownCapture, renderMarker));
-  if (fiber) fiberRef.current = { fiber, queue: knownCapture.queue };
+  if (fiber) {
+    knownCapture.fiber = fiber;
+    fiberRef.current = knownCapture;
+  }
   return fiber ?? undefined;
 };

package/src/source/constants.ts

@@ -1,15 +1,19 @@
 export const SCHEME_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
 
 export const INTERNAL_SCHEME_PREFIXES = [
-  "rsc://",
-  "file:///",
+  "rspack-internal://",
   "webpack-internal://",
-  "webpack://",
-  "node:",
   "turbopack://",
+  "webpack://",
+  "rspack://",
+  "parcel://",
   "metro://",
-  "/app-pages-browser/",
+  "file:///",
+  "rsc://",
+  "node:",
+  "bun:",
   "/(app-pages-browser)/",
+  "/app-pages-browser/",
 ] as const;
 
 export const ABOUT_REACT_PREFIX = "about://React/";
@@ -21,7 +25,7 @@ export const ANONYMOUS_FILE_PATTERNS = ["<anonymous>", "eval", ""] as const;
 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;
+  /(\.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\/|\/_next\/|\/_expo\/|\/_nuxt\/|\/@vite\/|\/@react-refresh|\/\.parcel-cache\/|\/\.expo\/|\/\.rsbuild\/|\/\.vite\/|\/\.svelte-kit\/|\/\.astro\/|\/\.nuxt\/|\/\.angular\/|\.webpack\.|\.vite\.|\.turbopack\.|\[root-of-the-server\]/i;
 
 export const QUERY_PARAMETER_PATTERN_REGEX = /^\?[\w~.-]+(?:=[^&#]*)?(?:&[\w~.-]+(?:=[^&#]*)?)*$/;
 

package/src/source/get-source.ts

@@ -2,15 +2,6 @@ import type { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
 
 import type { FiberSource } from "./types.js";
-import {
-  SCHEME_REGEX,
-  INTERNAL_SCHEME_PREFIXES,
-  ABOUT_REACT_PREFIX,
-  ANONYMOUS_FILE_PATTERNS,
-  SOURCE_FILE_EXTENSION_REGEX,
-  BUNDLED_FILE_PATTERN_REGEX,
-  QUERY_PARAMETER_PATTERN_REGEX,
-} from "./constants.js";
 import { getDefinitionFrameFromOwnedChild, getParentStack, hasDebugStack } from "./owner-stack.js";
 import { parseDebugStack } from "./parse-debug-stack.js";
 import { parseStack, type StackFrame } from "./parse-stack.js";
@@ -165,130 +156,4 @@ export const getSource = async (
   return getSourceByComponentName(fiber, shouldUseCache, sourceFetch, requestOptions);
 };
 
-const getPathSegmentCount = (path: string): number => path.split("/").filter(Boolean).length;
-
-const stripSingleBasePathPrefix = (path: string): string => {
-  const firstSlashIndex = path.indexOf("/", 1);
-  if (firstSlashIndex === -1) {
-    return path;
-  }
-
-  const basePath = path.slice(0, firstSlashIndex);
-  if (getPathSegmentCount(basePath) !== 1) {
-    return path;
-  }
-
-  const remainderPath = path.slice(firstSlashIndex);
-  if (!SOURCE_FILE_EXTENSION_REGEX.test(remainderPath)) {
-    return path;
-  }
-
-  const remainderSegments = remainderPath.split("/").filter(Boolean);
-  if (remainderSegments.length < 2) {
-    return path;
-  }
-
-  const firstRemainderSegment = remainderSegments[0];
-  if (firstRemainderSegment.startsWith("@")) {
-    return path;
-  }
-
-  if (firstRemainderSegment.length > 4) {
-    return path;
-  }
-
-  return remainderPath;
-};
-
-export const normalizeFileName = (fileName: string): string => {
-  if (!fileName) {
-    return "";
-  }
-
-  if (ANONYMOUS_FILE_PATTERNS.some((pattern) => pattern === fileName)) {
-    return "";
-  }
-
-  let normalizedFileName = fileName;
-  const isWindowsDrivePath = /^[a-zA-Z]:[\\/]/.test(normalizedFileName);
-
-  const isHttpUrl =
-    normalizedFileName.startsWith("http://") || normalizedFileName.startsWith("https://");
-  if (isHttpUrl) {
-    try {
-      const parsedUrl = new URL(normalizedFileName);
-      normalizedFileName = parsedUrl.pathname;
-    } catch {}
-    normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
-  }
-
-  if (normalizedFileName.startsWith(ABOUT_REACT_PREFIX)) {
-    const remainder = normalizedFileName.slice(ABOUT_REACT_PREFIX.length);
-    const slashIndex = remainder.indexOf("/");
-    const colonIndex = remainder.indexOf(":");
-
-    if (slashIndex !== -1 && (colonIndex === -1 || slashIndex < colonIndex)) {
-      normalizedFileName = remainder.slice(slashIndex + 1);
-    } else {
-      normalizedFileName = remainder;
-    }
-  }
-
-  let didStripPrefix = true;
-  while (didStripPrefix) {
-    didStripPrefix = false;
-    for (const prefix of INTERNAL_SCHEME_PREFIXES) {
-      if (normalizedFileName.startsWith(prefix)) {
-        normalizedFileName = normalizedFileName.slice(prefix.length);
-
-        if (prefix === "file:///") {
-          normalizedFileName = `/${normalizedFileName.replace(/^\/+/, "")}`;
-        }
-
-        didStripPrefix = true;
-        break;
-      }
-    }
-  }
-
-  if (!isWindowsDrivePath) {
-    const schemeMatch = normalizedFileName.match(SCHEME_REGEX);
-    if (schemeMatch) {
-      normalizedFileName = normalizedFileName.slice(schemeMatch[0].length);
-    }
-  }
-
-  if (normalizedFileName.startsWith("//")) {
-    const firstPathSlashIndex = normalizedFileName.indexOf("/", 2);
-    normalizedFileName =
-      firstPathSlashIndex === -1 ? "" : normalizedFileName.slice(firstPathSlashIndex);
-  }
-
-  const queryParameterIndex = normalizedFileName.indexOf("?");
-  if (queryParameterIndex !== -1) {
-    const potentialQueryParameters = normalizedFileName.slice(queryParameterIndex);
-    if (QUERY_PARAMETER_PATTERN_REGEX.test(potentialQueryParameters)) {
-      normalizedFileName = normalizedFileName.slice(0, queryParameterIndex);
-    }
-  }
-
-  return normalizedFileName;
-};
-
-export const isSourceFile = (fileName: string): boolean => {
-  const normalizedFileName = normalizeFileName(fileName);
-
-  if (!normalizedFileName) {
-    return false;
-  }
-
-  if (!SOURCE_FILE_EXTENSION_REGEX.test(normalizedFileName)) {
-    return false;
-  }
-
-  if (BUNDLED_FILE_PATTERN_REGEX.test(normalizedFileName)) {
-    return false;
-  }
-
-  return true;
-};
+export { isSourceFile, normalizeFileName } from "./normalize-file-name.js";

package/src/source/inspect-hooks.ts

@@ -14,7 +14,7 @@ import {
   BippyUnsupportedHookError,
 } from "../errors.js";
 import { getReactWorkTagsForFiber } from "../react-internals/index.js";
-import { parseStack, type StackFrame } from "./parse-stack.js";
+import { createStackParser, parseStack, type StackFrame } from "./parse-stack.js";
 import {
   getRendererDispatcherRefs,
   readDispatcher,
@@ -604,8 +604,9 @@ const findPrimitiveIndex = (hookStack: StackFrame[], hook: HookLogEntry): number
 const parseTrimmedStack = (
   rootStack: StackFrame[],
   hook: HookLogEntry,
+  parseHookStack: (stack: string) => StackFrame[],
 ): [StackFrame | null, StackFrame[] | null] => {
-  const hookStack = parseErrorStack(hook.stackError);
+  const hookStack = parseHookStack(hook.stackError.stack || "");
   const rootIndex = findCommonAncestorIndex(rootStack, hookStack);
   const primitiveIndex = findPrimitiveIndex(hookStack, hook);
   if (rootIndex === -1 || primitiveIndex === -1 || rootIndex - primitiveIndex < 2) {
@@ -626,13 +627,14 @@ const NON_ID_HOOK_PRIMITIVES = new Set([
 
 const buildTree = (rootStack: StackFrame[], capturedHookLog: HookLogEntry[]): HooksTree => {
   const rootChildren: HooksNode[] = [];
+  const parseHookStack = createStackParser();
   let previousStack: StackFrame[] | null = null;
   let levelChildren = rootChildren;
   let nativeHookID = 0;
   const childrenStack: HooksNode[][] = [];
 
   for (const hook of capturedHookLog) {
-    const [primitiveFrame, stack] = parseTrimmedStack(rootStack, hook);
+    const [primitiveFrame, stack] = parseTrimmedStack(rootStack, hook, parseHookStack);
     let displayName = hook.displayName;
     if (displayName === null && primitiveFrame !== null) {
       const primitiveName = parseHookName(primitiveFrame.functionName);