Scaffolding for react-dom/unstable_external-server-runtime

Implements a new bundle type for in our build config called
BROWSER_SCRIPT. This is intended for scripts that get delivered straight
to the browser without needing to be processed by a bundler. (And also
doesn't include any extra UMD crap.)

Right now there's only a single use case so I didn't stress about making
it general purpose.

The use case is: a script that loads the Fizz browser runtime, and sets
up a MutationObserver to receive instructions as HTML streams in. This
will be an alternative option to the default Fizz behavior of sending
the runtime down as inline script tags, to accommodate environments
where inline script tags are not allowed.

There's no development version of this bundle because it doesn't contain
any warnings or run any user code.

None of the actual implementation is in this PR; it just sets up the
build infra.

Co-authored-by: Mofei Zhang <[email protected]>

Author: acdlite

packages/react-dom/package.json

@@ -38,6 +38,7 @@
     "server-rendering-stub.js",
     "test-utils.js",
     "unstable_testing.js",
+    "unstable_server-external-runtime.js",
     "cjs/",
     "umd/"
   ],

packages/react-dom/src/server/ReactDOMServerExternalRuntime.js

@@ -0,0 +1,18 @@
+// TODO: Add Flow types
+import {
+  clientRenderBoundary,
+  completeBoundaryWithStyles,
+  completeBoundary,
+  completeSegment,
+} from 'react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSet';
+
+// Intentionally does nothing. Implementation will be added in future PR.
+// eslint-disable-next-line no-unused-vars
+const observer = new MutationObserver(mutations => {
+  // These are only called so I can check what the module output looks like. The
+  // code is unreachable.
+  clientRenderBoundary();
+  completeBoundaryWithStyles();
+  completeBoundary();
+  completeSegment();
+});

packages/shared/ReactVersion.js

@@ -1,16 +1 @@
-/**
- * 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.
- */
-
-// TODO: this is special because it gets imported during build.
-//
-// TODO: 18.0.0 has not been released to NPM;
-// It exists as a placeholder so that DevTools can support work tag changes between releases.
-// When we next publish a release, update the matching TODO in backend/renderer.js
-// TODO: This module is used both by the release scripts and to expose a version
-// at runtime. We should instead inject the version number as part of the build
-// process, and use the ReactVersions.js module as the single source of truth.
-export default '18.2.0';
+export default '18.3.0-next-d14ffea1d0-20221014';

scripts/rollup/build.js

@@ -60,6 +60,7 @@ const {
   RN_FB_DEV,
   RN_FB_PROD,
   RN_FB_PROFILING,
+  BROWSER_SCRIPT,
 } = Bundles.bundleTypes;
 
 const {getFilename} = Bundles;
@@ -224,6 +225,8 @@ function getFormat(bundleType) {
       return `cjs`;
     case NODE_ESM:
       return `es`;
+    case BROWSER_SCRIPT:
+      return `iife`;
   }
 }
 
