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.

Sign up for GitHub

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

Jump to bottom

Add consoleManagedByDevToolsDuringStrictMode feature flag in DevTools #22215

Merged
merged 1 commit into from
Aug 30, 2021
Merged

Add consoleManagedByDevToolsDuringStrictMode feature flag in DevTools #22215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/react-devtools-shared/src/backend/console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {format} from './utils';

import {getInternalReactConstants} from './renderer';
import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';

const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
Expand Down Expand Up @@ -237,7 +238,7 @@ export function patch({
debugger;
}

if (isInStrictMode) {
if (consoleManagedByDevToolsDuringStrictMode && isInStrictMode) {
if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
// Dim the text color of the double logs if we're not
// hiding them.
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
export const enableProfilerChangedHookIndices = true;
export const isInternalFacebookBuild = true;

export const consoleManagedByDevToolsDuringStrictMode = false;

/************************************************************************
* Do not edit the code below.
* It ensures this fork exports the same types as the default flags file.
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
export const enableProfilerChangedHookIndices = false;
export const isInternalFacebookBuild = false;

export const consoleManagedByDevToolsDuringStrictMode = false;

/************************************************************************
* Do not edit the code below.
* It ensures this fork exports the same types as the default flags file.
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@

export const enableProfilerChangedHookIndices = false;
export const isInternalFacebookBuild = false;

export const consoleManagedByDevToolsDuringStrictMode = true;
2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
export const enableProfilerChangedHookIndices = true;
export const isInternalFacebookBuild = true;

export const consoleManagedByDevToolsDuringStrictMode = true;

/************************************************************************
* Do not edit the code below.
* It ensures this fork exports the same types as the default flags file.
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
export const enableProfilerChangedHookIndices = true;
export const isInternalFacebookBuild = false;

export const consoleManagedByDevToolsDuringStrictMode = true;

/************************************************************************
* Do not edit the code below.
* It ensures this fork exports the same types as the default flags file.
Expand Down
255 changes: 132 additions & 123 deletions packages/react-devtools-shared/src/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
patch as patchConsole,
registerRenderer as registerRendererWithConsole,
} from './backend/console';
import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';

import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';

Expand Down Expand Up @@ -162,56 +163,60 @@ export function installHook(target: any): DevToolsHook | null {
maybeMessage: any,
...inputArgs: $ReadOnlyArray<any>
): string {
const args = inputArgs.slice();

// Symbols cannot be concatenated with Strings.
let formatted: string =
typeof maybeMessage === 'symbol'
? maybeMessage.toString()
: '' + maybeMessage;
if (consoleManagedByDevToolsDuringStrictMode) {
const args = inputArgs.slice();

// Symbols cannot be concatenated with Strings.
let formatted: string =
typeof maybeMessage === 'symbol'
? maybeMessage.toString()
: '' + maybeMessage;

// If the first argument is a string, check for substitutions.
if (typeof maybeMessage === 'string') {
if (args.length) {
const REGEXP = /(%?)(%([jds]))/g;

formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
let arg = args.shift();
switch (flag) {
case 's':
arg += '';
break;
case 'd':
case 'i':
arg = parseInt(arg, 10).toString();
break;
case 'f':
arg = parseFloat(arg).toString();
break;
}
if (!escaped) {
return arg;
}
args.unshift(arg);
return match;
});
}
}

// If the first argument is a string, check for substitutions.
if (typeof maybeMessage === 'string') {
// Arguments that remain after formatting.
if (args.length) {
const REGEXP = /(%?)(%([jds]))/g;

formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
let arg = args.shift();
switch (flag) {
case 's':
arg += '';
break;
case 'd':
case 'i':
arg = parseInt(arg, 10).toString();
break;
case 'f':
arg = parseFloat(arg).toString();
break;
}
if (!escaped) {
return arg;
}
args.unshift(arg);
return match;
});
for (let i = 0; i < args.length; i++) {
const arg = args[i];

// Symbols cannot be concatenated with Strings.
formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
}
}
}

// Arguments that remain after formatting.
if (args.length) {
for (let i = 0; i < args.length; i++) {
const arg = args[i];
// Update escaped %% values.
formatted = formatted.replace(/%{2,2}/g, '%');

// Symbols cannot be concatenated with Strings.
formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
}
return '' + formatted;
}

// Update escaped %% values.
formatted = formatted.replace(/%{2,2}/g, '%');

return '' + formatted;
return '';
}

// NOTE: KEEP IN SYNC with src/backend/console.js:patch
Expand All @@ -222,90 +227,92 @@ export function installHook(target: any): DevToolsHook | null {
browserTheme,
}: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
): void {
const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];

if (__EXTENSION__) {
const targetConsole = console;

const originalConsoleMethods = {};

overrideConsoleMethods.forEach(method => {
try {
const originalMethod = (originalConsoleMethods[
method
] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
: targetConsole[method]);

const overrideMethod = (...args) => {
let isInStrictMode = false;

// 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?)
const {getCurrentFiber, getIsStrictMode} = renderer;
if (typeof getCurrentFiber !== 'function') {
return;
}

const current: ?Fiber = getCurrentFiber();
if (current != null) {
try {
if (
typeof getIsStrictMode === 'function' &&
getIsStrictMode()
) {
isInStrictMode = true;
}
} catch (error) {
// Don't let a DevTools or React internal error interfere with logging.
if (consoleManagedByDevToolsDuringStrictMode) {
const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];

if (__EXTENSION__) {
const targetConsole = console;

const originalConsoleMethods = {};

overrideConsoleMethods.forEach(method => {
try {
const originalMethod = (originalConsoleMethods[
method
] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
: targetConsole[method]);

const overrideMethod = (...args) => {
let isInStrictMode = false;

// 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?)
const {getCurrentFiber, getIsStrictMode} = renderer;
if (typeof getCurrentFiber !== 'function') {
return;
}
}

if (isInStrictMode) {
if (!hideConsoleLogsInStrictMode) {
// Dim the text color of the double logs if we're not
// hiding them.
let color;
switch (method) {
case 'warn':
color =
browserTheme === 'light'
? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
: process.env.DARK_MODE_DIMMED_WARNING_COLOR;
break;
case 'error':
color =
browserTheme === 'light'
? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
: process.env.DARK_MODE_DIMMED_ERROR_COLOR;
break;
case 'log':
default:
color =
browserTheme === 'light'
? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
: process.env.DARK_MODE_DIMMED_LOG_COLOR;
break;
const current: ?Fiber = getCurrentFiber();
if (current != null) {
try {
if (
typeof getIsStrictMode === 'function' &&
getIsStrictMode()
) {
isInStrictMode = true;
}
} catch (error) {
// Don't let a DevTools or React internal error interfere with logging.
}
}

if (color) {
originalMethod(`%c${format(...args)}`, `color: ${color}`);
} else {
throw Error('Console color is not defined');
if (isInStrictMode) {
if (!hideConsoleLogsInStrictMode) {
// Dim the text color of the double logs if we're not
// hiding them.
let color;
switch (method) {
case 'warn':
color =
browserTheme === 'light'
? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
: process.env.DARK_MODE_DIMMED_WARNING_COLOR;
break;
case 'error':
color =
browserTheme === 'light'
? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
: process.env.DARK_MODE_DIMMED_ERROR_COLOR;
break;
case 'log':
default:
color =
browserTheme === 'light'
? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
: process.env.DARK_MODE_DIMMED_LOG_COLOR;
break;
}

if (color) {
originalMethod(`%c${format(...args)}`, `color: ${color}`);
} else {
throw Error('Console color is not defined');
}
}
} else {
originalMethod(...args);
}
} else {
originalMethod(...args);
}
};
};

overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;

// $FlowFixMe property error|warn is not writable.
targetConsole[method] = overrideMethod;
} catch (error) {}
});
// $FlowFixMe property error|warn is not writable.
targetConsole[method] = overrideMethod;
} catch (error) {}
});
}
}
}

Expand Down Expand Up @@ -365,10 +372,12 @@ export function installHook(target: any): DevToolsHook | null {
browserTheme,
});
} else {
patchConsoleForInitialRenderInExtension(renderer, {
hideConsoleLogsInStrictMode,
browserTheme,
});
if (consoleManagedByDevToolsDuringStrictMode) {
patchConsoleForInitialRenderInExtension(renderer, {
hideConsoleLogsInStrictMode,
browserTheme,
});
}
}
} catch (error) {}
}
Expand Down