more generic forks can now match when a specific renderer match is no…

…t found. for instance `File.dom` can match when using renderer `"dom-node"` if `File.dom-node` does not exist.

This change also splits the browser and node builds for react-server-dom-esm into two separate renderers. There is not a `"dom-browser-esm"` renderer.

This change should alter no semantics. It does however set us up to support more complex and varied renderer configs in future updates and generally lowers the effort to spin up additional configs.

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientConfigBrowser';
+export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js

@@ -7,7 +7,6 @@
  * @flow
  */
 
-// This should really have a Node and a Browser fork but to avoid too many configs we limit this to build the same for both
 export * from 'react-client/src/ReactFlightClientConfigBrowser';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

packages/react-reconciler/src/ReactFiber.js

@@ -14,7 +14,7 @@ import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane';
-import type {SuspenseInstance} from './ReactFiberConfig';
+import type {SuspenseInstance} from 'react-reconciler/src/ReactFiberConfig';
 import type {
   OffscreenProps,
   OffscreenInstance,

packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js → packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js

@@ -10,7 +10,7 @@ import {AsyncLocalStorage} from 'async_hooks';
 
 import type {Request} from 'react-server/src/ReactFlightServer';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from 'react-server-dom-esm/src/ReactFlightServerConfigESMBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = true;

scripts/flow/createFlowConfigs.js

@@ -9,13 +9,48 @@
 
 const chalk = require('chalk');
 const fs = require('fs');
+const path = require('path');
 const mkdirp = require('mkdirp');
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
 const configTemplate = fs
   .readFileSync(__dirname + '/config/flowconfig')
   .toString();
 
+// stores all forks discovered during config generation
+const allForks = new Set();
+// maps forked file to the base path containing it and it's forks (it's parent)
+const forkedFiles = new Map();
+
+function findForks(file) {
+  const basePath = path.join(file, '..');
+  const forksPath = path.join(basePath, 'forks');
+  const forks = fs.readdirSync(path.join('packages', forksPath));
+  forks.forEach(f => allForks.add('forks/' + f));
+  forkedFiles.set(file, basePath);
+  return basePath;
+}
+
+function addFork(forks, renderer, file) {
+  let basePath = forkedFiles.get(file);
+  if (!basePath) {
+    basePath = findForks(file);
+  }
+
+  const baseFilename = file.slice(basePath.length + 1);
+
+  const parts = renderer.split('-');
+  while (parts.length) {
+    const candidate = `forks/${baseFilename}.${parts.join('-')}.js`;
+    if (allForks.has(candidate)) {
+      forks.set(candidate, `${baseFilename}$$`);
+      return;
+    }
+    parts.pop();
+  }
+  throw new Error(`Cannot find fork for ${file} for renderer ${renderer}`);
+}
+
 function writeConfig(
   renderer,
   rendererInfo,
@@ -44,34 +79,39 @@ function writeConfig(
       }
       ignoredPaths.push(`.*/packages/${otherPath}`);
     });
+  });
+
+  const forks = new Map();
+  addFork(forks, renderer, 'react-reconciler/src/ReactFiberConfig');
+  addFork(forks, serverRenderer, 'react-server/src/ReactServerStreamConfig');
+  addFork(forks, serverRenderer, 'react-server/src/ReactFizzConfig');
+  addFork(forks, flightRenderer, 'react-server/src/ReactFlightServerConfig');
+  addFork(forks, flightRenderer, 'react-client/src/ReactFlightClientConfig');
+  forks.set(
+    'react-devtools-shared/src/config/DevToolsFeatureFlags.default',
+    'react-devtools-feature-flags',
+  );
 
-    if (
-      otherRenderer.shortName !== serverRenderer &&
-      otherRenderer.shortName !== flightRenderer
-    ) {
-      ignoredPaths.push(
-        `.*/packages/.*/forks/.*\\.${otherRenderer.shortName}.js`,
-      );
+  allForks.forEach(fork => {
+    if (!forks.has(fork)) {
+      ignoredPaths.push(`.*/packages/.*/${fork}`);
     }
   });
 
+  let moduleMappings = '';
+  forks.forEach((source, target) => {
+    moduleMappings += `module.name_mapper='${source.slice(
+      source.lastIndexOf('/') + 1,
+    )}' -> '${target}'\n`;
+  });
+
   const config = configTemplate
     .replace(
       '%CI_MAX_WORKERS%\n',
       // On CI, we seem to need to limit workers.
       process.env.CI ? 'server.max_workers=4\n' : '',
     )
-    .replace(
-      '%REACT_RENDERER_FLOW_OPTIONS%',
-      `
-module.name_mapper='ReactFiberConfig$$' -> 'forks/ReactFiberConfig.${renderer}'
-module.name_mapper='ReactServerStreamConfig$$' -> 'forks/ReactServerStreamConfig.${serverRenderer}'
-module.name_mapper='ReactFizzConfig$$' -> 'forks/ReactFizzConfig.${serverRenderer}'
-module.name_mapper='ReactFlightServerConfig$$' -> 'forks/ReactFlightServerConfig.${flightRenderer}'
-module.name_mapper='ReactFlightClientConfig$$' -> 'forks/ReactFlightClientConfig.${flightRenderer}'
-module.name_mapper='react-devtools-feature-flags' -> 'react-devtools-shared/src/config/DevToolsFeatureFlags.default'
-    `.trim(),
-    )
+    .replace('%REACT_RENDERER_FLOW_OPTIONS%', moduleMappings.trim())
     .replace('%REACT_RENDERER_FLOW_IGNORES%', ignoredPaths.join('\n'));
 
   const disclaimer = `

scripts/jest/setupHostConfigs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const nodePath = require('path');
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
 function resolveEntryFork(resolvedEntry, isFBBundle) {
@@ -117,7 +118,20 @@ function mockAllConfigs(rendererInfo) {
     jest.mock(path, () => {
       let idx = path.lastIndexOf('/');
       let forkPath = path.slice(0, idx) + '/forks' + path.slice(idx);
-      return jest.requireActual(`${forkPath}.${rendererInfo.shortName}.js`);
+      let parts = rendererInfo.shortName.split('-');
+      while (parts.length) {
+        try {
+          const candidate = `${forkPath}.${parts.join('-')}.js`;
+          fs.statSync(nodePath.join(process.cwd(), 'packages', candidate));
+          return jest.requireActual(candidate);
+        } catch (error) {
+          // try without a part
+        }
+        parts.pop();
+      }
+      throw new Error(
+        `Expected to find a fork for ${path} but did not find one.`
+      );
     });
   });
 }