[react devtools][easy] Centralize calls to patchConsoleUsingWindowValues (#25222)
* Instead of reading from window in two separate places, do this in a single function * Add some type safety
Robert Balicki committed
Sep 13, 2022 at 11:24 UTC
271bf90a94bf177e16e4482e6060c57f742eaf61
3 files changed
+38
-36
packages/react-devtools-shared/src/backend/console.js
+34
@@ -371,3 +371,37 @@ export function unpatchForStrictMode(): void {
371
}
372
}
373
}
374
+
375
+export function patchConsoleUsingWindowValues() {
376
+ const appendComponentStack =
377
+ castBool(window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__) ?? true;
378
+ const breakOnConsoleErrors =
379
+ castBool(window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__) ?? false;
380
+ const showInlineWarningsAndErrors =
381
+ castBool(window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__) ?? true;
382
+ const hideConsoleLogsInStrictMode =
383
+ castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ??
384
+ false;
385
+ const browserTheme =
386
+ castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark';
387
+
388
+ patch({
389
+ appendComponentStack,
390
+ breakOnConsoleErrors,
391
+ showInlineWarningsAndErrors,
392
+ hideConsoleLogsInStrictMode,
393
+ browserTheme,
394
+ });
395
+}
396
+
397
+function castBool(v: any): ?boolean {
398
+ if (v === true || v === false) {
399
+ return v;
400
+ }
401
+}
402
+
403
+function castBrowserTheme(v: any): ?BrowserTheme {
404
+ if (v === 'light' || v === 'dark' || v === 'auto') {
405
+ return v;
406
+ }
407
+}
packages/react-devtools-shared/src/backend/renderer.js
+2
-18
@@ -63,7 +63,7 @@ import {
63
} from '../constants';
64
import {inspectHooksOfFiber} from 'react-debug-tools';
65
import {
66
- patch as patchConsole,
66
+ patchConsoleUsingWindowValues,
67
registerRenderer as registerRendererWithConsole,
68
patchForStrictMode as patchConsoleForStrictMode,
69
unpatchForStrictMode as unpatchConsoleForStrictMode,
@@ -817,23 +817,7 @@ export function attach(
817
// The renderer interface can't read these preferences directly,
818
// because it is stored in localStorage within the context of the extension.
819
// It relies on the extension to pass the preference through via the global.
820
- const appendComponentStack =
821
- window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
822
- const breakOnConsoleErrors =
823
- window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
824
- const showInlineWarningsAndErrors =
825
- window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
826
- const hideConsoleLogsInStrictMode =
827
- window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
828
- const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
829
-
830
- patchConsole({
831
- appendComponentStack,
832
- breakOnConsoleErrors,
833
- showInlineWarningsAndErrors,
834
- hideConsoleLogsInStrictMode,
835
- browserTheme,
836
- });
820
+ patchConsoleUsingWindowValues();
821
822
const debug = (
823
name: string,
packages/react-devtools-shared/src/hook.js
+2
-18
@@ -12,7 +12,7 @@ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevToo
12
import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
13
14
import {
15
- patch as patchConsole,
15
+ patchConsoleUsingWindowValues,
16
registerRenderer as registerRendererWithConsole,
17
} from './backend/console';
18
@@ -343,16 +343,6 @@ export function installHook(target: any): DevToolsHook | null {
343
// (See comments in the try/catch below for more context on inlining.)
344
if (!__TEST__ && !__EXTENSION__) {
345
try {
346
- const appendComponentStack =
347
- window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
348
- const breakOnConsoleErrors =
349
- window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
350
- const showInlineWarningsAndErrors =
351
- window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
352
- const hideConsoleLogsInStrictMode =
353
- window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
354
- const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
355
-
346
// The installHook() function is injected by being stringified in the browser,
347
// so imports outside of this function do not get included.
348
//
@@ -361,13 +351,7 @@ export function installHook(target: any): DevToolsHook | null {
351
// and the object itself will be undefined as well for the reasons mentioned above,
352
// so we use try/catch instead.
353
registerRendererWithConsole(renderer);
364
- patchConsole({
365
- appendComponentStack,
366
- breakOnConsoleErrors,
367
- showInlineWarningsAndErrors,
368
- hideConsoleLogsInStrictMode,
369
- browserTheme,
370
- });
354
+ patchConsoleUsingWindowValues();
355
} catch (error) {}
356
}
357