Skip to content

Commit 7e405d4

Browse files
bl00mberbvaughnBrian Vaughn
authored
[DevTools] Add DevTools forked Feature flags (#18994)
Also resolve an uncaught error in extension build (#18843). Co-authored-by: Brian Vaughn <[email protected]> Co-authored-by: Brian Vaughn <[email protected]>
1 parent 4890779 commit 7e405d4

File tree

15 files changed

+128
-15
lines changed

15 files changed

+128
-15
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,11 @@ module.exports = {
201201
spyOnDev: true,
202202
spyOnDevAndProd: true,
203203
spyOnProd: true,
204+
__EXPERIMENTAL__: true,
205+
__EXTENSION__: true,
204206
__PROFILE__: true,
207+
__TEST__: true,
205208
__UMD__: true,
206-
__EXPERIMENTAL__: true,
207209
__VARIANT__: true,
208210
gate: true,
209211
trustedTypes: true,

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const {
44
GITHUB_URL,
55
getVersionString,
66
} = require('react-devtools-extensions/utils');
7+
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
78

89
const NODE_ENV = process.env.NODE_ENV;
910
if (!NODE_ENV) {
@@ -39,17 +40,20 @@ module.exports = {
3940
resolve: {
4041
alias: {
4142
react: resolve(builtModulesDir, 'react'),
42-
'react-dom': resolve(builtModulesDir, 'react-dom'),
4343
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
44+
'react-devtools-feature-flags': resolveFeatureFlags('core/backend'),
45+
'react-dom': resolve(builtModulesDir, 'react-dom'),
4446
'react-is': resolve(builtModulesDir, 'react-is'),
4547
scheduler: resolve(builtModulesDir, 'scheduler'),
4648
},
4749
},
4850
plugins: [
4951
new DefinePlugin({
50-
__DEV__: true,
51-
__PROFILE__: false,
52+
__DEV__,
5253
__EXPERIMENTAL__: true,
54+
__EXTENSION__: false,
55+
__PROFILE__: false,
56+
__TEST__: NODE_ENV === 'test',
5357
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
5458
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
5559
}),

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const {
44
GITHUB_URL,
55
getVersionString,
66
} = require('react-devtools-extensions/utils');
7+
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
78

89
const NODE_ENV = process.env.NODE_ENV;
910
if (!NODE_ENV) {
@@ -33,8 +34,9 @@ module.exports = {
3334
resolve: {
3435
alias: {
3536
react: resolve(builtModulesDir, 'react'),
36-
'react-dom': resolve(builtModulesDir, 'react-dom'),
3737
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
38+
'react-devtools-feature-flags': resolveFeatureFlags('core/standalone'),
39+
'react-dom': resolve(builtModulesDir, 'react-dom'),
3840
'react-is': resolve(builtModulesDir, 'react-is'),
3941
scheduler: resolve(builtModulesDir, 'scheduler'),
4042
},
@@ -47,9 +49,11 @@ module.exports = {
4749
},
4850
plugins: [
4951
new DefinePlugin({
50-
__DEV__: false,
51-
__PROFILE__: false,
52+
__DEV__,
5253
__EXPERIMENTAL__: true,
54+
__EXTENSION__: false,
55+
__PROFILE__: false,
56+
__TEST__: NODE_ENV === 'test',
5357
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
5458
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
5559
'process.env.NODE_ENV': `"${NODE_ENV}"`,

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
const {resolve} = require('path');
44
const {DefinePlugin} = require('webpack');
55
const {GITHUB_URL, getVersionString} = require('./utils');
6+
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
67

78
const NODE_ENV = process.env.NODE_ENV;
89
if (!NODE_ENV) {
@@ -39,6 +40,7 @@ module.exports = {
3940
alias: {
4041
react: resolve(builtModulesDir, 'react'),
4142
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
43+
'react-devtools-feature-flags': resolveFeatureFlags('extension'),
4244
'react-dom': resolve(builtModulesDir, 'react-dom'),
4345
'react-is': resolve(builtModulesDir, 'react-is'),
4446
scheduler: resolve(builtModulesDir, 'scheduler'),
@@ -49,9 +51,11 @@ module.exports = {
4951
},
5052
plugins: [
5153
new DefinePlugin({
52-
__DEV__: false,
53-
__PROFILE__: false,
54+
__DEV__,
5455
__EXPERIMENTAL__: true,
56+
__EXTENSION__: true,
57+
__PROFILE__: false,
58+
__TEST__: NODE_ENV === 'test',
5559
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
5660
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
5761
'process.env.NODE_ENV': `"${NODE_ENV}"`,

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ const {
44
GITHUB_URL,
55
getVersionString,
66
} = require('react-devtools-extensions/utils');
7+
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
78

89
const NODE_ENV = process.env.NODE_ENV;
910
if (!NODE_ENV) {
1011
console.error('NODE_ENV not set');
1112
process.exit(1);
1213
}
1314

14-
const __DEV__ = true; // NODE_ENV === 'development';
15+
const __DEV__ = NODE_ENV === 'development';
1516

1617
const DEVTOOLS_VERSION = getVersionString();
1718

@@ -32,6 +33,7 @@ module.exports = {
3233
react: 'react',
3334
// TODO: Once this package is published, remove the external
3435
// 'react-debug-tools': 'react-debug-tools',
36+
'react-devtools-feature-flags': resolveFeatureFlags('inline'),
3537
'react-dom': 'react-dom',
3638
'react-is': 'react-is',
3739
scheduler: 'scheduler',
@@ -42,8 +44,10 @@ module.exports = {
4244
plugins: [
4345
new DefinePlugin({
4446
__DEV__,
45-
__PROFILE__: false,
4647
__EXPERIMENTAL__: true,
48+
__EXTENSION__: false,
49+
__PROFILE__: false,
50+
__TEST__: NODE_ENV === 'test',
4751
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
4852
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
4953
'process.env.NODE_ENV': `"${NODE_ENV}"`,

‎packages/react-devtools-shared/buildUtils.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*/
8+
9+
const {resolve} = require('path');
10+
11+
function resolveFeatureFlags(target) {
12+
let flagsPath;
13+
switch (target) {
14+
case 'core/backend':
15+
case 'core/standalone':
16+
case 'inline':
17+
case 'shell':
18+
flagsPath = 'DevToolsFeatureFlags.default';
19+
break;
20+
case 'extension':
21+
flagsPath = 'DevToolsFeatureFlags.extension';
22+
break;
23+
default:
24+
console.error(`Invalid target "${target}"`);
25+
process.exit(1);
26+
}
27+
28+
return resolve(__dirname, 'src/config/', flagsPath);
29+
}
30+
31+
module.exports = {
32+
resolveFeatureFlags,
33+
};

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
/************************************************************************
11+
* This file is forked between different DevTools implementations.
12+
* It should never be imported directly!
13+
* It should always be imported from "react-devtools-feature-flags".
14+
************************************************************************/
15+
16+
// TODO Add feature flags here...

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
/************************************************************************
11+
* This file is forked between different DevTools implementations.
12+
* It should never be imported directly!
13+
* It should always be imported from "react-devtools-feature-flags".
14+
************************************************************************/
15+
16+
// TODO Add feature flags here...
17+
18+
/************************************************************************
19+
* Do not edit the code below.
20+
* It ensures this fork exports the same types as the default flags file.
21+
************************************************************************/
22+
23+
import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
24+
import typeof * as ExportsType from './DevToolsFeatureFlags.extension';
25+
26+
// eslint-disable-next-line no-unused-vars
27+
type Check<_X, Y: _X, X: Y = _X> = null;
28+
// eslint-disable-next-line no-unused-expressions
29+
(null: Check<ExportsType, FeatureFlagsType>);

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,11 @@ export function installHook(target: any): DevToolsHook | null {
172172
// In that case, we'll patch later (when the frontend attaches).
173173
//
174174
// Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
175-
if (process.env.NODE_ENV !== 'test') {
175+
//
176+
// Note that because this function is inlined, this conditional check must only use static booleans.
177+
// Otherwise the extension will throw with an undefined error.
178+
// (See comments in the try/catch below for more context on inlining.)
179+
if (!__EXTENSION__ && !__TEST__) {
176180
try {
177181
const appendComponentStack =
178182
window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const {
44
GITHUB_URL,
55
getVersionString,
66
} = require('react-devtools-extensions/utils');
7+
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
78

89
const NODE_ENV = process.env.NODE_ENV;
910
if (!NODE_ENV) {
@@ -33,8 +34,9 @@ const config = {
3334
resolve: {
3435
alias: {
3536
react: resolve(builtModulesDir, 'react'),
36-
'react-dom': resolve(builtModulesDir, 'react-dom'),
3737
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
38+
'react-devtools-feature-flags': resolveFeatureFlags('shell'),
39+
'react-dom': resolve(builtModulesDir, 'react-dom'),
3840
'react-is': resolve(builtModulesDir, 'react-is'),
3941
scheduler: resolve(builtModulesDir, 'scheduler'),
4042
},
@@ -45,8 +47,10 @@ const config = {
4547
plugins: [
4648
new DefinePlugin({
4749
__DEV__,
48-
__PROFILE__: false,
4950
__EXPERIMENTAL__: true,
51+
__EXTENSION__: false,
52+
__PROFILE__: false,
53+
__TEST__: NODE_ENV === 'test',
5054
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
5155
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
5256
}),

‎scripts/flow/createFlowConfigs.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ module.name_mapper='ReactServerStreamConfig$$' -> 'forks/ReactServerStreamConfig
5353
module.name_mapper='ReactServerFormatConfig$$' -> 'forks/ReactServerFormatConfig.${serverRenderer}'
5454
module.name_mapper='ReactFlightServerConfig$$' -> 'forks/ReactFlightServerConfig.${serverRenderer}'
5555
module.name_mapper='ReactFlightClientHostConfig$$' -> 'forks/ReactFlightClientHostConfig.${serverRenderer}'
56+
module.name_mapper='react-devtools-feature-flags' -> 'react-devtools-shared/src/config/DevToolsFeatureFlags.default'
5657
`.trim(),
5758
)
5859
.replace('%REACT_RENDERER_FLOW_IGNORES%', ignoredPaths.join('\n'));

‎scripts/flow/react-devtools.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77
* @flow
88
*/
99

10-
// No types
10+
declare var __EXTENSION__: boolean;
11+
declare var __TEST__: boolean;

‎scripts/jest/config.build-devtools.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ const packages = readdirSync(packagesRoot).filter(dir => {
2626
// Create a module map to point React packages to the build output
2727
const moduleNameMapper = {};
2828

29+
moduleNameMapper['react-devtools-feature-flags'] =
30+
'<rootDir>/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default';
31+
2932
// Map packages to bundles
3033
packages.forEach(name => {
3134
// Root entry point

‎scripts/jest/setupEnvironment.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ if (NODE_ENV !== 'development' && NODE_ENV !== 'production') {
55
throw new Error('NODE_ENV must either be set to development or production.');
66
}
77
global.__DEV__ = NODE_ENV === 'development';
8+
global.__EXTENSION__ = false;
9+
global.__TEST__ = NODE_ENV === 'test';
810
global.__PROFILE__ = NODE_ENV === 'development';
911
global.__UMD__ = false;
1012

‎scripts/jest/typescript/jest.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
declare var jasmine: any;
22
declare var __DEV__: boolean;
3+
declare var __TEST__: boolean;
4+
declare var __EXTENSION__: boolean;
35

46
declare function afterEach(fn: any): any;
57
declare function beforeEach(fn: any): any;

0 commit comments

Comments
 (0)