Skip to content

Commit 4a4600e

Browse files
committed
refactor[react-devtools]: propagate settings from global hook object to frontend
1 parent 0c7752c commit 4a4600e

File tree

5 files changed

+86
-25
lines changed

5 files changed

+86
-25
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ export default class Agent extends EventEmitter<{
151151
drawTraceUpdates: [Array<HostInstance>],
152152
disableTraceUpdates: [],
153153
updateHookSettings: [DevToolsHookSettings],
154+
fetchHookSettings: [],
154155
}> {
155156
_bridge: BackendBridge;
156157
_isProfiling: boolean = false;
@@ -214,10 +215,13 @@ export default class Agent extends EventEmitter<{
214215
this.syncSelectionFromBuiltinElementsPanel,
215216
);
216217
bridge.addListener('shutdown', this.shutdown);
218+
217219
bridge.addListener(
218220
'updateConsolePatchSettings',
219221
this.updateConsolePatchSettings,
220222
);
223+
bridge.addListener('fetchHookSettings', this.fetchHookSettings);
224+
221225
bridge.addListener('updateComponentFilters', this.updateComponentFilters);
222226
bridge.addListener('viewAttributeSource', this.viewAttributeSource);
223227
bridge.addListener('viewElementSource', this.viewElementSource);
@@ -772,6 +776,15 @@ export default class Agent extends EventEmitter<{
772776
});
773777
};
774778

