Set up infra for react-reconciler fork (facebook#18285)

acdlite · web-flow · commit cd48a0654739 · 2020-03-12T11:38:32.000-07:00
* ReactFiberReconciler -&gt; ReactFiberReconciler.old

* Set up infra for react-reconciler fork

We're planning to land some significant refactors of the reconciler.
We want to be able to gradually roll out the new implementation side-by-
side with the existing one. So we'll create a short lived fork of the
react-reconciler package. Once the new implementation has stabilized,
we'll delete the old implementation and promote the new one.

This means, for as long as the fork exists, we'll need to maintain two
separate implementations. This sounds painful, but since the forks will
still be largely the same, most changes will not require two separate
implementations. In practice, you'll implement the change in the old
fork and then copy paste it to the new one.

This commit only sets up the build and testing infrastructure. It does
not actually fork any modules. I'll do that in subsequent PRs.

The forked version of the reconciler will be used to build a special
version of React DOM. I've called this build ReactDOMForked. It's only
built for www; there's no open source version.

The new reconciler is disabled by default. It's enabled in the
`yarn test-www-variant` command. The reconciler fork isn't really
related to the "variant" feature of the www builds, but I'm piggy
backing on that concept to avoid having to add yet another
testing dimension.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
@@ -111,6 +111,8 @@ export const warnAboutSpreadingKeyToJSX = false;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+export const enableNewReconciler = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -52,6 +52,8 @@ export const enableLegacyFBPrimerSupport = false;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = true;
 
+export const enableNewReconciler = false;
+
 // Only used in www builds.
 export function addUserTimingListener() {
   invariant(false, 'Not implemented.');
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -51,6 +51,8 @@ export const enableLegacyFBPrimerSupport = false;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+export const enableNewReconciler = false;
+
 // Only used in www builds.
 export function addUserTimingListener() {
   invariant(false, 'Not implemented.');
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -51,6 +51,8 @@ export const enableLegacyFBPrimerSupport = false;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+export const enableNewReconciler = false;
+
 // Only used in www builds.
 export function addUserTimingListener() {
   invariant(false, 'Not implemented.');
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -51,6 +51,8 @@ export const enableLegacyFBPrimerSupport = false;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+export const enableNewReconciler = false;
+
 // Only used in www builds.
 export function addUserTimingListener() {
   invariant(false, 'Not implemented.');
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -51,6 +51,8 @@ export const enableLegacyFBPrimerSupport = false;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+export const enableNewReconciler = false;
+
 // Only used in www builds.
 export function addUserTimingListener() {
   invariant(false, 'Not implemented.');
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -51,6 +51,8 @@ export const enableLegacyFBPrimerSupport = !__EXPERIMENTAL__;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+export const enableNewReconciler = false;
+
 // Only used in www builds.
 export function addUserTimingListener() {
   invariant(false, 'Not implemented.');
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -109,6 +109,11 @@ export const enableLegacyFBPrimerSupport = !__EXPERIMENTAL__;
 // Internal-only attempt to debug a React Native issue. See D20130868.
 export const throwEarlyForMysteriousError = false;
 
+// Enable forked reconciler. Piggy-backing on the "variant" global so that we
+// don't have to add another test dimension. The build system will compile this
+// to the correct value.
+export const enableNewReconciler = __VARIANT__;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
@@ -2,6 +2,15 @@
 
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
+jest.mock('react-reconciler/src/ReactFiberReconciler', () => {
+  return require.requireActual(
+    __VARIANT__
+      ? // TODO: Update this to point to the new module, once it exists
+        'react-reconciler/src/ReactFiberReconciler.old'
+      : 'react-reconciler/src/ReactFiberReconciler.old'
+  );
+});
+
 // When testing the custom renderer code path through `react-reconciler`,
 // turn the export into a function, and use the argument as host config.
 const shimHostConfigPath = 'react-reconciler/src/ReactFiberHostConfig';
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
@@ -324,10 +324,11 @@ function getPlugins(
   bundleType,
   globalName,
   moduleType,
-  pureExternalModules
+  pureExternalModules,
+  bundle
 ) {
   const findAndRecordErrorCodes = extractErrorCodes(errorCodeOpts);
-  const forks = Modules.getForks(bundleType, entry, moduleType);
+  const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
   const isProduction = isProductionBundleType(bundleType);
   const isProfiling = isProfilingBundleType(bundleType);
   const isUMDBundle =
@@ -391,7 +392,9 @@ function getPlugins(
       __UMD__: isUMDBundle ? 'true' : 'false',
       'process.env.NODE_ENV': isProduction ? "'production'" : "'development'",
       __EXPERIMENTAL__,
-      __VARIANT__: false,
+      // Enable forked reconciler.
+      // NOTE: I did not put much thought into how to configure this.
+      __VARIANT__: bundle.enableNewReconciler === true,
     }),
     // The CommonJS plugin *only* exists to pull "art" into "react-art".
     // I'm going to port "art" to ES modules to avoid this problem.
@@ -578,7 +581,8 @@ async function createBundle(bundle, bundleType) {
       bundleType,
       bundle.global,
       bundle.moduleType,
-      pureExternalModules
+      pureExternalModules,
+      bundle
     ),
     output: {
       externalLiveBindings: false,
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
@@ -95,6 +95,16 @@ const bundles = [
     externals: ['react'],
   },
 
+  /******* React DOM - www - Uses forked reconciler *******/
+  {
+    moduleType: RENDERER,
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING],
+    entry: 'react-dom',
+    global: 'ReactDOMForked',
+    enableNewReconciler: true,
+    externals: ['react'],
+  },
+
   /******* Test Utils *******/
   {
     moduleType: RENDERER_UTILS,
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
@@ -246,6 +246,27 @@ const forks = Object.freeze({
     }
   },
 
+  'react-reconciler/src/ReactFiberReconciler': (
+    bundleType,
+    entry,
+    dependencies,
+    moduleType,
+    bundle
+  ) => {
+    if (bundle.enableNewReconciler) {
+      switch (bundleType) {
+        case FB_WWW_DEV:
+        case FB_WWW_PROD:
+        case FB_WWW_PROFILING:
+          // Use the forked version of the reconciler
+          // TODO: Update this to point to the new module, once it exists
+          return 'react-reconciler/src/ReactFiberReconciler.old.js';
+      }
+    }
+    // Otherwise, use the non-forked version.
+    return 'react-reconciler/src/ReactFiberReconciler.old.js';
+  },
+
   // Different dialogs for caught errors.
   'react-reconciler/src/ReactFiberErrorDialog': (bundleType, entry) => {
     switch (bundleType) {
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
@@ -60,15 +60,16 @@ function getDependencies(bundleType, entry) {
 }
 
 // Hijacks some modules for optimization and integration reasons.
-function getForks(bundleType, entry, moduleType) {
+function getForks(bundleType, entry, moduleType, bundle) {
   const forksForBundle = {};
   Object.keys(forks).forEach(srcModule => {
     const dependencies = getDependencies(bundleType, entry);
     const targetModule = forks[srcModule](
       bundleType,
       entry,
       dependencies,
-      moduleType
+      moduleType,
+      bundle
     );
     if (targetModule === null) {
       return;
