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

Author: hoxyq

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

@@ -66,7 +66,7 @@ function parseConsolePatchSettings(
 
 export function cacheConsolePatchSettings(
   devToolsSettingsManager: DevToolsSettingsManager,
-  value: ConsolePatchSettings,
+  value: $ReadOnly<ConsolePatchSettings>,
 ): void {
   if (devToolsSettingsManager.setConsolePatchSettings == null) {
     return;

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

@@ -150,6 +150,7 @@ export default class Agent extends EventEmitter<{
   disableTraceUpdates: [],
   getIfHasUnsupportedRendererVersion: [],
   updateHookSettings: [DevToolsHookSettings],
+  fetchHookSettings: [],
 }> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
@@ -213,10 +214,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('getEnvironmentNames', this.getEnvironmentNames);
     bridge.addListener(
@@ -814,6 +818,15 @@ export default class Agent extends EventEmitter<{
     });
   };
 
+  fetchHookSettings: () => void = () => {
+    this.emit('fetchHookSettings');
+  };
+
+  onHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
+    settings => {
+      this._bridge.send('hookSettings', settings);
+    };
+
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void =
     componentFilters => {
       for (const rendererIDString in this._rendererInterfaces) {

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

@@ -54,6 +54,7 @@ export function initBackend(
     hook.sub('fastRefreshScheduled', agent.onFastRefreshScheduled),
     hook.sub('operations', agent.onHookOperations),
     hook.sub('traceUpdates', agent.onTraceUpdates),
+    hook.sub('settingsInjected', agent.onHookSettings),
 
     // TODO Add additional subscriptions required for profiling mode
   ];
@@ -87,6 +88,12 @@ export function initBackend(
     hook.settings = settings;
   });
 
+  agent.addListener('fetchHookSettings', () => {
+    if (hook.settings != null) {
+      agent.onHookSettings(hook.settings);
+    }
+  });
+
   return () => {
     subs.forEach(fn => fn());
   };

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

@@ -207,6 +207,8 @@ export type BackendEvents = {
     {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>},
   ],
   NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
+
+  hookSettings: [$ReadOnly<DevToolsHookSettings>],
 };
 
 type FrontendEvents = {
@@ -241,7 +243,7 @@ type FrontendEvents = {
   storeAsGlobal: [StoreAsGlobalParams],
   updateComponentFilters: [Array<ComponentFilter>],
   getEnvironmentNames: [],
-  updateConsolePatchSettings: [DevToolsHookSettings],
+  updateConsolePatchSettings: [$ReadOnly<DevToolsHookSettings>],
   viewAttributeSource: [ViewAttributeSourceParams],
   viewElementSource: [ElementAndRendererID],
 
@@ -267,6 +269,8 @@ type FrontendEvents = {
 
   resumeElementPolling: [],
   pauseElementPolling: [],
+
+  fetchHookSettings: [],
 };
 
 class Bridge<

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

@@ -49,6 +49,7 @@ import type {
   BridgeProtocol,
 } from 'react-devtools-shared/src/bridge';
 import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError';
+import type {DevToolsHookSettings} from '../backend/types';
 
 const debug = (methodName: string, ...args: Array<string>) => {
   if (__DEBUG__) {
@@ -94,6 +95,7 @@ export default class Store extends EventEmitter<{
   collapseNodesByDefault: [],
   componentFilters: [],
   error: [Error],
+  hookSettings: [$ReadOnly<DevToolsHookSettings>],
   mutated: [[Array<number>, Map<number, number>]],
   recordChangeDescriptions: [],
   roots: [],
@@ -192,6 +194,7 @@ export default class Store extends EventEmitter<{
   _weightAcrossRoots: number = 0;
 
   _shouldCheckBridgeProtocolCompatibility: boolean = false;
+  _hookSettings: $ReadOnly<DevToolsHookSettings> | null = null;
 
   constructor(bridge: FrontendBridge, config?: Config) {
     super();
@@ -270,6 +273,7 @@ export default class Store extends EventEmitter<{
 
     bridge.addListener('backendVersion', this.onBridgeBackendVersion);
     bridge.addListener('saveToClipboard', this.onSaveToClipboard);
+    bridge.addListener('hookSettings', this.onHookSettings);
     bridge.addListener('backendInitialized', this.onBackendInitialized);
   }
 
@@ -1501,6 +1505,28 @@ export default class Store extends EventEmitter<{
 
     this._bridge.send('getBackendVersion');
     this._bridge.send('getIfHasUnsupportedRendererVersion');
+    this.fetchHookSettings();
+  };
+
+  fetchHookSettings: () => void = () => {
+    this._bridge.send('fetchHookSettings');
+  };
+
+  updateConsolePatchSettings: (
+    settings: $ReadOnly<DevToolsHookSettings>,
+  ) => void = settings => {
+    this._hookSettings = settings;
+    this._bridge.send('updateConsolePatchSettings', settings);
+  };
+
+  onHookSettings: (settings: $ReadOnly<DevToolsHookSettings>) => void =
+    settings => {
+      this._hookSettings = settings;
+      this.emit('hookSettings', settings);
+    };
+
+  getHookSettings: () => $ReadOnly<DevToolsHookSettings> | null = () => {
+    return this._hookSettings;
   };
 
   // The Store should never throw an Error without also emitting an event.

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -20,18 +20,14 @@ 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 {BridgeContext} from '../context';
+import {useDevToolsHookSettings, useLocalStorage} from '../hooks';
+import {BridgeContext, StoreContext} from '../context';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
@@ -108,6 +104,7 @@ function SettingsContextController({
   profilerPortalContainer,
 }: Props): React.Node {
   const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
 
   const [displayDensity, setDisplayDensity] =
     useLocalStorageWithLog<DisplayDensity>(
@@ -118,36 +115,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(store);
+
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
       ((document.documentElement: any): HTMLElement),
@@ -197,14 +185,14 @@ function SettingsContextController({
   }, [browserTheme, theme, documentElements]);
 
   useEffect(() => {
-    bridge.send('updateConsolePatchSettings', {
+    store.updateConsolePatchSettings({
       appendComponentStack,
       breakOnConsoleErrors,
       showInlineWarningsAndErrors,
       hideConsoleLogsInStrictMode,
     });
   }, [
-    bridge,
+    store,
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,

packages/react-devtools-shared/src/devtools/views/hooks.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
+
 import {
   useCallback,
   useEffect,
@@ -19,6 +21,7 @@ import {
   localStorageGetItem,
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
+import Store from 'react-devtools-shared/src/devtools/store';
 import {StoreContext, BridgeContext} from './context';
 import {sanitizeForParse, smartParse, smartStringify} from '../utils';
 
@@ -206,6 +209,69 @@ 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(
+  store: Store,
+): DevToolsHookSettingsGettersAndSetters {
+  const settings = store.getHookSettings();
+
+  const [appendComponentStack, setAppendComponentStack] = useState(
+    settings?.appendComponentStack || false,
+  );
+  const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(
+    settings?.breakOnConsoleErrors || false,
+  );
+  const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
+    useState(settings?.hideConsoleLogsInStrictMode || false);
+  const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
+    useState(settings?.showInlineWarningsAndErrors || false);
+
+  const onHookSettings = useCallback(
+    (hookSettings: $ReadOnly<DevToolsHookSettings>) => {
+      setAppendComponentStack(hookSettings.appendComponentStack);
+      setBreakOnConsoleErrors(hookSettings.breakOnConsoleErrors);
+      setHideConsoleLogsInStrictMode(hookSettings.hideConsoleLogsInStrictMode);
+      setShowInlineWarningsAndErrors(hookSettings.showInlineWarningsAndErrors);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    store.addListener('hookSettings', onHookSettings);
+
+    return () => {
+      store.removeListener('hookSettings', onHookSettings);
+    };
+  }, [store, onHookSettings]);
+
+  useEffect(() => {
+    if (!settings) {
+      store.fetchHookSettings();
+    }
+  }, []);
+
+  return {
+    appendComponentStack,
+    setAppendComponentStack,
+    breakOnConsoleErrors,
+    setBreakOnConsoleErrors,
+    hideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
+    showInlineWarningsAndErrors,
+    setShowInlineWarningsAndErrors,
+  };
+}
+
 export function useModalDismissSignal(
   modalRef: {current: HTMLDivElement | null, ...},
   dismissCallback: () => void,

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

@@ -645,6 +645,8 @@ export function installHook(
     Promise.resolve(maybeSettingsOrSettingsPromise)
       .then(settings => {
         hook.settings = settings;
+        hook.emit('settingsInjected', settings);
+
         patchConsoleForErrorsAndWarnings();
       })
       .catch(() => {