779+
fetchHookSettings: () => void = () => {
780+
this.emit('fetchHookSettings');
781+
};
782+
783+
onHookSettings: (settings: $ReadOnly<ConsolePatchSettings>) => void =
784+
settings => {
785+
this._bridge.send('hookSettings', settings);
786+
};
787+
775788
updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void =
776789
componentFilters => {
777790
for (const rendererID in this._rendererInterfaces) {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,9 @@ export function initBackend(
133133
agent.addListener('updateHookSettings', settings => {
134134
hook.settings = settings;
135135
});
136+
agent.addListener('fetchHookSettings', () => {
137+
agent.onHookSettings(hook.settings);
138+
});
136139

137140
return () => {
138141
subs.forEach(fn => fn());

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import type {
1616
ProfilingDataBackend,
1717
RendererID,
1818
ConsolePatchSettings,
19+
DevToolsHookSettings,
1920
} from 'react-devtools-shared/src/backend/types';
2021
import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
2122

@@ -207,6 +208,8 @@ export type BackendEvents = {
207208
{isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>},
208209
],
209210
NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
211+
212+
hookSettings: [$ReadOnly<DevToolsHookSettings>],
210213
};
211214

212215
type FrontendEvents = {
@@ -265,6 +268,8 @@ type FrontendEvents = {
265268

266269
resumeElementPolling: [],
267270
pauseElementPolling: [],
271+
272+
fetchHookSettings: [],
268273
};
269274

270275
class Bridge<

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

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,13 @@ import {
2020
import {
2121
LOCAL_STORAGE_BROWSER_THEME,
2222
LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
23-
LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
24-
LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
2523
LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
26-
LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
27-
LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
2824
} from 'react-devtools-shared/src/constants';
2925
import {
3026
COMFORTABLE_LINE_HEIGHT,
3127
COMPACT_LINE_HEIGHT,
3228
} from 'react-devtools-shared/src/devtools/constants';
33-
import {useLocalStorage} from '../hooks';
29+
import {useDevToolsHookSettings, useLocalStorage} from '../hooks';
3430
import {BridgeContext} from '../context';
3531
import {logEvent} from 'react-devtools-shared/src/Logger';
3632

@@ -118,36 +114,27 @@ function SettingsContextController({
118114
LOCAL_STORAGE_BROWSER_THEME,
119115
'auto',
120116
);
121-
const [appendComponentStack, setAppendComponentStack] =
122-
useLocalStorageWithLog<boolean>(
123-
LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
124-
true,
125-
);
126-
const [breakOnConsoleErrors, setBreakOnConsoleErrors] =
127-
useLocalStorageWithLog<boolean>(
128-
LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
129-
false,
130-
);
131117
const [parseHookNames, setParseHookNames] = useLocalStorageWithLog<boolean>(
132118
LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
133119
false,
134120
);
135-
const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
136-
useLocalStorageWithLog<boolean>(
137-
LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
138-
false,
139-
);
140-
const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
141-
useLocalStorageWithLog<boolean>(
142-
LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
143-
true,
144-
);
145121
const [traceUpdatesEnabled, setTraceUpdatesEnabled] =
146122
useLocalStorageWithLog<boolean>(
147123
LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
148124
false,
149125
);
150126

127+
const {
128+
appendComponentStack,
129+
setAppendComponentStack,
130+
breakOnConsoleErrors,
131+
setBreakOnConsoleErrors,
132+
hideConsoleLogsInStrictMode,
133+
setHideConsoleLogsInStrictMode,
134+
showInlineWarningsAndErrors,
135+
setShowInlineWarningsAndErrors,
136+
} = useDevToolsHookSettings(bridge);
137+
151138
const documentElements = useMemo<DocumentElements>(() => {
152139
const array: Array<HTMLElement> = [
153140
((document.documentElement: any): HTMLElement),

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import {
2222
} from 'react-devtools-shared/src/storage';
2323
import {StoreContext, BridgeContext} from './context';
2424
import {sanitizeForParse, smartParse, smartStringify} from '../utils';
25+
import type {FrontendBridge} from '../../bridge';
26+
import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
2527

2628
type ACTION_RESET = {
2729
type: 'RESET',
@@ -209,6 +211,57 @@ export function useLocalStorage<T>(
209211
return [storedValue, setValue];
210212
}
211213

214+
type DevToolsHookSettingsGettersAndSetters = {
215+
appendComponentStack: boolean,
216+
setAppendComponentStack: boolean => void,
217+
breakOnConsoleErrors: boolean,
218+
setBreakOnConsoleErrors: boolean => void,
219+
hideConsoleLogsInStrictMode: boolean,
220+
setHideConsoleLogsInStrictMode: boolean => void,
221+
showInlineWarningsAndErrors: boolean,
222+
setShowInlineWarningsAndErrors: boolean => void,
223+
};
224+
225+
export function useDevToolsHookSettings(
226+
bridge: FrontendBridge,
227+
): DevToolsHookSettingsGettersAndSetters {
228+
const [appendComponentStack, setAppendComponentStack] = useState(true);
229+
const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(false);
230+
const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
231+
useState(false);
232+
const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
233+
useState(false);
234+
235+
const onHookSettings = useCallback(
236+
(settings: $ReadOnly<DevToolsHookSettings>) => {
237+
setAppendComponentStack(settings.appendComponentStack);
238+
setBreakOnConsoleErrors(settings.breakOnConsoleErrors);
239+
setHideConsoleLogsInStrictMode(settings.hideConsoleLogsInStrictMode);
240+
setShowInlineWarningsAndErrors(settings.showInlineWarningsAndErrors);
241+
},
242+
[],
243+
);
244+
useEffect(() => {
245+
bridge.addListener('hookSettings', onHookSettings);
246+
bridge.send('fetchHookSettings');
247+
248+
return () => {
249+
bridge.removeListener('hookSettings', onHookSettings);
250+
};
251+
}, [bridge]);
252+
253+
return {
254+
appendComponentStack,
255+
setAppendComponentStack,
256+
breakOnConsoleErrors,
257+
setBreakOnConsoleErrors,
258+
hideConsoleLogsInStrictMode,
259+
setHideConsoleLogsInStrictMode,
260+
showInlineWarningsAndErrors,
261+
setShowInlineWarningsAndErrors,
262+
};
263+
}
264+
212265
export function useModalDismissSignal(
213266
modalRef: {current: HTMLDivElement | null, ...},
214267
dismissCallback: () => void,

0 commit comments

Comments
 (0)