Fix parsing for minified prod bundles

facebook · Apr 3, 2024 · 4b0179b · 4b0179b
1 parent a8c4804
commit 4b0179b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 62 deletions.
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -48,7 +48,7 @@ type HookLogEntry = {
   stackError: Error,
   value: mixed,
   debugInfo: ReactDebugInfo | null,
-  dispatcherMethodName: string,
+  dispatcherHookName: string,
   wrapperNames: Array<string>,
 };
 
@@ -217,8 +217,8 @@ function use<T>(usable: Usable<T>): T {
             value: fulfilledValue,
             debugInfo:
               thenable._debugInfo === undefined ? null : thenable._debugInfo,
-            dispatcherMethodName: 'use',
-            wrapperNames: ['use'],
+            dispatcherHookName: 'Use',
+            wrapperNames: ['Use'],
           });
           return fulfilledValue;
         }
@@ -236,8 +236,8 @@ function use<T>(usable: Usable<T>): T {
         value: thenable,
         debugInfo:
           thenable._debugInfo === undefined ? null : thenable._debugInfo,
-        dispatcherMethodName: 'use',
-        wrapperNames: ['use'],
+        dispatcherHookName: 'Use',
+        wrapperNames: ['Use'],
       });
       throw SuspenseException;
     } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
@@ -250,8 +250,8 @@ function use<T>(usable: Usable<T>): T {
         stackError: new Error(),
         value,
         debugInfo: null,
-        dispatcherMethodName: 'use',
-        wrapperNames: ['use'],
+        dispatcherHookName: 'Use',
+        wrapperNames: ['Use'],
       });
 
       return value;
@@ -270,8 +270,8 @@ function useContext<T>(context: ReactContext<T>): T {
     stackError: new Error(),
     value: value,
     debugInfo: null,
-    dispatcherMethodName: 'useContext',
-    wrapperNames: ['useContext'],
+    dispatcherHookName: 'Context',
+    wrapperNames: ['Context'],
   });
   return value;
 }
@@ -293,8 +293,8 @@ function useState<S>(
     stackError: new Error(),
     value: state,
     debugInfo: null,
-    dispatcherMethodName: 'useState',
-    wrapperNames: ['useState'],
+    dispatcherHookName: 'State',
+    wrapperNames: ['State'],
   });
   return [state, (action: BasicStateAction<S>) => {}];
 }
@@ -317,8 +317,8 @@ function useReducer<S, I, A>(
     stackError: new Error(),
     value: state,
     debugInfo: null,
-    dispatcherMethodName: 'useReducer',
-    wrapperNames: ['useReducer'],
+    dispatcherHookName: 'Reducer',
+    wrapperNames: ['Reducer'],
   });
   return [state, (action: A) => {}];
 }
@@ -332,8 +332,8 @@ function useRef<T>(initialValue: T): {current: T} {
     stackError: new Error(),
     value: ref.current,
     debugInfo: null,
-    dispatcherMethodName: 'useRef',
-    wrapperNames: ['useRef'],
+    dispatcherHookName: 'Ref',
+    wrapperNames: ['Ref'],
   });
   return ref;
 }
@@ -346,8 +346,8 @@ function useCacheRefresh(): () => void {
     stackError: new Error(),
     value: hook !== null ? hook.memoizedState : function refresh() {},
     debugInfo: null,
-    dispatcherMethodName: 'useCacheRefresh',
-    wrapperNames: ['useCacheRefresh'],
+    dispatcherHookName: 'CacheRefresh',
+    wrapperNames: ['CacheRefresh'],
   });
   return () => {};
 }
@@ -363,8 +363,8 @@ function useLayoutEffect(
     stackError: new Error(),
     value: create,
     debugInfo: null,
-    dispatcherMethodName: 'useLayoutEffect',
-    wrapperNames: ['useLayoutEffect'],
+    dispatcherHookName: 'LayoutEffect',
+    wrapperNames: ['LayoutEffect'],
   });
 }
 
