{"commit":{"authorName":"Brian Vaughn","authoredAt":"2021-07-15T23:39:30-04:00","subject":"Clear named hooks Suspense and AST cache after a Fast Refresh (#21891)","authorEmail":"bvaughn@fb.com","revision":"e26cb8f86db0936e14682c39e2d26373fa6f433d","shortRevision":"e26cb8f86d"},"body":"","parents":["682bbd0e7212df0bfe1d8017284e2822d281f7ea"],"files":[{"status":"M","path":"packages\/react-devtools-extensions\/src\/__tests__\/parseHookNames-test.js"},{"status":"M","path":"packages\/react-devtools-extensions\/src\/main.js"},{"status":"M","path":"packages\/react-devtools-extensions\/src\/parseHookNames.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/agent.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/index.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/bridge.js"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/HookNamesContext.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js"},{"status":"D","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/LoadHookNamesFunctionContext.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hookNamesCache.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/types.js"}],"patch":"diff --git a\/packages\/react-devtools-extensions\/src\/__tests__\/parseHookNames-test.js b\/packages\/react-devtools-extensions\/src\/__tests__\/parseHookNames-test.js\nindex 2599ce95c4..81db5ab7a0 100644\n--- a\/packages\/react-devtools-extensions\/src\/__tests__\/parseHookNames-test.js\n+++ b\/packages\/react-devtools-extensions\/src\/__tests__\/parseHookNames-test.js\n@@ -33,7 +33,7 @@ describe('parseHookNames', () => {\n \n inspectHooks = require('react-debug-tools\/src\/ReactDebugHooks')\n .inspectHooks;\n- parseHookNames = require('..\/parseHookNames').default;\n+ parseHookNames = require('..\/parseHookNames').parseHookNames;\n \n \/\/ Jest (jest-runner?) configures Errors to automatically account for source maps.\n \/\/ This changes behavior between our tests and the browser.\n@@ -158,6 +158,10 @@ describe('parseHookNames', () => {\n ]);\n });\n \n+ \/\/ TODO Test that cache purge works\n+\n+ \/\/ TODO Test that cached metadata is purged when Fast Refresh scheduled\n+\n describe('inline, external and bundle source maps', () => {\n it('should work for simple components', async () => {\n async function test(path, name = 'Component') {\ndiff --git a\/packages\/react-devtools-extensions\/src\/main.js b\/packages\/react-devtools-extensions\/src\/main.js\nindex 32efad807e..b3b2581eda 100644\n--- a\/packages\/react-devtools-extensions\/src\/main.js\n+++ b\/packages\/react-devtools-extensions\/src\/main.js\n@@ -12,7 +12,7 @@ import {\n getSavedComponentFilters,\n getShowInlineWarningsAndErrors,\n } from 'react-devtools-shared\/src\/utils';\n-import parseHookNames from '.\/parseHookNames';\n+import {parseHookNames, purgeCachedMetadata} from '.\/parseHookNames';\n import {\n localStorageGetItem,\n localStorageRemoveItem,\n@@ -215,9 +215,10 @@ function createPanelIfReactLoaded() {\n browserTheme: getBrowserTheme(),\n componentsPortalContainer,\n enabledInspectedElementContextMenu: true,\n- loadHookNamesFunction: parseHookNames,\n+ loadHookNames: parseHookNames,\n overrideTab,\n profilerPortalContainer,\n+ purgeCachedHookNamesMetadata: purgeCachedMetadata,\n showTabBar: false,\n store,\n warnIfUnsupportedVersionDetected: true,\ndiff --git a\/packages\/react-devtools-extensions\/src\/parseHookNames.js b\/packages\/react-devtools-extensions\/src\/parseHookNames.js\nindex 218bd596d0..9b029b3225 100644\n--- a\/packages\/react-devtools-extensions\/src\/parseHookNames.js\n+++ b\/packages\/react-devtools-extensions\/src\/parseHookNames.js\n@@ -102,7 +102,7 @@ const originalURLToMetadataCache: LRUCache<\n },\n });\n \n-export default async function parseHookNames(\n+export async function parseHookNames(\n hooksTree: HooksTree,\n ): Thenable {\n if (!enableHookNameParsing) {\n@@ -623,3 +623,8 @@ function updateLruCache(\n });\n return Promise.resolve();\n }\n+\n+export function purgeCachedMetadata(): void {\n+ originalURLToMetadataCache.reset();\n+ runtimeURLToMetadataCache.reset();\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/agent.js b\/packages\/react-devtools-shared\/src\/backend\/agent.js\nindex 4dc727a59e..f5a91e0d7c 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/agent.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/agent.js\n@@ -690,6 +690,14 @@ export default class Agent extends EventEmitter<{|\n this.emit('traceUpdates', nodes);\n };\n \n+ onFastRefreshScheduled = () => {\n+ if (__DEBUG__) {\n+ debug('onFastRefreshScheduled');\n+ }\n+\n+ this._bridge.send('fastRefreshScheduled');\n+ };\n+\n onHookOperations = (operations: Array) => {\n if (__DEBUG__) {\n debug(\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/index.js b\/packages\/react-devtools-shared\/src\/backend\/index.js\nindex ac8eaeb10f..4f6fec290c 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/index.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/index.js\n@@ -48,6 +48,7 @@ export function initBackend(\n agent.onUnsupportedRenderer(id);\n }),\n \n+ hook.sub('fastRefreshScheduled', agent.onFastRefreshScheduled),\n hook.sub('operations', agent.onHookOperations),\n hook.sub('traceUpdates', agent.onTraceUpdates),\n \ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex 611eddc633..23b00097ce 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -568,6 +568,7 @@ export function attach(\n overrideProps,\n overridePropsDeletePath,\n overridePropsRenamePath,\n+ scheduleRefresh,\n setErrorHandler,\n setSuspenseHandler,\n scheduleUpdate,\n@@ -579,6 +580,22 @@ export function attach(\n typeof setSuspenseHandler === 'function' &&\n typeof scheduleUpdate === 'function';\n \n+ if (typeof scheduleRefresh === 'function') {\n+ \/\/ When Fast Refresh updates a component, the frontend may need to purge cached information.\n+ \/\/ For example, ASTs cached for the component (for named hooks) may no longer be valid.\n+ \/\/ Send a signal to the frontend to purge this cached information.\n+ \/\/ The \"fastRefreshScheduled\" dispatched is global (not Fiber or even Renderer specific).\n+ \/\/ This is less effecient since it means the front-end will need to purge the entire cache,\n+ \/\/ but this is probably an okay trade off in order to reduce coupling between the DevTools and Fast Refresh.\n+ renderer.scheduleRefresh = (...args) => {\n+ try {\n+ hook.emit('fastRefreshScheduled');\n+ } finally {\n+ return scheduleRefresh(...args);\n+ }\n+ };\n+ }\n+\n \/\/ Tracks Fibers with recently changed number of error\/warning messages.\n \/\/ These collections store the Fiber rather than the ID,\n \/\/ in order to avoid generating an ID for Fibers that never get mounted\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex d8e0939f11..27bbc8ce25 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -144,6 +144,8 @@ export type ReactRenderer = {\n Mount?: any,\n \/\/ Only injected by React v17.0.3+ in DEV mode\n setErrorHandler?: ?(shouldError: (fiber: Object) => ?boolean) => void,\n+ \/\/ Intentionally opaque type to avoid coupling DevTools to different Fast Refresh versions.\n+ scheduleRefresh?: Function,\n ...\n };\n \ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex 2637b59713..cfcfa79e1f 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -169,6 +169,7 @@ type UpdateConsolePatchSettingsParams = {|\n export type BackendEvents = {|\n bridgeProtocol: [BridgeProtocol],\n extensionBackendInitialized: [],\n+ fastRefreshScheduled: [],\n inspectedElement: [InspectedElementPayload],\n isBackendStorageAPISupported: [boolean],\n isSynchronousXHRSupported: [boolean],\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/HookNamesContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/HookNamesContext.js\nnew file mode 100644\nindex 0000000000..bcd0f94075\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/HookNamesContext.js\n@@ -0,0 +1,20 @@\n+\/\/ @flow\n+\n+import {createContext} from 'react';\n+import type {\n+ LoadHookNamesFunction,\n+ PurgeCachedHookNamesMetadata,\n+} from '..\/DevTools';\n+\n+export type Context = {\n+ loadHookNames: LoadHookNamesFunction | null,\n+ purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,\n+};\n+\n+const HookNamesContext = createContext({\n+ loadHookNames: null,\n+ purgeCachedMetadata: null,\n+});\n+HookNamesContext.displayName = 'HookNamesContext';\n+\n+export default HookNamesContext;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex c7dd028c5c..9dd594c1ef 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -26,10 +26,11 @@ import {\n inspectElement,\n } from 'react-devtools-shared\/src\/inspectedElementCache';\n import {\n+ clearHookNamesCache,\n hasAlreadyLoadedHookNames,\n loadHookNames,\n } from 'react-devtools-shared\/src\/hookNamesCache';\n-import LoadHookNamesFunctionContext from 'react-devtools-shared\/src\/devtools\/views\/Components\/LoadHookNamesFunctionContext';\n+import HookNamesContext from 'react-devtools-shared\/src\/devtools\/views\/Components\/HookNamesContext';\n import {SettingsContext} from '..\/Settings\/SettingsContext';\n \n import type {HookNames} from 'react-devtools-shared\/src\/types';\n@@ -63,7 +64,10 @@ export type Props = {|\n \n export function InspectedElementContextController({children}: Props) {\n const {selectedElementID} = useContext(TreeStateContext);\n- const loadHookNamesFunction = useContext(LoadHookNamesFunctionContext);\n+ const {\n+ loadHookNames: loadHookNamesFunction,\n+ purgeCachedMetadata,\n+ } = useContext(HookNamesContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);\n@@ -150,6 +154,24 @@ export function InspectedElementContextController({children}: Props) {\n [setState, state],\n );\n \n+ useEffect(() => {\n+ if (enableHookNameParsing) {\n+ if (typeof purgeCachedMetadata === 'function') {\n+ \/\/ When Fast Refresh updates a component, any cached AST metadata may be invalid.\n+ const fastRefreshScheduled = () => {\n+ startTransition(() => {\n+ clearHookNamesCache();\n+ purgeCachedMetadata();\n+ refresh();\n+ });\n+ };\n+ bridge.addListener('fastRefreshScheduled', fastRefreshScheduled);\n+ return () =>\n+ bridge.removeListener('fastRefreshScheduled', fastRefreshScheduled);\n+ }\n+ }\n+ }, [bridge]);\n+\n \/\/ Reset path now that we've asked the backend to hydrate it.\n \/\/ The backend is stateful, so we don't need to remember this path the next time we inspect.\n useEffect(() => {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/LoadHookNamesFunctionContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/LoadHookNamesFunctionContext.js\ndeleted file mode 100644\nindex 1874dd7e5a..0000000000\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/LoadHookNamesFunctionContext.js\n+++ \/dev\/null\n@@ -1,11 +0,0 @@\n-\/\/ @flow\n-\n-import {createContext} from 'react';\n-import type {LoadHookNamesFunction} from '..\/DevTools';\n-\n-export type Context = LoadHookNamesFunction | null;\n-\n-const LoadHookNamesFunctionContext = createContext(null);\n-LoadHookNamesFunctionContext.displayName = 'LoadHookNamesFunctionContext';\n-\n-export default LoadHookNamesFunctionContext;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\nindex 534e2cc4e2..812ca916d8 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n@@ -22,7 +22,7 @@ import TabBar from '.\/TabBar';\n import {SettingsContextController} from '.\/Settings\/SettingsContext';\n import {TreeContextController} from '.\/Components\/TreeContext';\n import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n-import LoadHookNamesFunctionContext from '.\/Components\/LoadHookNamesFunctionContext';\n+import HookNamesContext from '.\/Components\/HookNamesContext';\n import {ProfilerContextController} from '.\/Profiler\/ProfilerContext';\n import {ModalDialogContextController} from '.\/ModalDialog';\n import ReactLogo from '.\/ReactLogo';\n@@ -51,6 +51,7 @@ export type ViewElementSource = (\n export type LoadHookNamesFunction = (\n hooksTree: HooksTree,\n ) => Thenable;\n+export type PurgeCachedHookNamesMetadata = () => void;\n export type ViewAttributeSource = (\n id: number,\n path: Array,\n@@ -87,7 +88,8 @@ export type Props = {|\n \/\/ Loads and parses source maps for function components\n \/\/ and extracts hook \"names\" based on the variables the hook return values get assigned to.\n \/\/ Not every DevTools build can load source maps, so this property is optional.\n- loadHookNamesFunction?: ?LoadHookNamesFunction,\n+ loadHookNames?: ?LoadHookNamesFunction,\n+ purgeCachedHookNamesMetadata?: ?PurgeCachedHookNamesMetadata,\n |};\n \n const componentsTab = {\n@@ -112,9 +114,10 @@ export default function DevTools({\n componentsPortalContainer,\n defaultTab = 'components',\n enabledInspectedElementContextMenu = false,\n- loadHookNamesFunction,\n+ loadHookNames,\n overrideTab,\n profilerPortalContainer,\n+ purgeCachedHookNamesMetadata,\n showTabBar = false,\n store,\n warnIfLegacyBackendDetected = false,\n@@ -149,6 +152,14 @@ export default function DevTools({\n [enabledInspectedElementContextMenu, viewAttributeSourceFunction],\n );\n \n+ const hookNamesContext = useMemo(\n+ () => ({\n+ loadHookNames: loadHookNames || null,\n+ purgeCachedMetadata: purgeCachedHookNamesMetadata || null,\n+ }),\n+ [loadHookNames, purgeCachedHookNamesMetadata],\n+ );\n+\n const devToolsRef = useRef(null);\n \n useEffect(() => {\n@@ -204,8 +215,7 @@ export default function DevTools({\n componentsPortalContainer={componentsPortalContainer}\n profilerPortalContainer={profilerPortalContainer}>\n \n- \n+ \n \n \n

\n@@ -240,7 +250,7 @@ export default function DevTools({\n <\/div>\n <\/ProfilerContextController>\n <\/TreeContextController>\n- <\/LoadHookNamesFunctionContext.Provider>\n+ <\/HookNamesContext.Provider>\n <\/ViewElementSourceContext.Provider>\n <\/SettingsContextController>\n \ndiff --git a\/packages\/react-devtools-shared\/src\/hookNamesCache.js b\/packages\/react-devtools-shared\/src\/hookNamesCache.js\nindex 113ad64b86..f673cff59e 100644\n--- a\/packages\/react-devtools-shared\/src\/hookNamesCache.js\n+++ b\/packages\/react-devtools-shared\/src\/hookNamesCache.js\n@@ -58,7 +58,7 @@ function readRecord(record: Record): ResolvedRecord | RejectedRecord {\n \/\/ Otherwise, refreshing the inspected element cache would also clear this cache.\n \/\/ TODO Rethink this if the React API constraints change.\n \/\/ See https:\/\/github.com\/reactwg\/react-18\/discussions\/25#discussioncomment-980435\n-const map: WeakMap> = new WeakMap();\n+let map: WeakMap> = new WeakMap();\n \n export function hasAlreadyLoadedHookNames(element: Element): boolean {\n const record = map.get(element);\n@@ -181,3 +181,7 @@ export function getHookSourceLocationKey({\n }\n return `${fileName}:${lineNumber}:${columnNumber}`;\n }\n+\n+export function clearHookNamesCache(): void {\n+ map = new WeakMap();\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/types.js b\/packages\/react-devtools-shared\/src\/types.js\nindex 92000f5f52..695dc95163 100644\n--- a\/packages\/react-devtools-shared\/src\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/types.js\n@@ -87,5 +87,6 @@ export type HookNames = Map;\n export type LRUCache = {|\n get: (key: K) => V,\n has: (key: K) => boolean,\n+ reset: () => void,\n set: (key: K, value: V) => void,\n |};\n"}

dillon1000/react

Files changed