Add: reload to profile for Fusebox

Author: EdmondChuiHW

packages/react-devtools-core/src/backend.js

@@ -23,6 +23,8 @@ import type {
 import type {
   DevToolsHook,
   DevToolsHookSettings,
+  ReloadAndProfileConfig,
+  ReloadAndProfileConfigSetters,
 } from 'react-devtools-shared/src/backend/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
@@ -37,6 +39,7 @@ type ConnectOptions = {
   websocket?: ?WebSocket,
   onSettingsUpdated?: (settings: $ReadOnly<DevToolsHookSettings>) => void,
   getIsReloadAndProfileSupported?: () => boolean,
+  reloadAndProfileConfigSetters?: ReloadAndProfileConfigSetters,
 };
 
 let savedComponentFilters: Array<ComponentFilter> =
@@ -57,6 +60,7 @@ export function initialize(
   maybeSettingsOrSettingsPromise?:
     | DevToolsHookSettings
     | Promise<DevToolsHookSettings>,
+  reloadAndProfileConfig: ReloadAndProfileConfig,
 ) {
   installHook(window, maybeSettingsOrSettingsPromise);
 }
@@ -79,6 +83,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
     isAppActive = () => true,
     onSettingsUpdated,
     getIsReloadAndProfileSupported,
+    reloadAndProfileConfigSetters,
   } = options || {};
 
   const protocol = useHttps ? 'wss' : 'ws';
@@ -172,7 +177,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
 
     // TODO (npm-packages) Warn if "isBackendStorageAPISupported"
     // $FlowFixMe[incompatible-call] found when upgrading Flow
-    const agent = new Agent(bridge);
+    const agent = new Agent(bridge, reloadAndProfileConfigSetters);
     if (onSettingsUpdated != null) {
       agent.addListener('updateHookSettings', onSettingsUpdated);
     }
