WIP

facebook · Mar 6, 2024 · 160103d · 160103d
1 parent ec606a6
commit 160103d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 49 deletions.
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -45,6 +45,7 @@ type HookLogEntry = {
   stackError: Error,
   value: mixed,
   debugInfo: ReactDebugInfo | null,
+  wrapper: string | null,
 };
 
 let hookLog: Array<HookLogEntry> = [];
@@ -200,6 +201,7 @@ function use<T>(usable: Usable<T>): T {
             value: fulfilledValue,
             debugInfo:
               thenable._debugInfo === undefined ? null : thenable._debugInfo,
+            wrapper: null,
           });
           return fulfilledValue;
         }
@@ -217,6 +219,7 @@ function use<T>(usable: Usable<T>): T {
         value: thenable,
         debugInfo:
           thenable._debugInfo === undefined ? null : thenable._debugInfo,
+        wrapper: null,
       });
       throw SuspenseException;
     } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
@@ -229,6 +232,7 @@ function use<T>(usable: Usable<T>): T {
         stackError: new Error(),
         value,
         debugInfo: null,
+        wrapper: null,
       });
 
       return value;
@@ -247,6 +251,7 @@ function useContext<T>(context: ReactContext<T>): T {
     stackError: new Error(),
     value: value,
     debugInfo: null,
+    wrapper: null,
   });
   return value;
 }
@@ -268,6 +273,7 @@ function useState<S>(
     stackError: new Error(),
     value: state,
     debugInfo: null,
+    wrapper: null,
   });
   return [state, (action: BasicStateAction<S>) => {}];
 }
@@ -290,6 +296,7 @@ function useReducer<S, I, A>(
     stackError: new Error(),
     value: state,
     debugInfo: null,
+    wrapper: null,
   });
   return [state, (action: A) => {}];
 }
@@ -303,6 +310,7 @@ function useRef<T>(initialValue: T): {current: T} {
     stackError: new Error(),
     value: ref.current,
     debugInfo: null,
+    wrapper: null,
   });
   return ref;
 }
@@ -315,6 +323,7 @@ function useCacheRefresh(): () => void {
     stackError: new Error(),
     value: hook !== null ? hook.memoizedState : function refresh() {},
     debugInfo: null,
+    wrapper: null,
   });
   return () => {};
 }
@@ -330,6 +339,7 @@ function useLayoutEffect(
     stackError: new Error(),
     value: create,
     debugInfo: null,
+    wrapper: null,
   });
 }
 
@@ -344,6 +354,7 @@ function useInsertionEffect(
     stackError: new Error(),
     value: create,
     debugInfo: null,
+    wrapper: null,
   });
 }
 
@@ -358,6 +369,7 @@ function useEffect(
     stackError: new Error(),
     value: create,
     debugInfo: null,
+    wrapper: null,
   });
 }
 
@@ -381,6 +393,7 @@ function useImperativeHandle<T>(
     stackError: new Error(),
     value: instance,
     debugInfo: null,
+    wrapper: null,
   });
 }
 
@@ -391,6 +404,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
     stackError: new Error(),
     value: typeof formatterFn === 'function' ? formatterFn(value) : value,
     debugInfo: null,
+    wrapper: null,
   });
 }
 
@@ -402,6 +416,7 @@ function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
     stackError: new Error(),
     value: hook !== null ? hook.memoizedState[0] : callback,
     debugInfo: null,
+    wrapper: null,
   });
   return callback;
 }
@@ -418,6 +433,7 @@ function useMemo<T>(
     stackError: new Error(),
     value,
     debugInfo: null,
+    wrapper: null,
   });
   return value;
 }
@@ -439,6 +455,7 @@ function useSyncExternalStore<T>(
     stackError: new Error(),
     value,
     debugInfo: null,
+    wrapper: null,
   });
   return value;
 }
@@ -458,6 +475,7 @@ function useTransition(): [
     stackError: new Error(),
     value: undefined,
     debugInfo: null,
+    wrapper: null,
   });
   return [false, callback => {}];
 }
@@ -470,6 +488,7 @@ function useDeferredValue<T>(value: T, initialValue?: T): T {
     stackError: new Error(),
     value: hook !== null ? hook.memoizedState : value,
     debugInfo: null,
+    wrapper: null,
   });
   return value;
 }
@@ -483,6 +502,7 @@ function useId(): string {
     stackError: new Error(),
     value: id,
     debugInfo: null,
+    wrapper: null,
   });
   return id;
 }
@@ -533,6 +553,7 @@ function useOptimistic<S, A>(
     stackError: new Error(),
     value: state,
     debugInfo: null,
+    wrapper: null,
   });
   return [state, (action: A) => {}];
 }
@@ -591,6 +612,7 @@ function useFormState<S, P>(
     stackError: stackError,
     value: value,
     debugInfo: debugInfo,
+    wrapper: null,
   });
 
   if (error !== null) {
@@ -618,6 +640,7 @@ function useHostTransitionStatus(): TransitionStatus {
     stackError: new Error(),
     value: status,
     debugInfo: null,
+    wrapper: 'FormStatus',
   });
 
   return status;
