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

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 <dan.abramov@me.com>
facebook · Feb 16, 2023 · 189f70e · 189f70e
1 parent fbf3bc3
commit 189f70e
Show file tree

Hide file tree

Showing 30 changed files with 257 additions and 33 deletions.
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/...s/ReactFlightClientHostConfig.dom-edge.js → ...lightClientHostConfig.dom-edge-webpack.js b/...s/ReactFlightClientHostConfig.dom-edge.js → ...lightClientHostConfig.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/...rc/forks/ReactFiberHostConfig.dom-edge.js → .../ReactFiberHostConfig.dom-edge-webpack.js b/...rc/forks/ReactFiberHostConfig.dom-edge.js → .../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/...forks/ReactFlightServerConfig.dom-edge.js → ...actFlightServerConfig.dom-edge-webpack.js b/...forks/ReactFlightServerConfig.dom-edge.js → ...actFlightServerConfig.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/...forks/ReactServerFormatConfig.dom-edge.js → ...actServerFormatConfig.dom-edge-webpack.js b/...forks/ReactServerFormatConfig.dom-edge.js → ...actServerFormatConfig.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/...forks/ReactServerStreamConfig.dom-edge.js → ...actServerStreamConfig.dom-edge-webpack.js b/...forks/ReactServerStreamConfig.dom-edge.js → ...actServerStreamConfig.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,
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ @@
      * @flow
      */
-    export * from './src/ReactFlightDOMClient';
+    export * from './client.browser';