refactor[react-devtools]: propagate settings from global hook object …

…to frontend
facebook · Aug 6, 2024 · 4a4600e · 4a4600e
1 parent 0c7752c
commit 4a4600e
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 25 deletions.
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
@@ -151,6 +151,7 @@ export default class Agent extends EventEmitter<{
   drawTraceUpdates: [Array<HostInstance>],
   disableTraceUpdates: [],
   updateHookSettings: [DevToolsHookSettings],
+  fetchHookSettings: [],
 }> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
@@ -214,10 +215,13 @@ export default class Agent extends EventEmitter<{
       this.syncSelectionFromBuiltinElementsPanel,
     );
     bridge.addListener('shutdown', this.shutdown);
+
     bridge.addListener(
       'updateConsolePatchSettings',
       this.updateConsolePatchSettings,
     );
+    bridge.addListener('fetchHookSettings', this.fetchHookSettings);
+
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
     bridge.addListener('viewAttributeSource', this.viewAttributeSource);
     bridge.addListener('viewElementSource', this.viewElementSource);
@@ -772,6 +776,15 @@ export default class Agent extends EventEmitter<{
     });
   };
 
+  fetchHookSettings: () => void = () => {
+    this.emit('fetchHookSettings');
+  };
+
+  onHookSettings: (settings: $ReadOnly<ConsolePatchSettings>) => void =
+    settings => {
+      this._bridge.send('hookSettings', settings);
+    };
+
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void =
     componentFilters => {
       for (const rendererID in this._rendererInterfaces) {

diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js
@@ -133,6 +133,9 @@ export function initBackend(
   agent.addListener('updateHookSettings', settings => {
     hook.settings = settings;
   });
+  agent.addListener('fetchHookSettings', () => {
+    agent.onHookSettings(hook.settings);
+  });
 
   return () => {
     subs.forEach(fn => fn());

diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
@@ -16,6 +16,7 @@ import type {
   ProfilingDataBackend,
   RendererID,
   ConsolePatchSettings,
+  DevToolsHookSettings,
 } from 'react-devtools-shared/src/backend/types';
 import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
 
@@ -207,6 +208,8 @@ export type BackendEvents = {
     {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>},
   ],
   NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
+
+  hookSettings: [$ReadOnly<DevToolsHookSettings>],
 };
 
 type FrontendEvents = {
@@ -265,6 +268,8 @@ type FrontendEvents = {
 
   resumeElementPolling: [],
   pauseElementPolling: [],
+
+  fetchHookSettings: [],
 };
 
 class Bridge<

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -20,17 +20,13 @@ import {
 import {
   LOCAL_STORAGE_BROWSER_THEME,
   LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
-  LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-  LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
-  LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
-  LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from 'react-devtools-shared/src/constants';
 import {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
 } from 'react-devtools-shared/src/devtools/constants';
-import {useLocalStorage} from '../hooks';
+import {useDevToolsHookSettings, useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
@@ -118,36 +114,27 @@ function SettingsContextController({
     LOCAL_STORAGE_BROWSER_THEME,
     'auto',
   );
-  const [appendComponentStack, setAppendComponentStack] =
-    useLocalStorageWithLog<boolean>(
-      LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
-      true,
-    );
-  const [breakOnConsoleErrors, setBreakOnConsoleErrors] =
-    useLocalStorageWithLog<boolean>(
-      LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-      false,
-    );
   const [parseHookNames, setParseHookNames] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
     false,
   );
-  const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
-    useLocalStorageWithLog<boolean>(
-      LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
-      false,
-    );
-  const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
-    useLocalStorageWithLog<boolean>(
-      LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
-      true,
-    );
   const [traceUpdatesEnabled, setTraceUpdatesEnabled] =
     useLocalStorageWithLog<boolean>(
       LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
       false,
     );
 
+  const {
+    appendComponentStack,
+    setAppendComponentStack,
+    breakOnConsoleErrors,
+    setBreakOnConsoleErrors,
+    hideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
+    showInlineWarningsAndErrors,
+    setShowInlineWarningsAndErrors,
+  } = useDevToolsHookSettings(bridge);
+
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
       ((document.documentElement: any): HTMLElement),

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -22,6 +22,8 @@ import {
 } from 'react-devtools-shared/src/storage';
 import {StoreContext, BridgeContext} from './context';
 import {sanitizeForParse, smartParse, smartStringify} from '../utils';
+import type {FrontendBridge} from '../../bridge';
+import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
 
 type ACTION_RESET = {
   type: 'RESET',
@@ -209,6 +211,57 @@ export function useLocalStorage<T>(
   return [storedValue, setValue];
 }
 
+type DevToolsHookSettingsGettersAndSetters = {
+  appendComponentStack: boolean,
+  setAppendComponentStack: boolean => void,
+  breakOnConsoleErrors: boolean,
+  setBreakOnConsoleErrors: boolean => void,
+  hideConsoleLogsInStrictMode: boolean,
+  setHideConsoleLogsInStrictMode: boolean => void,
+  showInlineWarningsAndErrors: boolean,
+  setShowInlineWarningsAndErrors: boolean => void,
+};
+
+export function useDevToolsHookSettings(
+  bridge: FrontendBridge,
+): DevToolsHookSettingsGettersAndSetters {
+  const [appendComponentStack, setAppendComponentStack] = useState(true);
+  const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(false);
+  const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
+    useState(false);
+  const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
+    useState(false);
+
+  const onHookSettings = useCallback(
+    (settings: $ReadOnly<DevToolsHookSettings>) => {
+      setAppendComponentStack(settings.appendComponentStack);
+      setBreakOnConsoleErrors(settings.breakOnConsoleErrors);
+      setHideConsoleLogsInStrictMode(settings.hideConsoleLogsInStrictMode);
+      setShowInlineWarningsAndErrors(settings.showInlineWarningsAndErrors);
+    },
+    [],
+  );
+  useEffect(() => {
+    bridge.addListener('hookSettings', onHookSettings);
+    bridge.send('fetchHookSettings');
+
+    return () => {
+      bridge.removeListener('hookSettings', onHookSettings);
+    };
+  }, [bridge]);
+
+  return {
+    appendComponentStack,
+    setAppendComponentStack,
+    breakOnConsoleErrors,
+    setBreakOnConsoleErrors,
+    hideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
+    showInlineWarningsAndErrors,
+    setShowInlineWarningsAndErrors,
+  };
+}
+
 export function useModalDismissSignal(
   modalRef: {current: HTMLDivElement | null, ...},
   dismissCallback: () => void,