Skip to content

Commit 73c898f

Browse files
lunaruanlunaruan
committed
moved console log colors to process.env in webpack
1 parent af1bc8e commit 73c898f

File tree

9 files changed

+65
-29
lines changed

9 files changed

+65
-29
lines changed

‎packages/react-devtools-core/webpack.backend.js

+6
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ module.exports = {
6060
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
6161
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6262
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
63+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
64+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
65+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
66+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
67+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
68+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
6369
}),
6470
],
6571
optimization: {

‎packages/react-devtools-core/webpack.standalone.js

+6
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ module.exports = {
6767
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6868
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
6969
'process.env.NODE_ENV': `"${NODE_ENV}"`,
70+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
71+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
72+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
73+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
74+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
75+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
7076
}),
7177
],
7278
module: {

‎packages/react-devtools-extensions/webpack.backend.js

+6
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@ module.exports = {
5858
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
5959
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6060
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
61+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
62+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
63+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
64+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
65+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
66+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
6167
}),
6268
],
6369
module: {

‎packages/react-devtools-extensions/webpack.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,12 @@ module.exports = {
7676
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7777
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
7878
'process.env.NODE_ENV': `"${NODE_ENV}"`,
79+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
80+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
81+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
82+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
83+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
84+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
7985
}),
8086
],
8187
module: {

‎packages/react-devtools-inline/webpack.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,12 @@ module.exports = {
7070
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7171
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
7272
'process.env.NODE_ENV': `"${NODE_ENV}"`,
73+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
74+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
75+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
76+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
77+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
78+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
7379
}),
7480
],
7581
module: {

‎packages/react-devtools-shared/src/backend/console.js

+11-14
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,8 @@ import {format} from './utils';
1515
import {getInternalReactConstants} from './renderer';
1616
import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
1717

18-
// NOTE: KEEP IN SYNC with src/hook.js
1918
const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
2019
const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
21-
const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
22-
const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
23-
const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
24-
const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
25-
const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
26-
const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
2720

2821
// React's custom built component stack strings match "\s{4}in"
2922
// Chrome's prefix matches "\s{4}at"
@@ -256,25 +249,29 @@ export function patch({
256249
case 'warn':
257250
color =
258251
browserTheme === 'light'
259-
? LIGHT_MODE_DIMMED_WARNING_COLOR
260-
: DARK_MODE_DIMMED_WARNING_COLOR;
252+
? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
253+
: process.env.DARK_MODE_DIMMED_WARNING_COLOR;
261254
break;
262255
case 'error':
263256
color =
264257
browserTheme === 'light'
265-
? LIGHT_MODE_DIMMED_ERROR_COLOR
266-
: DARK_MODE_DIMMED_ERROR_COLOR;
258+
? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
259+
: process.env.DARK_MODE_DIMMED_ERROR_COLOR;
267260
break;
268261
case 'log':
269262
default:
270263
color =
271264
browserTheme === 'light'
272-
? LIGHT_MODE_DIMMED_LOG_COLOR
273-
: DARK_MODE_DIMMED_LOG_COLOR;
265+
? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
266+
: process.env.DARK_MODE_DIMMED_LOG_COLOR;
274267
break;
275268
}
276269

277-
originalMethod(`%c${format(...args)}`, `color: ${color}`);
270+
if (color) {
271+
originalMethod(`%c${format(...args)}`, `color: ${color}`);
272+
} else {
273+
throw Error('Console color is not defined');
274+
}
278275
}
279276
}
280277
} else {

‎packages/react-devtools-shared/src/hook.js

+11-15
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,6 @@ export function installHook(target: any): DevToolsHook | null {
2626
return null;
2727
}
2828

29-
// Keep in sync with src/backend/console.js
30-
const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
31-
const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
32-
const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
33-
const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
34-
const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
35-
const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
36-
3729
function detectReactBuildType(renderer) {
3830
try {
3931
if (typeof renderer.version === 'string') {
@@ -278,25 +270,29 @@ export function installHook(target: any): DevToolsHook | null {
278270
case 'warn':
279271
color =
280272
browserTheme === 'light'
281-
? LIGHT_MODE_DIMMED_WARNING_COLOR
282-
: DARK_MODE_DIMMED_WARNING_COLOR;
273+
? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
274+
: process.env.DARK_MODE_DIMMED_WARNING_COLOR;
283275
break;
284276
case 'error':
285277
color =
286278
browserTheme === 'light'
287-
? LIGHT_MODE_DIMMED_ERROR_COLOR
288-
: DARK_MODE_DIMMED_ERROR_COLOR;
279+
? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
280+
: process.env.DARK_MODE_DIMMED_ERROR_COLOR;
289281
break;
290282
case 'log':
291283
default:
292284
color =
293285
browserTheme === 'light'
294-
? LIGHT_MODE_DIMMED_LOG_COLOR
295-
: DARK_MODE_DIMMED_LOG_COLOR;
286+
? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
287+
: process.env.DARK_MODE_DIMMED_LOG_COLOR;
296288
break;
297289
}
298290

299-
originalMethod(`%c${format(...args)}`, `color: ${color}`);
291+
if (color) {
292+
originalMethod(`%c${format(...args)}`, `color: ${color}`);
293+
} else {
294+
throw Error('Console color is not defined');
295+
}
300296
}
301297
} else {
302298
originalMethod(...args);

‎packages/react-devtools-shell/webpack.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@ const config = {
5959
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
6060
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
6161
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
62+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
63+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
64+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
65+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
66+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
67+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
6268
}),
6369
],
6470
module: {

‎scripts/flow/react-devtools.js

+7
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99

1010
declare var __EXTENSION__: boolean;
1111
declare var __TEST__: boolean;
12+
13+
declare var DARK_MODE_DIMMED_WARNING_COLOR: string;
14+
declare var DARK_MODE_DIMMED_ERROR_COLOR: string;
15+
declare var DARK_MODE_DIMMED_LOG_COLOR: string;
16+
declare var LIGHT_MODE_DIMMED_WARNING_COLOR: string;
17+
declare var LIGHT_MODE_DIMMED_ERROR_COLOR: string;
18+
declare var LIGHT_MODE_DIMMED_LOG_COLOR: string;

0 commit comments

Comments
 (0)