{"files":[{"status":"M","path":"packages\/react-devtools-extensions\/src\/main\/index.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/Logger.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/agent.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/bridge.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/store.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Icon.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js"}],"patch":"diff --git a\/packages\/react-devtools-extensions\/src\/main\/index.js b\/packages\/react-devtools-extensions\/src\/main\/index.js\nindex f21bdc7a9a..362793e3eb 100644\n--- a\/packages\/react-devtools-extensions\/src\/main\/index.js\n+++ b\/packages\/react-devtools-extensions\/src\/main\/index.js\n@@ -151,6 +151,10 @@ function createBridgeAndStore() {\n supportsClickToInspect: true,\n });\n \n+ store.addListener('enableSuspenseTab', () => {\n+ createSuspensePanel();\n+ });\n+\n store.addListener('settingsUpdated', settings => {\n chrome.storage.local.set(settings);\n });\n@@ -209,6 +213,7 @@ function createBridgeAndStore() {\n overrideTab,\n showTabBar: false,\n store,\n+ suspensePortalContainer,\n warnIfUnsupportedVersionDetected: true,\n viewAttributeSourceFunction,\n \/\/ Firefox doesn't support chrome.devtools.panels.openResource yet\n@@ -354,6 +359,42 @@ function createSourcesEditorPanel() {\n });\n }\n \n+function createSuspensePanel() {\n+ if (suspensePortalContainer) {\n+ \/\/ Panel is created and user opened it at least once\n+ ensureInitialHTMLIsCleared(suspensePortalContainer);\n+ render('suspense');\n+\n+ return;\n+ }\n+\n+ if (suspensePanel) {\n+ \/\/ Panel is created, but wasn't opened yet, so no document is present for it\n+ return;\n+ }\n+\n+ chrome.devtools.panels.create(\n+ __IS_CHROME__ || __IS_EDGE__ ? 'Suspense ⚛' : 'Suspense',\n+ __IS_EDGE__ ? 'icons\/production.svg' : '',\n+ 'panel.html',\n+ createdPanel => {\n+ suspensePanel = createdPanel;\n+\n+ createdPanel.onShown.addListener(portal => {\n+ suspensePortalContainer = portal.container;\n+ if (suspensePortalContainer != null && render) {\n+ ensureInitialHTMLIsCleared(suspensePortalContainer);\n+\n+ render('suspense');\n+ portal.injectStyles(cloneStyleTags);\n+\n+ logEvent({event_name: 'selected-suspense-tab'});\n+ }\n+ });\n+ },\n+ );\n+}\n+\n function performInTabNavigationCleanup() {\n \/\/ Potentially, if react hasn't loaded yet and user performs in-tab navigation\n clearReactPollingInstance();\n@@ -365,7 +406,12 @@ function performInTabNavigationCleanup() {\n \n \/\/ If panels were already created, and we have already mounted React root to display\n \/\/ tabs (Components or Profiler), we should unmount root first and render them again\n- if ((componentsPortalContainer || profilerPortalContainer) && root) {\n+ if (\n+ (componentsPortalContainer ||\n+ profilerPortalContainer ||\n+ suspensePortalContainer) &&\n+ root\n+ ) {\n \/\/ It's easiest to recreate the DevTools panel (to clean up potential stale state).\n \/\/ We can revisit this in the future as a small optimization.\n \/\/ This should also emit bridge.shutdown, but only if this root was mounted\n@@ -395,7 +441,12 @@ function performFullCleanup() {\n \/\/ Potentially, if react hasn't loaded yet and user closed the browser DevTools\n clearReactPollingInstance();\n \n- if ((componentsPortalContainer || profilerPortalContainer) && root) {\n+ if (\n+ (componentsPortalContainer ||\n+ profilerPortalContainer ||\n+ suspensePortalContainer) &&\n+ root\n+ ) {\n \/\/ This should also emit bridge.shutdown, but only if this root was mounted\n flushSync(() => root.unmount());\n } else {\n@@ -404,6 +455,7 @@ function performFullCleanup() {\n \n componentsPortalContainer = null;\n profilerPortalContainer = null;\n+ suspensePortalContainer = null;\n root = null;\n \n mostRecentOverrideTab = null;\n@@ -454,6 +506,8 @@ function mountReactDevTools() {\n createComponentsPanel();\n createProfilerPanel();\n createSourcesEditorPanel();\n+ \/\/ Suspense Tab is created via the hook\n+ \/\/ TODO(enableSuspenseTab): Create eagerly once Suspense tab is stable\n }\n \n let reactPollingInstance = null;\n@@ -474,6 +528,12 @@ function showNoReactDisclaimer() {\n '

Looks like this page doesn\\'t have React, or it hasn\\'t been loaded yet.<\/h1>';\n delete profilerPortalContainer._hasInitialHTMLBeenCleared;\n }\n+\n+ if (suspensePortalContainer) {\n+ suspensePortalContainer.innerHTML =\n+ '

Looks like this page doesn\\'t have React, or it hasn\\'t been loaded yet.<\/h1>';\n+ delete suspensePortalContainer._hasInitialHTMLBeenCleared;\n+ }\n }\n \n function mountReactDevToolsWhenReactHasLoaded() {\n@@ -492,9 +552,11 @@ let profilingData = null;\n \n let componentsPanel = null;\n let profilerPanel = null;\n+let suspensePanel = null;\n let editorPane = null;\n let componentsPortalContainer = null;\n let profilerPortalContainer = null;\n+let suspensePortalContainer = null;\n let editorPortalContainer = null;\n \n let mostRecentOverrideTab = null;\ndiff --git a\/packages\/react-devtools-shared\/src\/Logger.js b\/packages\/react-devtools-shared\/src\/Logger.js\nindex d37a33cf1c..dd9dfb6202 100644\n--- a\/packages\/react-devtools-shared\/src\/Logger.js\n+++ b\/packages\/react-devtools-shared\/src\/Logger.js\n@@ -25,6 +25,9 @@ export type LoggerEvent =\n | {\n +event_name: 'selected-profiler-tab',\n }\n+ | {\n+ +event_name: 'selected-suspense-tab',\n+ }\n | {\n +event_name: 'load-hook-names',\n +event_status: 'success' | 'error' | 'timeout' | 'unknown',\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/agent.js b\/packages\/react-devtools-shared\/src\/backend\/agent.js\nindex e883724f49..1ae7f5dfb1 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/agent.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/agent.js\n@@ -710,6 +710,16 @@ export default class Agent extends EventEmitter<{\n \n rendererInterface.setTraceUpdatesEnabled(this._traceUpdatesEnabled);\n \n+ const renderer = rendererInterface.renderer;\n+ if (renderer !== null) {\n+ const devRenderer = renderer.bundleType === 1;\n+ const enableSuspenseTab =\n+ devRenderer && renderer.version.includes('-experimental-');\n+ if (enableSuspenseTab) {\n+ this._bridge.send('enableSuspenseTab');\n+ }\n+ }\n+\n \/\/ When the renderer is attached, we need to tell it whether\n \/\/ we remember the previous selection that we'd like to restore.\n \/\/ It'll start tracking mounts for matches to the last selection path.\ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex 3a12ae7415..f0638ae896 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -178,6 +178,7 @@ export type BackendEvents = {\n backendInitialized: [],\n backendVersion: [string],\n bridgeProtocol: [BridgeProtocol],\n+ enableSuspenseTab: [],\n extensionBackendInitialized: [],\n fastRefreshScheduled: [],\n getSavedPreferences: [],\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 97c3adc88f..3035c0ae4a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -95,6 +95,7 @@ export default class Store extends EventEmitter<{\n backendVersion: [],\n collapseNodesByDefault: [],\n componentFilters: [],\n+ enableSuspenseTab: [],\n error: [Error],\n hookSettings: [$ReadOnly],\n hostInstanceSelected: [Element['id']],\n@@ -172,6 +173,8 @@ export default class Store extends EventEmitter<{\n _supportsClickToInspect: boolean = false;\n _supportsTimeline: boolean = false;\n _supportsTraceUpdates: boolean = false;\n+ \/\/ Dynamically set if the renderer supports the Suspense tab.\n+ _supportsSuspenseTab: boolean = false;\n \n _isReloadAndProfileFrontendSupported: boolean = false;\n _isReloadAndProfileBackendSupported: boolean = false;\n@@ -275,6 +278,7 @@ export default class Store extends EventEmitter<{\n bridge.addListener('hookSettings', this.onHookSettings);\n bridge.addListener('backendInitialized', this.onBackendInitialized);\n bridge.addListener('selectElement', this.onHostInstanceSelected);\n+ bridge.addListener('enableSuspenseTab', this.onEnableSuspenseTab);\n }\n \n \/\/ This is only used in tests to avoid memory leaks.\n@@ -1624,6 +1628,15 @@ export default class Store extends EventEmitter<{\n }\n }\n \n+ get supportsSuspenseTab(): boolean {\n+ return this._supportsSuspenseTab;\n+ }\n+\n+ onEnableSuspenseTab = (): void => {\n+ this._supportsSuspenseTab = true;\n+ this.emit('enableSuspenseTab');\n+ };\n+\n \/\/ The Store should never throw an Error without also emitting an event.\n \/\/ Otherwise Store errors will be invisible to users,\n \/\/ but the downstream errors they cause will be reported as bugs.\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\nindex 0fe6293b9f..fa02555e4c 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n@@ -23,6 +23,7 @@ import {\n } from '.\/context';\n import Components from '.\/Components\/Components';\n import Profiler from '.\/Profiler\/Profiler';\n+import SuspenseTab from '.\/SuspenseTab\/SuspenseTab';\n import TabBar from '.\/TabBar';\n import EditorPane from '.\/Editor\/EditorPane';\n import {SettingsContextController} from '.\/Settings\/SettingsContext';\n@@ -54,7 +55,7 @@ import type {BrowserTheme} from 'react-devtools-shared\/src\/frontend\/types';\n import type {ReactFunctionLocation, ReactCallSite} from 'shared\/ReactTypes';\n import type {SourceSelection} from '.\/Editor\/EditorPane';\n \n-export type TabID = 'components' | 'profiler';\n+export type TabID = 'components' | 'profiler' | 'suspense';\n \n export type ViewElementSource = (\n source: ReactFunctionLocation | ReactCallSite,\n@@ -99,7 +100,9 @@ export type Props = {\n \/\/ but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.\n componentsPortalContainer?: Element,\n profilerPortalContainer?: Element,\n+ suspensePortalContainer?: Element,\n editorPortalContainer?: Element,\n+\n currentSelectedSource?: null | SourceSelection,\n \n \/\/ Loads and parses source maps for function components\n@@ -122,16 +125,37 @@ const profilerTab = {\n label: 'Profiler',\n title: 'React Profiler',\n };\n+const suspenseTab = {\n+ id: ('suspense': TabID),\n+ icon: 'suspense',\n+ label: 'Suspense',\n+ title: 'React Suspense',\n+};\n \n-const tabs = [componentsTab, profilerTab];\n+const defaultTabs = [componentsTab, profilerTab];\n+const tabsWithSuspense = [componentsTab, profilerTab, suspenseTab];\n+\n+function useIsSuspenseTabEnabled(store: Store): boolean {\n+ const subscribe = useCallback(\n+ (onStoreChange: () => void) => {\n+ store.addListener('enableSuspenseTab', onStoreChange);\n+ return () => {\n+ store.removeListener('enableSuspenseTab', onStoreChange);\n+ };\n+ },\n+ [store],\n+ );\n+ return React.useSyncExternalStore(subscribe, () => store.supportsSuspenseTab);\n+}\n \n export default function DevTools({\n bridge,\n browserTheme = 'light',\n canViewElementSourceFunction,\n componentsPortalContainer,\n- profilerPortalContainer,\n editorPortalContainer,\n+ profilerPortalContainer,\n+ suspensePortalContainer,\n currentSelectedSource,\n defaultTab = 'components',\n enabledInspectedElementContextMenu = false,\n@@ -155,6 +179,8 @@ export default function DevTools({\n LOCAL_STORAGE_DEFAULT_TAB_KEY,\n defaultTab,\n );\n+ const enableSuspenseTab = useIsSuspenseTabEnabled(store);\n+ const tabs = enableSuspenseTab ? tabsWithSuspense : defaultTabs;\n \n let tab = currentTab;\n \n@@ -171,6 +197,8 @@ export default function DevTools({\n if (showTabBar === true) {\n if (tabId === 'components') {\n logEvent({event_name: 'selected-components-tab'});\n+ } else if (tabId === 'suspense') {\n+ logEvent({event_name: 'selected-suspense-tab'});\n } else {\n logEvent({event_name: 'selected-profiler-tab'});\n }\n@@ -241,6 +269,13 @@ export default function DevTools({\n event.preventDefault();\n event.stopPropagation();\n break;\n+ case '3':\n+ if (tabs.length > 2) {\n+ selectTab(tabs[2].id);\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+ break;\n }\n }\n };\n@@ -321,6 +356,13 @@ export default function DevTools({\n portalContainer={profilerPortalContainer}\n \/>\n <\/div>\n+

dillon1000/react

Files changed