docs: add reload-and-profile to shell

Author: Jack-Works

packages/react-devtools-shell/src/app/devtools.js

@@ -5,8 +5,9 @@ import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
+  attach,
 } from 'react-devtools-inline/backend';
-import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
+import {initialize as initializeFrontend,createBridge,createStore} from 'react-devtools-inline/frontend';
 import {initDevTools} from 'react-devtools-shared/src/devtools';
 
 // This is a pretty gross hack to make the runtime loaded named-hooks-code work.
@@ -16,20 +17,7 @@ __webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
-const {contentDocument, contentWindow} = iframe;
-
-// Helps with positioning Overlay UI.
-contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
-
-initializeBackend(contentWindow);
-
-// Initialize the front end and activate the backend early so that we are able
-// to pass console settings in local storage to the backend before initial render
-const DevTools = initializeFrontend(contentWindow);
-
-// Activate the backend only once the DevTools frontend Store has been initialized.
-// Otherwise the Store may miss important initial tree op codes.
-activateBackend(contentWindow);
+let {contentDocument, contentWindow} = iframe;
 
 const container = ((document.getElementById('devtools'): any): HTMLElement);
 
@@ -59,27 +47,83 @@ function hookNamesModuleLoaderFunction() {
   return import('react-devtools-inline/hookNames');
 }
 
-inject('dist/app-index.js', () => {
-  initDevTools({
-    connect(cb) {
-      const root = createRoot(container);
-      root.render(
-        createElement(DevTools, {
-          browserTheme: 'light',
-          enabledInspectedElementContextMenu: true,
-          hookNamesModuleLoaderFunction,
-          showTabBar: true,
-          warnIfLegacyBackendDetected: true,
-          warnIfUnsupportedVersionDetected: true,
-        }),
-      );
-    },
-
-    onReload(reloadFn) {
-      iframe.onload = reloadFn;
-    },
+let store
+let profilingData
+let controller = new AbortController();
+const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY = 'React::DevTools::supportsProfiling'
+function render(signal: AbortSignal) {
+  ({contentDocument, contentWindow} = iframe);
+
+  const bridge = createBridge(contentWindow)
+  bridge.addListener('reloadAppForProfiling', () => {
+      localStorage.setItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true')
+      contentWindow.sessionStorage.setItem('React::DevTools::reloadAndProfile', 'true')
+      contentWindow.sessionStorage.setItem('React::DevTools::recordChangeDescriptions', 'true')
+      contentWindow.location.reload();
+      iframe.addEventListener('load', () => {
+        contentWindow.__REACT_DEVTOOLS_ATTACH__ = attach;
+        controller.abort();
+        controller = new AbortController();
+        render(controller.signal);
+      }, {once: true});
+  })
+  let isProfiling = false
+  // reload and profile
+  {
+      if (localStorage.getItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === "true") {
+          isProfiling = true
+          if (store) profilingData = store.profilerStore.profilingData
+          localStorage.removeItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY)
+      }
+  }
+  store = createStore(bridge, {
+      isProfiling,
+      supportsReloadAndProfile: true,
+      supportsProfiling: true,
+      supportsTimeline: true,
+      supportsTraceUpdates: true,
+      supportsNativeInspection: true,
+  })
+  if (!isProfiling && profilingData) store.profilerStore.profilingData = profilingData
+
+  // Helps with positioning Overlay UI.
+  contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
+
+  initializeBackend(contentWindow);
+
+  // Initialize the front end and activate the backend early so that we are able
+  // to pass console settings in local storage to the backend before initial render
+  const DevTools = initializeFrontend(contentWindow, {bridge, store});
+
+  // Activate the backend only once the DevTools frontend Store has been initialized.
+  // Otherwise the Store may miss important initial tree op codes.
+  activateBackend(contentWindow);
+
+  inject('dist/app-index.js', () => {
+    initDevTools({
+      connect(cb) {
+        const root = createRoot(container);
+        root.render(
+          createElement(DevTools, {
+            browserTheme: 'light',
+            enabledInspectedElementContextMenu: true,
+            hookNamesModuleLoaderFunction,
+            showTabBar: true,
+            warnIfLegacyBackendDetected: true,
+            warnIfUnsupportedVersionDetected: true,
+          }),
+        );
+        signal.addEventListener('abort', () => root.unmount(), {once: true})
+      },
+
+      onReload(reloadFn) {
+        iframe.onload = reloadFn;
+      },
+    });
   });
-});
+
+}
+render(controller.signal);
 
 function inject(sourcePath: string, callback: () => void) {
   const script = contentDocument.createElement('script');