bippy 0.5.27 → 0.5.29

package/src/index.ts

@@ -0,0 +1,3 @@
+import './install-hook-only.js';
+
+export * from './core.js';

package/src/install-hook-only.ts

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

package/src/rdt-hook.ts

@@ -0,0 +1,237 @@
+// IMPORTANT:
+// this file is super important to load the __REACT_DEVTOOLS_GLOBAL_HOOK__ object
+// without this, we can't stub the React DevTools global hook, we don't have a way to instrument the application
+// make sure you import this file first before anything else (particularly React)
+
+import type { ReactDevToolsGlobalHook, ReactRenderer } from './types.js';
+
+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 = () => {
+  /**/
+};
+
+const checkDCE = (fn: unknown): void => {
+  try {
+    const code = Function.prototype.toString.call(fn);
+    if (code.indexOf('^_^') > -1) {
+      setTimeout(() => {
+        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',
+        );
+      });
+    }
+  } catch {}
+};
+
+export const isRealReactDevtools = (
+  rdtHook: ReactDevToolsGlobalHook | undefined | null = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,
+): boolean => {
+  return Boolean(rdtHook && 'getFiberRoots' in rdtHook);
+};
+
+let isReactRefreshOverride = false;
+let injectFnStr: string | undefined = undefined;
+
+export const isReactRefresh = (
+  rdtHook: ReactDevToolsGlobalHook | undefined | null = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,
+): boolean => {
+  if (isReactRefreshOverride) return true;
+  if (rdtHook && typeof rdtHook.inject === 'function') {
+    injectFnStr = rdtHook.inject.toString();
+  }
+  // https://github.com/facebook/react/blob/8f8b336734d7c807f5aa11b0f31540e63302d789/packages/react-refresh/src/ReactFreshRuntime.js#L459
+  return Boolean(injectFnStr?.includes('(injected)'));
+};
+
+const onActiveListeners = new Set<() => unknown>();
+
+export const _renderers = new Set<ReactRenderer>();
+
+export const installRDTHook = (
+  onActive?: () => unknown,
+): ReactDevToolsGlobalHook => {
+  const renderers = new Map<number, ReactRenderer>();
+  let i = 0;
+  let rdtHook: ReactDevToolsGlobalHook = {
+    _instrumentationIsActive: false,
+    _instrumentationSource: BIPPY_INSTRUMENTATION_STRING,
+    checkDCE,
+    hasUnsupportedRendererAttached: false,
+    inject(renderer) {
+      const nextID = ++i;
+      renderers.set(nextID, renderer);
+      _renderers.add(renderer);
+      if (!rdtHook._instrumentationIsActive) {
+        rdtHook._instrumentationIsActive = true;
+        onActiveListeners.forEach((listener) => listener());
+      }
+      return nextID;
+    },
+    on: NO_OP,
+    onCommitFiberRoot: NO_OP,
+    onCommitFiberUnmount: NO_OP,
+    onPostCommitFiberRoot: NO_OP,
+    renderers,
+    supportsFiber: true,
+    supportsFlight: true,
+  };
+  try {
+    objectDefineProperty(globalThis, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return rdtHook;
+      },
+      set(newHook) {
+        if (newHook && typeof newHook === 'object') {
+          const ourRenderers = rdtHook.renderers;
+          rdtHook = newHook;
+          if (ourRenderers.size > 0) {
+            ourRenderers.forEach((renderer, id) => {
+              _renderers.add(renderer);
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+              newHook.renderers.set(id, renderer);
+            });
+            patchRDTHook(onActive);
+          }
+        }
+      },
+    });
+    // [!] this is a hack for chrome extensions - if we install before React DevTools, we could accidently prevent React DevTools from installing:
+    // https://github.com/facebook/react/blob/18eaf51bd51fed8dfed661d64c306759101d0bfd/packages/react-devtools-extensions/src/contentScripts/installHook.js#L30C6-L30C27
+    // 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__') {
+            globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = undefined;
+            // special falsy value to know that we've already installed before
+            hasRanHack = true;
+            return -0;
+          }
+        } catch {}
+        return originalWindowHasOwnProperty.apply(this, args);
+      },
+      writable: true,
+    });
+  } catch {
+    patchRDTHook(onActive);
+  }
+  return rdtHook;
+};
+
+export const patchRDTHook = (onActive?: () => unknown): void => {
+  if (onActive) {
+    onActiveListeners.add(onActive);
+  }
+  try {
+    const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!rdtHook) return;
+    if (!rdtHook._instrumentationSource) {
+      rdtHook.checkDCE = checkDCE;
+      rdtHook.supportsFiber = true;
+      rdtHook.supportsFlight = true;
+      rdtHook.hasUnsupportedRendererAttached = false;
+      rdtHook._instrumentationSource = BIPPY_INSTRUMENTATION_STRING;
+      rdtHook._instrumentationIsActive = false;
+      // we need to be careful here (needs to be below _instrumentationSource) else it causes excessive recursion
+      const isReactDevtools = isRealReactDevtools(rdtHook);
+      if (!isReactDevtools) {
+        rdtHook.on = NO_OP;
+      }
+      if (rdtHook.renderers.size) {
+        rdtHook._instrumentationIsActive = true;
+        onActiveListeners.forEach((listener) => listener());
+        return;
+      }
+      const prevInject = rdtHook.inject;
+      const isRefresh = isReactRefresh(rdtHook);
+      if (isRefresh && !isReactDevtools) {
+        isReactRefreshOverride = true;
+        // but since the underlying implementation doens't care,
+        // it's ok: https://github.com/facebook/react/blob/18eaf51bd51fed8dfed661d64c306759101d0bfd/packages/react-refresh/src/ReactFreshRuntime.js#L430
+        const nextID = rdtHook.inject({
+          scheduleRefresh() {},
+        } as unknown as ReactRenderer);
+        if (nextID) {
+          rdtHook._instrumentationIsActive = true;
+        }
+      }
+      rdtHook.inject = (renderer) => {
+        const id = prevInject(renderer);
+        _renderers.add(renderer);
+        if (isRefresh) {
+          // react refresh doesn't inject this properly
+          // https://github.com/facebook/react/blob/18eaf51bd51fed8dfed661d64c306759101d0bfd/packages/react-refresh/src/ReactFreshRuntime.js#L430
+          rdtHook.renderers.set(id, renderer);
+        }
+        rdtHook._instrumentationIsActive = true;
+        onActiveListeners.forEach((listener) => listener());
+        return id;
+      };
+    }
+    if (
+      rdtHook.renderers.size ||
+      rdtHook._instrumentationIsActive ||
+      // depending on this to inject is unsafe, since inject could occur before and we wouldn't know
+      isReactRefresh()
+    ) {
+      onActive?.();
+    }
+  } catch {}
+};
+
+export const hasRDTHook = (): boolean => {
+  return objectHasOwnProperty.call(
+    globalThis,
+    '__REACT_DEVTOOLS_GLOBAL_HOOK__',
+  );
+};
+
+/**
+ * Returns the current React DevTools global hook.
+ */
+export const getRDTHook = (
+  onActive?: () => unknown,
+): ReactDevToolsGlobalHook => {
+  if (!hasRDTHook()) {
+    return installRDTHook(onActive);
+  }
+
+  patchRDTHook(onActive);
+  // must exist at this point
+  return globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ as ReactDevToolsGlobalHook;
+};
+
+export const isClientEnvironment = (): boolean => {
+  return Boolean(
+    typeof window !== 'undefined' &&
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      (window.document?.createElement ||
+        window.navigator?.product === 'ReactNative'),
+  );
+};
+
+/**
+ * Usually used purely for side effect
+ */
+export const safelyInstallRDTHook = () => {
+  try {
+    // __REACT_DEVTOOLS_GLOBAL_HOOK__ must exist before React is ever executed
+    if (isClientEnvironment()) {
+      getRDTHook();
+    }
+  } catch {}
+};

