bippy 0.7.3-dev.8ba0705 → 0.7.3-dev.c0e872e

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;
 }
@@ -49,6 +54,8 @@ export const isFiberRootUnmounted = (fiberRoot: FiberRoot): boolean => {
 };
 
 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) {
@@ -91,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 => {
@@ -113,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);
   }
 };
 
@@ -123,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);
+    }
   }
 };
 
@@ -132,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);
+    }
   }
 };
 
@@ -150,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);
   });
 };
 
@@ -240,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);
         }
       },
     });
@@ -285,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);
@@ -303,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/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/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,25 +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;
-  while (rootFiber.return) {
-    rootFiber = rootFiber.return;
-    traversedFibers.push(rootFiber);
+  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;
+    }
+    ancestor = parent;
+    workTags = getCachedWorkTags(ancestor);
   }
-  const workTags = fiberReactWorkTags.get(rootFiber) ?? defaultReactWorkTags;
+  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

@@ -1,77 +1,162 @@
 import "./install-hook-only.js";
-import * as React from "react";
-import { isFiber } from "./core.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";
 
-const preserveState = (state: undefined): undefined => state;
-const readEmptySnapshot = (): undefined => undefined;
-const unsubscribeFromEmptyStore = (): void => {};
-const subscribeToEmptyStore = (): (() => void) => unsubscribeFromEmptyStore;
-const useSyncExternalStore: unknown = Reflect.get(React, "useSyncExternalStore");
+interface RenderMarker {
+  (state: undefined): undefined;
+}
 
