@samitouri / QOS-React / commits / 7e405d458d

[DevTools] Add DevTools forked Feature flags (#18994)

Also resolve an uncaught error in extension build (#18843). Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com> Co-authored-by: Brian Vaughn <bvaughn@fb.com>

Nick Reiley committed Oct 12, 2020 at 22:07 UTC 7e405d458d6481fb1c04dfca6afab0651e6f67cd
15 files changed +128 -15
.eslintrc.js
+3 -1
@@ -201,9 +201,11 @@ module.exports = {
201 spyOnDev: true,
202 spyOnDevAndProd: true,
203 spyOnProd: true,
204 + __EXPERIMENTAL__: true,
205 + __EXTENSION__: true,
206 __PROFILE__: true,
207 + __TEST__: true,
208 __UMD__: true,
206 - __EXPERIMENTAL__: true,
209 __VARIANT__: true,
210 gate: true,
211 trustedTypes: true,
packages/react-devtools-core/webpack.backend.js
+7 -3
@@ -4,6 +4,7 @@ const {
4 GITHUB_URL,
5 getVersionString,
6 } = require('react-devtools-extensions/utils');
7 +const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
8
9 const NODE_ENV = process.env.NODE_ENV;
10 if (!NODE_ENV) {
@@ -39,17 +40,20 @@ module.exports = {
40 resolve: {
41 alias: {
42 react: resolve(builtModulesDir, 'react'),
42 - 'react-dom': resolve(builtModulesDir, 'react-dom'),
43 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
44 + 'react-devtools-feature-flags': resolveFeatureFlags('core/backend'),
45 + 'react-dom': resolve(builtModulesDir, 'react-dom'),
46 'react-is': resolve(builtModulesDir, 'react-is'),
47 scheduler: resolve(builtModulesDir, 'scheduler'),
48 },
49 },
50 plugins: [
51 new DefinePlugin({
50 - __DEV__: true,
51 - __PROFILE__: false,
52 + __DEV__,
53 __EXPERIMENTAL__: true,
54 + __EXTENSION__: false,
55 + __PROFILE__: false,
56 + __TEST__: NODE_ENV === 'test',
57 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
58 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
59 }),
packages/react-devtools-core/webpack.standalone.js
+7 -3
@@ -4,6 +4,7 @@ const {
4 GITHUB_URL,
5 getVersionString,
6 } = require('react-devtools-extensions/utils');
7 +const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
8
9 const NODE_ENV = process.env.NODE_ENV;
10 if (!NODE_ENV) {
@@ -33,8 +34,9 @@ module.exports = {
34 resolve: {
35 alias: {
36 react: resolve(builtModulesDir, 'react'),
36 - 'react-dom': resolve(builtModulesDir, 'react-dom'),
37 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
38 + 'react-devtools-feature-flags': resolveFeatureFlags('core/standalone'),
39 + 'react-dom': resolve(builtModulesDir, 'react-dom'),
40 'react-is': resolve(builtModulesDir, 'react-is'),
41 scheduler: resolve(builtModulesDir, 'scheduler'),
42 },
@@ -47,9 +49,11 @@ module.exports = {
49 },
50 plugins: [
51 new DefinePlugin({
50 - __DEV__: false,
51 - __PROFILE__: false,
52 + __DEV__,
53 __EXPERIMENTAL__: true,
54 + __EXTENSION__: false,
55 + __PROFILE__: false,
56 + __TEST__: NODE_ENV === 'test',
57 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
58 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
59 'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-extensions/webpack.config.js
+6 -2
@@ -3,6 +3,7 @@
3 const {resolve} = require('path');
4 const {DefinePlugin} = require('webpack');
5 const {GITHUB_URL, getVersionString} = require('./utils');
6 +const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
7
8 const NODE_ENV = process.env.NODE_ENV;
9 if (!NODE_ENV) {
@@ -39,6 +40,7 @@ module.exports = {
40 alias: {
41 react: resolve(builtModulesDir, 'react'),
42 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
43 + 'react-devtools-feature-flags': resolveFeatureFlags('extension'),
44 'react-dom': resolve(builtModulesDir, 'react-dom'),
45 'react-is': resolve(builtModulesDir, 'react-is'),
46 scheduler: resolve(builtModulesDir, 'scheduler'),
@@ -49,9 +51,11 @@ module.exports = {
51 },
52 plugins: [
53 new DefinePlugin({
52 - __DEV__: false,
53 - __PROFILE__: false,
54 + __DEV__,
55 __EXPERIMENTAL__: true,
56 + __EXTENSION__: true,
57 + __PROFILE__: false,
58 + __TEST__: NODE_ENV === 'test',
59 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
60 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
61 'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-inline/webpack.config.js
+6 -2
@@ -4,6 +4,7 @@ const {
4 GITHUB_URL,
5 getVersionString,
6 } = require('react-devtools-extensions/utils');
7 +const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
8
9 const NODE_ENV = process.env.NODE_ENV;
10 if (!NODE_ENV) {
@@ -11,7 +12,7 @@ if (!NODE_ENV) {
12 process.exit(1);
13 }
14
14 -const __DEV__ = true; // NODE_ENV === 'development';
15 +const __DEV__ = NODE_ENV === 'development';
16
17 const DEVTOOLS_VERSION = getVersionString();
18
@@ -32,6 +33,7 @@ module.exports = {
33 react: 'react',
34 // TODO: Once this package is published, remove the external
35 // 'react-debug-tools': 'react-debug-tools',
36 + 'react-devtools-feature-flags': resolveFeatureFlags('inline'),
37 'react-dom': 'react-dom',
38 'react-is': 'react-is',
39 scheduler: 'scheduler',
@@ -42,8 +44,10 @@ module.exports = {
44 plugins: [
45 new DefinePlugin({
46 __DEV__,
45 - __PROFILE__: false,
47 __EXPERIMENTAL__: true,
48 + __EXTENSION__: false,
49 + __PROFILE__: false,
50 + __TEST__: NODE_ENV === 'test',
51 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
52 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
53 'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-shared/buildUtils.js new
+33
@@ -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 new
+16
@@ -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 new
+29
@@ -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
+5 -1
@@ -172,7 +172,11 @@ export function installHook(target: any): DevToolsHook | null {
172 // In that case, we'll patch later (when the frontend attaches).
173 //
174 // 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__) {
180 try {
181 const appendComponentStack =
182 window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
packages/react-devtools-shell/webpack.config.js
+6 -2
@@ -4,6 +4,7 @@ const {
4 GITHUB_URL,
5 getVersionString,
6 } = require('react-devtools-extensions/utils');
7 +const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
8
9 const NODE_ENV = process.env.NODE_ENV;
10 if (!NODE_ENV) {
@@ -33,8 +34,9 @@ const config = {
34 resolve: {
35 alias: {
36 react: resolve(builtModulesDir, 'react'),
36 - 'react-dom': resolve(builtModulesDir, 'react-dom'),
37 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
38 + 'react-devtools-feature-flags': resolveFeatureFlags('shell'),
39 + 'react-dom': resolve(builtModulesDir, 'react-dom'),
40 'react-is': resolve(builtModulesDir, 'react-is'),
41 scheduler: resolve(builtModulesDir, 'scheduler'),
42 },
@@ -45,8 +47,10 @@ const config = {
47 plugins: [
48 new DefinePlugin({
49 __DEV__,
48 - __PROFILE__: false,
50 __EXPERIMENTAL__: true,
51 + __EXTENSION__: false,
52 + __PROFILE__: false,
53 + __TEST__: NODE_ENV === 'test',
54 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
55 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
56 }),
scripts/flow/createFlowConfigs.js
+1
@@ -53,6 +53,7 @@ module.name_mapper='ReactServerStreamConfig$$' -> 'forks/ReactServerStreamConfig
53 module.name_mapper='ReactServerFormatConfig$$' -> 'forks/ReactServerFormatConfig.${serverRenderer}'
54 module.name_mapper='ReactFlightServerConfig$$' -> 'forks/ReactFlightServerConfig.${serverRenderer}'
55 module.name_mapper='ReactFlightClientHostConfig$$' -> 'forks/ReactFlightClientHostConfig.${serverRenderer}'
56 +module.name_mapper='react-devtools-feature-flags' -> 'react-devtools-shared/src/config/DevToolsFeatureFlags.default'
57 `.trim(),
58 )
59 .replace('%REACT_RENDERER_FLOW_IGNORES%', ignoredPaths.join('\n'));
scripts/flow/react-devtools.js
+2 -1
@@ -7,4 +7,5 @@
7 * @flow
8 */
9
10 -// No types
10 +declare var __EXTENSION__: boolean;
11 +declare var __TEST__: boolean;
scripts/jest/config.build-devtools.js
+3
@@ -26,6 +26,9 @@ const packages = readdirSync(packagesRoot).filter(dir => {
26 // Create a module map to point React packages to the build output
27 const moduleNameMapper = {};
28
29 +moduleNameMapper['react-devtools-feature-flags'] =
30 + '<rootDir>/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default';
31 +
32 // Map packages to bundles
33 packages.forEach(name => {
34 // Root entry point
scripts/jest/setupEnvironment.js
+2
@@ -5,6 +5,8 @@ if (NODE_ENV !== 'development' && NODE_ENV !== 'production') {
5 throw new Error('NODE_ENV must either be set to development or production.');
6 }
7 global.__DEV__ = NODE_ENV === 'development';
8 +global.__EXTENSION__ = false;
9 +global.__TEST__ = NODE_ENV === 'test';
10 global.__PROFILE__ = NODE_ENV === 'development';
11 global.__UMD__ = false;
12
scripts/jest/typescript/jest.d.ts
+2
@@ -1,5 +1,7 @@
1 declare var jasmine: any;
2 declare var __DEV__: boolean;
3 +declare var __TEST__: boolean;
4 +declare var __EXTENSION__: boolean;
5
6 declare function afterEach(fn: any): any;
7 declare function beforeEach(fn: any): any;