{"files":[{"status":"M","path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js"},{"status":"M","path":"packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.js"}],"commit":{"subject":"DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions (#28593)","shortRevision":"4f5c812a3c","authorEmail":"silbermann.sebastian@gmail.com","revision":"4f5c812a3c4e52d9ea5d908a27a317ac0f26590a","authorName":"Sebastian Silbermann","authoredAt":"2024-04-11T22:00:54+02:00"},"parents":["435415962371adc69e6a7211f7c65a5d72fc609c"],"body":"","patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex cb9d940354..a5a4080a71 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -47,6 +47,7 @@ type HookLogEntry = {\n stackError: Error,\n value: mixed,\n debugInfo: ReactDebugInfo | null,\n+ dispatcherHookName: string,\n };\n \n let hookLog: Array = [];\n@@ -131,6 +132,8 @@ function getPrimitiveStackCache(): Map> {\n );\n } catch (x) {}\n }\n+\n+ Dispatcher.useId();\n } finally {\n readHookLog = hookLog;\n hookLog = [];\n@@ -207,6 +210,7 @@ function use(usable: Usable): T {\n value: fulfilledValue,\n debugInfo:\n thenable._debugInfo === undefined ? null : thenable._debugInfo,\n+ dispatcherHookName: 'Use',\n });\n return fulfilledValue;\n }\n@@ -224,6 +228,7 @@ function use(usable: Usable): T {\n value: thenable,\n debugInfo:\n thenable._debugInfo === undefined ? null : thenable._debugInfo,\n+ dispatcherHookName: 'Use',\n });\n throw SuspenseException;\n } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {\n@@ -236,6 +241,7 @@ function use(usable: Usable): T {\n stackError: new Error(),\n value,\n debugInfo: null,\n+ dispatcherHookName: 'Use',\n });\n \n return value;\n@@ -254,6 +260,7 @@ function useContext(context: ReactContext): T {\n stackError: new Error(),\n value: value,\n debugInfo: null,\n+ dispatcherHookName: 'Context',\n });\n return value;\n }\n@@ -275,6 +282,7 @@ function useState(\n stackError: new Error(),\n value: state,\n debugInfo: null,\n+ dispatcherHookName: 'State',\n });\n return [state, (action: BasicStateAction) => {}];\n }\n@@ -297,6 +305,7 @@ function useReducer(\n stackError: new Error(),\n value: state,\n debugInfo: null,\n+ dispatcherHookName: 'Reducer',\n });\n return [state, (action: A) => {}];\n }\n@@ -310,6 +319,7 @@ function useRef(initialValue: T): {current: T} {\n stackError: new Error(),\n value: ref.current,\n debugInfo: null,\n+ dispatcherHookName: 'Ref',\n });\n return ref;\n }\n@@ -322,6 +332,7 @@ function useCacheRefresh(): () => void {\n stackError: new Error(),\n value: hook !== null ? hook.memoizedState : function refresh() {},\n debugInfo: null,\n+ dispatcherHookName: 'CacheRefresh',\n });\n return () => {};\n }\n@@ -337,6 +348,7 @@ function useLayoutEffect(\n stackError: new Error(),\n value: create,\n debugInfo: null,\n+ dispatcherHookName: 'LayoutEffect',\n });\n }\n \n@@ -351,6 +363,7 @@ function useInsertionEffect(\n stackError: new Error(),\n value: create,\n debugInfo: null,\n+ dispatcherHookName: 'InsertionEffect',\n });\n }\n \n@@ -365,6 +378,7 @@ function useEffect(\n stackError: new Error(),\n value: create,\n debugInfo: null,\n+ dispatcherHookName: 'Effect',\n });\n }\n \n@@ -388,6 +402,7 @@ function useImperativeHandle(\n stackError: new Error(),\n value: instance,\n debugInfo: null,\n+ dispatcherHookName: 'ImperativeHandle',\n });\n }\n \n@@ -398,6 +413,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n stackError: new Error(),\n value: typeof formatterFn === 'function' ? formatterFn(value) : value,\n debugInfo: null,\n+ dispatcherHookName: 'DebugValue',\n });\n }\n \n@@ -409,6 +425,7 @@ function useCallback(callback: T, inputs: Array | void | null): T {\n stackError: new Error(),\n value: hook !== null ? hook.memoizedState[0] : callback,\n debugInfo: null,\n+ dispatcherHookName: 'Callback',\n });\n return callback;\n }\n@@ -425,6 +442,7 @@ function useMemo(\n stackError: new Error(),\n value,\n debugInfo: null,\n+ dispatcherHookName: 'Memo',\n });\n return value;\n }\n@@ -446,6 +464,7 @@ function useSyncExternalStore(\n stackError: new Error(),\n value,\n debugInfo: null,\n+ dispatcherHookName: 'SyncExternalStore',\n });\n return value;\n }\n@@ -468,6 +487,7 @@ function useTransition(): [\n stackError: new Error(),\n value: isPending,\n debugInfo: null,\n+ dispatcherHookName: 'Transition',\n });\n return [isPending, () => {}];\n }\n@@ -481,6 +501,7 @@ function useDeferredValue(value: T, initialValue?: T): T {\n stackError: new Error(),\n value: prevValue,\n debugInfo: null,\n+ dispatcherHookName: 'DeferredValue',\n });\n return prevValue;\n }\n@@ -494,6 +515,7 @@ function useId(): string {\n stackError: new Error(),\n value: id,\n debugInfo: null,\n+ dispatcherHookName: 'Id',\n });\n return id;\n }\n@@ -544,6 +566,7 @@ function useOptimistic(\n stackError: new Error(),\n value: state,\n debugInfo: null,\n+ dispatcherHookName: 'Optimistic',\n });\n return [state, (action: A) => {}];\n }\n@@ -603,6 +626,7 @@ function useFormState(\n stackError: stackError,\n value: value,\n debugInfo: debugInfo,\n+ dispatcherHookName: 'FormState',\n });\n \n if (error !== null) {\n@@ -672,6 +696,7 @@ function useActionState(\n stackError: stackError,\n value: value,\n debugInfo: debugInfo,\n+ dispatcherHookName: 'ActionState',\n });\n \n if (error !== null) {\n@@ -759,8 +784,7 @@ export type HooksTree = Array;\n \/\/ of a hook call. A simple way to demonstrate this is wrapping `new Error()`\n \/\/ in a wrapper constructor like a polyfill. That'll add an extra frame.\n \/\/ Similar things can happen with the call to the dispatcher. The top frame\n-\/\/ may not be the primitive. Likewise the primitive can have fewer stack frames\n-\/\/ such as when a call to useState got inlined to use dispatcher.useState.\n+\/\/ may not be the primitive.\n \/\/\n \/\/ We also can't assume that the last frame of the root call is the same\n \/\/ frame as the last frame of the hook call because long stack traces can be\n@@ -810,27 +834,8 @@ function findCommonAncestorIndex(rootStack: any, hookStack: any) {\n return -1;\n }\n \n-function isReactWrapper(functionName: any, primitiveName: string) {\n- if (!functionName) {\n- return false;\n- }\n- switch (primitiveName) {\n- case 'Context':\n- case 'Context (use)':\n- case 'Promise':\n- case 'Unresolved':\n- if (functionName.endsWith('use')) {\n- return true;\n- }\n- }\n- const expectedPrimitiveName = 'use' + primitiveName;\n- if (functionName.length < expectedPrimitiveName.length) {\n- return false;\n- }\n- return (\n- functionName.lastIndexOf(expectedPrimitiveName) ===\n- functionName.length - expectedPrimitiveName.length\n- );\n+function isReactWrapper(functionName: any, wrapperName: string) {\n+ return parseHookName(functionName) === wrapperName;\n }\n \n function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {\n@@ -841,17 +846,18 @@ function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {\n }\n for (let i = 0; i < primitiveStack.length && i < hookStack.length; i++) {\n if (primitiveStack[i].source !== hookStack[i].source) {\n- \/\/ If the next two frames are functions called `useX` then we assume that they're part of the\n- \/\/ wrappers that the React packager or other packages adds around the dispatcher.\n+ \/\/ If the next frame is a method from the dispatcher, we\n+ \/\/ assume that the next frame after that is the actual public API call.\n+ \/\/ This prohibits nesting dispatcher calls in hooks.\n if (\n i < hookStack.length - 1 &&\n- isReactWrapper(hookStack[i].functionName, hook.primitive)\n+ isReactWrapper(hookStack[i].functionName, hook.dispatcherHookName)\n ) {\n i++;\n }\n if (\n i < hookStack.length - 1 &&\n- isReactWrapper(hookStack[i].functionName, hook.primitive)\n+ isReactWrapper(hookStack[i].functionName, hook.dispatcherHookName)\n ) {\n i++;\n }\n@@ -872,21 +878,41 @@ function parseTrimmedStack(rootStack: any, hook: HookLogEntry) {\n primitiveIndex === -1 ||\n rootIndex - primitiveIndex < 2\n ) {\n- \/\/ Something went wrong. Give up.\n- return null;\n+ if (primitiveIndex === -1) {\n+ \/\/ Something went wrong. Give up.\n+ return [null, null];\n+ } else {\n+ return [hookStack[primitiveIndex - 1], null];\n+ }\n }\n- return hookStack.slice(primitiveIndex, rootIndex - 1);\n+ return [\n+ hookStack[primitiveIndex - 1],\n+ hookStack.slice(primitiveIndex, rootIndex - 1),\n+ ];\n }\n \n-function parseCustomHookName(functionName: void | string): string {\n+function parseHookName(functionName: void | string): string {\n if (!functionName) {\n return '';\n }\n- let startIndex = functionName.lastIndexOf('.');\n+ let startIndex = functionName.lastIndexOf('[as ');\n+\n+ if (startIndex !== -1) {\n+ \/\/ Workaround for sourcemaps in Jest and Chrome.\n+ \/\/ In `node --enable-source-maps`, we don't see \"Object.useHostTransitionStatus [as useFormStatus]\" but \"Object.useFormStatus\"\n+ \/\/ \"Object.useHostTransitionStatus [as useFormStatus]\" -> \"useFormStatus\"\n+ return parseHookName(functionName.slice(startIndex + '[as '.length, -1));\n+ }\n+ startIndex = functionName.lastIndexOf('.');\n if (startIndex === -1) {\n startIndex = 0;\n+ } else {\n+ startIndex += 1;\n }\n if (functionName.slice(startIndex, startIndex + 3) === 'use') {\n+ if (functionName.length - startIndex === 3) {\n+ return 'Use';\n+ }\n startIndex += 3;\n }\n return functionName.slice(startIndex);\n@@ -903,7 +929,17 @@ function buildTree(\n const stackOfChildren = [];\n for (let i = 0; i < readHookLog.length; i++) {\n const hook = readHookLog[i];\n- const stack = parseTrimmedStack(rootStack, hook);\n+ const parseResult = parseTrimmedStack(rootStack, hook);\n+ const primitiveFrame = parseResult[0];\n+ const stack = parseResult[1];\n+ let displayName = hook.displayName;\n+ if (displayName === null && primitiveFrame !== null) {\n+ displayName =\n+ parseHookName(primitiveFrame.functionName) ||\n+ \/\/ Older versions of React do not have sourcemaps.\n+ \/\/ In those versions there was always a 1:1 mapping between wrapper and dispatcher method.\n+ parseHookName(hook.dispatcherHookName);\n+ }\n if (stack !== null) {\n \/\/ Note: The indices 0 <= n < length-1 will contain the names.\n \/\/ The indices 1 <= n < length will contain the source locations.\n@@ -934,7 +970,7 @@ function buildTree(\n const levelChild: HooksNode = {\n id: null,\n isStateEditable: false,\n- name: parseCustomHookName(stack[j - 1].functionName),\n+ name: parseHookName(stack[j - 1].functionName),\n value: undefined,\n subHooks: children,\n debugInfo: null,\n@@ -952,7 +988,7 @@ function buildTree(\n }\n prevStack = stack;\n }\n- const {displayName, primitive, debugInfo} = hook;\n+ const {primitive, debugInfo} = hook;\n \n \/\/ For now, the \"id\" of stateful hooks is just the stateful hook index.\n \/\/ Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).\ndiff --git a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.js b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.js\nindex a1f194c35c..97aaeb8f4a 100644\n--- a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.js\n+++ b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.js\n@@ -518,7 +518,7 @@ describe('ReactHooksInspection', () => {\n },\n \"id\": null,\n \"isStateEditable\": false,\n- \"name\": \"Promise\",\n+ \"name\": \"Use\",\n \"subHooks\": [],\n \"value\": \"world\",\n },\n@@ -568,7 +568,7 @@ describe('ReactHooksInspection', () => {\n },\n \"id\": null,\n \"isStateEditable\": false,\n- \"name\": \"Unresolved\",\n+ \"name\": \"Use\",\n \"subHooks\": [],\n \"value\": Any,\n }\n"}

dillon1000/react

Files changed