@@ -379,8 +379,8 @@ function useInsertionEffect(
     stackError: new Error(),
     value: create,
     debugInfo: null,
-    dispatcherMethodName: 'useInsertionEffect',
-    wrapperNames: ['useInsertionEffect'],
+    dispatcherHookName: 'InsertionEffect',
+    wrapperNames: ['InsertionEffect'],
   });
 }
 
@@ -395,8 +395,8 @@ function useEffect(
     stackError: new Error(),
     value: create,
     debugInfo: null,
-    dispatcherMethodName: 'useEffect',
-    wrapperNames: ['useEffect'],
+    dispatcherHookName: 'Effect',
+    wrapperNames: ['Effect'],
   });
 }
 
@@ -420,8 +420,8 @@ function useImperativeHandle<T>(
     stackError: new Error(),
     value: instance,
     debugInfo: null,
-    dispatcherMethodName: 'useImperativeHandle',
-    wrapperNames: ['useImperativeHandle'],
+    dispatcherHookName: 'ImperativeHandle',
+    wrapperNames: ['ImperativeHandle'],
   });
 }
 
@@ -432,8 +432,8 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
     stackError: new Error(),
     value: typeof formatterFn === 'function' ? formatterFn(value) : value,
     debugInfo: null,
-    dispatcherMethodName: 'useDebugValue',
-    wrapperNames: ['useDebugValue'],
+    dispatcherHookName: 'DebugValue',
+    wrapperNames: ['DebugValue'],
   });
 }
 
@@ -445,8 +445,8 @@ function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
     stackError: new Error(),
     value: hook !== null ? hook.memoizedState[0] : callback,
     debugInfo: null,
-    dispatcherMethodName: 'useCallback',
-    wrapperNames: ['useCallback'],
+    dispatcherHookName: 'Callback',
+    wrapperNames: ['Callback'],
   });
   return callback;
 }
@@ -463,8 +463,8 @@ function useMemo<T>(
     stackError: new Error(),
     value,
     debugInfo: null,
-    dispatcherMethodName: 'useMemo',
-    wrapperNames: ['useMemo'],
+    dispatcherHookName: 'Memo',
+    wrapperNames: ['Memo'],
   });
   return value;
 }
@@ -486,8 +486,8 @@ function useSyncExternalStore<T>(
     stackError: new Error(),
     value,
     debugInfo: null,
-    dispatcherMethodName: 'useSyncExternalStore',
-    wrapperNames: ['useSyncExternalStore'],
+    dispatcherHookName: 'SyncExternalStore',
+    wrapperNames: ['SyncExternalStore'],
   });
   return value;
 }
@@ -510,8 +510,8 @@ function useTransition(): [
     stackError: new Error(),
     value: isPending,
     debugInfo: null,
-    dispatcherMethodName: 'useTransition',
-    wrapperNames: ['useTransition'],
+    dispatcherHookName: 'Transition',
+    wrapperNames: ['Transition'],
   });
   return [isPending, () => {}];
 }
@@ -525,8 +525,8 @@ function useDeferredValue<T>(value: T, initialValue?: T): T {
     stackError: new Error(),
     value: prevValue,
     debugInfo: null,
-    dispatcherMethodName: 'useDeferredValue',
-    wrapperNames: ['useDeferredValue'],
+    dispatcherHookName: 'DeferredValue',
+    wrapperNames: ['DeferredValue'],
   });
   return prevValue;
 }
@@ -540,8 +540,8 @@ function useId(): string {
     stackError: new Error(),
     value: id,
     debugInfo: null,
-    dispatcherMethodName: 'useId',
-    wrapperNames: ['useId'],
+    dispatcherHookName: 'Id',
+    wrapperNames: ['Id'],
   });
   return id;
 }
