Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore[react-devtools]: extract getDispatcherRef into a separate module #30594

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/react-devtools-core/src/cachedSettings.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/types';
import {writeConsolePatchSettingsToWindow} from 'react-devtools-shared/src/backend/console';
import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils';
import {castBool} from 'react-devtools-shared/src/utils';

// Note: all keys should be optional in this type, because users can use newer
// versions of React DevTools with older versions of React Native, and the object
Expand Down Expand Up @@ -54,14 +54,13 @@ function parseConsolePatchSettings(
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
} = parsedValue;

return {
appendComponentStack: castBool(appendComponentStack) ?? true,
breakOnConsoleErrors: castBool(breakOnConsoleErrors) ?? false,
showInlineWarningsAndErrors: castBool(showInlineWarningsAndErrors) ?? true,
hideConsoleLogsInStrictMode: castBool(hideConsoleLogsInStrictMode) ?? false,
browserTheme: castBrowserTheme(browserTheme) ?? 'dark',
};
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
getShowInlineWarningsAndErrors,
getHideConsoleLogsInStrictMode,
} from 'react-devtools-shared/src/utils';
import {getBrowserTheme} from 'react-devtools-extensions/src/utils';

// The renderer interface can't read saved component filters directly,
// because they are stored in localStorage within the context of the extension.
Expand All @@ -28,9 +27,6 @@ function syncSavedPreferences() {
)};
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
getHideConsoleLogsInStrictMode(),
)};
window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
getBrowserTheme(),
)};`,
);
}
Expand Down
39 changes: 15 additions & 24 deletions packages/react-devtools-shared/src/backend/agent.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,9 @@ import type {
RendererID,
RendererInterface,
ConsolePatchSettings,
DevToolsHookSettings,
} from './types';
import type {
ComponentFilter,
BrowserTheme,
} from 'react-devtools-shared/src/frontend/types';
import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types';
import {isSynchronousXHRSupported, isReactNativeEnvironment} from './utils';

const debug = (methodName: string, ...args: Array<string>) => {
Expand Down Expand Up @@ -153,6 +151,7 @@ export default class Agent extends EventEmitter<{
traceUpdates: [Set<HostInstance>],
drawTraceUpdates: [Array<HostInstance>],
disableTraceUpdates: [],
updateHookSettings: [DevToolsHookSettings],
}> {
_bridge: BackendBridge;
_isProfiling: boolean = false;
Expand Down Expand Up @@ -762,30 +761,22 @@ export default class Agent extends EventEmitter<{
}
};

updateConsolePatchSettings: ({
appendComponentStack: boolean,
breakOnConsoleErrors: boolean,
browserTheme: BrowserTheme,
hideConsoleLogsInStrictMode: boolean,
showInlineWarningsAndErrors: boolean,
}) => void = ({
appendComponentStack,
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
}: ConsolePatchSettings) => {
updateConsolePatchSettings: (
settings: $ReadOnly<ConsolePatchSettings>,
) => void = settings => {
// Propagate the settings, so Backend can subscribe to it and modify hook
this.emit('updateHookSettings', {
appendComponentStack: settings.appendComponentStack,
breakOnConsoleErrors: settings.breakOnConsoleErrors,
showInlineWarningsAndErrors: settings.showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode: settings.hideConsoleLogsInStrictMode,
});

// If the frontend preferences have changed,
// or in the case of React Native- if the backend is just finding out the preferences-
// then reinstall the console overrides.
// It's safe to call `patchConsole` multiple times.
patchConsole({
appendComponentStack,
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
});
patchConsole(settings);
};

updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void =
Expand Down
22 changes: 10 additions & 12 deletions packages/react-devtools-shared/src/backend/console.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,16 @@ import {
ANSI_STYLE_DIMMING_TEMPLATE,
ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
} from 'react-devtools-shared/src/constants';
import {getInternalReactConstants, getDispatcherRef} from './fiber/renderer';
import getDispatcherRef from 'react-devtools-shared/src/backend/fiber/getDispatcherRef';
import {getInternalReactConstants} from './fiber/renderer';
import {
getStackByFiberInDevAndProd,
getOwnerStackByFiberInDev,
supportsOwnerStacks,
supportsConsoleTasks,
} from './fiber/DevToolsFiberComponentStack';
import {formatOwnerStack} from './shared/DevToolsOwnerStack';
import {castBool, castBrowserTheme} from '../utils';
import {castBool} from '../utils';

const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];

Expand Down Expand Up @@ -166,7 +167,6 @@ const consoleSettingsRef: ConsolePatchSettings = {
breakOnConsoleErrors: false,
showInlineWarningsAndErrors: false,
hideConsoleLogsInStrictMode: false,
browserTheme: 'dark',
};

// Patches console methods to append component stack for the current fiber.
Expand All @@ -176,15 +176,13 @@ export function patch({
breakOnConsoleErrors,
showInlineWarningsAndErrors,
hideConsoleLogsInStrictMode,
browserTheme,
}: ConsolePatchSettings): void {
}: $ReadOnly<ConsolePatchSettings>): void {
// Settings may change after we've patched the console.
// Using a shared ref allows the patch function to read the latest values.
consoleSettingsRef.appendComponentStack = appendComponentStack;
consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
consoleSettingsRef.hideConsoleLogsInStrictMode = hideConsoleLogsInStrictMode;
consoleSettingsRef.browserTheme = browserTheme;

if (
appendComponentStack ||
Expand Down Expand Up @@ -230,9 +228,13 @@ export function patch({
// Search for the first renderer that has a current Fiber.
// We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
// eslint-disable-next-line no-for-of-loops/no-for-of-loops
for (const renderer of injectedRenderers.values()) {
for (const [
renderer,
injectedRendererInterface,
] of injectedRenderers.entries()) {
const currentDispatcherRef = getDispatcherRef(renderer);
const {getCurrentFiber, onErrorOrWarning, workTagMap} = renderer;
const {getCurrentFiber, onErrorOrWarning, workTagMap} =
injectedRendererInterface;
const current: ?Fiber = getCurrentFiber();
if (current != null) {
try {
Expand Down Expand Up @@ -459,15 +461,12 @@ export function patchConsoleUsingWindowValues() {
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,
});
}

Expand All @@ -485,7 +484,6 @@ export function writeConsolePatchSettingsToWindow(
settings.showInlineWarningsAndErrors;
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ =
settings.hideConsoleLogsInStrictMode;
window.__REACT_DEVTOOLS_BROWSER_THEME__ = settings.browserTheme;
}

export function installConsoleFunctionsToWindow(): void {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

import type {
CurrentDispatcherRef,
ReactRenderer,
} from 'react-devtools-shared/src/backend/types';

// Do not add / import anything to this file.
// This function is used from multiple places, including hook.

export default function getDispatcherRef(
renderer: ReactRenderer,
): void | CurrentDispatcherRef {
if (renderer.currentDispatcherRef === undefined) {
return undefined;
}
const injectedRef = renderer.currentDispatcherRef;
if (
typeof injectedRef.H === 'undefined' &&
typeof injectedRef.current !== 'undefined'
) {
// We got a legacy dispatcher injected, let's create a wrapper proxy to translate.
return {
get H() {
return (injectedRef: any).current;
},
set H(value) {
(injectedRef: any).current = value;
},
};
}
return (injectedRef: any);
}
Loading
Loading