bippy 0.6.1-dev.3a24abf → 0.6.1-dev.d7876ea

package/src/rdt-hook.ts

@@ -1,23 +1,43 @@
 // This module must load before React so renderers can inject into the hook.
 
+import {
+  BippyHookInstallationError,
+  BippyHookListenerError,
+  BippyReactBuildError,
+  runWithBippyError,
+} from "./errors.js";
 import type { ReactDevToolsGlobalHook, ReactRenderer } from "./types.js";
 import { toUnsubscribe, type Unsubscribe } from "./unsubscribe.js";
 
+interface ActiveListener {
+  (): unknown;
+}
+
+interface RendererInjectListener {
+  (renderer: ReactRenderer): void;
+}
+
+interface RDTHookReplaceListener {
+  (rdtHook: ReactDevToolsGlobalHook): void;
+}
+
 export const version = process.env.VERSION;
 export const BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
 
 const objectDefineProperty = Object.defineProperty;
-// eslint-disable-next-line @typescript-eslint/unbound-method
-const objectHasOwnProperty = Object.prototype.hasOwnProperty;
 
-const NO_OP = (): void => {};
+const noOp = (): void => {};
+
+const runHookListener = (listenerName: string, callback: () => unknown): void =>
+  runWithBippyError(callback, (cause) => new BippyHookListenerError(listenerName, cause));
 
 const checkDCE = (functionToCheck: unknown): void => {
   try {
     const code = Function.prototype.toString.call(functionToCheck);
     if (code.includes("^_^")) {
+      // HACK: React DevTools reports failed dead-code elimination asynchronously.
       setTimeout(() => {
-        throw new Error(
+        throw new BippyReactBuildError(
           "React is running in production mode, but dead code " +
             "elimination has not been applied. Read how to correctly " +
             "configure React for production: " +
@@ -34,49 +54,75 @@ export const isRealReactDevtools = (
   return Boolean(rdtHook && "getFiberRoots" in rdtHook);
 };
 
-export const _onActiveListeners = new Set<() => unknown>();
+export const _onActiveListeners = new Set<ActiveListener>();
 
 export const _renderers = new Set<ReactRenderer>();
 
-const rendererInjectListeners = new Set<(renderer: ReactRenderer) => void>();
+const rendererInjectListeners = new Set<RendererInjectListener>();
+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>();
-let notifyingInject: ReactDevToolsGlobalHook["inject"] | null = null;
+const notifyingInjectByHook = new WeakMap<
+  ReactDevToolsGlobalHook,
+  ReactDevToolsGlobalHook["inject"]
+>();
+
+const notifyActiveListeners = (): void => {
+  for (const listener of _onActiveListeners) {
+    runHookListener("onActive", listener);
+  }
+};
+
+const notifyRendererInjectListeners = (renderer: ReactRenderer): void => {
+  for (const listener of rendererInjectListeners) {
+    runHookListener("onRendererInject", () => listener(renderer));
+  }
+};
+
+const notifyRDTHookReplaceListeners = (rdtHook: ReactDevToolsGlobalHook): void => {
+  for (const listener of rdtHookReplaceListeners) {
+    runHookListener("onRDTHookReplace", () => listener(rdtHook));
+  }
+};
 
-const ensureInjectNotifiesListeners = (rdtHook: ReactDevToolsGlobalHook): void => {
-  if (rdtHook.inject === notifyingInject) return;
-  const prevInject = rdtHook.inject;
+const setRendererInjectDispatcher = (rdtHook: ReactDevToolsGlobalHook): void => {
+  if (rdtHook.inject === notifyingInjectByHook.get(rdtHook)) return;
+  const previousInject = rdtHook.inject;
   const nextInject = (renderer: ReactRenderer) => {
-    const rendererId = prevInject.call(rdtHook, renderer);
+    const rendererId = previousInject.call(rdtHook, renderer);
     if (!notifiedRenderers.has(renderer)) {
       notifiedRenderers.add(renderer);
-      for (const listener of rendererInjectListeners) {
-        listener(renderer);
-      }
+      notifyRendererInjectListeners(renderer);
     }
     return rendererId;
   };
   rdtHook.inject = nextInject;
-  notifyingInject = nextInject;
+  notifyingInjectByHook.set(rdtHook, nextInject);
 };
 
-/** Subscribes to renderer injections without stacking competing hook patches. */
-export const onRendererInject = (listener: (renderer: ReactRenderer) => void): Unsubscribe => {
-  ensureInjectNotifiesListeners(getRDTHook());
+export const onRendererInject = (listener: RendererInjectListener): Unsubscribe => {
+  setRendererInjectDispatcher(getRDTHook());
   rendererInjectListeners.add(listener);
   return toUnsubscribe(() => {
     rendererInjectListeners.delete(listener);
   });
 };
 
-const ensureRendererMap = (rdtHook: ReactDevToolsGlobalHook): Map<number, ReactRenderer> => {
+export const onRDTHookReplace = (listener: RDTHookReplaceListener): Unsubscribe => {
+  rdtHookReplaceListeners.add(listener);
+  return toUnsubscribe(() => {
+    rdtHookReplaceListeners.delete(listener);
+  });
+};
+
+const getRendererMap = (rdtHook: ReactDevToolsGlobalHook): Map<number, ReactRenderer> => {
   if (!(rdtHook.renderers instanceof Map)) {
     rdtHook.renderers = new Map();
   }
   return rdtHook.renderers;
 };
 
-export const installRDTHook = (onActive?: () => unknown): ReactDevToolsGlobalHook => {
+export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook => {
   if (onActive) {
     _onActiveListeners.add(onActive);
   }
@@ -87,20 +133,20 @@ export const installRDTHook = (onActive?: () => unknown): ReactDevToolsGlobalHoo
     _instrumentationSource: BIPPY_INSTRUMENTATION_STRING,
     checkDCE,
     hasUnsupportedRendererAttached: false,
-    inject(renderer) {
+    inject: (renderer) => {
       const nextRendererId = ++rendererIdCounter;
       renderers.set(nextRendererId, renderer);
       _renderers.add(renderer);
       if (!rdtHook._instrumentationIsActive) {
         rdtHook._instrumentationIsActive = true;
-        _onActiveListeners.forEach((listener) => listener());
+        notifyActiveListeners();
       }
       return nextRendererId;
     },
-    on: NO_OP,
-    onCommitFiberRoot: NO_OP,
-    onCommitFiberUnmount: NO_OP,
-    onPostCommitFiberRoot: NO_OP,
+    on: noOp,
+    onCommitFiberRoot: noOp,
+    onCommitFiberUnmount: noOp,
+    onPostCommitFiberRoot: noOp,
     renderers,
     supportsFiber: true,
     supportsFlight: true,
@@ -116,92 +162,106 @@ export const installRDTHook = (onActive?: () => unknown): ReactDevToolsGlobalHoo
         if (newHook && typeof newHook === "object") {
           const ourRenderers = rdtHook.renderers;
           rdtHook = newHook;
-          const nextRenderers = ensureRendererMap(rdtHook);
+          const nextRenderers = getRendererMap(rdtHook);
           if (ourRenderers.size > 0) {
-            ourRenderers.forEach((renderer, id) => {
+            ourRenderers.forEach((renderer, rendererId) => {
               _renderers.add(renderer);
-              nextRenderers.set(id, renderer);
+              nextRenderers.set(rendererId, renderer);
             });
+          }
+          if (ourRenderers.size > 0 || rdtHookReplaceListeners.size > 0) {
             patchRDTHook(onActive);
           }
+          notifyRDTHookReplaceListeners(rdtHook);
         }
       },
     });
-    // HACK: The DevTools extension uses hasOwnProperty to decide whether it may replace an earlier hook.
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalWindowHasOwnProperty = window.hasOwnProperty;
-    let hasRanHack = false;
-    objectDefineProperty(window, "hasOwnProperty", {
-      configurable: true,
-      value: function (this: unknown, ...args: [PropertyKey]) {
-        try {
-          if (!hasRanHack && args[0] === "__REACT_DEVTOOLS_GLOBAL_HOOK__") {
+    if (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(
+        window,
+        "hasOwnProperty",
+      );
+      let didRunHasOwnPropertyHack = false;
+      const restoreWindowHasOwnProperty = (): void => {
+        if (originalHasOwnPropertyDescriptor) {
+          objectDefineProperty(window, "hasOwnProperty", originalHasOwnPropertyDescriptor);
+        } else {
+          Reflect.deleteProperty(window, "hasOwnProperty");
+        }
+      };
+      objectDefineProperty(window, "hasOwnProperty", {
+        configurable: true,
+        value: (...propertyKeys: [PropertyKey]) => {
+          if (!didRunHasOwnPropertyHack && propertyKeys[0] === "__REACT_DEVTOOLS_GLOBAL_HOOK__") {
+            didRunHasOwnPropertyHack = true;
+            restoreWindowHasOwnProperty();
             globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = undefined;
-            hasRanHack = true;
-            return -0;
+            return false;
           }
-        } catch {}
-        return originalWindowHasOwnProperty.apply(this, args);
-      },
-      writable: true,
-    });
+          return originalWindowHasOwnProperty(...propertyKeys);
+        },
+        writable: true,
+      });
+    }
   } catch {
     patchRDTHook(onActive);
   }
   return rdtHook;
 };
 
-export const patchRDTHook = (onActive?: () => unknown): void => {
+export const patchRDTHook = (onActive?: ActiveListener): void => {
   if (onActive) {
     _onActiveListeners.add(onActive);
   }
   let didNotifyActiveListeners = false;
-  try {
-    const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    if (!rdtHook) return;
-    const renderers = ensureRendererMap(rdtHook);
-    if (!rdtHook._instrumentationSource) {
-      rdtHook.checkDCE = checkDCE;
-      rdtHook.supportsFiber = true;
-      rdtHook.supportsFlight = true;
-      rdtHook.hasUnsupportedRendererAttached = false;
-      rdtHook._instrumentationSource = BIPPY_INSTRUMENTATION_STRING;
-      rdtHook._instrumentationIsActive = false;
-      // HACK: DevTools detection must happen after setting the source to avoid recursive patching.
-      const isReactDevtools = isRealReactDevtools(rdtHook);
-      if (!isReactDevtools) {
-        rdtHook.on = NO_OP;
-      }
-      if (renderers.size) {
-        renderers.forEach((renderer) => _renderers.add(renderer));
-        rdtHook._instrumentationIsActive = true;
-        _onActiveListeners.forEach((listener) => listener());
-        didNotifyActiveListeners = true;
-      }
-      const prevInject = rdtHook.inject;
-      rdtHook.inject = (renderer) => {
-        const rendererId = prevInject(renderer);
-        _renderers.add(renderer);
-        renderers.set(rendererId, renderer);
-        rdtHook._instrumentationIsActive = true;
-        _onActiveListeners.forEach((listener) => listener());
-        return rendererId;
-      };
+  const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!rdtHook) return;
+  const renderers = getRendererMap(rdtHook);
+  if (!rdtHook._instrumentationSource) {
+    rdtHook.checkDCE = checkDCE;
+    rdtHook.supportsFiber = true;
+    rdtHook.supportsFlight = true;
+    rdtHook.hasUnsupportedRendererAttached = false;
+    rdtHook._instrumentationSource = BIPPY_INSTRUMENTATION_STRING;
+    rdtHook._instrumentationIsActive = false;
+    // HACK: DevTools detection must happen after setting the source to avoid recursive patching.
+    const isReactDevtools = isRealReactDevtools(rdtHook);
+    if (!isReactDevtools) {
+      rdtHook.on = noOp;
     }
-    if (!didNotifyActiveListeners && (renderers.size || rdtHook._instrumentationIsActive)) {
-      onActive?.();
+    if (renderers.size) {
+      renderers.forEach((renderer) => _renderers.add(renderer));
+      rdtHook._instrumentationIsActive = true;
+      notifyActiveListeners();
+      didNotifyActiveListeners = true;
     }
-  } catch {}
+    const previousInject = rdtHook.inject;
+    rdtHook.inject = (renderer) => {
+      const rendererId = previousInject.call(rdtHook, renderer);
+      _renderers.add(renderer);
+      renderers.set(rendererId, renderer);
+      if (!rdtHook._instrumentationIsActive) {
+        rdtHook._instrumentationIsActive = true;
+        notifyActiveListeners();
+      }
+      return rendererId;
+    };
+  }
+  if (!didNotifyActiveListeners && (renderers.size || rdtHook._instrumentationIsActive)) {
+    if (onActive) runHookListener("onActive", onActive);
+  }
 };
 
 export const hasRDTHook = (): boolean => {
-  return objectHasOwnProperty.call(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__");
+  return Object.hasOwn(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__");
 };
 
 /**
  * Returns the current React DevTools global hook.
  */
-export const getRDTHook = (onActive?: () => unknown): ReactDevToolsGlobalHook => {
+export const getRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook => {
   if (!hasRDTHook()) {
     return installRDTHook(onActive);
   }
@@ -210,18 +270,6 @@ export const getRDTHook = (onActive?: () => unknown): ReactDevToolsGlobalHook =>
   return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? installRDTHook(onActive);
 };
 
-export const isClientEnvironment = (): boolean => {
-  return Boolean(
-    typeof window !== "undefined" &&
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    (window.document?.createElement || window.navigator?.product === "ReactNative"),
-  );
-};
-
-export const safelyInstallRDTHook = () => {
-  try {
-    if (isClientEnvironment()) {
-      getRDTHook();
-    }
-  } catch {}
+export const safelyInstallRDTHook = (): void => {
+  runWithBippyError(getRDTHook, (cause) => new BippyHookInstallationError(cause));
 };

package/src/react-internals.ts

@@ -1,27 +1,13 @@
+import { getReactWorkTags, ReactFiberFlags } from "./generated/react-work-tags.js";
+import type { ReactWorkTagMap } from "./generated/react-work-tags.js";
+import { compareSemver } from "./semver.js";
+import type { Fiber, ReactRenderer } from "./types.js";
+
 export {
-  ActivityComponentTag,
-  ClassComponentTag,
-  ContextConsumerTag,
-  DehydratedSuspenseComponentTag,
-  ForwardRefTag,
-  FragmentTag,
-  FunctionComponentTag,
   getReactWorkTags,
-  HostComponentTag,
-  HostHoistableTag,
-  HostPortalTag,
-  HostRootTag,
-  HostSingletonTag,
-  HostTextTag,
-  LazyComponentTag,
-  LegacyHiddenComponentTag,
-  MemoComponentTag,
-  OffscreenComponentTag,
-  ReactWorkTags,
-  SimpleMemoComponentTag,
-  SuspenseComponentTag,
-  SuspenseListComponentTag,
-  ViewTransitionComponentTag,
+  ReactBuildType,
+  ReactFiberFlags,
+  ReactSymbols,
 } from "./generated/react-work-tags.js";
 export type {
   HostWorkTag,
@@ -30,22 +16,43 @@ export type {
   ReactWorkTagVersion,
 } from "./generated/react-work-tags.js";
 
-// HACK: React does not export Fiber flags. Keep these values aligned with ReactFiberFlags.
-export const ReactFiberFlags = {
-  ChildDeletion: 0b10000,
-  Cloned: 0b1000,
-  ContentReset: 0b100000,
-  Hydrating: 0b1000000000000,
-  PerformedWork: 0b1,
-  Placement: 0b10,
-  Snapshot: 0b10000000000,
-  Update: 0b100,
-  Visibility: 0b10000000000000,
+const defaultReactWorkTags = getReactWorkTags("");
+const fiberReactWorkTags = new WeakMap<Fiber, Readonly<ReactWorkTagMap>>();
+
+export const getReactWorkTagsForRenderer = (
+  renderer?: ReactRenderer | null,
+): Readonly<ReactWorkTagMap> => {
+  const reconcilerVersion = renderer?.reconcilerVersion;
+  if (reconcilerVersion && compareSemver(reconcilerVersion, reconcilerVersion) === 0) {
+    return getReactWorkTags(reconcilerVersion);
+  }
+  return getReactWorkTags(renderer?.version ?? "");
+};
+
+export const setReactWorkTagsForFiber = (fiber: Fiber, renderer?: ReactRenderer): void => {
+  const workTags = getReactWorkTagsForRenderer(renderer);
+  fiberReactWorkTags.set(fiber, workTags);
+  if (fiber.alternate) fiberReactWorkTags.set(fiber.alternate, workTags);
 };
 
-export const ReactBuildType = {
-  Development: 1,
-  Production: 0,
+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);
+  }
+  const workTags = fiberReactWorkTags.get(rootFiber) ?? defaultReactWorkTags;
+  for (const traversedFiber of traversedFibers) {
+    fiberReactWorkTags.set(traversedFiber, workTags);
+    if (traversedFiber.alternate) {
+      fiberReactWorkTags.set(traversedFiber.alternate, workTags);
+    }
+  }
+  return workTags;
 };
 
 export const MutationMask =
@@ -56,12 +63,3 @@ export const MutationMask =
   ReactFiberFlags.Hydrating |
   ReactFiberFlags.Visibility |
   ReactFiberFlags.Snapshot;
-
-// HACK: React does not export its legacy mode and element symbols, which differ between React 17, 18, and 19.
-export const CONCURRENT_MODE_NUMBER = 0xeacf;
-export const ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.element)";
-export const TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.transitional.element)";
-export const CONCURRENT_MODE_SYMBOL_STRING = "Symbol(react.concurrent_mode)";
-export const DEPRECATED_ASYNC_MODE_SYMBOL_STRING = "Symbol(react.async_mode)";
-export const CONCURRENT_MODE_SYMBOL_DESCRIPTION = "react.concurrent_mode";
-export const DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION = "react.async_mode";

package/src/semver.ts

@@ -0,0 +1,78 @@
+interface SemanticVersion {
+  major: string;
+  minor: string;
+  patch: string;
+  prerelease: string[];
+}
+
+const SEMVER_PATTERN =
+  /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?$/;
+const NUMERIC_IDENTIFIER_PATTERN = /^\d+$/;
+
+const parseSemver = (version: string): SemanticVersion | null => {
+  const match = SEMVER_PATTERN.exec(version);
+  if (!match) return null;
+  const prerelease = match[4]?.split(".") ?? [];
+  if (
+    prerelease.some(
+      (identifier) =>
+        NUMERIC_IDENTIFIER_PATTERN.test(identifier) &&
+        identifier.length > 1 &&
+        identifier.startsWith("0"),
+    )
+  ) {
+    return null;
+  }
+  return {
+    major: match[1],
+    minor: match[2],
+    patch: match[3],
+    prerelease,
+  };
+};
+
+const compareNumericIdentifiers = (left: string, right: string): -1 | 0 | 1 => {
+  if (left.length !== right.length) return left.length < right.length ? -1 : 1;
+  if (left === right) return 0;
+  return left < right ? -1 : 1;
+};
+
+const comparePrereleaseIdentifiers = (left: string, right: string): -1 | 0 | 1 => {
+  const isLeftNumeric = NUMERIC_IDENTIFIER_PATTERN.test(left);
+  const isRightNumeric = NUMERIC_IDENTIFIER_PATTERN.test(right);
+  if (isLeftNumeric && isRightNumeric) return compareNumericIdentifiers(left, right);
+  if (isLeftNumeric !== isRightNumeric) return isLeftNumeric ? -1 : 1;
+  if (left === right) return 0;
+  return left < right ? -1 : 1;
+};
+
+const comparePrerelease = (left: string[], right: string[]): -1 | 0 | 1 => {
+  if (left.length === 0 || right.length === 0) {
+    if (left.length === right.length) return 0;
+    return left.length === 0 ? 1 : -1;
+  }
+  const identifierCount = Math.max(left.length, right.length);
+  for (let identifierIndex = 0; identifierIndex < identifierCount; identifierIndex++) {
+    const leftIdentifier = left[identifierIndex];
+    const rightIdentifier = right[identifierIndex];
+    if (leftIdentifier === undefined || rightIdentifier === undefined) {
+      return leftIdentifier === undefined ? -1 : 1;
+    }
+    const comparison = comparePrereleaseIdentifiers(leftIdentifier, rightIdentifier);
+    if (comparison !== 0) return comparison;
+  }
+  return 0;
+};
+
+export const compareSemver = (leftVersion: string, rightVersion: string): -1 | 0 | 1 | null => {
+  const left = parseSemver(leftVersion);
+  const right = parseSemver(rightVersion);
+  if (!left || !right) return null;
+  const majorComparison = compareNumericIdentifiers(left.major, right.major);
+  if (majorComparison !== 0) return majorComparison;
+  const minorComparison = compareNumericIdentifiers(left.minor, right.minor);
+  if (minorComparison !== 0) return minorComparison;
+  const patchComparison = compareNumericIdentifiers(left.patch, right.patch);
+  if (patchComparison !== 0) return patchComparison;
+  return comparePrerelease(left.prerelease, right.prerelease);
+};

package/src/source/error-stack.ts

@@ -0,0 +1,11 @@
+interface ErrorConstructorWithPrepareStackTrace {
+  prepareStackTrace?: unknown;
+}
+
+const errorConstructor: ErrorConstructorWithPrepareStackTrace = Error;
+
+export const getPrepareStackTrace = (): unknown => errorConstructor.prepareStackTrace;
+
+export const setPrepareStackTrace = (prepareStackTrace: unknown): void => {
+  errorConstructor.prepareStackTrace = prepareStackTrace;
+};

package/src/source/index.ts

@@ -6,12 +6,20 @@ export {
   symbolicateStack,
   type DecodedSourceMapSection,
   type IndexSourceMap,
-  type RawSourceMap,
+  type SourceFetch,
   type SourceMap,
+  type SourceMapRequestOptions,
   type StandardSourceMap,
 } from "./symbolication.js";
 export type { FiberSource } from "./types.js";
 export { parseStack, type ParseOptions, type StackFrame } from "./parse-stack.js";
 export { getDisplayNameFromSource } from "./get-display-name-from-source.js";
+export {
+  BippyError,
+  BippyHookInspectionError,
+  BippyHookRenderError,
+  BippySourceMapError,
+  BippyUnsupportedHookError,
+} from "../errors.js";
 export { getFiberHooks, type HookSource, type HooksNode, type HooksTree } from "./inspect-hooks.js";
 export { parseHookNames, type HookNames } from "./parse-hook-names.js";