-const captureFiberFromHook = (useCaptureHook: () => void): Fiber | null => {
-  const originalBind = Function.prototype.bind;
-  let capturedFiber: Fiber | null = null;
-  // HACK: React binds hook callbacks to the rendering Fiber in production but exposes no public API for it.
+interface ReducerQueue {
+  lastRenderedReducer: unknown;
+}
+
+interface FiberCapture {
+  fiber: Fiber;
+  queue: ReducerQueue | null;
+}
+
+const isReducerQueue = (value: unknown): value is ReducerQueue =>
+  typeof value === "object" && value !== null && "lastRenderedReducer" in value;
+
+const hasRenderMarker = (fiber: Fiber, renderMarker: RenderMarker): boolean => {
+  for (let hook = fiber.memoizedState; hook; hook = hook.next) {
+    if (Array.isArray(hook.memoizedState) && hook.memoizedState[0] === renderMarker) return true;
+  }
+  return false;
+};
+
+const getReducerQueue = (fiber: Fiber, renderMarker: RenderMarker): ReducerQueue | null => {
+  for (let hook = fiber.memoizedState; hook; hook = hook.next) {
+    if (isReducerQueue(hook.queue) && hook.queue.lastRenderedReducer === renderMarker)
+      return hook.queue;
+  }
+  return null;
+};
+
+const getDevToolsFiber = (renderMarker: RenderMarker): Fiber | null => {
+  for (const renderer of _renderers) {
+    try {
+      const fiber = renderer.getCurrentFiber?.();
+      if (fiber && isFiber(fiber) && hasRenderMarker(fiber, renderMarker)) return fiber;
+    } catch {}
+  }
+  return null;
+};
+
+const captureReducerFiber = (
+  renderMarker: RenderMarker,
+  shouldCapture: boolean,
+): FiberCapture | null => {
+  let originalBind: typeof Function.prototype.bind | undefined;
+  if (shouldCapture) {
+    try {
+      originalBind = Function.prototype.bind;
+    } catch {}
+  }
+  if (!originalBind) {
+    React.useReducer(renderMarker, undefined);
+    return null;
+  }
+
+  let capture: FiberCapture | null = null;
+  let isCapturing = true;
+  // HACK: Production React binds a new reducer's Fiber and queue; validate the private reducer marker, not argument positions.
   const bindProxy = new Proxy(originalBind, {
-    apply: (bind, functionToBind, boundArguments) => {
-      const fiber = boundArguments[1];
-      if (!capturedFiber && isFiber(fiber)) {
-        capturedFiber = fiber;
+    apply: (bind, callback, boundArguments) => {
+      if (isCapturing && !capture) {
+        try {
+          const queue = boundArguments.find(
+            (argument): argument is ReducerQueue =>
+              isReducerQueue(argument) && argument.lastRenderedReducer === renderMarker,
+          );
+          if (queue) {
+            const fiber = boundArguments.find(
+              (argument): argument is Fiber => isFiber(argument) && isFiber(argument.return),
+            );
+            if (fiber) capture = { fiber, queue };
+          }
+        } catch {}
       }
-      return Reflect.apply(bind, functionToBind, boundArguments);
+      return Reflect.apply(bind, callback, boundArguments);
     },
   });
-  Reflect.set(Function.prototype, "bind", bindProxy);
 
   try {
-    useCaptureHook();
+    try {
+      Reflect.set(Function.prototype, "bind", bindProxy);
+    } catch {}
+    React.useReducer(renderMarker, undefined);
+    return capture;
   } finally {
-    if (Function.prototype.bind === bindProxy) {
-      Reflect.set(Function.prototype, "bind", originalBind);
-    }
+    isCapturing = false;
+    capture = null;
+    try {
+      if (Function.prototype.bind === bindProxy) {
+        Reflect.set(Function.prototype, "bind", originalBind);
+      }
+    } catch {}
   }
-
-  return capturedFiber;
-};
-
-const useExternalStoreCapture = (): void => {
-  if (typeof useSyncExternalStore !== "function") return;
-  Reflect.apply(useSyncExternalStore, React, [
-    subscribeToEmptyStore,
-    readEmptySnapshot,
-    readEmptySnapshot,
-  ]);
 };
 
-const useReducerCapture = (): void => {
-  React.useReducer(preserveState, undefined);
+// HACK: React <16.13 attaches hooks after render; the shared reducer queue validates the root-walk fallback.
+const getRenderingFiberFromRoot = (
+  { fiber, queue }: FiberCapture,
+  renderMarker: RenderMarker,
+): Fiber | null => {
+  if (queue?.lastRenderedReducer !== renderMarker) return null;
+  let rootFiber = fiber;
+  while (rootFiber.return) rootFiber = rootFiber.return;
+  const root = rootFiber.stateNode;
+  if (typeof root !== "object" || root === null || !("current" in root) || !isFiber(root.current)) {
+    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;
+    while (parent.return) parent = parent.return;
+    return parent === renderingRoot;
+  });
 };
 
-const useFiberWithExternalStore = (): Fiber | undefined =>
-  captureFiberFromHook(useExternalStoreCapture) ?? undefined;
-
-const useFiberWithReducer = (): Fiber | undefined => {
-  const committedFiberRef = React.useRef<Fiber | null>(null);
-  const renderedFiberRef = React.useRef<Fiber | null>(null);
-  const hookFiber = captureFiberFromHook(useReducerCapture);
+export const useFiber = (): Fiber | undefined => {
+  "use no memo";
+  const fiberRef = React.useRef<FiberCapture | null>(null);
+  const renderMarker: RenderMarker = (state) => state;
+  React.useMemo(() => renderMarker, [renderMarker]);
+  const devToolsFiber = fiberRef.current ? null : getDevToolsFiber(renderMarker);
+  const capture = captureReducerFiber(renderMarker, !fiberRef.current && !devToolsFiber);
+  if (devToolsFiber) {
+    fiberRef.current = {
+      fiber: devToolsFiber,
+      queue: getReducerQueue(devToolsFiber, renderMarker),
+    };
+    return devToolsFiber;
+  }
+  const knownCapture = capture ?? fiberRef.current;
+  if (!knownCapture) return undefined;
+  const knownFiber = knownCapture.fiber;
   const fiber =
-    hookFiber ??
-    (renderedFiberRef.current !== committedFiberRef.current
-      ? renderedFiberRef.current
-      : committedFiberRef.current?.alternate) ??
-    committedFiberRef.current;
-
-  renderedFiberRef.current = fiber;
-
-  React.useEffect(() => {
-    committedFiberRef.current = fiber;
-  }, [fiber]);
-
+    capture?.fiber ??
+    (hasRenderMarker(knownFiber, renderMarker)
+      ? knownFiber
+      : knownFiber.alternate && hasRenderMarker(knownFiber.alternate, renderMarker)
+        ? knownFiber.alternate
+        : getRenderingFiberFromRoot(knownCapture, renderMarker));
+  if (fiber) {
+    knownCapture.fiber = fiber;
+    fiberRef.current = knownCapture;
+  }
   return fiber ?? undefined;
 };
-
-export const useFiber =
-  typeof useSyncExternalStore === "function" ? useFiberWithExternalStore : useFiberWithReducer;