@@ -592,8 +592,8 @@ function useOptimistic<S, A>(
     stackError: new Error(),
     value: state,
     debugInfo: null,
-    dispatcherMethodName: 'useOptimistic',
-    wrapperNames: ['useOptimistic'],
+    dispatcherHookName: 'Optimistic',
+    wrapperNames: ['Optimistic'],
   });
   return [state, (action: A) => {}];
 }
@@ -653,8 +653,8 @@ function useFormState<S, P>(
     stackError: stackError,
     value: value,
     debugInfo: debugInfo,
-    dispatcherMethodName: 'useFormState',
-    wrapperNames: ['useFormState'],
+    dispatcherHookName: 'FormState',
+    wrapperNames: ['FormState'],
   });
 
   if (error !== null) {
@@ -724,8 +724,8 @@ function useActionState<S, P>(
     stackError: stackError,
     value: value,
     debugInfo: debugInfo,
-    dispatcherMethodName: 'useActionState',
-    wrapperNames: ['useActionState'],
+    dispatcherHookName: 'ActionState',
+    wrapperNames: ['ActionState'],
   });
 
   if (error !== null) {
@@ -755,10 +755,10 @@ function useHostTransitionStatus(): TransitionStatus {
     stackError: new Error(),
     value: status,
     debugInfo: null,
-    dispatcherMethodName: 'useHostTransitionStatus',
+    dispatcherHookName: 'HostTransitionStatus',
     wrapperNames: [
       // react-dom
-      'useFormStatus',
+      'FormStatus',
     ],
   });
 
@@ -890,16 +890,7 @@ function findCommonAncestorIndex(rootStack: any, hookStack: any) {
 }
 
 function isReactWrapper(functionName: any, wrapperName: string) {
-  if (!functionName) {
-    return false;
-  }
-  if (functionName.length < wrapperName.length) {
-    return false;
-  }
-  return (
-    functionName.lastIndexOf(wrapperName) ===
-    functionName.length - wrapperName.length
-  );
+  return parseHookName(functionName) === wrapperName;
 }
 
 function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {
@@ -915,7 +906,7 @@ function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {
       // This prohibits nesting dispatcher calls in hooks.
       if (
         i < hookStack.length - 1 &&
-        isReactWrapper(hookStack[i].functionName, hook.dispatcherMethodName)
+        isReactWrapper(hookStack[i].functionName, hook.dispatcherHookName)
       ) {
         i++;
       }
@@ -962,7 +953,15 @@ function parseHookName(functionName: void | string): string {
   if (!functionName) {
     return '';
   }
-  let startIndex = functionName.lastIndexOf('.');
+  let startIndex = functionName.lastIndexOf('[as ');
+
+  if (startIndex !== -1) {
+    // Workaround for sourcemaps in Jest and Chrome.
+    // In `node --enable-source-maps`, we don't see "Object.useHostTransitionStatus [as useFormStatus]" but "Object.useFormStatus"
+    // "Object.useHostTransitionStatus [as useFormStatus]" -> "useFormStatus"
+    return parseHookName(functionName.slice(startIndex + '[as '.length, -1));
+  }
+  startIndex = functionName.lastIndexOf('.');
   if (startIndex === -1) {
     startIndex = 0;
   } else {
@@ -997,7 +996,7 @@ function buildTree(
         parseHookName(primitiveFrame.functionName) ||
         // Older versions of React do not have sourcemaps.
         // In those versions there was always a 1:1 mapping between wrapper and dispatcher method.
-        parseHookName(hook.dispatcherMethodName);
+        parseHookName(hook.dispatcherHookName);
     }
     if (stack !== null) {
       // Note: The indices 0 <= n < length-1 will contain the names.

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js
@@ -38,8 +38,6 @@ describe('ReactHooksInspectionIntegration', () => {
     ReactDebugTools = require('react-debug-tools');
   });
 
-  // Gating production, non-source builds only for Jest.
-  // @gate source || build === "development"
   it('should support useFormStatus hook', async () => {
     function FormStatus() {
       const status = ReactDOM.useFormStatus();