bippy 0.5.37 → 0.5.39

package/src/source/parse-hook-names.ts

@@ -0,0 +1,224 @@
+import type { HooksNode, HooksTree, HookSource } from "./inspect-hooks.js";
+import { getSourceMap, getSourceFromSourceMap, type SourceMap } from "./symbolication.js";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface HookNames extends Map<string, string> {}
+
+const UNNAMED_HOOKS = new Set([
+  "Effect",
+  "LayoutEffect",
+  "InsertionEffect",
+  "ImperativeHandle",
+  "DebugValue",
+]);
+
+// HACK: matches `const/let/var [name, ...] = use...(...` or `const/let/var name = use...(...`
+// across up to 10 lines; handles TypeScript generics like `useState<T>(`
+const HOOK_DECLARATION_REGEX =
+  /(?:const|let|var)\s+((?:\[[\s\S]*?\]|\w+))\s*=\s*(?:[\w$.]+\.)*use[A-Z]\w*\s*(?:<[\s\S]*?>)?\s*\(/g;
+
+export const getHookSourceLocationKey = (hookSource: HookSource): string =>
+  `${hookSource.fileName ?? ""}:${hookSource.lineNumber ?? 0}:${hookSource.columnNumber ?? 0}`;
+
+const flattenHooksTree = (hooksTree: HooksTree): HooksNode[] => {
+  const hooksList: HooksNode[] = [];
+  const collectNamedHooks = (tree: HooksTree): void => {
+    for (const hook of tree) {
+      if (UNNAMED_HOOKS.has(hook.name)) continue;
+      hooksList.push(hook);
+      if (hook.subHooks.length > 0) collectNamedHooks(hook.subHooks);
+    }
+  };
+  collectNamedHooks(hooksTree);
+  return hooksList;
+};
+
+const findSourceContentByFileName = (
+  sources: string[],
+  sourcesContent: string[] | undefined,
+  fileName: string,
+): string | null => {
+  if (!sourcesContent) return null;
+  const sourceIndex = sources.indexOf(fileName);
+  return sourceIndex !== -1 ? (sourcesContent[sourceIndex] ?? null) : null;
+};
+
+const getSourceContentFromSourceMap = (
+  sourceMap: SourceMap,
+  originalFileName: string,
+): string | null => {
+  const directResult = findSourceContentByFileName(
+    sourceMap.sources,
+    sourceMap.sourcesContent,
+    originalFileName,
+  );
+  if (directResult) return directResult;
+
+  if (sourceMap.sections) {
+    for (const section of sourceMap.sections) {
+      const sectionResult = findSourceContentByFileName(
+        section.map.sources,
+        section.map.sourcesContent,
+        originalFileName,
+      );
+      if (sectionResult) return sectionResult;
+    }
+  }
+  return null;
+};
+
+const extractVariableNameFromBinding = (binding: string): string | null => {
+  const trimmed = binding.trim();
+  if (trimmed.startsWith("[")) {
+    const match = trimmed.match(/\[\s*(\w+)/);
+    return match ? match[1] : null;
+  }
+  return /^\w+$/.test(trimmed) ? trimmed : null;
+};
+
+export const extractHookVariableName = (
+  sourceCode: string,
+  lineNumber: number,
+  columnNumber: number,
+): string | null => {
+  const lines = sourceCode.split("\n");
+  const hookLineIndex = lineNumber - 1;
+
+  if (hookLineIndex < 0 || hookLineIndex >= lines.length) return null;
+
+  const searchStartLine = Math.max(0, hookLineIndex - 10);
+  const chunkLines = lines.slice(searchStartLine, hookLineIndex + 1);
+  const sourceChunk = chunkLines.join("\n");
+
+  const allMatches = [...sourceChunk.matchAll(HOOK_DECLARATION_REGEX)];
+
+  const hookPositionInChunk = sourceChunk.lastIndexOf("\n") + 1 + columnNumber;
+  const closestMatch = allMatches.filter((match) => match.index! <= hookPositionInChunk).at(-1);
+
+  if (closestMatch) {
+    return extractVariableNameFromBinding(closestMatch[1]);
+  }
+
+  return null;
+};
+
+interface ResolvedSource {
+  sourceCode: string;
+  lineNumber: number;
+  columnNumber: number;
+}
+
+interface SourceResolutionContext {
+  sourceMapsByFile: Map<string, SourceMap | null>;
+  sourceContentCache: Map<string, string | null>;
+  fetchFn?: (url: string) => Promise<Response>;
+}
+
+const resolveOriginalSource = async (
+  runtimeFileName: string,
+  runtimeLine: number,
+  runtimeColumn: number,
+  context: SourceResolutionContext,
+): Promise<ResolvedSource | null> => {
+  const { sourceMapsByFile, sourceContentCache, fetchFn } = context;
+
+  if (!sourceMapsByFile.has(runtimeFileName)) {
+    sourceMapsByFile.set(runtimeFileName, await getSourceMap(runtimeFileName, true, fetchFn));
+  }
+
+  const sourceMap = sourceMapsByFile.get(runtimeFileName) ?? null;
+
+  if (sourceMap) {
+    const originalLocation = getSourceFromSourceMap(sourceMap, runtimeLine, runtimeColumn);
+    if (originalLocation?.fileName && originalLocation.lineNumber !== undefined) {
+      const cacheKey = `sourcemap:${runtimeFileName}:${originalLocation.fileName}`;
+      if (!sourceContentCache.has(cacheKey)) {
+        sourceContentCache.set(
+          cacheKey,
+          getSourceContentFromSourceMap(sourceMap, originalLocation.fileName),
+        );
+      }
+      const originalSourceCode = sourceContentCache.get(cacheKey) ?? null;
+      if (originalSourceCode) {
+        return {
+          sourceCode: originalSourceCode,
+          lineNumber: originalLocation.lineNumber,
+          columnNumber: originalLocation.columnNumber ?? 0,
+        };
+      }
+    }
+  }
+
+  if (!sourceContentCache.has(runtimeFileName)) {
+    try {
+      const fetchImpl = fetchFn ?? fetch;
+      const response = await fetchImpl(runtimeFileName);
+      sourceContentCache.set(runtimeFileName, response.ok ? await response.text() : null);
+    } catch {
+      sourceContentCache.set(runtimeFileName, null);
+    }
+  }
+
+  const runtimeSourceCode = sourceContentCache.get(runtimeFileName) ?? null;
+  if (runtimeSourceCode) {
+    return {
+      sourceCode: runtimeSourceCode,
+      lineNumber: runtimeLine,
+      columnNumber: runtimeColumn,
+    };
+  }
+
+  return null;
+};
+
+export const parseHookNames = async (
+  hooksTree: HooksTree,
+  fetchFn?: (url: string) => Promise<Response>,
+): Promise<HookNames> => {
+  const hookNames: HookNames = new Map();
+  const hooksList = flattenHooksTree(hooksTree);
+
+  if (hooksList.length === 0) return hookNames;
+
+  const resolutionContext: SourceResolutionContext = {
+    sourceMapsByFile: new Map(),
+    sourceContentCache: new Map(),
+    fetchFn,
+  };
+
+  await Promise.all(
+    hooksList.map(async (hook) => {
+      const hookSource = hook.hookSource;
+      if (
+        !hookSource ||
+        !hookSource.fileName ||
+        hookSource.lineNumber === null ||
+        hookSource.columnNumber === null
+      ) {
+        return;
+      }
+
+      const resolved = await resolveOriginalSource(
+        hookSource.fileName,
+        hookSource.lineNumber,
+        hookSource.columnNumber,
+        resolutionContext,
+      );
+
+      if (!resolved) return;
+
+      const variableName = extractHookVariableName(
+        resolved.sourceCode,
+        resolved.lineNumber,
+        resolved.columnNumber,
+      );
+
+      if (variableName) {
+        const locationKey = getHookSourceLocationKey(hookSource);
+        hookNames.set(locationKey, variableName);
+      }
+    }),
+  );
+
+  return hookNames;
+};

package/src/types.ts

@@ -10,9 +10,67 @@ export type Flags = number;
 export type Lanes = number;
 export type TypeOfMode = number;
 export type RootTag = 0 | 1 | 2;
-export type LanePriority = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17;
-export type WorkTag = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
-export type HookType = "useState" | "useReducer" | "useContext" | "useRef" | "useEffect" | "useLayoutEffect" | "useCallback" | "useMemo" | "useImperativeHandle" | "useDebugValue" | "useDeferredValue" | "useTransition" | "useMutableSource" | "useOpaqueIdentifier" | "useCacheRefresh";
+export type LanePriority =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17;
+export type WorkTag =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24;
+export type HookType =
+  | "useState"
+  | "useReducer"
+  | "useContext"
+  | "useRef"
+  | "useEffect"
+  | "useLayoutEffect"
+  | "useCallback"
+  | "useMemo"
+  | "useImperativeHandle"
+  | "useDebugValue"
+  | "useDeferredValue"
+  | "useTransition"
+  | "useMutableSource"
+  | "useOpaqueIdentifier"
+  | "useCacheRefresh";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type FiberRoot = any;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,10 +85,17 @@ export type React$AbstractComponent<_Config, _Instance = unknown> = any;
 export type HostConfig = Record<string, any>;
 
 // Structural interfaces
-export interface Source { fileName: string; lineNumber: number }
+export interface Source {
+  fileName: string;
+  lineNumber: number;
+}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface RefObject { current: any }
-export interface Thenable<T> { then(resolve: () => T, reject?: () => T): T }
+export interface RefObject {
+  current: any;
+}
+export interface Thenable<T> {
+  then(resolve: () => T, reject?: () => T): T;
+}
 
 export interface ReactContext<T> {
   $$typeof: symbol | number;
@@ -47,21 +112,66 @@ export interface ReactContext<T> {
   displayName?: string;
 }
 
-export interface ReactProviderType<T> { $$typeof: symbol | number; _context: ReactContext<T> }
-export interface ReactProvider<T> { $$typeof: symbol | number; type: ReactProviderType<T>; key: null | string; ref: null; props: { value: T; children?: ReactNode } }
-export interface ReactConsumer<T> { $$typeof: symbol | number; type: ReactContext<T>; key: null | string; ref: null; props: { children: (value: T) => ReactNode; unstable_observedBits?: number } }
+export interface ReactProviderType<T> {
+  $$typeof: symbol | number;
+  _context: ReactContext<T>;
+}
+export interface ReactProvider<T> {
+  $$typeof: symbol | number;
+  type: ReactProviderType<T>;
+  key: null | string;
+  ref: null;
+  props: { value: T; children?: ReactNode };
+}
+export interface ReactConsumer<T> {
+  $$typeof: symbol | number;
+  type: ReactContext<T>;
+  key: null | string;
+  ref: null;
+  props: { children: (value: T) => ReactNode; unstable_observedBits?: number };
+}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface ReactPortal { $$typeof: symbol | number; key: null | string; containerInfo: any; children: ReactNode; implementation: any }
+export interface ReactPortal {
+  $$typeof: symbol | number;
+  key: null | string;
+  containerInfo: any;
+  children: ReactNode;
+  implementation: any;
+}
 
-export interface ComponentSelector { $$typeof: symbol | number; value: React$AbstractComponent<never, unknown> }
-export interface HasPseudoClassSelector { $$typeof: symbol | number; value: Selector[] }
-export interface RoleSelector { $$typeof: symbol | number; value: string }
-export interface TextSelector { $$typeof: symbol | number; value: string }
-export interface TestNameSelector { $$typeof: symbol | number; value: string }
-export type Selector = ComponentSelector | HasPseudoClassSelector | RoleSelector | TextSelector | TestNameSelector;
+export interface ComponentSelector {
+  $$typeof: symbol | number;
+  value: React$AbstractComponent<never, unknown>;
+}
+export interface HasPseudoClassSelector {
+  $$typeof: symbol | number;
+  value: Selector[];
+}
+export interface RoleSelector {
+  $$typeof: symbol | number;
+  value: string;
+}
+export interface TextSelector {
+  $$typeof: symbol | number;
+  value: string;
+}
+export interface TestNameSelector {
+  $$typeof: symbol | number;
+  value: string;
+}
+export type Selector =
+  | ComponentSelector
+  | HasPseudoClassSelector
+  | RoleSelector
+  | TextSelector
+  | TestNameSelector;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface DevToolsConfig<Instance = any, TextInstance = any, RendererInspectionConfig = any> {
+export interface DevToolsConfig<
+  Instance = any,
+  TextInstance = any,
+  RendererInspectionConfig = any,
+> {
   bundleType: BundleType;
   version: string;
   rendererPackageName: string;
@@ -76,12 +186,37 @@ export interface SuspenseHydrationCallbacks<SuspenseInstance = unknown> {
 
 export interface TransitionTracingCallbacks {
   onTransitionStart?: (transitionName: string, startTime: number) => void;
-  onTransitionProgress?: (transitionName: string, startTime: number, currentTime: number, pending: Array<{ name: null | string }>) => void;
-  onTransitionIncomplete?: (transitionName: string, startTime: number, deletions: Array<{ type: string; name?: string; newName?: string; endTime: number }>) => void;
+  onTransitionProgress?: (
+    transitionName: string,
+    startTime: number,
+    currentTime: number,
+    pending: Array<{ name: null | string }>,
+  ) => void;
+  onTransitionIncomplete?: (
+    transitionName: string,
+    startTime: number,
+    deletions: Array<{ type: string; name?: string; newName?: string; endTime: number }>,
+  ) => void;
   onTransitionComplete?: (transitionName: string, startTime: number, endTime: number) => void;
-  onMarkerProgress?: (transitionName: string, marker: string, startTime: number, currentTime: number, pending: Array<{ name: null | string }>) => void;
-  onMarkerIncomplete?: (transitionName: string, marker: string, startTime: number, deletions: Array<{ type: string; name?: string; newName?: string; endTime: number }>) => void;
-  onMarkerComplete?: (transitionName: string, marker: string, startTime: number, endTime: number) => void;
+  onMarkerProgress?: (
+    transitionName: string,
+    marker: string,
+    startTime: number,
+    currentTime: number,
+    pending: Array<{ name: null | string }>,
+  ) => void;
+  onMarkerIncomplete?: (
+    transitionName: string,
+    marker: string,
+    startTime: number,
+    deletions: Array<{ type: string; name?: string; newName?: string; endTime: number }>,
+  ) => void;
+  onMarkerComplete?: (
+    transitionName: string,
+    marker: string,
+    startTime: number,
+    endTime: number,
+  ) => void;
 }
 
 // The base Fiber interface from react-reconciler, used to derive bippy's Fiber below