bippy 0.6.1-dev.b88fcb4 → 0.6.1-dev.f9e6c65

package/src/errors.ts

@@ -5,55 +5,6 @@ export class BippyError extends Error {
   }
 }
 
-export class BippyInstrumentationError extends BippyError {
-  readonly callbackName: string;
-  readonly instrumentationName: string;
-
-  constructor(instrumentationName: string, callbackName: string, cause: unknown) {
-    super(
-      `Bippy instrumentation "${instrumentationName}" callback "${callbackName}" failed`,
-      cause,
-    );
-    this.name = "BippyInstrumentationError";
-    this.callbackName = callbackName;
-    this.instrumentationName = instrumentationName;
-  }
-}
-
-export class BippyReactDevToolsError extends BippyError {
-  readonly callbackName: string;
-
-  constructor(callbackName: string, cause: unknown) {
-    super(`React DevTools callback "${callbackName}" failed`, cause);
-    this.name = "BippyReactDevToolsError";
-    this.callbackName = callbackName;
-  }
-}
-
-export class BippyHookListenerError extends BippyError {
-  readonly listenerName: string;
-
-  constructor(listenerName: string, cause: unknown) {
-    super(`Bippy hook listener "${listenerName}" failed`, cause);
-    this.name = "BippyHookListenerError";
-    this.listenerName = listenerName;
-  }
-}
-
-export class BippyHookInstallationError extends BippyError {
-  constructor(cause: unknown) {
-    super("Bippy could not install the React DevTools hook", cause);
-    this.name = "BippyHookInstallationError";
-  }
-}
-
-export class BippyReactBuildError extends BippyError {
-  constructor(message: string, cause?: unknown) {
-    super(message, cause);
-    this.name = "BippyReactBuildError";
-  }
-}
-
 export class BippyHookInspectionError extends BippyError {
   constructor(message: string, cause?: unknown) {
     super(message, cause);
@@ -81,19 +32,3 @@ export class BippySourceMapError extends BippyError {
     this.name = "BippySourceMapError";
   }
 }
-
-interface BippyErrorFactory {
-  (cause: unknown): BippyError;
-}
-
-export const runWithBippyError = <Result>(
-  callback: () => Result,
-  createError: BippyErrorFactory,
-): Result => {
-  try {
-    return callback();
-  } catch (cause) {
-    if (cause instanceof BippyError) throw cause;
-    throw createError(cause);
-  }
-};

package/src/index.ts

@@ -1,3 +1,4 @@
 import "./install-hook-only.js";
 
 export * from "./core.js";
+export * from "./react.js";

package/src/install-hook-only.ts

@@ -1,3 +1,3 @@
-import { safelyInstallRDTHook } from "./rdt-hook.js";
+import { getRDTHook } from "./rdt-hook.js";
 
-safelyInstallRDTHook();
+getRDTHook();

package/src/rdt-hook.ts

@@ -1,11 +1,5 @@
 // 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 "./react-internals/index.js";
 
 export interface Unsubscribe extends Disposable {
@@ -34,21 +28,16 @@ const noOp = (): void => {};
 export const createUnsubscribe = (unsubscribe: () => void): Unsubscribe =>
   Object.assign(unsubscribe, { [Symbol.dispose]: unsubscribe });
 
-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.
+    if (code.indexOf("^_^") > -1) {
       setTimeout(() => {
-        throw new BippyReactBuildError(
+        throw new Error(
           "React is running in production mode, but dead code " +
             "elimination has not been applied. Read how to correctly " +
             "configure React for production: " +
-            "https://reactjs.org/link/perf-use-production-build",
+            "https://react.dev/link/perf-use-production-build",
         );
       });
     }
@@ -76,19 +65,19 @@ const notifyingInjectByHook = new WeakMap<
 
 const notifyActiveListeners = (): void => {
   for (const listener of _onActiveListeners) {
-    runHookListener("onActive", listener);
+    listener();
   }
 };
 
 const notifyRendererInjectListeners = (renderer: ReactRenderer): void => {
   for (const listener of rendererInjectListeners) {
-    runHookListener("onRendererInject", () => listener(renderer));
+    listener(renderer);
   }
 };
 
 const notifyRDTHookReplaceListeners = (rdtHook: ReactDevToolsGlobalHook): void => {
   for (const listener of rdtHookReplaceListeners) {
-    runHookListener("onRDTHookReplace", () => listener(rdtHook));
+    listener(rdtHook);
   }
 };
 
@@ -129,6 +118,20 @@ const getRendererMap = (rdtHook: ReactDevToolsGlobalHook): Map<number, ReactRend
   return rdtHook.renderers;
 };
 
+const trackInjectedRenderer = (
+  rdtHook: ReactDevToolsGlobalHook,
+  renderers: Map<number, ReactRenderer>,
+  rendererId: number,
+  renderer: ReactRenderer,
+): void => {
+  renderers.set(rendererId, renderer);
+  _renderers.add(renderer);
+  if (!rdtHook._instrumentationIsActive) {
+    rdtHook._instrumentationIsActive = true;
+    notifyActiveListeners();
+  }
+};
+
 export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook => {
   if (onActive) {
     _onActiveListeners.add(onActive);
@@ -142,12 +145,7 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
     hasUnsupportedRendererAttached: false,
     inject: (renderer) => {
       const nextRendererId = ++rendererIdCounter;
-      renderers.set(nextRendererId, renderer);
-      _renderers.add(renderer);
-      if (!rdtHook._instrumentationIsActive) {
-        rdtHook._instrumentationIsActive = true;
-        notifyActiveListeners();
-      }
+      trackInjectedRenderer(rdtHook, renderers, nextRendererId, renderer);
       return nextRendererId;
     },
     on: noOp,
@@ -170,12 +168,10 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
           const ourRenderers = rdtHook.renderers;
           rdtHook = newHook;
           const nextRenderers = getRendererMap(rdtHook);
-          if (ourRenderers.size > 0) {
-            ourRenderers.forEach((renderer, rendererId) => {
-              _renderers.add(renderer);
-              nextRenderers.set(rendererId, renderer);
-            });
-          }
+          ourRenderers.forEach((renderer, rendererId) => {
+            _renderers.add(renderer);
+            nextRenderers.set(rendererId, renderer);
+          });
           if (ourRenderers.size > 0 || rdtHookReplaceListeners.size > 0) {
             patchRDTHook(onActive);
           }
@@ -200,14 +196,14 @@ export const installRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHo
       };
       objectDefineProperty(window, "hasOwnProperty", {
         configurable: true,
-        value: (...propertyKeys: [PropertyKey]) => {
-          if (!didRunHasOwnPropertyHack && propertyKeys[0] === "__REACT_DEVTOOLS_GLOBAL_HOOK__") {
+        value: (propertyKey: PropertyKey) => {
+          if (!didRunHasOwnPropertyHack && propertyKey === "__REACT_DEVTOOLS_GLOBAL_HOOK__") {
             didRunHasOwnPropertyHack = true;
             restoreWindowHasOwnProperty();
             globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = undefined;
             return false;
           }
-          return originalWindowHasOwnProperty(...propertyKeys);
+          return originalWindowHasOwnProperty(propertyKey);
         },
         writable: true,
       });
@@ -247,17 +243,12 @@ export const patchRDTHook = (onActive?: ActiveListener): void => {
     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();
-      }
+      trackInjectedRenderer(rdtHook, renderers, rendererId, renderer);
       return rendererId;
     };
   }
   if (!didNotifyActiveListeners && (renderers.size || rdtHook._instrumentationIsActive)) {
-    if (onActive) runHookListener("onActive", onActive);
+    onActive?.();
   }
 };
 
@@ -276,7 +267,3 @@ export const getRDTHook = (onActive?: ActiveListener): ReactDevToolsGlobalHook =
   patchRDTHook(onActive);
   return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? installRDTHook(onActive);
 };
-
-export const safelyInstallRDTHook = (): void => {
-  runWithBippyError(getRDTHook, (cause) => new BippyHookInstallationError(cause));
-};

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

@@ -254,6 +254,7 @@ const reactWorkTagsByVersion = defineReactWorkTags({
 export type ReactWorkTagVersion = keyof typeof reactWorkTagsByVersion;
 
 export interface GetReactWorkTags {
+  (): Readonly<ReactWorkTagMap>;
   <Version extends ReactWorkTagVersion>(
     reactVersion: Version,
   ): Readonly<(typeof reactWorkTagsByVersion)[Version]>;
@@ -302,10 +303,13 @@ const reactWorkTagRanges: ReactWorkTagRange[] = [
   },
 ];
 
-export const getReactWorkTags: GetReactWorkTags = (reactVersion: string) => {
+const defaultReactWorkTags = reactWorkTagsByVersion["17.0.2"];
+
+export const getReactWorkTags: GetReactWorkTags = (reactVersion?: string) => {
+  if (reactVersion === undefined) return defaultReactWorkTags;
   for (const range of reactWorkTagRanges) {
     const comparison = compareSemver(reactVersion, range.minimumVersion);
-    if (comparison === null) return reactWorkTagsByVersion["17.0.2"];
+    if (comparison === null) return defaultReactWorkTags;
     if (comparison === 1 || (comparison === 0 && !range.isMinimumExcluded)) {
       return range.workTags;
     }

package/src/react-internals/index.ts

@@ -1,6 +1,6 @@
 import { getReactWorkTags, ReactFiberFlags } from "./generated/react-work-tags.js";
 import type { ReactWorkTagMap } from "./generated/react-work-tags.js";
-import { compareSemver } from "./semver.js";
+import { isSemver } from "./semver.js";
 import type { Fiber, ReactRenderer } from "./types.js";
 
 export { compareSemver } from "./semver.js";
@@ -18,17 +18,17 @@ export type {
 } from "./generated/react-work-tags.js";
 export * from "./types.js";
 
-const defaultReactWorkTags = getReactWorkTags("");
+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) {
+  if (reconcilerVersion && isSemver(reconcilerVersion)) {
     return getReactWorkTags(reconcilerVersion);
   }
-  return getReactWorkTags(renderer?.version ?? "");
+  return renderer?.version ? getReactWorkTags(renderer.version) : defaultReactWorkTags;
 };
 
 export const setReactWorkTagsForFiber = (fiber: Fiber, renderer?: ReactRenderer): void => {

package/src/react-internals/semver.ts

@@ -9,6 +9,8 @@ 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+$/;
 
+export const isSemver = (version: string): boolean => parseSemver(version) !== null;
+
 const parseSemver = (version: string): SemanticVersion | null => {
   const match = SEMVER_PATTERN.exec(version);
   if (!match) return null;

package/src/react-internals/types.ts

@@ -2,84 +2,12 @@ import type { ReactNode } from "react";
 import type ReactReconciler from "react-reconciler";
 import type { HostWorkTag, ReactWorkTag } from "./generated/react-work-tags.js";
 
-export type BundleType = ReactReconciler.BundleType;
-export type Flags = ReactReconciler.Flags;
-export type HookType = ReactReconciler.HookType;
-export type LanePriority = ReactReconciler.LanePriority;
-export type Lanes = ReactReconciler.Lanes;
-export type MutableSource = ReactReconciler.MutableSource;
-export type OpaqueHandle = ReactReconciler.OpaqueHandle;
-export type OpaqueRoot = ReactReconciler.OpaqueRoot;
-export type React$AbstractComponent<
-  Config,
-  Instance = unknown,
-> = ReactReconciler.React$AbstractComponent<Config, Instance>;
-export type RootTag = ReactReconciler.RootTag;
-export type TypeOfMode = ReactReconciler.TypeOfMode;
 export type WorkTag = ReactReconciler.WorkTag | ReactWorkTag;
 
-export interface HostConfig<
-  Type = unknown,
-  HostProps = unknown,
-  Container = unknown,
-  Instance = unknown,
-  TextInstance = unknown,
-  SuspenseInstance = unknown,
-  HydratableInstance = unknown,
-  FormInstance = unknown,
-  PublicInstance = unknown,
-  HostContext = unknown,
-  ChildSet = unknown,
-  TimeoutHandle = unknown,
-  NoTimeout = unknown,
-  TransitionStatus = unknown,
-> extends ReactReconciler.HostConfig<
-  Type,
-  HostProps,
-  Container,
-  Instance,
-  TextInstance,
-  SuspenseInstance,
-  HydratableInstance,
-  FormInstance,
-  PublicInstance,
-  HostContext,
-  ChildSet,
-  TimeoutHandle,
-  NoTimeout,
-  TransitionStatus
-> {}
-
 export interface Source extends ReactReconciler.Source {}
-export interface RefObject extends ReactReconciler.RefObject {}
-export interface Thenable<T> extends ReactReconciler.Thenable<T> {}
 
 export interface ReactContext<T> extends ReactReconciler.ReactContext<T> {}
 
-export interface ReactProviderType<T> extends ReactReconciler.ReactProviderType<T> {}
-export interface ReactProvider<T> extends ReactReconciler.ReactProvider<T> {}
-export interface ReactConsumer<T> extends ReactReconciler.ReactConsumer<T> {}
-export interface ReactPortal extends ReactReconciler.ReactPortal {}
-
-export interface ComponentSelector extends ReactReconciler.ComponentSelector {}
-export interface HasPseudoClassSelector extends ReactReconciler.HasPseudoClassSelector {}
-export interface RoleSelector extends ReactReconciler.RoleSelector {}
-export interface TextSelector extends ReactReconciler.TextSelector {}
-export interface TestNameSelector extends ReactReconciler.TestNameSelector {}
-export type Selector = ReactReconciler.Selector;
-
-export interface DevToolsConfig<
-  Instance = unknown,
-  TextInstance = unknown,
-  RendererInspectionConfig = unknown,
-> extends ReactReconciler.DevToolsConfig<Instance, TextInstance, RendererInspectionConfig> {}
-
-export interface SuspenseHydrationCallbacks<
-  SuspenseInstance = unknown,
-> extends ReactReconciler.SuspenseHydrationCallbacks<SuspenseInstance> {}
-
-export interface TransitionTracingCallbacks extends ReactReconciler.TransitionTracingCallbacks {}
-
 // HACK: React 17 exposes observedBits while React 18+ exposes memoizedValue on context dependencies.
 export interface ContextDependency<T> extends Omit<
   ReactReconciler.ContextDependency<T>,
@@ -98,15 +26,6 @@ export interface Dependencies extends Omit<ReactReconciler.Dependencies, "firstC
   firstContext: ContextDependency<unknown> | null;
 }
 
-export interface Effect {
-  [key: string]: unknown;
-  create: (...args: unknown[]) => unknown;
-  deps: null | unknown[];
-  destroy: ((...args: unknown[]) => unknown) | null;
-  next: Effect | null;
-  tag: number;
-}
-
 export interface ServerComponentInfo {
   name?: string;
   env?: string;
@@ -131,8 +50,6 @@ export interface FiberDebugSource extends Source {
 
 export interface FiberUpdateQueue {
   [key: string]: unknown;
-  dispatch?: unknown;
-  lastEffect: Effect | null;
   memoCache?: ReactMemoCache;
 }
 

package/src/react.ts

@@ -0,0 +1,76 @@
+import "./install-hook-only.js";
+import * as React from "react";
+import { isValidFiber } from "./core.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");
+
+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.
+  const bindProxy = new Proxy(originalBind, {
+    apply: (bind, functionToBind, boundArguments) => {
+      const fiber = boundArguments[1];
+      if (!capturedFiber && isValidFiber(fiber)) {
+        capturedFiber = fiber;
+      }
+      return Reflect.apply(bind, functionToBind, boundArguments);
+    },
+  });
+  Reflect.set(Function.prototype, "bind", bindProxy);
+
+  try {
+    useCaptureHook();
+  } finally {
+    if (Function.prototype.bind === bindProxy) {
+      Reflect.set(Function.prototype, "bind", originalBind);
+    }
+  }
+
+  return capturedFiber;
+};
+
+const useExternalStoreCapture = (): void => {
+  Reflect.apply(useSyncExternalStore, React, [
+    subscribeToEmptyStore,
+    readEmptySnapshot,
+    readEmptySnapshot,
+  ]);
+};
+
+const useReducerCapture = (): void => {
+  React.useReducer(preserveState, undefined);
+};
+
+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);
+  const fiber =
+    hookFiber ??
+    (renderedFiberRef.current !== committedFiberRef.current
+      ? renderedFiberRef.current
+      : committedFiberRef.current?.alternate) ??
+    committedFiberRef.current;
+
+  renderedFiberRef.current = fiber;
+
+  React.useEffect(() => {
+    committedFiberRef.current = fiber;
+  }, [fiber]);
+
+  return fiber ?? undefined;
+};
+
+export const useFiber =
+  typeof useSyncExternalStore === "function" ? useFiberWithExternalStore : useFiberWithReducer;

package/src/source/get-display-name-from-source.ts

@@ -1,8 +1,29 @@
-import { Fiber } from "../react-internals/index.js";
+import type { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
-import { getParentStack } from "./owner-stack.js";
-import { getSourceFromSourceMap, getSourceMap } from "./symbolication.js";
-import { StackFrame } from "./parse-stack.js";
+import { getDefinitionFrameFromOwnedChild, getRawParentStack } from "./owner-stack.js";
+import {
+  getSourceContentFromSourceMap,
+  getSourceFromSourceMap,
+  getSourceMap,
+  type SourceFetch,
+} from "./symbolication.js";
+import type { StackFrame } from "./parse-stack.js";
+
+const COMPONENT_DECLARATION_PATTERNS = [
+  /(?:^|export\s+)(?:const|let|var)\s+(\w+)\s*=/,
+  /(?:^|export\s+)function\s+(\w+)/,
+  /(?:^|export\s+)class\s+(\w+)/,
+];
+
+const findComponentDeclarationOnLine = (line: string): string | null => {
+  for (const pattern of COMPONENT_DECLARATION_PATTERNS) {
+    const match = line.match(pattern);
+    if (match?.[1]) return match[1];
+  }
+  return null;
+};
+
+const MAX_DECLARATION_LINE_DISTANCE = 5;
 
 const extractComponentNameFromSource = (
   sourceContent: string,
@@ -15,27 +36,16 @@ const extractComponentNameFromSource = (
     return null;
   }
 
-  const startLine = Math.max(0, targetLineIndex - 5);
-  const endLine = Math.min(lines.length, targetLineIndex + 5);
-  const contextLines = lines.slice(startLine, endLine).join("\n");
-
-  const arrowFunctionPattern = /(?:^|export\s+)(?:const|let|var)\s+(\w+)\s*=/m;
-  const functionPattern = /(?:^|export\s+)function\s+(\w+)/m;
-  const classPattern = /(?:^|export\s+)class\s+(\w+)/m;
-
-  const arrowMatch = contextLines.match(arrowFunctionPattern);
-  if (arrowMatch?.[1]) {
-    return arrowMatch[1];
-  }
-
-  const functionMatch = contextLines.match(functionPattern);
-  if (functionMatch?.[1]) {
-    return functionMatch[1];
-  }
-
-  const classMatch = contextLines.match(classPattern);
-  if (classMatch?.[1]) {
-    return classMatch[1];
+  for (let lineDistance = 0; lineDistance <= MAX_DECLARATION_LINE_DISTANCE; lineDistance++) {
+    const lineIndexes =
+      lineDistance === 0
+        ? [targetLineIndex]
+        : [targetLineIndex - lineDistance, targetLineIndex + lineDistance];
+    for (const lineIndex of lineIndexes) {
+      if (lineIndex < 0 || lineIndex >= lines.length) continue;
+      const declarationName = findComponentDeclarationOnLine(lines[lineIndex]);
+      if (declarationName) return declarationName;
+    }
   }
 
   return null;
@@ -44,10 +54,11 @@ const extractComponentNameFromSource = (
 export const getDisplayNameFromSource = async (
   fiber: Fiber,
   cache = true,
-  fetchFn?: (url: string) => Promise<Response>,
+  fetchFn?: SourceFetch,
 ): Promise<string | null> => {
-  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
-  const stackFrame = parentStackFrames.filter((innerFrame) => innerFrame.fileName)[0];
+  const stackFrame =
+    getDefinitionFrameFromOwnedChild(fiber) ??
+    getRawParentStack(fiber).find((innerFrame) => innerFrame.fileName);
 
   if (!stackFrame?.fileName) {
     return getDisplayName(fiber.type);
@@ -73,21 +84,14 @@ export const getDisplayNameFromSource = async (
     return getDisplayName(fiber.type);
   }
 
-  if (!bundleSourceMap.sourcesContent) {
-    return getDisplayName(fiber.type);
-  }
-
-  const sourceIndex = bundleSourceMap.sources.indexOf(source.fileName);
-  if (sourceIndex === -1 || !bundleSourceMap.sourcesContent[sourceIndex]) {
-    return getDisplayName(fiber.type);
-  }
-
-  const sourceContent = bundleSourceMap.sourcesContent[sourceIndex];
-  const extractedName = extractComponentNameFromSource(sourceContent, source.lineNumber);
+  const sourceContent = getSourceContentFromSourceMap(bundleSourceMap, source.fileName);
+  const extractedName = sourceContent
+    ? extractComponentNameFromSource(sourceContent, source.lineNumber)
+    : null;
 
   if (extractedName) {
     return extractedName;
   }
 
-  return getDisplayName(fiber.type);
+  return source.functionName ?? getDisplayName(fiber.type);
 };