Create a bunch of custom webpack vs unbundled node bundles (#26172)

sebmarkbage · gaearon · web-flow · commit 189f70e17b8f · 2023-02-16T11:01:52.000-05:00
We currently have an awkward set up because the server can be used in
two ways. Either you can have the server code prebundled using Webpack
(what Next.js does in practice) or you can use an unbundled Node.js
server (what the reference implementation does).

The `/client` part of RSC is actually also available on the server when
it's used as a consumer for SSR. This should also be specialized
depending on if that server is Node or Edge and if it's bundled or
unbundled.

Currently we still assume Edge will always be bundled since we don't
have an interceptor for modules there.

I don't think we'll want to support this many combinations of setups for
every bundler but this might be ok for the reference implementation.

This PR doesn't actually change anything yet. It just updates the
plumbing and the entry points that are built and exposed. In follow ups
I'll fork the implementation and add more features.

---------

Co-authored-by: dan &lt;dan.abramov@me.com&gt;
diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
@@ -20,7 +20,7 @@ <h1>Flight Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
     <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let Suspense = React.Suspense;
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js
@@ -9,4 +9,11 @@
 
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
-export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+
+export type Response = any;
+export opaque type BundlerConfig = mixed;
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference: any = null;
+export const preloadModule: any = null;
+export const requireModule: any = null;
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js
@@ -0,0 +1,12 @@
+/**
+ * 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/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge-webpack.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge-webpack.js
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-node-webpack.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-node-webpack.js
@@ -0,0 +1,10 @@
+/**
+ * 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-dom-bindings/src/client/ReactDOMHostConfig';
diff --git a/packages/react-server-dom-webpack/client.browser.js b/packages/react-server-dom-webpack/client.browser.js
@@ -0,0 +1,10 @@
+/**
+ * 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 './src/ReactFlightDOMClient';
diff --git a/packages/react-server-dom-webpack/client.edge.js b/packages/react-server-dom-webpack/client.edge.js
@@ -0,0 +1,10 @@
+/**
+ * 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 './src/ReactFlightDOMClient';
diff --git a/packages/react-server-dom-webpack/client.js b/packages/react-server-dom-webpack/client.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClient';
+export * from './client.browser';
diff --git a/packages/react-server-dom-webpack/client.node.js b/packages/react-server-dom-webpack/client.node.js
@@ -0,0 +1,10 @@
+/**
+ * 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 './src/ReactFlightDOMClient';
diff --git a/packages/react-server-dom-webpack/client.node.unbundled.js b/packages/react-server-dom-webpack/client.node.unbundled.js
@@ -0,0 +1,10 @@
+/**
+ * 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 './src/ReactFlightDOMClient';
diff --git a/packages/react-server-dom-webpack/npm/client.browser.js b/packages/react-server-dom-webpack/npm/client.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.browser.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/client.edge.js b/packages/react-server-dom-webpack/npm/client.edge.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.edge.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.edge.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/client.js b/packages/react-server-dom-webpack/npm/client.js
@@ -1,7 +1,3 @@
 'use strict';
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-client.production.min.js');
-} else {
-  module.exports = require('./cjs/react-server-dom-webpack-client.development.js');
-}
+module.exports = require('./client.browser');
diff --git a/packages/react-server-dom-webpack/npm/client.node.js b/packages/react-server-dom-webpack/npm/client.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/client.node.unbundled.js b/packages/react-server-dom-webpack/npm/client.node.unbundled.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.unbundled.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-client.node.unbundled.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/server.node.unbundled.js b/packages/react-server-dom-webpack/npm/server.node.unbundled.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+}
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
@@ -14,10 +14,15 @@
     "index.js",
     "plugin.js",
     "client.js",
+    "client.browser.js",
+    "client.edge.js",
+    "client.node.js",
+    "client.node.unbundled.js",
     "server.js",
     "server.browser.js",
     "server.edge.js",
     "server.node.js",
+    "server.node.unbundled.js",
     "node-register.js",
     "cjs/",
     "umd/",
@@ -26,20 +31,39 @@
   "exports": {
     ".": "./index.js",
     "./plugin": "./plugin.js",
-    "./client": "./client.js",
+    "./client": {
+      "workerd": "./client.edge.js",
+      "edge-light": "./client.edge.js",
+      "deno": "./client.edge.js",
+      "worker": "./client.edge.js",
+      "node": {
+        "webpack": "./client.node.js",
+        "default": "./client.node.unbundled.js"
+      },
+      "browser": "./client.browser.js",
+      "default": "./client.browser.js"
+    },
+    "./client.browser": "./client.browser.js",
+    "./client.edge": "./client.edge.js",
+    "./client.node": "./client.node.js",
+    "./client.node.unbundled": "./client.node.unbundled.js",
     "./server": {
       "react-server": {
-        "edge-light": "./server.edge.js",
         "workerd": "./server.edge.js",
+        "edge-light": "./server.edge.js",
         "deno": "./server.browser.js",
-        "node": "./server.node.js",
+        "node": {
+          "webpack": "./server.node.js",
+          "default": "./server.node.unbundled.js"
+        },
         "browser": "./server.browser.js"
       },
       "default": "./server.js"
     },
     "./server.browser": "./server.browser.js",
     "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
+    "./server.node.unbundled": "./server.node.unbundled.js",
     "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
     "./node-register": "./node-register.js",
     "./src/*": "./src/*",
diff --git a/packages/react-server-dom-webpack/server.node.unbundled.js b/packages/react-server-dom-webpack/server.node.unbundled.js
@@ -0,0 +1,10 @@
+/**
+ * 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 './src/ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -40,7 +40,7 @@ class ClientReferenceDependency extends ModuleDependency {
 // without the client runtime so it's the first time in the loading sequence
 // you might want them.
 const clientImportName = 'react-server-dom-webpack/client';
-const clientFileName = require.resolve('../client');
+const clientFileName = require.resolve('../client.browser.js');
 
 type ClientReferenceSearchPath = {
   directory: string,
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -45,7 +45,7 @@ describe('ReactFlightDOM', () => {
     use = React.use;
     Suspense = React.Suspense;
     ReactDOMClient = require('react-dom/client');
-    ReactServerDOMWriter = require('react-server-dom-webpack/server.node');
+    ReactServerDOMWriter = require('react-server-dom-webpack/server.node.unbundled');
     ReactServerDOMReader = require('react-server-dom-webpack/client');
 
     ErrorBoundary = class extends React.Component {
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
@@ -8,4 +8,4 @@
  */
 
 export * from '../ReactFlightServerConfigStream';
-export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from '../ReactFlightServerBundlerConfigCustom';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
@@ -0,0 +1,11 @@
+/**
+ * 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 '../ReactFlightServerConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-edge-webpack.js
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-node-webpack.js
@@ -0,0 +1,10 @@
+/**
+ * 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-dom-bindings/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge-webpack.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-edge-webpack.js
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-webpack.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-node-webpack.js
@@ -0,0 +1,10 @@
+/**
+ * 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 '../ReactServerStreamConfigNode';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
@@ -357,6 +357,15 @@ const bundles = [
     wrapWithModuleBoundaries: false,
     externals: ['react', 'util', 'async_hooks', 'react-dom'],
   },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/server.node.unbundled',
+    global: 'ReactServerDOMServer',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'util', 'async_hooks', 'react-dom'],
+  },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
@@ -371,7 +380,34 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-webpack/client',
+    entry: 'react-server-dom-webpack/client.browser',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/client.node',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/client.node.unbundled',
+    global: 'ReactServerDOMClient',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-webpack/client.edge',
     global: 'ReactServerDOMClient',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
