added react native feature flags (#22199)

lunaruan commented 3 days ago • 
This PR adds separate DevTools feature flag configurations for react-devtools-core. It also breaks the builds down into facebook specific and open source flags so we can experiment in React Native.

Tested yarn build:standalone, yarn build:backend, yarn build:standalone:fb, and yarn build:backend:fb and inspected the output to make sure each package used the correct feature flags (the first two use core-oss and the latter two use fb-oss.

packages/react-devtools-core/package.json

@@ -18,7 +18,9 @@
   "scripts": {
     "build": "yarn build:backend && yarn build:standalone",
     "build:backend": "cross-env NODE_ENV=production webpack --config webpack.backend.js",
+    "build:backend:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/backend-fb webpack --config webpack.backend.js",
     "build:standalone": "cross-env NODE_ENV=production webpack --config webpack.standalone.js",
+    "build:standalone:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=core/standalone-fb webpack --config webpack.standalone.js",
     "prepublish": "yarn run build",
     "start:backend": "cross-env NODE_ENV=development webpack --config webpack.backend.js --watch",
     "start:standalone": "cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch"

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

@@ -24,6 +24,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'core/backend-oss';
+
 // This targets RN/Hermes.
 process.env.BABEL_CONFIG_ADDITIONAL_TARGETS = JSON.stringify({
   ie: '11',
@@ -47,7 +49,7 @@ module.exports = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
-      'react-devtools-feature-flags': resolveFeatureFlags('core/backend'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),

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

@@ -24,6 +24,9 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const featureFlagTarget =
+  process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss';
+
 const babelOptions = {
   configFile: resolve(
     __dirname,
@@ -50,7 +53,7 @@ module.exports = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
-      'react-devtools-feature-flags': resolveFeatureFlags('core/standalone'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),

packages/react-devtools-shared/buildUtils.js

@@ -11,12 +11,18 @@ const {resolve} = require('path');
 function resolveFeatureFlags(target) {
   let flagsPath;
   switch (target) {
-    case 'core/backend':
-    case 'core/standalone':
     case 'inline':
     case 'shell':
       flagsPath = 'DevToolsFeatureFlags.default';
       break;
+    case 'core/backend-oss':
+    case 'core/standalone-oss':
+      flagsPath = 'DevToolsFeatureFlags.core-oss';
+      break;
+    case 'core/backend-fb':
+    case 'core/standalone-fb':
+      flagsPath = 'DevToolsFeatureFlags.core-fb';
+      break;
     case 'extension-oss':
       flagsPath = 'DevToolsFeatureFlags.extension-oss';
       break;

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * This file is forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableProfilerChangedHookIndices = true;
+export const isInternalFacebookBuild = true;
+
+/************************************************************************
+ * Do not edit the code below.
+ * It ensures this fork exports the same types as the default flags file.
+ ************************************************************************/
+
+import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
+import typeof * as ExportsType from './DevToolsFeatureFlags.core-fb';
+
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, FeatureFlagsType>);

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * This file is forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = false;
+
+/************************************************************************
+ * Do not edit the code below.
+ * It ensures this fork exports the same types as the default flags file.
+ ************************************************************************/
+
+import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
+import typeof * as ExportsType from './DevToolsFeatureFlags.core-oss';
+
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, FeatureFlagsType>);