@@ -247,6 +250,7 @@ function isProductionBundleType(bundleType) {
     case RN_OSS_PROFILING:
     case RN_FB_PROD:
     case RN_FB_PROFILING:
+    case BROWSER_SCRIPT:
       return true;
     default:
       throw new Error(`Unknown type: ${bundleType}`);
@@ -267,6 +271,7 @@ function isProfilingBundleType(bundleType) {
     case RN_OSS_PROD:
     case UMD_DEV:
     case UMD_PROD:
+    case BROWSER_SCRIPT:
       return false;
     case FB_WWW_PROFILING:
     case NODE_PROFILING:
@@ -582,6 +587,7 @@ async function createBundle(bundle, bundleType) {
     },
   };
   const mainOutputPath = Packaging.getBundleOutputPath(
+    bundle,
     bundleType,
     filename,
     packageName
@@ -724,7 +730,8 @@ async function buildEverything() {
       [bundle, RN_OSS_PROFILING],
       [bundle, RN_FB_DEV],
       [bundle, RN_FB_PROD],
-      [bundle, RN_FB_PROFILING]
+      [bundle, RN_FB_PROFILING],
+      [bundle, BROWSER_SCRIPT]
     );
   }
 

scripts/rollup/bundles.js

@@ -25,6 +25,7 @@ const bundleTypes = {
   RN_FB_DEV: 'RN_FB_DEV',
   RN_FB_PROD: 'RN_FB_PROD',
   RN_FB_PROFILING: 'RN_FB_PROFILING',
+  BROWSER_SCRIPT: 'BROWSER_SCRIPT',
 };
 
 const {
@@ -45,6 +46,7 @@ const {
   RN_FB_DEV,
   RN_FB_PROD,
   RN_FB_PROFILING,
+  BROWSER_SCRIPT,
 } = bundleTypes;
 
 const moduleTypes = {
@@ -351,6 +353,18 @@ const bundles = [
     externals: ['react', 'util', 'stream', 'react-dom'],
   },
 
+  /******* React DOM Fizz Server External Runtime *******/
+  {
+    bundleTypes: [BROWSER_SCRIPT],
+    moduleType: RENDERER,
+    entry: 'react-dom/src/server/ReactDOMServerExternalRuntime.js',
+    outputPath: 'unstable_server-external-runtime.js',
+    global: 'ReactDOMServerExternalRuntime',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: [],
+  },
+
   /******* React DOM Server Render Stub *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
@@ -1030,6 +1044,8 @@ function getOriginalFilename(bundle, bundleType) {
     case RN_FB_PROFILING:
     case RN_OSS_PROFILING:
       return `${globalName}-profiling.js`;
+    case BROWSER_SCRIPT:
+      return `${name}.js`;
   }
 }
 

scripts/rollup/packaging.js

@@ -33,6 +33,7 @@ const {
   RN_FB_DEV,
   RN_FB_PROD,
   RN_FB_PROFILING,
+  BROWSER_SCRIPT,
 } = Bundles.bundleTypes;
 
 function getPackageName(name) {
@@ -42,7 +43,7 @@ function getPackageName(name) {
   return name;
 }
 
-function getBundleOutputPath(bundleType, filename, packageName) {
+function getBundleOutputPath(bundle, bundleType, filename, packageName) {
   switch (bundleType) {
     case NODE_ES2015:
       return `build/node_modules/${packageName}/cjs/${filename}`;
@@ -88,6 +89,24 @@ function getBundleOutputPath(bundleType, filename, packageName) {
         default:
           throw new Error('Unknown RN package.');
       }
+    case BROWSER_SCRIPT: {
+      // Bundles that are served as browser scripts need to be able to be sent
+      // straight to the browser with any additional bundling. We shouldn't use
+      // a module to re-export. Depending on how they are served, they also may
+      // not go through package.json module resolution, so we shouldn't rely on
+      // that either. We should consider the output path as part of the public
+      // contract, and explicitly specify its location within the package's
+      // directory structure.
+      const outputPath = bundle.outputPath;
+      if (!outputPath) {
+        throw new Error(
+          'Bundles with type BROWSER_SCRIPT must specific an explicit ' +
+            'output path.'
+        );
+      }
+      console.log(packageName);
+      return `build/node_modules/${packageName}/${outputPath}`;
+    }
     default:
       throw new Error('Unknown bundle type.');
   }

scripts/rollup/wrappers.js

@@ -22,6 +22,7 @@ const {
   RN_FB_DEV,
   RN_FB_PROD,
   RN_FB_PROFILING,
+  BROWSER_SCRIPT,
 } = bundleTypes;
 
 const {RECONCILER} = moduleTypes;
@@ -384,6 +385,12 @@ function wrapBundle(
     }
   }
 
+  if (bundleType === BROWSER_SCRIPT) {
+    // Bundles of type BROWSER_SCRIPT get sent straight to the browser without
+    // additional processing. So we should exclude any extra wrapper comments.
+    return source;
+  }
+
   if (moduleType === RECONCILER) {
     // Standalone reconciler is only used by third-party renderers.
     // It is handled separately.
@@ -395,6 +402,7 @@ function wrapBundle(
     }
     return wrapper(source, globalName, filename, moduleType);
   }
+
   // All the other packages.
   const wrapper = wrappers[bundleType];
   if (typeof wrapper !== 'function') {

scripts/shared/inlinedHostConfigs.js

@@ -15,6 +15,7 @@ module.exports = [
       'react-dom/src/server/ReactDOMFizzServerNode.js',
       'react-dom/static.node',
       'react-dom/server-rendering-stub',
+      'react-dom/src/server/ReactDOMServerExternalRuntime.js',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack',
     ],
@@ -51,6 +52,7 @@ module.exports = [
       'react-dom/src/server/ReactDOMFizzServerBrowser.js',
       'react-dom/static.browser',
       'react-dom/server-rendering-stub',
+      'react-dom/src/server/ReactDOMServerExternalRuntime.js',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack',
     ],