@@ -788,8 +811,14 @@ function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {
       }
       if (
         i < hookStack.length - 1 &&
-        isReactWrapper(hookStack[i].functionName, hook.primitive)
+        isReactWrapper(
+          hookStack[i].functionName,
+          hook.wrapper || hook.primitive,
+        )
       ) {
+        if (primitiveStack[i].displayName !== null) {
+          primitiveStack[i].displayName = hook.wrapper || hook.primitive;
+        }
         i++;
       }
       return i;
@@ -798,6 +827,11 @@ function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {
   return -1;
 }
 
+// cache key dispatcher
+// displayName
+// cache key
+// wrapper -> wrappers e.g. `FormStatus`
+
 function parseTrimmedStack(rootStack: any, hook: HookLogEntry) {
   // Get the stack trace between the primitive hook function and
   // the root function call. I.e. the stack frames of custom hooks.

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js
@@ -42,51 +42,36 @@ describe('ReactHooksInspectionIntegration', () => {
   // @gate source || build === "development"
   // @gate enableFormActions && enableAsyncActions
   it('should support useFormStatus hook', async () => {
-    function FormStatus() {
+    function Foo() {
       const status = ReactDOM.useFormStatus();
       React.useMemo(() => 'memo', []);
       React.useMemo(() => 'not used', []);
 
       return JSON.stringify(status);
     }
 
-    const treeWithoutFiber = ReactDebugTools.inspectHooks(FormStatus);
+    const treeWithoutFiber = ReactDebugTools.inspectHooks(Foo);
     expect(normalizeSourceLoc(treeWithoutFiber)).toEqual([
       {
         debugInfo: null,
         hookSource: {
           columnNumber: 0,
           fileName: '**',
-          functionName: 'FormStatus',
+          functionName: 'Foo',
           lineNumber: 0,
         },
         id: null,
         isStateEditable: false,
-        name: '.useFormStatus',
-        subHooks: [
-          {
-            debugInfo: null,
-            hookSource: {
-              columnNumber: 0,
-              fileName: '**',
-              functionName: 'Object.useFormStatus',
-              lineNumber: 0,
-            },
-            id: null,
-            isStateEditable: false,
-            name: 'HostTransitionStatus',
-            subHooks: [],
-            value: null,
-          },
-        ],
+        name: 'HostTransitionStatus',
+        subHooks: [],
         value: null,
       },
       {
         debugInfo: null,
         hookSource: {
           columnNumber: 0,
           fileName: '**',
-          functionName: 'FormStatus',
+          functionName: 'Foo',
           lineNumber: 0,
         },
         id: 0,
@@ -100,7 +85,7 @@ describe('ReactHooksInspectionIntegration', () => {
         hookSource: {
           columnNumber: 0,
           fileName: '**',
-          functionName: 'FormStatus',
+          functionName: 'Foo',
           lineNumber: 0,
         },
         id: 1,
@@ -116,7 +101,7 @@ describe('ReactHooksInspectionIntegration', () => {
     await act(() => {
       root.render(
         <form>
-          <FormStatus />
+          <Foo />
         </form>,
       );
     });
@@ -130,36 +115,21 @@ describe('ReactHooksInspectionIntegration', () => {
         hookSource: {
           columnNumber: 0,
           fileName: '**',
-          functionName: 'FormStatus',
+          functionName: 'Foo',
           lineNumber: 0,
         },
         id: null,
         isStateEditable: false,
-        name: '.useFormStatus',
-        subHooks: [
-          {
-            debugInfo: null,
-            hookSource: {
-              columnNumber: 0,
-              fileName: '**',
-              functionName: 'Object.useFormStatus',
-              lineNumber: 0,
-            },
-            id: null,
-            isStateEditable: false,
-            name: 'HostTransitionStatus',
-            subHooks: [],
-            value: null,
-          },
-        ],
+        name: 'HostTransitionStatus',
+        subHooks: [],
         value: null,
       },
       {
         debugInfo: null,
         hookSource: {
           columnNumber: 0,
           fileName: '**',
-          functionName: 'FormStatus',
+          functionName: 'Foo',
           lineNumber: 0,
         },
         id: 0,
@@ -173,7 +143,7 @@ describe('ReactHooksInspectionIntegration', () => {
         hookSource: {
           columnNumber: 0,
           fileName: '**',
-          functionName: 'FormStatus',
+          functionName: 'Foo',
           lineNumber: 0,
         },
         id: 1,

diff --git a/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js b/packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
@@ -72,11 +72,7 @@ export function useFormStatus(): FormStatus {
   } else {
     const dispatcher = resolveDispatcher();
     // $FlowFixMe[not-a-function] We know this exists because of the feature check above.
-    const status = dispatcher.useHostTransitionStatus();
-
-    dispatcher.useDebugValue(status);
-
-    return status;
+    return dispatcher.useHostTransitionStatus();
   }
 }