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>
Sebastian Markbåge committed
Feb 16, 2023 at 11:01 UTC
189f70e17b8f5e1e81d6a3ae024b086895bbc0f6
30 files changed
+257
-33
fixtures/flight-browser/index.html
+1
-1
@@ -20,7 +20,7 @@
20
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
21
<script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
22
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
23
- <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.development.js"></script>
23
+ <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js"></script>
24
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
25
<script type="text/babel">
26
let Suspense = React.Suspense;
packages/react-client/src/forks/ReactFlightClientHostConfig.dom-bun.js
+8
-1
@@ -9,4 +9,11 @@
9
10
export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
11
export * from 'react-client/src/ReactFlightClientHostConfigStream';
12
-export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
12
+
13
+export type Response = any;
14
+export opaque type BundlerConfig = mixed;
15
+export opaque type ClientReferenceMetadata = mixed;
16
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
17
+export const resolveClientReference: any = null;
18
+export const preloadModule: any = null;
19
+export const requireModule: any = null;
packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge-webpack.js
renamed
packages/react-client/src/forks/ReactFlightClientHostConfig.dom-node-webpack.js
new
+12
@@ -0,0 +1,12 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
11
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
12
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-edge-webpack.js
renamed
packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-node-webpack.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from 'react-dom-bindings/src/client/ReactDOMHostConfig';
packages/react-server-dom-webpack/client.browser.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from './src/ReactFlightDOMClient';
packages/react-server-dom-webpack/client.edge.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from './src/ReactFlightDOMClient';
packages/react-server-dom-webpack/client.js
+1
-1
@@ -7,4 +7,4 @@
7
* @flow
8
*/
9
10
-export * from './src/ReactFlightDOMClient';
10
+export * from './client.browser';
packages/react-server-dom-webpack/client.node.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from './src/ReactFlightDOMClient';
packages/react-server-dom-webpack/client.node.unbundled.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from './src/ReactFlightDOMClient';
packages/react-server-dom-webpack/npm/client.browser.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-server-dom-webpack-client.browser.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-server-dom-webpack-client.browser.development.js');
7
+}
packages/react-server-dom-webpack/npm/client.edge.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-server-dom-webpack-client.edge.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-server-dom-webpack-client.edge.development.js');
7
+}
packages/react-server-dom-webpack/npm/client.js
+1
-5
@@ -1,7 +1,3 @@
1
'use strict';
2
3
-if (process.env.NODE_ENV === 'production') {
4
- module.exports = require('./cjs/react-server-dom-webpack-client.production.min.js');
5
-} else {
6
- module.exports = require('./cjs/react-server-dom-webpack-client.development.js');
7
-}
3
+module.exports = require('./client.browser');
packages/react-server-dom-webpack/npm/client.node.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-server-dom-webpack-client.node.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-server-dom-webpack-client.node.development.js');
7
+}
packages/react-server-dom-webpack/npm/client.node.unbundled.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-server-dom-webpack-client.node.unbundled.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-server-dom-webpack-client.node.unbundled.development.js');
7
+}
packages/react-server-dom-webpack/npm/server.node.unbundled.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
7
+}
packages/react-server-dom-webpack/package.json
+27
-3
@@ -14,10 +14,15 @@
14
"index.js",
15
"plugin.js",
16
"client.js",
17
+ "client.browser.js",
18
+ "client.edge.js",
19
+ "client.node.js",
20
+ "client.node.unbundled.js",
21
"server.js",
22
"server.browser.js",
23
"server.edge.js",
24
"server.node.js",
25
+ "server.node.unbundled.js",
26
"node-register.js",
27
"cjs/",
28
"umd/",
@@ -26,13 +31,31 @@
31
"exports": {
32
".": "./index.js",
33
"./plugin": "./plugin.js",
29
- "./client": "./client.js",
34
+ "./client": {
35
+ "workerd": "./client.edge.js",
36
+ "edge-light": "./client.edge.js",
37
+ "deno": "./client.edge.js",
38
+ "worker": "./client.edge.js",
39
+ "node": {
40
+ "webpack": "./client.node.js",
41
+ "default": "./client.node.unbundled.js"
42
+ },
43
+ "browser": "./client.browser.js",
44
+ "default": "./client.browser.js"
45
+ },
46
+ "./client.browser": "./client.browser.js",
47
+ "./client.edge": "./client.edge.js",
48
+ "./client.node": "./client.node.js",
49
+ "./client.node.unbundled": "./client.node.unbundled.js",
50
"./server": {
51
"react-server": {
32
- "edge-light": "./server.edge.js",
52
"workerd": "./server.edge.js",
53
+ "edge-light": "./server.edge.js",
54
"deno": "./server.browser.js",
35
- "node": "./server.node.js",
55
+ "node": {
56
+ "webpack": "./server.node.js",
57
+ "default": "./server.node.unbundled.js"
58
+ },
59
"browser": "./server.browser.js"
60
},
61
"default": "./server.js"
@@ -40,6 +63,7 @@
63
"./server.browser": "./server.browser.js",
64
"./server.edge": "./server.edge.js",
65
"./server.node": "./server.node.js",
66
+ "./server.node.unbundled": "./server.node.unbundled.js",
67
"./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
68
"./node-register": "./node-register.js",
69
"./src/*": "./src/*",
packages/react-server-dom-webpack/server.node.unbundled.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from './src/ReactFlightDOMServerNode';
packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+1
-1
@@ -40,7 +40,7 @@ class ClientReferenceDependency extends ModuleDependency {
40
// without the client runtime so it's the first time in the loading sequence
41
// you might want them.
42
const clientImportName = 'react-server-dom-webpack/client';
43
-const clientFileName = require.resolve('../client');
43
+const clientFileName = require.resolve('../client.browser.js');
44
45
type ClientReferenceSearchPath = {
46
directory: string,
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+1
-1
@@ -45,7 +45,7 @@ describe('ReactFlightDOM', () => {
45
use = React.use;
46
Suspense = React.Suspense;
47
ReactDOMClient = require('react-dom/client');
48
- ReactServerDOMWriter = require('react-server-dom-webpack/server.node');
48
+ ReactServerDOMWriter = require('react-server-dom-webpack/server.node.unbundled');
49
ReactServerDOMReader = require('react-server-dom-webpack/client');
50
51
ErrorBoundary = class extends React.Component {
packages/react-server/src/forks/ReactFlightServerConfig.dom-bun.js
+1
-1
@@ -8,4 +8,4 @@
8
*/
9
10
export * from '../ReactFlightServerConfigStream';
11
-export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
11
+export * from '../ReactFlightServerBundlerConfigCustom';
packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-webpack.js
renamed
packages/react-server/src/forks/ReactFlightServerConfig.dom-node-webpack.js
new
+11
@@ -0,0 +1,11 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from '../ReactFlightServerConfigStream';
11
+export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
packages/react-server/src/forks/ReactServerFormatConfig.dom-edge-webpack.js
renamed
packages/react-server/src/forks/ReactServerFormatConfig.dom-node-webpack.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
packages/react-server/src/forks/ReactServerStreamConfig.dom-edge-webpack.js
renamed
packages/react-server/src/forks/ReactServerStreamConfig.dom-node-webpack.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from '../ReactServerStreamConfigNode';
scripts/rollup/bundles.js
+37
-1
@@ -357,6 +357,15 @@ const bundles = [
357
wrapWithModuleBoundaries: false,
358
externals: ['react', 'util', 'async_hooks', 'react-dom'],
359
},
360
+ {
361
+ bundleTypes: [NODE_DEV, NODE_PROD],
362
+ moduleType: RENDERER,
363
+ entry: 'react-server-dom-webpack/server.node.unbundled',
364
+ global: 'ReactServerDOMServer',
365
+ minifyWithProdErrorCodes: false,
366
+ wrapWithModuleBoundaries: false,
367
+ externals: ['react', 'util', 'async_hooks', 'react-dom'],
368
+ },
369
{
370
bundleTypes: [NODE_DEV, NODE_PROD],
371
moduleType: RENDERER,
@@ -371,7 +380,34 @@ const bundles = [
380
{
381
bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
382
moduleType: RENDERER,
374
- entry: 'react-server-dom-webpack/client',
383
+ entry: 'react-server-dom-webpack/client.browser',
384
+ global: 'ReactServerDOMClient',
385
+ minifyWithProdErrorCodes: false,
386
+ wrapWithModuleBoundaries: false,
387
+ externals: ['react'],
388
+ },
389
+ {
390
+ bundleTypes: [NODE_DEV, NODE_PROD],
391
+ moduleType: RENDERER,
392
+ entry: 'react-server-dom-webpack/client.node',
393
+ global: 'ReactServerDOMClient',
394
+ minifyWithProdErrorCodes: false,
395
+ wrapWithModuleBoundaries: false,
396
+ externals: ['react'],
397
+ },
398
+ {
399
+ bundleTypes: [NODE_DEV, NODE_PROD],
400
+ moduleType: RENDERER,
401
+ entry: 'react-server-dom-webpack/client.node.unbundled',
402
+ global: 'ReactServerDOMClient',
403
+ minifyWithProdErrorCodes: false,
404
+ wrapWithModuleBoundaries: false,
405
+ externals: ['react'],
406
+ },
407
+ {
408
+ bundleTypes: [NODE_DEV, NODE_PROD],
409
+ moduleType: RENDERER,
410
+ entry: 'react-server-dom-webpack/client.edge',
411
global: 'ReactServerDOMClient',
412
minifyWithProdErrorCodes: false,
413
wrapWithModuleBoundaries: false,
scripts/shared/inlinedHostConfigs.js
+41
-18
@@ -16,8 +16,8 @@ module.exports = [
16
'react-dom/static.node',
17
'react-dom/server-rendering-stub',
18
'react-dom/unstable_server-external-runtime',
19
- 'react-server-dom-webpack/server.node',
20
- 'react-server-dom-webpack/client',
19
+ 'react-server-dom-webpack/server.node.unbundled',
20
+ 'react-server-dom-webpack/client.node.unbundled',
21
],
22
paths: [
23
'react-dom',
@@ -30,9 +30,9 @@ module.exports = [
30
'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
31
'react-dom/src/server/ReactDOMFizzStaticNode.js',
32
'react-server-dom-webpack',
33
- 'react-server-dom-webpack/client',
33
+ 'react-server-dom-webpack/client.node.unbundled',
34
'react-server-dom-webpack/server',
35
- 'react-server-dom-webpack/server.node',
35
+ 'react-server-dom-webpack/server.node.unbundled',
36
'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/server.node
37
'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
38
'react-devtools',
@@ -50,15 +50,9 @@ module.exports = [
50
entryPoints: ['react-dom', 'react-dom/src/server/ReactDOMFizzServerBun.js'],
51
paths: [
52
'react-dom',
53
- 'react-dom/server',
53
'react-dom/server.bun',
54
'react-dom/src/server/ReactDOMFizzServerBun.js',
55
'react-dom-bindings',
57
- 'react-dom/server.node',
58
- 'react-server-dom-webpack',
59
- 'react-server-dom-webpack/client',
60
- 'react-server-dom-webpack/server',
61
- 'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
56
'shared/ReactDOMSharedInternals',
57
],
58
isFlowTyped: true,
@@ -74,7 +68,7 @@ module.exports = [
68
'react-dom/server-rendering-stub',
69
'react-dom/unstable_server-external-runtime',
70
'react-server-dom-webpack/server.browser',
77
- 'react-server-dom-webpack/client',
71
+ 'react-server-dom-webpack/client.browser',
72
],
73
paths: [
74
'react-dom',
@@ -87,6 +81,7 @@ module.exports = [
81
'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
82
'react-server-dom-webpack',
83
'react-server-dom-webpack/client',
84
+ 'react-server-dom-webpack/client.browser',
85
'react-server-dom-webpack/server.browser',
86
'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/server.browser
87
'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
@@ -100,16 +95,12 @@ module.exports = [
95
isServerSupported: true,
96
},
97
{
103
- shortName: 'dom-edge',
98
+ shortName: 'dom-edge-webpack',
99
entryPoints: [
105
- 'react-dom',
106
- 'react-dom/unstable_testing',
100
'react-dom/src/server/ReactDOMFizzServerEdge.js',
101
'react-dom/static.edge',
109
- 'react-dom/server-rendering-stub',
110
- 'react-dom/unstable_server-external-runtime',
102
'react-server-dom-webpack/server.edge',
112
- 'react-server-dom-webpack/client',
103
+ 'react-server-dom-webpack/client.edge',
104
],
105
paths: [
106
'react-dom',
@@ -121,7 +112,7 @@ module.exports = [
112
'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
113
'react-dom/src/server/ReactDOMFizzStaticEdge.js',
114
'react-server-dom-webpack',
124
- 'react-server-dom-webpack/client',
115
+ 'react-server-dom-webpack/client.edge',
116
'react-server-dom-webpack/server.edge',
117
'react-server-dom-webpack/src/ReactFlightDOMServerEdge.js', // react-server-dom-webpack/server.edge
118
'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
@@ -134,6 +125,38 @@ module.exports = [
125
isFlowTyped: true,
126
isServerSupported: true,
127
},
128
+ {
129
+ shortName: 'dom-node-webpack',
130
+ entryPoints: [
131
+ 'react-server-dom-webpack/server.node',
132
+ 'react-server-dom-webpack/client.node',
133
+ ],
134
+ paths: [
135
+ 'react-dom',
136
+ 'react-dom-bindings',
137
+ 'react-dom/client',
138
+ 'react-dom/server',
139
+ 'react-dom/server.node',
140
+ 'react-dom/static',
141
+ 'react-dom/static.node',
142
+ 'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
143
+ 'react-dom/src/server/ReactDOMFizzStaticNode.js',
144
+ 'react-server-dom-webpack',
145
+ 'react-server-dom-webpack/client.node',
146
+ 'react-server-dom-webpack/server',
147
+ 'react-server-dom-webpack/server.node',
148
+ 'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/server.node
149
+ 'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
150
+ 'react-devtools',
151
+ 'react-devtools-core',
152
+ 'react-devtools-shell',
153
+ 'react-devtools-shared',
154
+ 'react-interactions',
155
+ 'shared/ReactDOMSharedInternals',
156
+ ],
157
+ isFlowTyped: true,
158
+ isServerSupported: true,
159
+ },
160
{
161
shortName: 'dom-legacy',
162
entryPoints: [