bippy 0.7.2 → 0.7.3-dev.09bae5a

package/src/core.ts

@@ -1,5 +1,6 @@
 // React must remain a type-only import because this module loads immediately after the DevTools hook.
 import type * as React from "react";
+import { callListener } from "./call-listener.js";
 
 import type {
   Fiber,
@@ -10,19 +11,20 @@ import type {
 } from "./react-internals/index.js";
 
 import {
-  _onActiveListeners,
   BIPPY_INSTRUMENTATION_STRING,
   createUnsubscribe,
   getRDTHook,
   hasRDTHook,
+  isFiberRootUnmounted,
   isReactRefresh,
   isRealReactDevtools,
   onRDTHookReplace,
+  removeActiveListener,
 } from "./rdt-hook.js";
-import type { Unsubscribe } from "./rdt-hook.js";
+import type { ReactDevToolsTarget, Unsubscribe } from "./rdt-hook.js";
+import { getCurrentFiberFromRoot } from "./react-internals/current-fiber.js";
 import {
   getReactWorkTagsForFiber,
-  MutationMask,
   ReactBuildType,
   ReactFiberFlags,
   ReactSymbols,
@@ -64,8 +66,8 @@ export const isValidElement = (element: unknown): element is React.ReactElement
   typeof element === "object" &&
   element !== null &&
   "$$typeof" in element &&
-  (String(element.$$typeof) === ReactSymbols.LEGACY_ELEMENT_SYMBOL_STRING ||
-    String(element.$$typeof) === ReactSymbols.ELEMENT_SYMBOL_STRING);
+  (element.$$typeof === Symbol.for("react.element") ||
+    element.$$typeof === Symbol.for("react.transitional.element"));
 
 /**
  * Returns `true` if object is a React Fiber.
@@ -78,7 +80,7 @@ export const isFiber = (fiber: unknown): fiber is Fiber =>
   "return" in fiber &&
   "child" in fiber &&
   "sibling" in fiber &&
-  "flags" in fiber;
+  ("flags" in fiber || "effectTag" in fiber);
 
 const isFiberRoot = (fiberRoot: unknown): fiberRoot is FiberRoot =>
   typeof fiberRoot === "object" &&
@@ -128,7 +130,7 @@ export const isCompositeFiber = (fiber: Fiber): boolean => {
  */
 export const didFiberRender = (fiber: Fiber): boolean => {
   const nextProps = fiber.memoizedProps;
-  const prevProps = fiber.alternate?.memoizedProps || {};
+  const prevProps = fiber.alternate?.memoizedProps;
   const flags = fiber.flags ?? fiber.effectTag ?? 0;
   const workTags = getReactWorkTagsForFiber(fiber);
 
@@ -152,16 +154,6 @@ export const didFiberRender = (fiber: Fiber): boolean => {
   }
 };
 
-/**
- * Returns `true` if the {@link Fiber} has committed. Note that this does not mean the fiber has committed in the current commit, just that it has committed in the past.
- */
-export const didFiberCommit = (fiber: Fiber): boolean => {
-  return Boolean(
-    (fiber.flags & (MutationMask | ReactFiberFlags.Cloned)) !== 0 ||
-    (fiber.subtreeFlags & (MutationMask | ReactFiberFlags.Cloned)) !== 0,
-  );
-};
-
 /**
  * Returns `true` if the {@link Fiber} should be filtered out during reconciliation.
  */
@@ -176,16 +168,20 @@ const shouldFilterFiber = (fiber: Fiber): boolean => {
       // https://github.com/bvaughn/react-devtools-experimental/issues/197
       return true;
 
-    case workTags.Fragment:
+    case workTags.HostPortal:
     case workTags.HostText:
     case workTags.LegacyHiddenComponent:
     case workTags.OffscreenComponent:
+    case workTags.Throw:
       return true;
 
     case workTags.HostRoot:
       // It is never valid to filter the root element.
       return false;
 
+    case workTags.Fragment:
+      return fiber.key === null;
+
     default: {
       const symbolOrNumber =
         typeof fiber.type === "object" && fiber.type !== null ? fiber.type.$$typeof : fiber.type;
@@ -193,7 +189,8 @@ const shouldFilterFiber = (fiber: Fiber): boolean => {
       if (typeof symbolOrNumber === "symbol") {
         return (
           symbolOrNumber.description === ReactSymbols.CONCURRENT_MODE_SYMBOL_DESCRIPTION ||
-          symbolOrNumber.description === ReactSymbols.DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION
+          symbolOrNumber.description === ReactSymbols.DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION ||
+          symbolOrNumber.description === ReactSymbols.STRICT_MODE_SYMBOL_DESCRIPTION
         );
       }
 
@@ -201,6 +198,8 @@ const shouldFilterFiber = (fiber: Fiber): boolean => {
         case ReactSymbols.CONCURRENT_MODE_NUMBER:
         case ReactSymbols.CONCURRENT_MODE_SYMBOL_STRING:
         case ReactSymbols.DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+        case ReactSymbols.STRICT_MODE_NUMBER:
+        case ReactSymbols.STRICT_MODE_SYMBOL_STRING:
           return true;
 
         default:
@@ -210,73 +209,64 @@ const shouldFilterFiber = (fiber: Fiber): boolean => {
   }
 };
 
+interface TraverseFiber {
+  (
+    fiber: Fiber | null,
+    selector: (node: Fiber) => boolean | void,
+    ascending?: boolean,
+  ): Fiber | null;
+  (
+    fiber: Fiber | null,
+    selector: (node: Fiber) => Promise<boolean | void>,
+    ascending?: boolean,
+  ): Promise<Fiber | null>;
+  (
+    fiber: Fiber | null,
+    selector: FiberSelector,
+    ascending?: boolean,
+  ): Fiber | null | Promise<Fiber | null>;
+}
+
 /**
  * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
  */
-export function traverseFiber(
-  fiber: Fiber | null,
-  selector: (node: Fiber) => boolean | void,
-  ascending?: boolean,
-): Fiber | null;
-export function traverseFiber(
-  fiber: Fiber | null,
-  selector: (node: Fiber) => Promise<boolean | void>,
-  ascending?: boolean,
-): Promise<Fiber | null>;
-export function traverseFiber(
-  fiber: Fiber | null,
-  selector: FiberSelector,
-  ascending?: boolean,
-): Fiber | null | Promise<Fiber | null>;
-export function traverseFiber(
+export const traverseFiber = ((
   fiber: Fiber | null,
   selector: FiberSelector,
   ascending = false,
-): Fiber | null | Promise<Fiber | null> {
-  if (!fiber) return null;
-
-  const selection = selector(fiber);
-  if (isPromiseLike<boolean | void>(selection)) {
-    return Promise.resolve(selection).then((didSelectFiber) =>
-      didSelectFiber === true ? fiber : traverseFiberChildren(fiber, selector, ascending),
-    );
-  }
-  if (selection === true) return fiber;
-
-  return traverseFiberChildren(fiber, selector, ascending);
-}
-
-const isPromiseLike = <Result>(value: unknown): value is PromiseLike<Result> =>
-  (typeof value === "object" || typeof value === "function") &&
-  value !== null &&
-  "then" in value &&
-  typeof value.then === "function";
-
-const traverseFiberChildren = (
-  fiber: Fiber,
-  selector: FiberSelector,
-  ascending: boolean,
-): Fiber | null | Promise<Fiber | null> => {
-  const firstChild = ascending ? fiber.return : fiber.child;
-  return traverseFiberSiblings(firstChild, selector, ascending);
-};
-
-const traverseFiberSiblings = (
-  fiber: Fiber | null,
-  selector: FiberSelector,
-  ascending: boolean,
 ): Fiber | null | Promise<Fiber | null> => {
-  if (!fiber) return null;
-
-  const nextSibling = ascending ? null : fiber.sibling;
-  const match = traverseFiber(fiber, selector, ascending);
-  if (isPromiseLike<Fiber | null>(match)) {
-    return Promise.resolve(match).then(
-      (resolvedMatch) => resolvedMatch ?? traverseFiberSiblings(nextSibling, selector, ascending),
-    );
-  }
-  return match ?? traverseFiberSiblings(nextSibling, selector, ascending);
-};
+  const pendingSiblings: Fiber[] = [];
+  const getNextFiber = (currentFiber: Fiber): Fiber | null => {
+    if (ascending) return currentFiber.return;
+    if (currentFiber !== fiber && currentFiber.sibling) {
+      pendingSiblings.push(currentFiber.sibling);
+    }
+    return currentFiber.child ?? pendingSiblings.pop() ?? null;
+  };
+  const visit = (firstFiber: Fiber | null): Fiber | null | Promise<Fiber | null> => {
+    let currentFiber = firstFiber;
+    while (currentFiber) {
+      const selectedFiber = currentFiber;
+      const selection = selector(selectedFiber);
+      const then =
+        selection !== null && (typeof selection === "object" || typeof selection === "function")
+          ? selection.then
+          : null;
+      if (typeof then === "function") {
+        return Promise.resolve<boolean | void>({
+          // oxlint-disable-next-line unicorn/no-thenable -- Assimilate the captured method without reading the accessor twice.
+          then: (resolve, reject) => Reflect.apply(then, selection, [resolve, reject]),
+        }).then((didSelectFiber) =>
+          didSelectFiber === true ? selectedFiber : visit(getNextFiber(selectedFiber)),
+        );
+      }
+      if (selection === true) return selectedFiber;
+      currentFiber = getNextFiber(selectedFiber);
+    }
+    return null;
+  };
+  return visit(fiber);
+}) as TraverseFiber;
 
 /**
  * Returns `true` if the {@link Fiber} uses React Compiler's memo cache.
@@ -291,7 +281,14 @@ export const hasMemoCache = (fiber: Fiber): boolean => {
 export const getType = (type: unknown): null | React.ComponentType<unknown> => {
   if (isComponentType(type)) return type;
   if (typeof type !== "object" || type === null) return null;
-  return getType(Reflect.get(type, "type") ?? Reflect.get(type, "render"));
+  const visitedTypes = new Set<object>();
+  let currentType: unknown = type;
+  while (typeof currentType === "object" && currentType !== null) {
+    if (visitedTypes.has(currentType)) return null;
+    visitedTypes.add(currentType);
+    currentType = Reflect.get(currentType, "type") ?? Reflect.get(currentType, "render");
+  }
+  return isComponentType(currentType) ? currentType : null;
 };
 
 /**
@@ -312,10 +309,7 @@ export const getDisplayName = (type: unknown): null | string => {
  */
 export const detectReactBuildType = (renderer: ReactRenderer): "development" | "production" => {
   try {
-    if (
-      typeof renderer.version === "string" &&
-      renderer.bundleType === ReactBuildType.Development
-    ) {
+    if (typeof renderer.version === "string" && renderer.bundleType > ReactBuildType.Production) {
       return "development";
     }
   } catch {}
@@ -325,8 +319,8 @@ export const detectReactBuildType = (renderer: ReactRenderer): "development" | "
 /**
  * Returns `true` if bippy's instrumentation is active.
  */
-export const isInstrumentationActive = (): boolean => {
-  const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+export const isInstrumentationActive = (target: ReactDevToolsTarget = globalThis): boolean => {
+  const rdtHook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   return (
     Boolean(rdtHook?._instrumentationIsActive) ||
     isRealReactDevtools(rdtHook) ||
@@ -336,6 +330,8 @@ export const isInstrumentationActive = (): boolean => {
 
 export const _fiberRoots = new Set<FiberRoot>();
 const rootRendererIds = new WeakMap<FiberRoot, number>();
+const rootHooks = new WeakMap<FiberRoot, ReactDevToolsGlobalHook>();
+let currentUnmountingFiber: Fiber | null = null;
 
 /**
  * Returns the latest fiber (since it may be double-buffered).
@@ -343,6 +339,10 @@ const rootRendererIds = new WeakMap<FiberRoot, number>();
 export const getLatestFiber = (fiber: Fiber): Fiber => {
   const alternate = fiber.alternate;
   if (!alternate) return fiber;
+  const currentFiber = getCurrentFiberFromRoot(fiber);
+  const isUnmountingPair = fiber === currentUnmountingFiber || alternate === currentUnmountingFiber;
+  if (currentFiber && (!isUnmountingPair || currentFiber === currentUnmountingFiber))
+    return currentFiber;
 
   let rootFiber = fiber;
   while (rootFiber.return) {
@@ -354,6 +354,7 @@ export const getLatestFiber = (fiber: Fiber): Fiber => {
     });
     if (latestFiber) return latestFiber;
   }
+  if (currentFiber) return currentFiber;
 
   if (alternate.actualStartTime && fiber.actualStartTime) {
     return alternate.actualStartTime > fiber.actualStartTime ? alternate : fiber;
@@ -370,29 +371,71 @@ export const getLatestFiber = (fiber: Fiber): Fiber => {
 /**
  * Returns the renderer that owns the {@link Fiber}.
  */
-export const getRenderer = (fiber: Fiber): ReactRenderer | null => {
-  if (!hasRDTHook()) return null;
-
+export const getRenderer = (
+  fiber: Fiber,
+  target: ReactDevToolsTarget = globalThis,
+): ReactRenderer | null => {
   let rootFiber = fiber;
-  while (rootFiber.return) {
-    rootFiber = rootFiber.return;
-  }
-
+  while (rootFiber.return) rootFiber = rootFiber.return;
   const fiberRoot = rootFiber.stateNode;
   if (!isFiberRoot(fiberRoot)) return null;
 
-  const rendererID = rootRendererIds.get(fiberRoot);
-  if (rendererID === undefined) return null;
-  return getRDTHook().renderers.get(rendererID) ?? null;
+  const trackedRendererId = rootRendererIds.get(fiberRoot);
+  const trackedHook = rootHooks.get(fiberRoot);
+  if (trackedRendererId !== undefined && trackedHook) {
+    return trackedHook.renderers.get(trackedRendererId) ?? null;
+  }
+
+  const rdtHook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!rdtHook?.getFiberRoots) return null;
+  for (const [rendererId, renderer] of rdtHook.renderers) {
+    if (!rdtHook.getFiberRoots(rendererId).has(fiberRoot)) continue;
+    _fiberRoots.add(fiberRoot);
+    rootRendererIds.set(fiberRoot, rendererId);
+    rootHooks.set(fiberRoot, rdtHook);
+    setReactWorkTagsForFiber(fiberRoot.current, renderer);
+    return renderer;
+  }
+  return null;
 };
 
 export type RenderPhase = "mount" | "unmount" | "update";
 
+interface FiberReference {
+  deref: () => Fiber | undefined;
+}
+
 let nextFiberId = 0;
 const fiberIdMap = new WeakMap<Fiber, number>();
+const fiberByIdMap = new Map<number, FiberReference>();
+const fiberIdFinalizationRegistry =
+  typeof FinalizationRegistry === "function"
+    ? new FinalizationRegistry<number>((fiberId) => {
+        if (!fiberByIdMap.get(fiberId)?.deref()) fiberByIdMap.delete(fiberId);
+      })
+    : null;
+
+const createFiberReference = (fiber: Fiber): FiberReference =>
+  typeof WeakRef === "function" ? new WeakRef(fiber) : { deref: () => fiber };
+
+const getNextFiberId = (): number => {
+  if (!Number.isSafeInteger(nextFiberId)) throw new RangeError("Fiber ID space exhausted");
+  return nextFiberId++;
+};
 
-export const setFiberId = (fiber: Fiber, fiberId: number = nextFiberId++): void => {
+export const setFiberId = (fiber: Fiber, fiberId: number = getNextFiberId()): void => {
+  const previousFiberId = fiberIdMap.get(fiber);
+  if (
+    previousFiberId !== undefined &&
+    previousFiberId !== fiberId &&
+    fiberByIdMap.get(previousFiberId)?.deref() === fiber
+  ) {
+    fiberByIdMap.delete(previousFiberId);
+  }
   fiberIdMap.set(fiber, fiberId);
+  fiberByIdMap.set(fiberId, createFiberReference(fiber));
+  if (previousFiberId !== undefined) fiberIdFinalizationRegistry?.unregister(fiber);
+  fiberIdFinalizationRegistry?.register(fiber, fiberId, fiber);
   if (Number.isSafeInteger(fiberId) && fiberId >= nextFiberId) {
     nextFiberId = fiberId + 1;
   }
@@ -402,139 +445,135 @@ export const getFiberId = (fiber: Fiber): number => {
   let currentFiberId = fiberIdMap.get(fiber);
   if (currentFiberId === undefined && fiber.alternate) {
     currentFiberId = fiberIdMap.get(fiber.alternate);
+    if (currentFiberId !== undefined) {
+      const assignedFiber = fiberByIdMap.get(currentFiberId)?.deref();
+      if (assignedFiber && assignedFiber !== fiber.alternate) {
+        fiberIdMap.set(fiber, currentFiberId);
+      } else {
+        setFiberId(fiber, currentFiberId);
+      }
+    }
   }
   if (currentFiberId === undefined) {
-    currentFiberId = nextFiberId++;
+    currentFiberId = getNextFiberId();
     setFiberId(fiber, currentFiberId);
   }
   return currentFiberId;
 };
 
-const mountFiberRecursively = (
+export const getFiberById = (fiberId: number): Fiber | null => {
+  const fiber = fiberByIdMap.get(fiberId)?.deref();
+  if (!fiber) {
+    fiberByIdMap.delete(fiberId);
+    return null;
+  }
+  return getLatestFiber(fiber);
+};
+
+const releaseFiberId = (fiber: Fiber): void => {
+  const relatedFibers = fiber.alternate ? [fiber, fiber.alternate] : [fiber];
+  const fiberIds = new Set<number>();
+
+  for (const relatedFiber of relatedFibers) {
+    const fiberId = fiberIdMap.get(relatedFiber);
+    if (fiberId !== undefined) fiberIds.add(fiberId);
+    fiberIdMap.delete(relatedFiber);
+    fiberIdFinalizationRegistry?.unregister(relatedFiber);
+  }
+
+  for (const fiberId of fiberIds) {
+    const assignedFiber = fiberByIdMap.get(fiberId)?.deref();
+    if (!assignedFiber || relatedFibers.includes(assignedFiber)) {
+      fiberByIdMap.delete(fiberId);
+    }
+  }
+};
+
+const getRenderedChild = (fiber: Fiber, skipPrimaryWrapper: boolean): Fiber | null => {
+  const workTags = getReactWorkTagsForFiber(fiber);
+  if (fiber.tag !== workTags.SuspenseComponent) return fiber.child;
+  if (fiber.memoizedState !== null) return fiber.child?.sibling?.child ?? null;
+  return skipPrimaryWrapper && workTags.OffscreenComponent !== -1
+    ? (fiber.child?.child ?? null)
+    : fiber.child;
+};
+
+const mountFiberTree = (
   onRender: RenderHandler,
   firstChild: Fiber,
   traverseSiblings: boolean,
 ): void => {
+  const pendingSiblings: Fiber[] = [];
   let fiber: Fiber | null = firstChild;
-
-  while (fiber !== null) {
+  while (fiber) {
     getFiberId(fiber);
-    const shouldIncludeInTree = !shouldFilterFiber(fiber);
-    if (shouldIncludeInTree && didFiberRender(fiber)) {
-      onRender(fiber, "mount");
-    }
-
-    if (fiber.tag === getReactWorkTagsForFiber(fiber).SuspenseComponent) {
-      const isTimedOut = fiber.memoizedState !== null;
-      if (isTimedOut) {
-        // Special case: if Suspense mounts in a timed-out state,
-        // get the fallback child from the inner fragment and mount
-        // it as if it was our own child. Updates handle this too.
-        const primaryChildFragment = fiber.child;
-        const fallbackChildFragment = primaryChildFragment ? primaryChildFragment.sibling : null;
-        if (fallbackChildFragment) {
-          const fallbackChild = fallbackChildFragment.child;
-          if (fallbackChild !== null) {
-            mountFiberRecursively(onRender, fallbackChild, false);
-          }
-        }
-      } else {
-        const primaryChild = fiber.child?.child ?? null;
-        if (primaryChild !== null) {
-          mountFiberRecursively(onRender, primaryChild, false);
-        }
-      }
-    } else if (fiber.child !== null) {
-      mountFiberRecursively(onRender, fiber.child, true);
-    }
-    fiber = traverseSiblings ? fiber.sibling : null;
+    if (!shouldFilterFiber(fiber) && didFiberRender(fiber)) onRender(fiber, "mount");
+    if (traverseSiblings && fiber.sibling) pendingSiblings.push(fiber.sibling);
+    fiber = getRenderedChild(fiber, true) ?? pendingSiblings.pop() ?? null;
+    traverseSiblings = true;
   }
 };
 
-const updateFiberRecursively = (
+interface FiberUpdate {
+  fiber: Fiber;
+  previousFiber: Fiber | null;
+  traverseSiblings: boolean;
+}
+
+const updateFiberTree = (
   onRender: RenderHandler,
   nextFiber: Fiber,
   prevFiber: Fiber | null,
 ): void => {
-  getFiberId(nextFiber);
-  if (!prevFiber) return;
-  getFiberId(prevFiber);
-
-  const isSuspense = nextFiber.tag === getReactWorkTagsForFiber(nextFiber).SuspenseComponent;
-
-  const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
-  if (shouldIncludeInTree && didFiberRender(nextFiber)) {
-    onRender(nextFiber, "update");
-  }
-
-  // The behavior of timed-out Suspense trees is unique.
-  // Rather than unmount the timed out content (and possibly lose important state),
-  // React re-parents this content within a hidden Fragment while the fallback is showing.
-  // This behavior doesn't need to be observable in the DevTools though.
-  // It might even result in a bad user experience for e.g. node selection in the Elements panel.
-  // The easiest fix is to strip out the intermediate Fragment fibers,
-  // so the Elements panel and Profiler don't need to special case them.
-  // Suspense components only have a non-null memoizedState if they're timed-out.
-  const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;
-  const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;
-
-  // The logic below is inspired by the code paths in updateSuspenseComponent()
-  // inside ReactFiberBeginWork in the React source code.
-  if (prevDidTimeout && nextDidTimeOut) {
-    // Fallback -> Fallback:
-    // 1. Reconcile fallback set.
-    const nextFallbackChildSet = nextFiber.child?.sibling ?? null;
-    // Note: We can't use nextFiber.child.sibling.alternate
-    // because the set is special and alternate may not exist.
-    const prevFallbackChildSet = prevFiber.child?.sibling ?? null;
-
-    if (nextFallbackChildSet !== null && prevFallbackChildSet !== null) {
-      updateFiberRecursively(onRender, nextFallbackChildSet, prevFallbackChildSet);
-    }
-  } else if (prevDidTimeout && !nextDidTimeOut) {
-    // Fallback -> Primary:
-    // 1. Unmount fallback set
-    // Note: don't emulate fallback unmount because React actually did it.
-    // 2. Mount primary set
-    const nextPrimaryChildSet = nextFiber.child;
-
-    if (nextPrimaryChildSet !== null) {
-      mountFiberRecursively(onRender, nextPrimaryChildSet, true);
+  if (!prevFiber) {
+    getFiberId(nextFiber);
+    return;
+  }
+  const pendingUpdates: FiberUpdate[] = [
+    { fiber: nextFiber, previousFiber: prevFiber, traverseSiblings: false },
+  ];
+  let update: FiberUpdate | undefined;
+  while ((update = pendingUpdates.pop())) {
+    const { fiber, previousFiber, traverseSiblings } = update;
+    if (traverseSiblings && fiber.sibling) {
+      pendingUpdates.push({
+        fiber: fiber.sibling,
+        previousFiber: fiber.sibling.alternate,
+        traverseSiblings: true,
+      });
     }
-  } else if (!prevDidTimeout && nextDidTimeOut) {
-    // Primary -> Fallback:
-    // 1. Hide primary set
-    // This is not a real unmount, so it won't get reported by React.
-    // We need to manually walk the previous tree and record unmounts.
-    unmountFiberChildrenRecursively(onRender, prevFiber);
-
-    // 2. Mount fallback set
-    const nextFallbackChildSet = nextFiber.child?.sibling ?? null;
-
-    if (nextFallbackChildSet !== null) {
-      mountFiberRecursively(onRender, nextFallbackChildSet, true);
+    if (!previousFiber) {
+      mountFiberTree(onRender, fiber, false);
+      continue;
     }
-  } else if (nextFiber.child !== prevFiber.child) {
-    // Common case: Primary -> Primary.
-    // This is the same code path as for non-Suspense fibers.
-
-    // If the first child is different, we need to traverse them.
-    // Each next child will be either a new child (mount) or an alternate (update).
-    let nextChild = nextFiber.child;
-
-    while (nextChild) {
-      // We already know children will be referentially different because
-      // they are either new mounts or alternates of previous children.
-      // Schedule updates and mounts depending on whether alternates exist.
-      // We don't track deletions here because they are reported separately.
-      if (nextChild.alternate) {
-        updateFiberRecursively(onRender, nextChild, nextChild.alternate);
-      } else {
-        mountFiberRecursively(onRender, nextChild, false);
+    getFiberId(fiber);
+    getFiberId(previousFiber);
+    if (!shouldFilterFiber(fiber) && didFiberRender(fiber)) onRender(fiber, "update");
+    const isSuspense = fiber.tag === getReactWorkTagsForFiber(fiber).SuspenseComponent;
+    const wasTimedOut = isSuspense && previousFiber.memoizedState !== null;
+    const isTimedOut = isSuspense && fiber.memoizedState !== null;
+    if (wasTimedOut && isTimedOut) {
+      const nextFallback = fiber.child?.sibling;
+      const previousFallback = previousFiber.child?.sibling;
+      if (nextFallback) {
+        pendingUpdates.push({
+          fiber: nextFallback,
+          previousFiber: previousFallback ?? null,
+          traverseSiblings: false,
+        });
       }
-
-      // Try the next child.
-      nextChild = nextChild.sibling;
+    } else if (wasTimedOut && !isTimedOut) {
+      if (fiber.child) mountFiberTree(onRender, fiber.child, true);
+    } else if (!wasTimedOut && isTimedOut) {
+      unmountFiberChildren(onRender, previousFiber);
+      const fallback = fiber.child?.sibling;
+      if (fallback) mountFiberTree(onRender, fallback, true);
+    } else if (fiber.child && fiber.child !== previousFiber.child) {
+      pendingUpdates.push({
+        fiber: fiber.child,
+        previousFiber: fiber.child.alternate,
+        traverseSiblings: true,
+      });
     }
   }
 };
@@ -547,30 +586,18 @@ const unmountFiber = (onRender: RenderHandler, fiber: Fiber): void => {
   }
 };
 
-const unmountFiberChildrenRecursively = (onRender: RenderHandler, fiber: Fiber): void => {
-  // We might meet a nested Suspense on our way.
-  const isTimedOutSuspense =
-    fiber.tag === getReactWorkTagsForFiber(fiber).SuspenseComponent && fiber.memoizedState !== null;
-  let child = fiber.child;
-
-  if (isTimedOutSuspense) {
-    // If it's showing fallback tree, let's traverse it instead.
-    const primaryChildFragment = fiber.child;
-    const fallbackChildFragment = primaryChildFragment?.sibling ?? null;
-
-    // Skip over to the real Fiber child.
-    child = fallbackChildFragment?.child ?? null;
-  }
-
-  while (child !== null) {
-    // Record simulated unmounts children-first.
-    // We skip nodes without return because those are real unmounts.
+const unmountFiberChildren = (onRender: RenderHandler, fiber: Fiber): void => {
+  const pendingSiblings: Fiber[] = [];
+  let child = getRenderedChild(fiber, false);
+  while (child) {
+    if (child.sibling) pendingSiblings.push(child.sibling);
     if (child.return !== null) {
       unmountFiber(onRender, child);
-      unmountFiberChildrenRecursively(onRender, child);
+      child = getRenderedChild(child, false);
+    } else {
+      child = null;
     }
-
-    child = child.sibling;
+    child ??= pendingSiblings.pop() ?? null;
   }
 };
 
@@ -602,39 +629,40 @@ const isRootFiberMounted = (fiber: Fiber): boolean => {
  */
 export const traverseRenderedFibers = (root: Fiber | FiberRoot, onRender: RenderHandler): void => {
   const fiber = "current" in root ? root.current : root;
+  const rootKey = "current" in root || !isFiberRoot(root.stateNode) ? root : root.stateNode;
 
-  let rootInstance = rootInstanceMap.get(root);
+  let rootInstance = rootInstanceMap.get(rootKey);
 
   if (!rootInstance) {
     rootInstance = { prevFiber: null };
-    rootInstanceMap.set(root, rootInstance);
+    rootInstanceMap.set(rootKey, rootInstance);
   }
 
   const { prevFiber } = rootInstance;
+  rootInstance.prevFiber = fiber;
   if (!fiber) {
     if (prevFiber) {
       unmountFiber(onRender, prevFiber);
     }
   } else if (prevFiber !== null) {
-    const wasMounted = isRootFiberMounted(prevFiber);
+    const wasMounted = isRootFiberMounted(fiber.alternate ?? prevFiber);
     const isMounted = isRootFiberMounted(fiber);
 
     if (!wasMounted && isMounted) {
-      mountFiberRecursively(onRender, fiber, false);
+      mountFiberTree(onRender, fiber, false);
     } else if (wasMounted && isMounted) {
-      updateFiberRecursively(onRender, fiber, fiber.alternate);
+      updateFiberTree(onRender, fiber, fiber.alternate);
     } else if (wasMounted && !isMounted) {
       unmountFiber(onRender, fiber);
     }
   } else {
-    mountFiberRecursively(onRender, fiber, true);
+    mountFiberTree(onRender, fiber, true);
   }
-
-  rootInstance.prevFiber = fiber;
 };
 
 export interface InstrumentationOptions {
   name?: string;
+  target?: ReactDevToolsTarget;
   onActive?: () => unknown;
   onCommitFiberRoot?: (
     rendererID: number,
@@ -649,6 +677,7 @@ export interface InstrumentationOptions {
 
 interface InstrumentationSubscription {
   options: InstrumentationOptions;
+  target: ReactDevToolsTarget;
 }
 
 const instrumentationSubscriptions = new Set<InstrumentationSubscription>();
@@ -661,6 +690,7 @@ interface HookDispatchers {
 }
 
 const hookDispatchers = new WeakMap<ReactDevToolsGlobalHook, Partial<HookDispatchers>>();
+const hookTargets = new WeakMap<ReactDevToolsGlobalHook, ReactDevToolsTarget>();
 let didSubscribeToHookReplacements = false;
 
 // each hook event is dispatched from a single re-installable wrapper. If
@@ -683,28 +713,32 @@ const setHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
       priority,
       didError,
     ) => {
+      const isCurrentDispatcher =
+        hookDispatchers.get(rdtHook)?.onCommitFiberRoot === dispatchCommitFiberRoot;
       if (prevOnCommitFiberRoot) {
-        prevOnCommitFiberRoot.call(rdtHook, rendererID, root, priority, didError);
+        callListener(prevOnCommitFiberRoot, rdtHook, rendererID, root, priority, didError);
       }
-      if (hookDispatchers.get(rdtHook)?.onCommitFiberRoot !== dispatchCommitFiberRoot) return;
+      if (!isCurrentDispatcher) return;
       setReactWorkTagsForFiber(root.current, rdtHook.renderers.get(rendererID));
       // Custom renderers and test harnesses commit roots without a memoizedState;
       // those must stay tracked, so only explicit unmount evidence removes a root.
-      const rootMemoizedState = root.current.memoizedState;
-      const isUnmounting =
-        rootMemoizedState === null ||
-        (rootMemoizedState !== undefined &&
-          (rootMemoizedState.element === null || rootMemoizedState.element === undefined));
-      if (isUnmounting) {
+      if (isFiberRootUnmounted(root)) {
         _fiberRoots.delete(root);
         rootRendererIds.delete(root);
+        rootHooks.delete(root);
       } else {
         _fiberRoots.add(root);
         rootRendererIds.set(root, rendererID);
+        rootHooks.set(root, rdtHook);
       }
-      for (const { options } of instrumentationSubscriptions) {
-        if (options.onCommitFiberRoot) {
-          options.onCommitFiberRoot(rendererID, root, priority, didError);
+      const subscriptionSnapshot = [...instrumentationSubscriptions];
+      for (const subscription of subscriptionSnapshot) {
+        const { options, target } = subscription;
+        if (instrumentationSubscriptions.has(subscription) && target === hookTargets.get(rdtHook)) {
+          callListener(
+            () => options.onCommitFiberRoot?.(rendererID, root, priority, didError),
+            undefined,
+          );
         }
       }
     };
@@ -721,17 +755,29 @@ const setHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
       rendererID,
       fiber,
     ) => {
+      const isCurrentDispatcher =
+        hookDispatchers.get(rdtHook)?.onCommitFiberUnmount === dispatchCommitFiberUnmount;
       setReactWorkTagsForFiber(fiber, rdtHook.renderers.get(rendererID));
-      if (prevOnCommitFiberUnmount) {
-        prevOnCommitFiberUnmount.call(rdtHook, rendererID, fiber);
-      }
-      if (hookDispatchers.get(rdtHook)?.onCommitFiberUnmount !== dispatchCommitFiberUnmount) {
-        return;
-      }
-      for (const { options } of instrumentationSubscriptions) {
-        if (options.onCommitFiberUnmount) {
-          options.onCommitFiberUnmount(rendererID, fiber);
+      const previousUnmountingFiber = currentUnmountingFiber;
+      currentUnmountingFiber = fiber;
+      try {
+        if (prevOnCommitFiberUnmount) {
+          callListener(prevOnCommitFiberUnmount, rdtHook, rendererID, fiber);
         }
+        if (!isCurrentDispatcher) return;
+        const subscriptionSnapshot = [...instrumentationSubscriptions];
+        for (const subscription of subscriptionSnapshot) {
+          const { options, target } = subscription;
+          if (
+            instrumentationSubscriptions.has(subscription) &&
+            target === hookTargets.get(rdtHook)
+          ) {
+            callListener(() => options.onCommitFiberUnmount?.(rendererID, fiber), undefined);
+          }
+        }
+      } finally {
+        currentUnmountingFiber = previousUnmountingFiber;
+        if (isCurrentDispatcher) releaseFiberId(fiber);
       }
     };
     dispatchers.onCommitFiberUnmount = dispatchCommitFiberUnmount;
@@ -747,15 +793,17 @@ const setHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
       rendererID,
       root,
     ) => {
+      const isCurrentDispatcher =
+        hookDispatchers.get(rdtHook)?.onPostCommitFiberRoot === dispatchPostCommitFiberRoot;
       if (prevOnPostCommitFiberRoot) {
-        prevOnPostCommitFiberRoot.call(rdtHook, rendererID, root);
+        callListener(prevOnPostCommitFiberRoot, rdtHook, rendererID, root);
       }
-      if (hookDispatchers.get(rdtHook)?.onPostCommitFiberRoot !== dispatchPostCommitFiberRoot) {
-        return;
-      }
-      for (const { options } of instrumentationSubscriptions) {
-        if (options.onPostCommitFiberRoot) {
-          options.onPostCommitFiberRoot(rendererID, root);
+      if (!isCurrentDispatcher) return;
+      const subscriptionSnapshot = [...instrumentationSubscriptions];
+      for (const subscription of subscriptionSnapshot) {
+        const { options, target } = subscription;
+        if (instrumentationSubscriptions.has(subscription) && target === hookTargets.get(rdtHook)) {
+          callListener(() => options.onPostCommitFiberRoot?.(rendererID, root), undefined);
         }
       }
     };
@@ -773,13 +821,17 @@ const setHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
       root,
       children,
     ) => {
+      const isCurrentDispatcher =
+        hookDispatchers.get(rdtHook)?.onScheduleFiberRoot === dispatchScheduleFiberRoot;
       if (prevOnScheduleFiberRoot) {
-        prevOnScheduleFiberRoot.call(rdtHook, rendererID, root, children);
+        callListener(prevOnScheduleFiberRoot, rdtHook, rendererID, root, children);
       }
-      if (hookDispatchers.get(rdtHook)?.onScheduleFiberRoot !== dispatchScheduleFiberRoot) return;
-      for (const { options } of instrumentationSubscriptions) {
-        if (options.onScheduleFiberRoot) {
-          options.onScheduleFiberRoot(rendererID, root, children);
+      if (!isCurrentDispatcher) return;
+      const subscriptionSnapshot = [...instrumentationSubscriptions];
+      for (const subscription of subscriptionSnapshot) {
+        const { options, target } = subscription;
+        if (instrumentationSubscriptions.has(subscription) && target === hookTargets.get(rdtHook)) {
+          callListener(() => options.onScheduleFiberRoot?.(rendererID, root, children), undefined);
         }
       }
     };
@@ -788,11 +840,23 @@ const setHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
   }
 };
 
-const wireHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
+const handleHookReplacement = (
+  rdtHook: ReactDevToolsGlobalHook,
+  target: ReactDevToolsTarget,
+): void => {
+  hookTargets.set(rdtHook, target);
+  setHookEventDispatchers(rdtHook);
+};
+
+const wireHookEventDispatchers = (
+  rdtHook: ReactDevToolsGlobalHook,
+  target: ReactDevToolsTarget = globalThis,
+): void => {
   if (!didSubscribeToHookReplacements) {
-    onRDTHookReplace(setHookEventDispatchers);
+    onRDTHookReplace(handleHookReplacement);
     didSubscribeToHookReplacements = true;
   }
+  hookTargets.set(rdtHook, target);
   setHookEventDispatchers(rdtHook);
 };
 
@@ -822,15 +886,21 @@ try {
  * unsubscribe();
  */
 export const instrument = (options: InstrumentationOptions): Unsubscribe => {
-  const rdtHook = getRDTHook(options.onActive);
+  const target = options.target ?? globalThis;
+  const activeListener = options.onActive;
+  const onActive = activeListener ? () => activeListener() : undefined;
+  const existingHook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (existingHook) wireHookEventDispatchers(existingHook, target);
+  const rdtHook = getRDTHook(undefined, target);
   rdtHook._instrumentationSource = options.name ?? BIPPY_INSTRUMENTATION_STRING;
 
-  wireHookEventDispatchers(rdtHook);
-  const subscription: InstrumentationSubscription = { options };
+  wireHookEventDispatchers(rdtHook, target);
+  const subscription: InstrumentationSubscription = { options, target };
   instrumentationSubscriptions.add(subscription);
+  if (onActive) getRDTHook(onActive, target);
 
   return createUnsubscribe(() => {
-    if (options.onActive) _onActiveListeners.delete(options.onActive);
+    if (onActive) removeActiveListener(onActive, target);
     instrumentationSubscriptions.delete(subscription);
   });
 };
@@ -874,9 +944,12 @@ const getPublicHostInstance = (stateNode: unknown): unknown => {
   return typeof nativeTag === "number" ? nativeTag : stateNode;
 };
 
-export const getFiber = <T>(hostInstance: T): Fiber | null => {
-  const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (rdtHook?.renderers) {
+export const getFiber = <HostInstance>(
+  hostInstance: HostInstance,
+  target: ReactDevToolsTarget = globalThis,
+): Fiber | null => {
+  const rdtHook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (rdtHook) {
     for (const renderer of rdtHook.renderers.values()) {
       try {
         const fiber = renderer.findFiberByHostInstance?.(hostInstance);
@@ -899,19 +972,31 @@ export const getFiber = <T>(hostInstance: T): Fiber | null => {
 
     for (const key of Object.keys(hostInstance)) {
       if (isFiberPropertyKey(key)) {
-        knownFiberPropertyKeys.add(key);
         const fiber = Reflect.get(hostInstance, key);
-        if (isFiber(fiber)) return fiber;
+        if (isFiber(fiber)) {
+          knownFiberPropertyKeys.add(key);
+          return fiber;
+        }
       }
     }
   }
 
   if (
     hostInstance !== null &&
-    hostInstance !== undefined &&
     (typeof hostInstance === "object" || typeof hostInstance === "number")
   ) {
+    const targetFiberRoots = new Set<FiberRoot>();
+    if (rdtHook?.getFiberRoots) {
+      for (const rendererId of rdtHook.renderers.keys()) {
+        for (const fiberRoot of rdtHook.getFiberRoots(rendererId)) {
+          targetFiberRoots.add(fiberRoot);
+        }
+      }
+    }
     for (const fiberRoot of _fiberRoots) {
+      if (rootHooks.get(fiberRoot) === rdtHook) targetFiberRoots.add(fiberRoot);
+    }
+    for (const fiberRoot of targetFiberRoots) {
       const fiber = traverseFiber(
         fiberRoot.current,
         (candidateFiber) =>
@@ -928,16 +1013,16 @@ export const getFiberFromHostInstance = getFiber;
 
 export {
   BIPPY_INSTRUMENTATION_STRING,
-  _onActiveListeners,
   _renderers,
   getRDTHook,
   hasRDTHook,
   installRDTHook,
+  isFiberRootUnmounted,
   isReactRefresh,
   isRealReactDevtools,
   onRendererInject,
   patchRDTHook,
   version,
 } from "./rdt-hook.js";
-export type { Unsubscribe } from "./rdt-hook.js";
+export type { ReactDevToolsTarget, Unsubscribe } from "./rdt-hook.js";
 export * from "./react-internals/index.js";