From eba3779bb0931ccc1274549b7b861fe59ddb9dc4 Mon Sep 17 00:00:00 2001 From: Robert Balicki Date: Fri, 9 Sep 2022 14:30:22 -0400 Subject: [PATCH] [react devtools][easy] Centralize calls to patchConsoleUsingWindowValues * Instead of reading from window in two separate places, do this in a single function * Add some type safety --- .../src/backend/console.js | 34 +++++++++++++++++++ .../src/backend/renderer.js | 20 ++--------- packages/react-devtools-shared/src/hook.js | 20 ++--------- 3 files changed, 38 insertions(+), 36 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 03c36c14dcf79..2e3e63fc16061 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -371,3 +371,37 @@ export function unpatchForStrictMode(): void { } } } + +export function patchConsoleUsingWindowValues() { + const appendComponentStack = + castBool(window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__) ?? true; + const breakOnConsoleErrors = + castBool(window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__) ?? false; + const showInlineWarningsAndErrors = + castBool(window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__) ?? true; + const hideConsoleLogsInStrictMode = + castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ?? + false; + const browserTheme = + castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark'; + + patch({ + appendComponentStack, + breakOnConsoleErrors, + showInlineWarningsAndErrors, + hideConsoleLogsInStrictMode, + browserTheme, + }); +} + +function castBool(v: any): ?boolean { + if (v === true || v === false) { + return v; + } +} + +function castBrowserTheme(v: any): ?BrowserTheme { + if (v === 'light' || v === 'dark' || v === 'auto') { + return v; + } +} diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index a123d96262c79..7a43bbf93780d 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -63,7 +63,7 @@ import { } from '../constants'; import {inspectHooksOfFiber} from 'react-debug-tools'; import { - patch as patchConsole, + patchConsoleUsingWindowValues, registerRenderer as registerRendererWithConsole, patchForStrictMode as patchConsoleForStrictMode, unpatchForStrictMode as unpatchConsoleForStrictMode, @@ -817,23 +817,7 @@ export function attach( // The renderer interface can't read these preferences directly, // because it is stored in localStorage within the context of the extension. // It relies on the extension to pass the preference through via the global. - const appendComponentStack = - window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false; - const breakOnConsoleErrors = - window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true; - const showInlineWarningsAndErrors = - window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false; - const hideConsoleLogsInStrictMode = - window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true; - const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__; - - patchConsole({ - appendComponentStack, - breakOnConsoleErrors, - showInlineWarningsAndErrors, - hideConsoleLogsInStrictMode, - browserTheme, - }); + patchConsoleUsingWindowValues(); const debug = ( name: string, diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 4ed128ba9df93..f1985d65fb2fa 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -12,7 +12,7 @@ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevToo import type {DevToolsHook} from 'react-devtools-shared/src/backend/types'; import { - patch as patchConsole, + patchConsoleUsingWindowValues, registerRenderer as registerRendererWithConsole, } from './backend/console'; @@ -343,16 +343,6 @@ export function installHook(target: any): DevToolsHook | null { // (See comments in the try/catch below for more context on inlining.) if (!__TEST__ && !__EXTENSION__) { try { - const appendComponentStack = - window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false; - const breakOnConsoleErrors = - window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true; - const showInlineWarningsAndErrors = - window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false; - const hideConsoleLogsInStrictMode = - window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true; - const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__; - // The installHook() function is injected by being stringified in the browser, // so imports outside of this function do not get included. // @@ -361,13 +351,7 @@ export function installHook(target: any): DevToolsHook | null { // and the object itself will be undefined as well for the reasons mentioned above, // so we use try/catch instead. registerRendererWithConsole(renderer); - patchConsole({ - appendComponentStack, - breakOnConsoleErrors, - showInlineWarningsAndErrors, - hideConsoleLogsInStrictMode, - browserTheme, - }); + patchConsoleUsingWindowValues(); } catch (error) {} }