@@ -312,6 +317,7 @@ type ConnectWithCustomMessagingOptions = {
   resolveRNStyle?: ResolveNativeStyle,
   onSettingsUpdated?: (settings: $ReadOnly<DevToolsHookSettings>) => void,
   getIsReloadAndProfileSupported?: () => boolean,
+  reloadAndProfileConfigSetters?: ReloadAndProfileConfigSetters,
 };
 
 export function connectWithCustomMessagingProtocol({
@@ -322,6 +328,7 @@ export function connectWithCustomMessagingProtocol({
   resolveRNStyle,
   onSettingsUpdated,
   getIsReloadAndProfileSupported,
+  reloadAndProfileConfigSetters,
 }: ConnectWithCustomMessagingOptions): Function {
   const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (hook == null) {
@@ -358,7 +365,7 @@ export function connectWithCustomMessagingProtocol({
     bridge.send('overrideComponentFilters', savedComponentFilters);
   }
 
-  const agent = new Agent(bridge);
+  const agent = new Agent(bridge, reloadAndProfileConfigSetters);
   if (onSettingsUpdated != null) {
     agent.addListener('updateHookSettings', onSettingsUpdated);
   }

packages/react-devtools-fusebox/src/frontend.d.ts

@@ -19,9 +19,12 @@ export type Bridge = {
 };
 export type Store = Object;
 export type BrowserTheme = 'dark' | 'light';
+export type Config = {
+  supportsReloadAndProfile?: boolean,
+};
 
 export function createBridge(wall: Wall): Bridge;
-export function createStore(bridge: Bridge): Store;
+export function createStore(bridge: Bridge, config?: Config): Store;
 
 export type Source = {
   sourceURL: string,

packages/react-devtools-inline/src/backend.js

@@ -62,10 +62,9 @@ function startActivation(contentWindow: any, bridge: BackendBridge) {
 }
 
 function finishActivation(contentWindow: any, bridge: BackendBridge) {
-  const agent = new Agent(bridge);
-
   const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (hook) {
+    const agent = new Agent(bridge, hook.getReloadAndProfileConfigSetters);
     initBackend(hook, agent, contentWindow);
 
     // Setup React Native style editor if a renderer like react-native-web has injected it.

packages/react-devtools-shared/src/attachRenderer.js

@@ -18,6 +18,7 @@ import {attach as attachFlight} from 'react-devtools-shared/src/backend/flight/r
 import {attach as attachFiber} from 'react-devtools-shared/src/backend/fiber/renderer';
 import {attach as attachLegacy} from 'react-devtools-shared/src/backend/legacy/renderer';
 import {hasAssignedBackend} from 'react-devtools-shared/src/backend/utils';
+import type {ReloadAndProfileConfig} from './backend/types';
 
 // this is the backend that is compatible with all older React versions
 function isMatchingRender(version: string): boolean {
@@ -29,6 +30,7 @@ export default function attachRenderer(
   id: RendererID,
   renderer: ReactRenderer,
   global: Object,
+  reloadAndProfileConfig?: ReloadAndProfileConfig,
 ): RendererInterface | void {
   // only attach if the renderer is compatible with the current version of the backend
   if (!isMatchingRender(renderer.reconcilerVersion || renderer.version)) {
@@ -48,7 +50,13 @@ export default function attachRenderer(
       renderer.currentDispatcherRef != null
     ) {
       // react-reconciler v16+
-      rendererInterface = attachFiber(hook, id, renderer, global);
+      rendererInterface = attachFiber(
+        hook,
+        id,
+        renderer,
+        global,
+        reloadAndProfileConfig,
+      );
     } else if (renderer.ComponentTree) {
       // react-dom v15
       rendererInterface = attachLegacy(hook, id, renderer, global);

packages/react-devtools-shared/src/backend/agent.js

@@ -10,8 +10,8 @@
 import EventEmitter from '../events';
 import {
   SESSION_STORAGE_LAST_SELECTION_KEY,
-  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   __DEBUG__,
 } from '../constants';
 import {
@@ -36,6 +36,8 @@ import type {
   RendererID,
   RendererInterface,
   DevToolsHookSettings,
+  ReloadAndProfileConfigSetters,
+  ReloadAndProfileConfig,
 } from './types';
 import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types';
 import {isReactNativeEnvironment} from './utils';
@@ -159,21 +161,27 @@ export default class Agent extends EventEmitter<{
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
   _traceUpdatesEnabled: boolean = false;
+  _reloadAndProfileConfigSetters: ReloadAndProfileConfigSetters;
 
-  constructor(bridge: BackendBridge) {
+  constructor(
+    bridge: BackendBridge,
+    reloadAndProfileConfigSetters?: ReloadAndProfileConfigSetters = defaultReloadAndProfileConfigSetters,
+  ) {
     super();
 
-    if (
-      sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
-    ) {
+    this._reloadAndProfileConfigSetters = reloadAndProfileConfigSetters;
+    const {getReloadAndProfileConfig, setReloadAndProfileConfig} =
+      reloadAndProfileConfigSetters;
+    const reloadAndProfileConfig = getReloadAndProfileConfig();
+    if (reloadAndProfileConfig.shouldReloadAndProfile) {
       this._recordChangeDescriptions =
-        sessionStorageGetItem(
-          SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
-        ) === 'true';
+        reloadAndProfileConfig.recordChangeDescriptions;
       this._isProfiling = true;
 
-      sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);
-      sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);
+      setReloadAndProfileConfig({
+        shouldReloadAndProfile: false,
+        recordChangeDescriptions: false,
+      });
     }
 
     const persistedSelectionString = sessionStorageGetItem(
@@ -671,11 +679,10 @@ export default class Agent extends EventEmitter<{
 
   reloadAndProfile: (recordChangeDescriptions: boolean) => void =
     recordChangeDescriptions => {
-      sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
-      sessionStorageSetItem(
-        SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
-        recordChangeDescriptions ? 'true' : 'false',
-      );
+      this._reloadAndProfileConfigSetters.setReloadAndProfileConfig({
+        shouldReloadAndProfile: true,
+        recordChangeDescriptions,
+      });
 
       // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
       // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
@@ -956,3 +963,34 @@ export default class Agent extends EventEmitter<{
     }
   };
 }
+
+const defaultReloadAndProfileConfigSetters: ReloadAndProfileConfigSetters = {
+  setReloadAndProfileConfig({
+    shouldReloadAndProfile,
+    recordChangeDescriptions,
+  }): void {
+    if (shouldReloadAndProfile != null) {
+      sessionStorageSetItem(
+        SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+        shouldReloadAndProfile ? 'true' : 'false',
+      );
+    }
+    if (recordChangeDescriptions != null) {
+      sessionStorageSetItem(
+        SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+        recordChangeDescriptions ? 'true' : 'false',
+      );
+    }
+  },
+  getReloadAndProfileConfig(): ReloadAndProfileConfig {
+    return {
+      shouldReloadAndProfile:
+        sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) ===
+        'true',
+      recordChangeDescriptions:
+        sessionStorageGetItem(
+          SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+        ) === 'true',
+    };
+  },
+};

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -42,7 +42,6 @@ import {
   utfEncodeString,
   filterOutLocationComponentFilters,
 } from 'react-devtools-shared/src/utils';
-import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 import {
   formatConsoleArgumentsToSingleString,
   gt,
@@ -61,8 +60,6 @@ import {
   __DEBUG__,
   PROFILING_FLAG_BASIC_SUPPORT,
   PROFILING_FLAG_TIMELINE_SUPPORT,
-  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
-  SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
@@ -106,6 +103,7 @@ import {
   supportsOwnerStacks,
   supportsConsoleTasks,
 } from './DevToolsFiberComponentStack';
+import type {ReloadAndProfileConfig} from '../types';
 
 // $FlowFixMe[method-unbinding]
 const toString = Object.prototype.toString;
@@ -851,6 +849,7 @@ export function attach(
   rendererID: number,
   renderer: ReactRenderer,
   global: Object,
+  reloadAndProfileConfig?: ReloadAndProfileConfig,
 ): RendererInterface {
   // Newer versions of the reconciler package also specific reconciler version.
   // If that version number is present, use it.
@@ -5192,13 +5191,10 @@ export function attach(
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
-  if (
-    sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
-  ) {
-    startProfiling(
-      sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
-        'true',
-    );
+  if (reloadAndProfileConfig?.shouldReloadAndProfile) {
+    const shouldRecordChangeDescriptions =
+      reloadAndProfileConfig.recordChangeDescriptions;
+    startProfiling(shouldRecordChangeDescriptions);
   }
 
   function getNearestFiber(devtoolsInstance: DevToolsInstance): null | Fiber {

packages/react-devtools-shared/src/backend/types.js

@@ -485,6 +485,17 @@ export type DevToolsBackend = {
   setupNativeStyleEditor?: SetupNativeStyleEditor,
 };
 
+export type ReloadAndProfileConfig = {
+  shouldReloadAndProfile: boolean,
+  recordChangeDescriptions: boolean,
+};
+
+export type ReloadAndProfileConfigSetters = {
+  // eslint-disable-next-line no-undef
+  setReloadAndProfileConfig: (config: Partial<ReloadAndProfileConfig>) => void,
+  getReloadAndProfileConfig: () => ReloadAndProfileConfig,
+};
+
 export type DevToolsHook = {
   listeners: {[key: string]: Array<Handler>, ...},
   rendererInterfaces: Map<RendererID, RendererInterface>,

packages/react-devtools-shared/src/hook.js

@@ -16,6 +16,7 @@ import type {
   RendererInterface,
   DevToolsBackend,
   DevToolsHookSettings,
+  ReloadAndProfileConfig,
 } from './backend/types';
 
 import {
@@ -54,6 +55,7 @@ export function installHook(
   maybeSettingsOrSettingsPromise?:
     | DevToolsHookSettings
     | Promise<DevToolsHookSettings>,
+  reloadAndProfileConfig?: ReloadAndProfileConfig,
 ): DevToolsHook | null {
   if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
     return null;
@@ -207,7 +209,13 @@ export function installHook(
       reactBuildType,
     });
 
-    const rendererInterface = attachRenderer(hook, id, renderer, target);
+    const rendererInterface = attachRenderer(
+      hook,
+      id,
+      renderer,
+      target,
+      reloadAndProfileConfig,
+    );
     if (rendererInterface != null) {
       hook.rendererInterfaces.set(id, rendererInterface);
       hook.emit('renderer-attached', {id, rendererInterface});

packages/shared/ReactVersion.js

@@ -1,15 +1 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// TODO: this is special because it gets imported during build.
-//
-// It exists as a placeholder so that DevTools can support work tag changes between releases.
-// When we next publish a release, update the matching TODO in backend/renderer.js
-// TODO: This module is used both by the release scripts and to expose a version
-// at runtime. We should instead inject the version number as part of the build
-// process, and use the ReactVersions.js module as the single source of truth.
-export default '19.0.0';
+export default '19.0.0-rc-bd788b41-20240906';