bippy 0.7.2 → 0.7.3-dev.0c7e504

package/src/rdt-hook.ts

@@ -1,6 +1,6 @@
 // This module must load before React so renderers can inject into the hook.
 
-import type { ReactDevToolsGlobalHook, ReactRenderer } from "./react-internals/index.js";
+import type { FiberRoot, ReactDevToolsGlobalHook, ReactRenderer } from "./react-internals/index.js";
 
 export interface Unsubscribe extends Disposable {
   (): void;
@@ -14,8 +14,17 @@ interface RendererInjectListener {
   (renderer: ReactRenderer): void;
 }
 
+interface RendererInjectSubscription {
+  listener: RendererInjectListener;
+  target: ReactDevToolsTarget;
+}
+
 interface RDTHookReplaceListener {
-  (rdtHook: ReactDevToolsGlobalHook): void;
+  (rdtHook: ReactDevToolsGlobalHook, target: ReactDevToolsTarget): void;
+}
+
+export interface ReactDevToolsTarget {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__?: ReactDevToolsGlobalHook;
 }
 
 export const version = process.env.VERSION;
@@ -25,10 +34,23 @@ const objectDefineProperty = Object.defineProperty;
 
 const noOp = (): void => {};
 
+const getTargetHook = (target: ReactDevToolsTarget): ReactDevToolsGlobalHook | undefined =>
+  target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
 export const createUnsubscribe = (unsubscribe: () => void): Unsubscribe =>
   Object.assign(unsubscribe, { [Symbol.dispose]: unsubscribe });
 
+export const isFiberRootUnmounted = (fiberRoot: FiberRoot): boolean => {
+  const rootState = fiberRoot.current.memoizedState;
+  return (
+    rootState === null ||
+    (rootState !== undefined && (rootState.element === null || rootState.element === undefined))
+  );
+};
+
 const checkDCE = (functionToCheck: unknown): void => {
+  // HACK: Node loads React's unbundled entrypoints, where development guards are intentionally not eliminated.
+  if (typeof process !== "undefined" && process.versions?.node) return;
   try {
     const code = Function.prototype.toString.call(functionToCheck);
     if (code.indexOf("^_^") > -1) {
@@ -47,7 +69,7 @@ const checkDCE = (functionToCheck: unknown): void => {
 export const isRealReactDevtools = (
   rdtHook: ReactDevToolsGlobalHook | undefined | null = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,
 ): boolean => {
-  return Boolean(rdtHook && "getFiberRoots" in rdtHook);
+  return Boolean(rdtHook && "getFiberRoots" in rdtHook && rdtHook._isBippyHook !== true);
 };
 
 // HACK: react-refresh's inject wrapper is the only stock hook whose parameter is named
@@ -69,53 +91,63 @@ export const _onActiveListeners = new Set<ActiveListener>();
 
 export const _renderers = new Set<ReactRenderer>();
 
-const rendererInjectListeners = new Set<RendererInjectListener>();
+const activeListenerTargets = new WeakMap<ActiveListener, Set<ReactDevToolsTarget>>();
+const rendererInjectSubscriptions = new Set<RendererInjectSubscription>();
 const rdtHookReplaceListeners = new Set<RDTHookReplaceListener>();
-// HACK: Hook replacement can leave an old inject wrapper in the call chain, so notifications must be deduplicated.
-const notifiedRenderers = new WeakSet<ReactRenderer>();
-const notifyingInjectByHook = new WeakMap<
-  ReactDevToolsGlobalHook,
-  ReactDevToolsGlobalHook["inject"]
->();
-
-const notifyActiveListeners = (): void => {
-  for (const listener of _onActiveListeners) {
-    listener();
+const notifiedRenderersByTarget = new WeakMap<ReactDevToolsTarget, WeakSet<ReactRenderer>>();
+
+const addActiveListener = (listener: ActiveListener, target: ReactDevToolsTarget): void => {
+  _onActiveListeners.add(listener);
+  const targets = activeListenerTargets.get(listener) ?? new Set<ReactDevToolsTarget>();
+  targets.add(target);
+  activeListenerTargets.set(listener, targets);
+};
+
+export const removeActiveListener = (
+  listener: ActiveListener,
+  target: ReactDevToolsTarget,
+): void => {
+  const targets = activeListenerTargets.get(listener);
+  targets?.delete(target);
+  if (!targets || targets.size === 0) {
+    activeListenerTargets.delete(listener);
+    _onActiveListeners.delete(listener);
   }
 };
 
-const notifyRendererInjectListeners = (renderer: ReactRenderer): void => {
-  for (const listener of rendererInjectListeners) {
-    listener(renderer);
+const notifyActiveListeners = (target: ReactDevToolsTarget): void => {
+  for (const listener of _onActiveListeners) {
+    if (activeListenerTargets.get(listener)?.has(target)) listener();
   }
 };
 
-const notifyRDTHookReplaceListeners = (rdtHook: ReactDevToolsGlobalHook): void => {
-  for (const listener of rdtHookReplaceListeners) {
-    listener(rdtHook);
+const notifyRendererInjectListeners = (
+  target: ReactDevToolsTarget,
+  renderer: ReactRenderer,
+): void => {
+  for (const subscription of rendererInjectSubscriptions) {
+    if (subscription.target === target) subscription.listener(renderer);
   }
 };
 
-const setRendererInjectDispatcher = (rdtHook: ReactDevToolsGlobalHook): void => {
-  if (rdtHook.inject === notifyingInjectByHook.get(rdtHook)) return;
-  const previousInject = rdtHook.inject;
-  const nextInject = (renderer: ReactRenderer) => {
-    const rendererId = previousInject.call(rdtHook, renderer);
-    if (!notifiedRenderers.has(renderer)) {
-      notifiedRenderers.add(renderer);
-      notifyRendererInjectListeners(renderer);
-    }
-    return rendererId;
-  };
-  rdtHook.inject = nextInject;
-  notifyingInjectByHook.set(rdtHook, nextInject);
+const notifyRDTHookReplaceListeners = (
+  rdtHook: ReactDevToolsGlobalHook,
+  target: ReactDevToolsTarget,
+): void => {
+  for (const listener of rdtHookReplaceListeners) {
+    listener(rdtHook, target);
+  }
 };
 
-export const onRendererInject = (listener: RendererInjectListener): Unsubscribe => {
-  setRendererInjectDispatcher(getRDTHook());
-  rendererInjectListeners.add(listener);
+export const onRendererInject = (
+  listener: RendererInjectListener,
+  target: ReactDevToolsTarget = globalThis,
+): Unsubscribe => {
+  getRDTHook(undefined, target);
+  const subscription = { listener, target };
+  rendererInjectSubscriptions.add(subscription);
   return createUnsubscribe(() => {
-    rendererInjectListeners.delete(listener);
+    rendererInjectSubscriptions.delete(subscription);
   });
 };
 
@@ -126,8 +158,13 @@ export const onRDTHookReplace = (listener: RDTHookReplaceListener): Unsubscribe
   });
 };
 
+// A Map built in another realm (an iframe target) fails instanceof, so replacing it
+// would discard that realm's renderer registry. Object.prototype.toString is realm-agnostic.
+export const isRendererMap = (value: unknown): value is Map<number, ReactRenderer> =>
+  Object.prototype.toString.call(value) === "[object Map]";
+
 const getRendererMap = (rdtHook: ReactDevToolsGlobalHook): Map<number, ReactRenderer> => {
-  if (!(rdtHook.renderers instanceof Map)) {
+  if (!isRendererMap(rdtHook.renderers)) {
     rdtHook.renderers = new Map();
   }
   return rdtHook.renderers;
@@ -135,6 +172,7 @@ const getRendererMap = (rdtHook: ReactDevToolsGlobalHook): Map<number, ReactRend
 
 const trackInjectedRenderer = (
   rdtHook: ReactDevToolsGlobalHook,
+  target: ReactDevToolsTarget,
   renderers: Map<number, ReactRenderer>,
   rendererId: number,
   renderer: ReactRenderer,
@@ -143,28 +181,47 @@ const trackInjectedRenderer = (
   _renderers.add(renderer);
   if (!rdtHook._instrumentationIsActive) {
     rdtHook._instrumentationIsActive = true;
-    notifyActiveListeners();
+    notifyActiveListeners(target);
   }
+  const notifiedRenderers = notifiedRenderersByTarget.get(target) ?? new WeakSet<ReactRenderer>();
+  notifiedRenderersByTarget.set(target, notifiedRenderers);
+  if (notifiedRenderers.has(renderer)) return;
+  notifiedRenderers.add(renderer);
+  notifyRendererInjectListeners(target, renderer);
 };
 
-export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook => {
-  if (onActive) {
-    _onActiveListeners.add(onActive);
-  }
+export const installRDTHook = (
+  onActive?: ActiveListener,
+  target: ReactDevToolsTarget = globalThis,
+): ReactDevToolsGlobalHook => {
+  if (onActive) addActiveListener(onActive, target);
   const renderers = new Map<number, ReactRenderer>();
+  const fiberRoots = new Map<number, Set<FiberRoot>>();
+  // Callers register roots by mutating the returned set, so it must be memoized.
+  const getRendererFiberRoots = (rendererId: number): Set<FiberRoot> => {
+    const rendererRoots = fiberRoots.get(rendererId) ?? new Set<FiberRoot>();
+    fiberRoots.set(rendererId, rendererRoots);
+    return rendererRoots;
+  };
   let rendererIdCounter = 0;
   let rdtHook: ReactDevToolsGlobalHook = {
     _instrumentationIsActive: false,
     _instrumentationSource: BIPPY_INSTRUMENTATION_STRING,
+    _isBippyHook: true,
     checkDCE,
+    getFiberRoots: getRendererFiberRoots,
     hasUnsupportedRendererAttached: false,
     inject: (renderer) => {
       const nextRendererId = ++rendererIdCounter;
-      trackInjectedRenderer(rdtHook, renderers, nextRendererId, renderer);
+      trackInjectedRenderer(rdtHook, target, renderers, nextRendererId, renderer);
       return nextRendererId;
     },
     on: noOp,
-    onCommitFiberRoot: noOp,
+    onCommitFiberRoot: (rendererId, fiberRoot) => {
+      const rendererRoots = getRendererFiberRoots(rendererId);
+      if (isFiberRootUnmounted(fiberRoot)) rendererRoots.delete(fiberRoot);
+      else rendererRoots.add(fiberRoot);
+    },
     onCommitFiberUnmount: noOp,
     onPostCommitFiberRoot: noOp,
     renderers,
@@ -172,13 +229,11 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
     supportsFlight: true,
   };
   try {
-    objectDefineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
+    objectDefineProperty(target, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
       configurable: true,
       enumerable: true,
-      get() {
-        return rdtHook;
-      },
-      set(newHook) {
+      get: () => rdtHook,
+      set: (newHook: ReactDevToolsGlobalHook | undefined) => {
         if (newHook && typeof newHook === "object") {
           const ourRenderers = rdtHook.renderers;
           rdtHook = newHook;
@@ -188,13 +243,13 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
             nextRenderers.set(rendererId, renderer);
           });
           if (ourRenderers.size > 0 || rdtHookReplaceListeners.size > 0) {
-            patchRDTHook(onActive);
+            patchRDTHook(onActive, target);
           }
-          notifyRDTHookReplaceListeners(rdtHook);
+          notifyRDTHookReplaceListeners(rdtHook, target);
         }
       },
     });
-    if (typeof window !== "undefined") {
+    if (target === globalThis && typeof window !== "undefined") {
       // HACK: The DevTools extension uses hasOwnProperty to decide whether it may replace an earlier hook.
       const originalWindowHasOwnProperty = window.hasOwnProperty.bind(window);
       const originalHasOwnPropertyDescriptor = Object.getOwnPropertyDescriptor(
@@ -224,17 +279,18 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
       });
     }
   } catch {
-    patchRDTHook(onActive);
+    patchRDTHook(onActive, target);
   }
   return rdtHook;
 };
 
-export const patchRDTHook = (onActive?: ActiveListener): void => {
-  if (onActive) {
-    _onActiveListeners.add(onActive);
-  }
+export const patchRDTHook = (
+  onActive?: ActiveListener,
+  target: ReactDevToolsTarget = globalThis,
+): void => {
+  if (onActive) addActiveListener(onActive, target);
   let didNotifyActiveListeners = false;
-  const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  const rdtHook = getTargetHook(target);
   if (!rdtHook) return;
   const renderers = getRendererMap(rdtHook);
   if (!rdtHook._instrumentationSource) {
@@ -252,20 +308,20 @@ export const patchRDTHook = (onActive?: ActiveListener): void => {
     if (renderers.size) {
       renderers.forEach((renderer) => _renderers.add(renderer));
       rdtHook._instrumentationIsActive = true;
-      notifyActiveListeners();
+      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();
+      notifyActiveListeners(target);
       didNotifyActiveListeners = true;
     }
     const previousInject = rdtHook.inject;
     rdtHook.inject = (renderer) => {
       const rendererId = previousInject.call(rdtHook, renderer);
-      trackInjectedRenderer(rdtHook, renderers, rendererId, renderer);
+      trackInjectedRenderer(rdtHook, target, renderers, rendererId, renderer);
       return rendererId;
     };
   }
@@ -274,18 +330,20 @@ export const patchRDTHook = (onActive?: ActiveListener): void => {
   }
 };
 
-export const hasRDTHook = (): boolean => {
-  return Object.hasOwn(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__");
-};
+export const hasRDTHook = (target: ReactDevToolsTarget = globalThis): boolean =>
+  Object.hasOwn(target, "__REACT_DEVTOOLS_GLOBAL_HOOK__");
 
 /**
  * Returns the current React DevTools global hook.
  */
-export const getRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook => {
-  if (!hasRDTHook()) {
-    return installRDTHook(onActive);
+export const getRDTHook = (
+  onActive?: ActiveListener,
+  target: ReactDevToolsTarget = globalThis,
+): ReactDevToolsGlobalHook => {
+  if (!hasRDTHook(target)) {
+    return installRDTHook(onActive, target);
   }
 
-  patchRDTHook(onActive);
-  return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? installRDTHook(onActive);
+  patchRDTHook(onActive, target);
+  return getTargetHook(target) ?? installRDTHook(onActive, target);
 };

package/src/react-internals/current-fiber.ts

@@ -0,0 +1,84 @@
+// Adapted from ReactFiberTreeReflection.js. Copyright (c) Meta Platforms, Inc. and affiliates. MIT licensed.
+import type { Fiber } from "./types.js";
+import { getReactWorkTagsForFiber } from "./index.js";
+
+export const getCurrentFiberFromRoot = (fiber: Fiber): Fiber | null => {
+  const alternate = fiber.alternate;
+  if (!alternate) return null;
+  let firstBranch = fiber;
+  let secondBranch = alternate;
+
+  while (firstBranch.return) {
+    const firstParent = firstBranch.return;
+    const secondParent = firstParent.alternate;
+    if (!secondParent) {
+      const nextParent = firstParent.return;
+      if (!nextParent) return null;
+      firstBranch = secondBranch = nextParent;
+      continue;
+    }
+
+    if (firstParent.child === secondParent.child) {
+      let child = firstParent.child;
+      while (child) {
+        if (child === firstBranch || child === secondBranch) {
+          let root = firstParent;
+          while (root.return) root = root.return;
+          if (root.tag !== getReactWorkTagsForFiber(root).HostRoot) return null;
+          return child === firstBranch ? fiber : alternate;
+        }
+        child = child.sibling;
+      }
+      return null;
+    }
+
+    if (firstBranch.return !== secondBranch.return) {
+      firstBranch = firstParent;
+      secondBranch = secondParent;
+    } else {
+      let didFindChild = false;
+      let child = firstParent.child;
+      while (child) {
+        if (child === firstBranch) {
+          firstBranch = firstParent;
+          secondBranch = secondParent;
+          didFindChild = true;
+          break;
+        }
+        if (child === secondBranch) {
+          firstBranch = secondParent;
+          secondBranch = firstParent;
+          didFindChild = true;
+          break;
+        }
+        child = child.sibling;
+      }
+      if (!didFindChild) {
+        child = secondParent.child;
+        while (child) {
+          if (child === firstBranch) {
+            firstBranch = secondParent;
+            secondBranch = firstParent;
+            didFindChild = true;
+            break;
+          }
+          if (child === secondBranch) {
+            firstBranch = firstParent;
+            secondBranch = secondParent;
+            didFindChild = true;
+            break;
+          }
+          child = child.sibling;
+        }
+        if (!didFindChild) return null;
+      }
+    }
+    if (firstBranch.alternate !== secondBranch) return null;
+  }
+
+  if (firstBranch.tag !== getReactWorkTagsForFiber(firstBranch).HostRoot) return null;
+  const root = firstBranch.stateNode;
+  if (typeof root !== "object" || root === null || !("current" in root)) return null;
+  if (root.current === firstBranch) return fiber;
+  return root.current === secondBranch ? alternate : null;
+};

package/src/react-internals/index.ts

@@ -49,11 +49,16 @@ export const getReactWorkTagsForFiber = (fiber: Fiber): Readonly<ReactWorkTagMap
 
   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;
+      break;
+    }
     traversedFibers.push(rootFiber);
   }
-  const workTags = fiberReactWorkTags.get(rootFiber) ?? defaultReactWorkTags;
   for (const traversedFiber of traversedFibers) {
     fiberReactWorkTags.set(traversedFiber, workTags);
     if (traversedFiber.alternate) {

package/src/react-internals/types.ts

@@ -31,12 +31,30 @@ export interface ServerComponentInfo {
   env?: string;
   owner?: Fiber | ServerComponentInfo | null;
   debugStack?: Error | null;
+  debugLocation?: Error | null;
+}
+
+export interface ReactIOInfo {
+  name: string;
+  start: number;
+  end: number;
+  byteSize?: number;
+  value?: Promise<unknown> | null;
+  env?: string;
+  owner?: ServerComponentInfo | null;
+  stack?: unknown[] | null;
+  debugStack?: Error | null;
 }
 
 export interface ReactDebugInfo {
-  debugLocation?: unknown;
+  awaited?: ReactIOInfo;
+  debugLocation?: Error | null;
   env?: string;
   name?: string;
+  owner?: ServerComponentInfo | null;
+  stack?: unknown[] | null;
+  debugStack?: Error | null;
+  time?: number;
 }
 
 export interface ReactMemoCache {
@@ -71,10 +89,10 @@ export interface Fiber<T = unknown> extends Omit<
   | "tag"
   | "updateQueue"
 > {
-  _debugInfo?: ReactDebugInfo[];
+  _debugInfo?: ReactDebugInfo[] | null;
   _debugOwner?: Fiber | ServerComponentInfo | null;
   _debugSource?: FiberDebugSource | null;
-  _debugStack?: Error & { stack: string };
+  _debugStack?: Error | null;
   alternate: Fiber | null;
   child: Fiber | null;
   deletions: Fiber[] | null;
@@ -96,6 +114,8 @@ export interface HostFiber<T = unknown> extends Fiber<T> {
 
 export interface FiberRoot {
   current: Fiber;
+  effectDuration?: number;
+  passiveEffectDuration?: number;
 }
 
 export interface MemoizedState {
@@ -115,6 +135,7 @@ export interface ReactDevToolsEventHandler {
 export interface ReactDevToolsGlobalHook {
   _instrumentationIsActive?: boolean;
   _instrumentationSource?: string;
+  _isBippyHook?: boolean;
   checkDCE: (fn: unknown) => void;
   emit?: (event: string, data?: unknown) => void;
   getFiberRoots?: (rendererID: number) => Set<FiberRoot>;
@@ -149,14 +170,20 @@ export type RendererDispatcherRef = CurrentDispatcherRef | LegacyDispatcherRef;
 
 export interface ReactRenderer extends Omit<
   ReactReconciler.DevToolsConfig<unknown, unknown, unknown>,
-  "findFiberByHostInstance"
+  "bundleType" | "findFiberByHostInstance"
 > {
+  bundleType: number;
   currentDispatcherRef?: RendererDispatcherRef | null;
   findFiberByHostInstance?: (hostInstance: unknown) => Fiber | null;
   getCurrentFiber?: () => Fiber | null;
   overrideContext?: (fiber: Fiber, contextType: unknown, path: string[], value: unknown) => void;
 
-  overrideHookState?: (fiber: Fiber, id: number, path: string[], value: unknown) => void;
+  overrideHookState?: (
+    fiber: Fiber,
+    id: number,
+    path: Array<number | string>,
+    value: unknown,
+  ) => void;
   overrideHookStateDeletePath?: (fiber: Fiber, id: number, path: Array<number | string>) => void;
   overrideHookStateRenamePath?: (
     fiber: Fiber,
@@ -164,7 +191,7 @@ export interface ReactRenderer extends Omit<
     oldPath: Array<number | string>,
     newPath: Array<number | string>,
   ) => void;
-  overrideProps?: (fiber: Fiber, path: string[], value: unknown) => void;
+  overrideProps?: (fiber: Fiber, path: Array<number | string>, value: unknown) => void;
   overridePropsDeletePath?: (fiber: Fiber, path: Array<number | string>) => void;
   overridePropsRenamePath?: (
     fiber: Fiber,