package/src/source/constants.ts

@@ -0,0 +1,26 @@
+export const SCHEME_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
+
+export const INTERNAL_SCHEME_PREFIXES = [
+  'rsc://',
+  'file:///',
+  'webpack://',
+  'webpack-internal://',
+  'node:',
+  'turbopack://',
+  'metro://',
+  '/app-pages-browser/',
+] as const;
+
+export const ABOUT_REACT_PREFIX = 'about://React/';
+
+export const ANONYMOUS_FILE_PATTERNS = ['<anonymous>', 'eval', ''] as const;
+
+export const SOURCE_FILE_EXTENSION_REGEX = /\.(jsx|tsx|ts|js)$/;
+
+export const BUNDLED_FILE_PATTERN_REGEX =
+  /(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\.webpack\.|\.vite\.|\.turbopack\./i;
+
+export const QUERY_PARAMETER_PATTERN_REGEX =
+  /^\?[\w~.-]+(?:=[^&#]*)?(?:&[\w~.-]+(?:=[^&#]*)?)*$/;
+
+export const SERVER_FRAME_MARKER = '(at Server)';

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

@@ -0,0 +1,103 @@
+import { Fiber } from '../types.js';
+import { getDisplayName } from '../core.js';
+import { getOwnerStack } from './owner-stack.js';
+import { getSourceFromSourceMap, getSourceMap } from './symbolication.js';
+import { StackFrame } from './parse-stack.js';
+
+const extractComponentNameFromSource = (
+  sourceContent: string,
+  lineNumber: number,
+): string | null => {
+  const lines = sourceContent.split('\n');
+  const targetLineIndex = lineNumber - 1;
+
+  if (targetLineIndex < 0 || targetLineIndex >= lines.length) {
+    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];
+  }
+
+  return null;
+};
+
+export const getDisplayNameFromSource = async (
+  fiber: Fiber,
+  cache = true,
+  fetchFn?: (url: string) => Promise<Response>,
+): Promise<string | null> => {
+  const ownerStack = await getOwnerStack(fiber, cache, fetchFn);
+  const stackFrame = ownerStack.filter((stackFrame) => stackFrame.fileName)[0];
+
+  if (!stackFrame?.fileName) {
+    return getDisplayName(fiber.type);
+  }
+
+  const bundleSourceMap = await getSourceMap(
+    stackFrame.fileName,
+    cache,
+    fetchFn,
+  );
+
+  if (!bundleSourceMap) {
+    return getDisplayName(fiber.type);
+  }
+
+  let source: StackFrame | null = null;
+
+  if (
+    typeof stackFrame.lineNumber === 'number' &&
+    typeof stackFrame.columnNumber === 'number'
+  ) {
+    source = getSourceFromSourceMap(
+      bundleSourceMap,
+      stackFrame.lineNumber,
+      stackFrame.columnNumber,
+    );
+  }
+
+  if (!source?.fileName || !source.lineNumber) {
+    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,
+  );
+
+  if (extractedName) {
+    return extractedName;
+  }
+
+  return getDisplayName(fiber.type);
+};

package/src/source/get-source.ts

@@ -0,0 +1,218 @@
+import { Fiber } from '../types.js';
+
+import { FiberSource } from './types.js';
+import {
+  SCHEME_REGEX,
+  INTERNAL_SCHEME_PREFIXES,
+  ABOUT_REACT_PREFIX,
+  ANONYMOUS_FILE_PATTERNS,
+  SOURCE_FILE_EXTENSION_REGEX,
+  BUNDLED_FILE_PATTERN_REGEX,
+  QUERY_PARAMETER_PATTERN_REGEX,
+} from './constants.js';
+import { getOwnerStack } from './owner-stack.js';
+
+export const hasDebugSource = (
+  fiber: Fiber,
+): fiber is Fiber & {
+  _debugSource: NonNullable<Fiber['_debugSource']>;
+} => {
+  const debugSource = fiber._debugSource;
+  if (!debugSource) {
+    return false;
+  }
+  return (
+    typeof debugSource === 'object' &&
+    debugSource !== null &&
+    'fileName' in debugSource &&
+    typeof debugSource.fileName === 'string' &&
+    'lineNumber' in debugSource &&
+    typeof debugSource.lineNumber === 'number'
+  );
+};
+
+/**
+ * Returns the source of where the component is used. Available only in dev, for composite {@link Fiber}s.
+ *
+ * @example
+ * ```ts
+ * function Parent() {
+ *   const data = useData();
+ *   return <Child name={data.name} />; // <-- captures THIS line
+ * }
+ *
+ * function Child({ name }) {
+ *   return <div>{name}</div>;
+ * }
+ *
+ * const source = await getSource(fiber);
+ * console.log(source.fileName, source.lineNumber);
+ * ```
+ */
+export const getSource = async (
+  fiber: Fiber,
+  cache = true,
+  fetchFn?: (url: string) => Promise<Response>,
+): Promise<FiberSource | null> => {
+  if (hasDebugSource(fiber)) {
+    const debugSource = fiber._debugSource;
+    return debugSource || null;
+  }
+
+  const componentStack = await getOwnerStack(fiber, cache, fetchFn);
+
+  for (const stackFrame of componentStack) {
+    if (stackFrame.fileName) {
+      return {
+        fileName: stackFrame.fileName,
+        lineNumber: stackFrame.lineNumber,
+        columnNumber: stackFrame.columnNumber,
+        functionName: stackFrame.functionName,
+      };
+    }
+  }
+  return null;
+};
+
+const getPathSegmentCount = (path: string): number =>
+  path.split('/').filter(Boolean).length;
+
+const getFirstPathSegment = (path: string): string | null => {
+  const segments = path.split('/').filter(Boolean);
+  return segments[0] ?? null;
+};
+
+const stripSingleBasePathPrefix = (path: string): string => {
+  const firstSlashIndex = path.indexOf('/', 1);
+  if (firstSlashIndex === -1) {
+    return path;
+  }
+
+  const basePath = path.slice(0, firstSlashIndex);
+  if (getPathSegmentCount(basePath) !== 1) {
+    return path;
+  }
+
+  const remainderPath = path.slice(firstSlashIndex);
+  if (!SOURCE_FILE_EXTENSION_REGEX.test(remainderPath)) {
+    return path;
+  }
+
+  if (getPathSegmentCount(remainderPath) < 2) {
+    return path;
+  }
+
+  const firstRemainderSegment = getFirstPathSegment(remainderPath);
+  if (!firstRemainderSegment) {
+    return path;
+  }
+
+  if (firstRemainderSegment.startsWith('@')) {
+    return path;
+  }
+
+  if (firstRemainderSegment.length > 4) {
+    return path;
+  }
+
+  return remainderPath;
+};
+
+export const normalizeFileName = (fileName: string): string => {
+  if (!fileName) {
+    return '';
+  }
+
+  if (ANONYMOUS_FILE_PATTERNS.some((pattern) => pattern === fileName)) {
+    return '';
+  }
+
+  let normalizedFileName = fileName;
+
+  const isHttpUrl =
+    normalizedFileName.startsWith('http://') ||
+    normalizedFileName.startsWith('https://');
+  if (isHttpUrl) {
+    try {
+      const parsedUrl = new URL(normalizedFileName);
+      normalizedFileName = parsedUrl.pathname;
+    } catch {}
+  }
+
+  if (isHttpUrl) {
+    normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
+  }
+
+  if (normalizedFileName.startsWith(ABOUT_REACT_PREFIX)) {
+    const remainder = normalizedFileName.slice(ABOUT_REACT_PREFIX.length);
+    const slashIndex = remainder.indexOf('/');
+    const colonIndex = remainder.indexOf(':');
+
+    if (slashIndex !== -1 && (colonIndex === -1 || slashIndex < colonIndex)) {
+      normalizedFileName = remainder.slice(slashIndex + 1);
+    } else {
+      normalizedFileName = remainder;
+    }
+  }
+
+  let didStripPrefix = true;
+  while (didStripPrefix) {
+    didStripPrefix = false;
+    for (const prefix of INTERNAL_SCHEME_PREFIXES) {
+      if (normalizedFileName.startsWith(prefix)) {
+        normalizedFileName = normalizedFileName.slice(prefix.length);
+
+        if (prefix === 'file:///') {
+          normalizedFileName = `/${normalizedFileName.replace(/^\/+/, '')}`;
+        }
+
+        didStripPrefix = true;
+        break;
+      }
+    }
+  }
+
+  if (SCHEME_REGEX.test(normalizedFileName)) {
+    const schemeMatch = normalizedFileName.match(SCHEME_REGEX);
+    if (schemeMatch) {
+      normalizedFileName = normalizedFileName.slice(schemeMatch[0].length);
+    }
+  }
+
+  if (normalizedFileName.startsWith('//')) {
+    const firstPathSlashIndex = normalizedFileName.indexOf('/', 2);
+    normalizedFileName =
+      firstPathSlashIndex === -1
+        ? ''
+        : normalizedFileName.slice(firstPathSlashIndex);
+  }
+
+  const queryParameterIndex = normalizedFileName.indexOf('?');
+  if (queryParameterIndex !== -1) {
+    const potentialQueryParameters =
+      normalizedFileName.slice(queryParameterIndex);
+    if (QUERY_PARAMETER_PATTERN_REGEX.test(potentialQueryParameters)) {
+      normalizedFileName = normalizedFileName.slice(0, queryParameterIndex);
+    }
+  }
+
+  return normalizedFileName;
+};
+
+export const isSourceFile = (fileName: string): boolean => {
+  const normalizedFileName = normalizeFileName(fileName);
+
+  if (!normalizedFileName) {
+    return false;
+  }
+
+  if (!SOURCE_FILE_EXTENSION_REGEX.test(normalizedFileName)) {
+    return false;
+  }
+
+  if (BUNDLED_FILE_PATTERN_REGEX.test(normalizedFileName)) {
+    return false;
+  }
+
+  return true;
+};

package/src/source/index.ts

@@ -0,0 +1,6 @@
+export * from './owner-stack.js';
+export * from './get-source.js';
+export * from './symbolication.js';
+export * from './types.js';
+export * from './parse-stack.js';
+export * from './get-display-name-from-source.js';