Skip to content

Commit b6362ef

Browse files
lunaruanlunaruan
committed
moved console log colors to process.env in webpack
1 parent 181c2d6 commit b6362ef

File tree

11 files changed

+139
-32
lines changed

11 files changed

+139
-32
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
const {resolve} = require('path');
22
const {DefinePlugin} = require('webpack');
33
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
410
GITHUB_URL,
511
getVersionString,
612
} = require('react-devtools-extensions/utils');
@@ -60,6 +66,12 @@ module.exports = {
6066
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
6167
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6268
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
69+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
70+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
71+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
72+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
73+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
74+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
6375
}),
6476
],
6577
optimization: {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
const {resolve} = require('path');
22
const {DefinePlugin} = require('webpack');
33
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
410
GITHUB_URL,
511
getVersionString,
612
} = require('react-devtools-extensions/utils');
@@ -67,6 +73,12 @@ module.exports = {
6773
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6874
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
6975
'process.env.NODE_ENV': `"${NODE_ENV}"`,
76+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
77+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
78+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
79+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
80+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
81+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
7082
}),
7183
],
7284
module: {

‎packages/react-devtools-extensions/utils.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ const {execSync} = require('child_process');
99
const {readFileSync} = require('fs');
1010
const {resolve} = require('path');
1111

12+
const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
13+
const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
14+
const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
15+
const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
16+
const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
17+
const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
18+
1219
const GITHUB_URL = 'https://github.com/facebook/react';
1320

1421
function getGitCommit() {
@@ -36,6 +43,12 @@ function getVersionString() {
3643
}
3744

3845
module.exports = {
46+
DARK_MODE_DIMMED_WARNING_COLOR,
47+
DARK_MODE_DIMMED_ERROR_COLOR,
48+
DARK_MODE_DIMMED_LOG_COLOR,
49+
LIGHT_MODE_DIMMED_WARNING_COLOR,
50+
LIGHT_MODE_DIMMED_ERROR_COLOR,
51+
LIGHT_MODE_DIMMED_LOG_COLOR,
3952
GITHUB_URL,
4053
getGitCommit,
4154
getVersionString,

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@
22

33
const {resolve} = require('path');
44
const {DefinePlugin} = require('webpack');
5-
const {GITHUB_URL, getVersionString} = require('./utils');
5+
const {
6+
DARK_MODE_DIMMED_WARNING_COLOR,
7+
DARK_MODE_DIMMED_ERROR_COLOR,
8+
DARK_MODE_DIMMED_LOG_COLOR,
9+
LIGHT_MODE_DIMMED_WARNING_COLOR,
10+
LIGHT_MODE_DIMMED_ERROR_COLOR,
11+
LIGHT_MODE_DIMMED_LOG_COLOR,
12+
GITHUB_URL,
13+
getVersionString,
14+
} = require('./utils');
615
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
716

817
const NODE_ENV = process.env.NODE_ENV;
@@ -54,10 +63,16 @@ module.exports = {
5463
new DefinePlugin({
5564
__DEV__: true,
5665
__PROFILE__: false,
57-
__EXPERIMENTAL__: true,
66+
__DEV____DEV__: true,
5867
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
5968
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6069
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
70+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
71+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
72+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
73+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
74+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
75+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
6176
}),
6277
],
6378
module: {

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@
22

33
const {resolve} = require('path');
44
const {DefinePlugin} = require('webpack');
5-
const {GITHUB_URL, getVersionString} = require('./utils');
5+
const {
6+
DARK_MODE_DIMMED_WARNING_COLOR,
7+
DARK_MODE_DIMMED_ERROR_COLOR,
8+
DARK_MODE_DIMMED_LOG_COLOR,
9+
LIGHT_MODE_DIMMED_WARNING_COLOR,
10+
LIGHT_MODE_DIMMED_ERROR_COLOR,
11+
LIGHT_MODE_DIMMED_LOG_COLOR,
12+
GITHUB_URL,
13+
getVersionString,
14+
} = require('./utils');
615
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
716

817
const NODE_ENV = process.env.NODE_ENV;
@@ -76,6 +85,12 @@ module.exports = {
7685
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7786
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
7887
'process.env.NODE_ENV': `"${NODE_ENV}"`,
88+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
89+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
90+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
91+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
92+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
93+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
7994
}),
8095
],
8196
module: {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
const {resolve} = require('path');
22
const {DefinePlugin} = require('webpack');
33
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
410
GITHUB_URL,
511
getVersionString,
612
} = require('react-devtools-extensions/utils');
@@ -70,6 +76,12 @@ module.exports = {
7076
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7177
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
7278
'process.env.NODE_ENV': `"${NODE_ENV}"`,
79+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
80+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
81+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
82+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
83+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
84+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
7385
}),
7486
],
7587
module: {

‎packages/react-devtools-shared/src/__tests__/setupEnv.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
'use strict';
22

3+
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
10+
} = require('react-devtools-extensions/utils');
11+
312
// DevTools stores preferences between sessions in localStorage
413
if (!global.hasOwnProperty('localStorage')) {
514
global.localStorage = require('local-storage-fallback').default;
@@ -8,3 +17,10 @@ if (!global.hasOwnProperty('localStorage')) {
817
// Mimic the global we set with Webpack's DefinePlugin
918
global.__DEV__ = process.env.NODE_ENV !== 'production';
1019
global.__TEST__ = true;
20+
21+
global.process.env.DARK_MODE_DIMMED_WARNING_COLOR = DARK_MODE_DIMMED_WARNING_COLOR;
22+
global.process.env.DARK_MODE_DIMMED_ERROR_COLOR = DARK_MODE_DIMMED_ERROR_COLOR;
23+
global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
24+
global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
25+
global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR;
26+
global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;

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

Lines changed: 11 additions & 14 deletions
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

Lines changed: 11 additions & 15 deletions
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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
const {resolve} = require('path');
22
const {DefinePlugin} = require('webpack');
33
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
410
GITHUB_URL,
511
getVersionString,
612
} = require('react-devtools-extensions/utils');
@@ -59,6 +65,12 @@ const config = {
5965
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
6066
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
6167
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
68+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
69+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
70+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
71+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
72+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
73+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
6274
}),
6375
],
6476
module: {

‎scripts/flow/react-devtools.js

Lines changed: 7 additions & 0 deletions
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)