Add Edge Server Builds for workerd / edge-light (#26116)
We currently abuse the browser builds for Web streams derived environments. We already have a special build for Bun but we should also have one for [other "edge" runtimes](https://runtime-keys.proposal.wintercg.org/) so that we can maximally take advantage of the APIs that exist on each platform. In practice, we currently check for a global property called `AsyncLocalStorage` in the server browser builds which we shouldn't really do since browsers likely won't ever have it. Additionally, this should probably move to an import which we can't add to actual browser builds where that will be an invalid import. So it has to be a separate build. That's not done yet in this PR but Vercel will follow Cloudflare's lead here. The `deno` key still points to the browser build since there's no AsyncLocalStorage there but it could use this same or a custom build if support is added.
Sebastian Markbåge committed
Feb 7, 2023 at 15:10 UTC
01a0c4e12c6aa9732d290e13b1452f72d276934d
22 files changed
+761
-7
packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge.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-dom/npm/server.edge.js
new
+18
@@ -0,0 +1,18 @@
1
+'use strict';
2
+
3
+var b;
4
+var l;
5
+if (process.env.NODE_ENV === 'production') {
6
+ b = require('./cjs/react-dom-server.edge.production.min.js');
7
+ l = require('./cjs/react-dom-server-legacy.browser.production.min.js');
8
+} else {
9
+ b = require('./cjs/react-dom-server.edge.development.js');
10
+ l = require('./cjs/react-dom-server-legacy.browser.development.js');
11
+}
12
+
13
+exports.version = b.version;
14
+exports.renderToReadableStream = b.renderToReadableStream;
15
+exports.renderToNodeStream = b.renderToNodeStream;
16
+exports.renderToStaticNodeStream = b.renderToStaticNodeStream;
17
+exports.renderToString = l.renderToString;
18
+exports.renderToStaticMarkup = l.renderToStaticMarkup;
packages/react-dom/npm/static.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-dom-static.edge.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-dom-static.edge.development.js');
7
+}
packages/react-dom/package.json
+8
@@ -31,10 +31,12 @@
31
"profiling.js",
32
"server.js",
33
"server.browser.js",
34
+ "server.edge.js",
35
"server.node.js",
36
"server.bun.js",
37
"static.js",
38
"static.browser.js",
39
+ "static.edge.js",
40
"static.node.js",
41
"server-rendering-stub.js",
42
"test-utils.js",
@@ -47,6 +49,8 @@
49
".": "./index.js",
50
"./client": "./client.js",
51
"./server": {
52
+ "workerd": "./server.edge.js",
53
+ "edge-light": "./server.edge.js",
54
"bun": "./server.bun.js",
55
"deno": "./server.browser.js",
56
"worker": "./server.browser.js",
@@ -54,14 +58,18 @@
58
"default": "./server.node.js"
59
},
60
"./server.browser": "./server.browser.js",
61
+ "./server.edge": "./server.edge.js",
62
"./server.node": "./server.node.js",
63
"./static": {
64
+ "workerd": "./static.edge.js",
65
+ "edge-light": "./static.edge.js",
66
"deno": "./static.browser.js",
67
"worker": "./static.browser.js",
68
"browser": "./static.browser.js",
69
"default": "./static.node.js"
70
},
71
"./static.browser": "./static.browser.js",
72
+ "./static.edge": "./static.edge.js",
73
"./static.node": "./static.node.js",
74
"./server-rendering-stub": "./server-rendering-stub.js",
75
"./profiling": "./profiling.js",
packages/react-dom/server.edge.js
new
+47
@@ -0,0 +1,47 @@
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
+
8
+// This file is only used for tests.
9
+// It lazily loads the implementation so that we get the correct set of host configs.
10
+
11
+import ReactVersion from 'shared/ReactVersion';
12
+export {ReactVersion as version};
13
+
14
+export function renderToReadableStream() {
15
+ return require('./src/server/ReactDOMFizzServerEdge').renderToReadableStream.apply(
16
+ this,
17
+ arguments,
18
+ );
19
+}
20
+
21
+export function renderToNodeStream() {
22
+ return require('./src/server/ReactDOMFizzServerEdge').renderToNodeStream.apply(
23
+ this,
24
+ arguments,
25
+ );
26
+}
27
+
28
+export function renderToStaticNodeStream() {
29
+ return require('./src/server/ReactDOMFizzServerEdge').renderToStaticNodeStream.apply(
30
+ this,
31
+ arguments,
32
+ );
33
+}
34
+
35
+export function renderToString() {
36
+ return require('./src/server/ReactDOMLegacyServerBrowser').renderToString.apply(
37
+ this,
38
+ arguments,
39
+ );
40
+}
41
+
42
+export function renderToStaticMarkup() {
43
+ return require('./src/server/ReactDOMLegacyServerBrowser').renderToStaticMarkup.apply(
44
+ this,
45
+ arguments,
46
+ );
47
+}
packages/react-dom/src/server/ReactDOMFizzServerEdge.js
new
+116
@@ -0,0 +1,116 @@
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
+import type {ReactNodeList} from 'shared/ReactTypes';
11
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
12
+
13
+import ReactVersion from 'shared/ReactVersion';
14
+
15
+import {
16
+ createRequest,
17
+ startWork,
18
+ startFlowing,
19
+ abort,
20
+} from 'react-server/src/ReactFizzServer';
21
+
22
+import {
23
+ createResponseState,
24
+ createRootFormatContext,
25
+} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
26
+
27
+type Options = {
28
+ identifierPrefix?: string,
29
+ namespaceURI?: string,
30
+ nonce?: string,
31
+ bootstrapScriptContent?: string,
32
+ bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
33
+ bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
34
+ progressiveChunkSize?: number,
35
+ signal?: AbortSignal,
36
+ onError?: (error: mixed) => ?string,
37
+ unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
38
+};
39
+
40
+// TODO: Move to sub-classing ReadableStream.
41
+type ReactDOMServerReadableStream = ReadableStream & {
42
+ allReady: Promise<void>,
43
+};
44
+
45
+function renderToReadableStream(
46
+ children: ReactNodeList,
47
+ options?: Options,
48
+): Promise<ReactDOMServerReadableStream> {
49
+ return new Promise((resolve, reject) => {
50
+ let onFatalError;
51
+ let onAllReady;
52
+ const allReady = new Promise((res, rej) => {
53
+ onAllReady = res;
54
+ onFatalError = rej;
55
+ });
56
+
57
+ function onShellReady() {
58
+ const stream: ReactDOMServerReadableStream = (new ReadableStream(
59
+ {
60
+ type: 'bytes',
61
+ pull: (controller): ?Promise<void> => {
62
+ startFlowing(request, controller);
63
+ },
64
+ cancel: (reason): ?Promise<void> => {
65
+ abort(request);
66
+ },
67
+ },
68
+ // $FlowFixMe size() methods are not allowed on byte streams.
69
+ {highWaterMark: 0},
70
+ ): any);
71
+ // TODO: Move to sub-classing ReadableStream.
72
+ stream.allReady = allReady;
73
+ resolve(stream);
74
+ }
75
+ function onShellError(error: mixed) {
76
+ // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
77
+ // However, `allReady` will be rejected by `onFatalError` as well.
78
+ // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
79
+ allReady.catch(() => {});
80
+ reject(error);
81
+ }
82
+ const request = createRequest(
83
+ children,
84
+ createResponseState(
85
+ options ? options.identifierPrefix : undefined,
86
+ options ? options.nonce : undefined,
87
+ options ? options.bootstrapScriptContent : undefined,
88
+ options ? options.bootstrapScripts : undefined,
89
+ options ? options.bootstrapModules : undefined,
90
+ options ? options.unstable_externalRuntimeSrc : undefined,
91
+ ),
92
+ createRootFormatContext(options ? options.namespaceURI : undefined),
93
+ options ? options.progressiveChunkSize : undefined,
94
+ options ? options.onError : undefined,
95
+ onAllReady,
96
+ onShellReady,
97
+ onShellError,
98
+ onFatalError,
99
+ );
100
+ if (options && options.signal) {
101
+ const signal = options.signal;
102
+ if (signal.aborted) {
103
+ abort(request, (signal: any).reason);
104
+ } else {
105
+ const listener = () => {
106
+ abort(request, (signal: any).reason);
107
+ signal.removeEventListener('abort', listener);
108
+ };
109
+ signal.addEventListener('abort', listener);
110
+ }
111
+ }
112
+ startWork(request);
113
+ });
114
+}
115
+
116
+export {renderToReadableStream, ReactVersion as version};
packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
new
+101
@@ -0,0 +1,101 @@
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
+import type {ReactNodeList} from 'shared/ReactTypes';
11
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
12
+
13
+import ReactVersion from 'shared/ReactVersion';
14
+
15
+import {
16
+ createRequest,
17
+ startWork,
18
+ startFlowing,
19
+ abort,
20
+} from 'react-server/src/ReactFizzServer';
21
+
22
+import {
23
+ createResponseState,
24
+ createRootFormatContext,
25
+} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
26
+
27
+type Options = {
28
+ identifierPrefix?: string,
29
+ namespaceURI?: string,
30
+ bootstrapScriptContent?: string,
31
+ bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
32
+ bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
33
+ progressiveChunkSize?: number,
34
+ signal?: AbortSignal,
35
+ onError?: (error: mixed) => ?string,
36
+ unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
37
+};
38
+
39
+type StaticResult = {
40
+ prelude: ReadableStream,
41
+};
42
+
43
+function prerender(
44
+ children: ReactNodeList,
45
+ options?: Options,
46
+): Promise<StaticResult> {
47
+ return new Promise((resolve, reject) => {
48
+ const onFatalError = reject;
49
+
50
+ function onAllReady() {
51
+ const stream = new ReadableStream(
52
+ {
53
+ type: 'bytes',
54
+ pull: (controller): ?Promise<void> => {
55
+ startFlowing(request, controller);
56
+ },
57
+ },
58
+ // $FlowFixMe size() methods are not allowed on byte streams.
59
+ {highWaterMark: 0},
60
+ );
61
+
62
+ const result = {
63
+ prelude: stream,
64
+ };
65
+ resolve(result);
66
+ }
67
+ const request = createRequest(
68
+ children,
69
+ createResponseState(
70
+ options ? options.identifierPrefix : undefined,
71
+ undefined,
72
+ options ? options.bootstrapScriptContent : undefined,
73
+ options ? options.bootstrapScripts : undefined,
74
+ options ? options.bootstrapModules : undefined,
75
+ options ? options.unstable_externalRuntimeSrc : undefined,
76
+ ),
77
+ createRootFormatContext(options ? options.namespaceURI : undefined),
78
+ options ? options.progressiveChunkSize : undefined,
79
+ options ? options.onError : undefined,
80
+ onAllReady,
81
+ undefined,
82
+ undefined,
83
+ onFatalError,
84
+ );
85
+ if (options && options.signal) {
86
+ const signal = options.signal;
87
+ if (signal.aborted) {
88
+ abort(request, (signal: any).reason);
89
+ } else {
90
+ const listener = () => {
91
+ abort(request, (signal: any).reason);
92
+ signal.removeEventListener('abort', listener);
93
+ };
94
+ signal.addEventListener('abort', listener);
95
+ }
96
+ }
97
+ startWork(request);
98
+ });
99
+}
100
+
101
+export {prerender, ReactVersion as version};
packages/react-dom/static.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 {prerender, version} from './src/server/ReactDOMFizzStaticEdge';
packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-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 'react-dom-bindings/src/client/ReactDOMHostConfig';
packages/react-server-dom-webpack/npm/server.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-server.edge.production.min.js');
5
+} else {
6
+ module.exports = require('./cjs/react-server-dom-webpack-server.edge.development.js');
7
+}
packages/react-server-dom-webpack/package.json
+6
-1
@@ -16,6 +16,7 @@
16
"client.js",
17
"server.js",
18
"server.browser.js",
19
+ "server.edge.js",
20
"server.node.js",
21
"node-register.js",
22
"cjs/",
@@ -28,13 +29,17 @@
29
"./client": "./client.js",
30
"./server": {
31
"react-server": {
32
+ "edge-light": "./server.edge.js",
33
+ "workerd": "./server.edge.js",
34
+ "deno": "./server.browser.js",
35
"node": "./server.node.js",
36
"browser": "./server.browser.js"
37
},
38
"default": "./server.js"
39
},
36
- "./server.node": "./server.node.js",
40
"./server.browser": "./server.browser.js",
41
+ "./server.edge": "./server.edge.js",
42
+ "./server.node": "./server.node.js",
43
"./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
44
"./node-register": "./node-register.js",
45
"./src/*": "./src/*",
packages/react-server-dom-webpack/server.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/ReactFlightDOMServerEdge';
packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
new
+69
@@ -0,0 +1,69 @@
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
+import type {ReactModel} from 'react-server/src/ReactFlightServer';
11
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
12
+import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
13
+
14
+import {
15
+ createRequest,
16
+ startWork,
17
+ startFlowing,
18
+ abort,
19
+} from 'react-server/src/ReactFlightServer';
20
+
21
+type Options = {
22
+ identifierPrefix?: string,
23
+ signal?: AbortSignal,
24
+ context?: Array<[string, ServerContextJSONValue]>,
25
+ onError?: (error: mixed) => void,
26
+};
27
+
28
+function renderToReadableStream(
29
+ model: ReactModel,
30
+ webpackMap: BundlerConfig,
31
+ options?: Options,
32
+): ReadableStream {
33
+ const request = createRequest(
34
+ model,
35
+ webpackMap,
36
+ options ? options.onError : undefined,
37
+ options ? options.context : undefined,
38
+ options ? options.identifierPrefix : undefined,
39
+ );
40
+ if (options && options.signal) {
41
+ const signal = options.signal;
42
+ if (signal.aborted) {
43
+ abort(request, (signal: any).reason);
44
+ } else {
45
+ const listener = () => {
46
+ abort(request, (signal: any).reason);
47
+ signal.removeEventListener('abort', listener);
48
+ };
49
+ signal.addEventListener('abort', listener);
50
+ }
51
+ }
52
+ const stream = new ReadableStream(
53
+ {
54
+ type: 'bytes',
55
+ start: (controller): ?Promise<void> => {
56
+ startWork(request);
57
+ },
58
+ pull: (controller): ?Promise<void> => {
59
+ startFlowing(request, controller);
60
+ },
61
+ cancel: (reason): ?Promise<void> => {},
62
+ },
63
+ // $FlowFixMe size() methods are not allowed on byte streams.
64
+ {highWaterMark: 0},
65
+ );
66
+ return stream;
67
+}
68
+
69
+export {renderToReadableStream};
packages/react-server/src/ReactServerStreamConfigBrowser.js
+2
-4
@@ -21,11 +21,9 @@ export function flushBuffered(destination: Destination) {
21
// transform streams. https://github.com/whatwg/streams/issues/960
22
}
23
24
-// For now we support AsyncLocalStorage as a global for the "browser" builds
25
-// TODO: Move this to some special WinterCG build.
26
-export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
24
+export const supportsRequestStorage = false;
25
export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
28
- supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
26
+ (null: any);
27
28
const VIEW_SIZE = 512;
29
let currentView = null;
packages/react-server/src/ReactServerStreamConfigEdge.js
new
+161
@@ -0,0 +1,161 @@
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 type Destination = ReadableStreamController;
11
+
12
+export type PrecomputedChunk = Uint8Array;
13
+export opaque type Chunk = Uint8Array;
14
+
15
+export function scheduleWork(callback: () => void) {
16
+ callback();
17
+}
18
+
19
+export function flushBuffered(destination: Destination) {
20
+ // WHATWG Streams do not yet have a way to flush the underlying
21
+ // transform streams. https://github.com/whatwg/streams/issues/960
22
+}
23
+
24
+// For now, we get this from the global scope, but this will likely move to a module.
25
+export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
26
+export const requestStorage: AsyncLocalStorage<Map<Function, mixed>> =
27
+ supportsRequestStorage ? new AsyncLocalStorage() : (null: any);
28
+
29
+const VIEW_SIZE = 512;
30
+let currentView = null;
31
+let writtenBytes = 0;
32
+
33
+export function beginWriting(destination: Destination) {
34
+ currentView = new Uint8Array(VIEW_SIZE);
35
+ writtenBytes = 0;
36
+}
37
+
38
+export function writeChunk(
39
+ destination: Destination,
40
+ chunk: PrecomputedChunk | Chunk,
41
+): void {
42
+ if (chunk.length === 0) {
43
+ return;
44
+ }
45
+
46
+ if (chunk.length > VIEW_SIZE) {
47
+ if (__DEV__) {
48
+ if (precomputedChunkSet.has(chunk)) {
49
+ console.error(
50
+ 'A large precomputed chunk was passed to writeChunk without being copied.' +
51
+ ' Large chunks get enqueued directly and are not copied. This is incompatible with precomputed chunks because you cannot enqueue the same precomputed chunk twice.' +
52
+ ' Use "cloneChunk" to make a copy of this large precomputed chunk before writing it. This is a bug in React.',
53
+ );
54
+ }
55
+ }
56
+ // this chunk may overflow a single view which implies it was not
57
+ // one that is cached by the streaming renderer. We will enqueu
58
+ // it directly and expect it is not re-used
59
+ if (writtenBytes > 0) {
60
+ destination.enqueue(
61
+ new Uint8Array(
62
+ ((currentView: any): Uint8Array).buffer,
63
+ 0,
64
+ writtenBytes,
65
+ ),
66
+ );
67
+ currentView = new Uint8Array(VIEW_SIZE);
68
+ writtenBytes = 0;
69
+ }
70
+ destination.enqueue(chunk);
71
+ return;
72
+ }
73
+
74
+ let bytesToWrite = chunk;
75
+ const allowableBytes = ((currentView: any): Uint8Array).length - writtenBytes;
76
+ if (allowableBytes < bytesToWrite.length) {
77
+ // this chunk would overflow the current view. We enqueue a full view
78
+ // and start a new view with the remaining chunk
79
+ if (allowableBytes === 0) {
80
+ // the current view is already full, send it
81
+ destination.enqueue(currentView);
82
+ } else {
83
+ // fill up the current view and apply the remaining chunk bytes
84
+ // to a new view.
85
+ ((currentView: any): Uint8Array).set(
86
+ bytesToWrite.subarray(0, allowableBytes),
87
+ writtenBytes,
88
+ );
89
+ // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
90
+ destination.enqueue(currentView);
91
+ bytesToWrite = bytesToWrite.subarray(allowableBytes);
92
+ }
93
+ currentView = new Uint8Array(VIEW_SIZE);
94
+ writtenBytes = 0;
95
+ }
96
+ ((currentView: any): Uint8Array).set(bytesToWrite, writtenBytes);
97
+ writtenBytes += bytesToWrite.length;
98
+}
99
+
100
+export function writeChunkAndReturn(
101
+ destination: Destination,
102
+ chunk: PrecomputedChunk | Chunk,
103
+): boolean {
104
+ writeChunk(destination, chunk);
105
+ // in web streams there is no backpressure so we can alwas write more
106
+ return true;
107
+}
108
+
109
+export function completeWriting(destination: Destination) {
110
+ if (currentView && writtenBytes > 0) {
111
+ destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
112
+ currentView = null;
113
+ writtenBytes = 0;
114
+ }
115
+}
116
+
117
+export function close(destination: Destination) {
118
+ destination.close();
119
+}
120
+
121
+const textEncoder = new TextEncoder();
122
+
123
+export function stringToChunk(content: string): Chunk {
124
+ return textEncoder.encode(content);
125
+}
126
+
127
+const precomputedChunkSet: Set<Chunk> = __DEV__ ? new Set() : (null: any);
128
+
129
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
130
+ const precomputedChunk = textEncoder.encode(content);
131
+
132
+ if (__DEV__) {
133
+ precomputedChunkSet.add(precomputedChunk);
134
+ }
135
+
136
+ return precomputedChunk;
137
+}
138
+
139
+export function clonePrecomputedChunk(
140
+ precomputedChunk: PrecomputedChunk,
141
+): PrecomputedChunk {
142
+ return precomputedChunk.length > VIEW_SIZE
143
+ ? precomputedChunk.slice()
144
+ : precomputedChunk;
145
+}
146
+
147
+export function closeWithError(destination: Destination, error: mixed): void {
148
+ // $FlowFixMe[method-unbinding]
149
+ if (typeof destination.error === 'function') {
150
+ // $FlowFixMe: This is an Error object or the destination accepts other types.
151
+ destination.error(error);
152
+ } else {
153
+ // Earlier implementations doesn't support this method. In that environment you're
154
+ // supposed to throw from a promise returned but we don't return a promise in our
155
+ // approach. We could fork this implementation but this is environment is an edge
156
+ // case to begin with. It's even less common to run this in an older environment.
157
+ // Even then, this is not where errors are supposed to happen and they get reported
158
+ // to a global callback in addition to this anyway. So it's fine just to close this.
159
+ destination.close();
160
+ }
161
+}
packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.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.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.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 '../ReactServerStreamConfigEdge';
packages/react/src/__tests__/ReactFetch-test.js
-2
@@ -17,8 +17,6 @@ global.TextDecoder = require('util').TextDecoder;
17
global.Headers = require('node-fetch').Headers;
18
global.Request = require('node-fetch').Request;
19
global.Response = require('node-fetch').Response;
20
-// Patch for Browser environments to be able to polyfill AsyncLocalStorage
21
-global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
20
21
let fetchCount = 0;
22
async function fetchMock(resource, options) {
packages/react/src/__tests__/ReactFetchEdge-test.js
new
+80
@@ -0,0 +1,80 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its 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
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+// Polyfills for test environment
13
+global.ReadableStream =
14
+ require('web-streams-polyfill/ponyfill/es6').ReadableStream;
15
+global.TextEncoder = require('util').TextEncoder;
16
+global.TextDecoder = require('util').TextDecoder;
17
+global.Headers = require('node-fetch').Headers;
18
+global.Request = require('node-fetch').Request;
19
+global.Response = require('node-fetch').Response;
20
+// Patch for Edge environments for global scope
21
+global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
22
+
23
+let fetchCount = 0;
24
+async function fetchMock(resource, options) {
25
+ fetchCount++;
26
+ const request = new Request(resource, options);
27
+ return new Response(
28
+ request.method +
29
+ ' ' +
30
+ request.url +
31
+ ' ' +
32
+ JSON.stringify(Array.from(request.headers.entries())),
33
+ );
34
+}
35
+
36
+let React;
37
+let ReactServerDOMServer;
38
+let ReactServerDOMClient;
39
+let use;
40
+
41
+describe('ReactFetch', () => {
42
+ beforeEach(() => {
43
+ jest.resetModules();
44
+ fetchCount = 0;
45
+ global.fetch = fetchMock;
46
+
47
+ if (gate(flags => !flags.www)) {
48
+ jest.mock('react', () => require('react/react.shared-subset'));
49
+ }
50
+
51
+ React = require('react');
52
+ ReactServerDOMServer = require('react-server-dom-webpack/server.edge');
53
+ ReactServerDOMClient = require('react-server-dom-webpack/client');
54
+ use = React.use;
55
+ });
56
+
57
+ async function render(Component) {
58
+ const stream = ReactServerDOMServer.renderToReadableStream(<Component />);
59
+ return ReactServerDOMClient.createFromReadableStream(stream);
60
+ }
61
+
62
+ // @gate enableFetchInstrumentation && enableCache
63
+ it('can dedupe fetches separately in interleaved renders', async () => {
64
+ async function getData() {
65
+ const r1 = await fetch('hi');
66
+ const t1 = await r1.text();
67
+ const r2 = await fetch('hi');
68
+ const t2 = await r2.text();
69
+ return t1 + ' ' + t2;
70
+ }
71
+ function Component() {
72
+ return use(getData());
73
+ }
74
+ const render1 = render(Component);
75
+ const render2 = render(Component);
76
+ expect(await render1).toMatchInlineSnapshot(`"GET hi [] GET hi []"`);
77
+ expect(await render2).toMatchInlineSnapshot(`"GET hi [] GET hi []"`);
78
+ expect(fetchCount).toBe(2);
79
+ });
80
+});
scripts/rollup/bundles.js
+31
@@ -258,6 +258,19 @@ const bundles = [
258
externals: ['react', 'react-dom'],
259
},
260
261
+ /******* React DOM Fizz Server Edge *******/
262
+ {
263
+ bundleTypes: [NODE_DEV, NODE_PROD],
264
+ moduleType: RENDERER,
265
+ entry: 'react-dom/src/server/ReactDOMFizzServerEdge.js',
266
+ name: 'react-dom-server.edge', // 'node_modules/react/*.js',
267
+
268
+ global: 'ReactDOMServer',
269
+ minifyWithProdErrorCodes: false,
270
+ wrapWithModuleBoundaries: false,
271
+ externals: ['react', 'react-dom'],
272
+ },
273
+
274
/******* React DOM Fizz Server Bun *******/
275
{
276
bundleTypes: [BUN_DEV, BUN_PROD],
@@ -291,6 +304,15 @@ const bundles = [
304
wrapWithModuleBoundaries: false,
305
externals: ['react', 'util', 'async_hooks', 'stream', 'react-dom'],
306
},
307
+ {
308
+ bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
309
+ moduleType: RENDERER,
310
+ entry: 'react-dom/static.edge',
311
+ global: 'ReactDOMStatic',
312
+ minifyWithProdErrorCodes: true,
313
+ wrapWithModuleBoundaries: false,
314
+ externals: ['react', 'react-dom'],
315
+ },
316
317
/******* React DOM Fizz Server External Runtime *******/
318
{
@@ -335,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.edge',
364
+ global: 'ReactServerDOMServer',
365
+ minifyWithProdErrorCodes: false,
366
+ wrapWithModuleBoundaries: false,
367
+ externals: ['react', 'util', 'async_hooks', 'react-dom'],
368
+ },
369
370
/******* React Server DOM Webpack Client *******/
371
{
scripts/shared/inlinedHostConfigs.js
+35
@@ -99,6 +99,41 @@ module.exports = [
99
isFlowTyped: true,
100
isServerSupported: true,
101
},
102
+ {
103
+ shortName: 'dom-edge',
104
+ entryPoints: [
105
+ 'react-dom',
106
+ 'react-dom/unstable_testing',
107
+ 'react-dom/src/server/ReactDOMFizzServerEdge.js',
108
+ 'react-dom/static.edge',
109
+ 'react-dom/server-rendering-stub',
110
+ 'react-dom/unstable_server-external-runtime',
111
+ 'react-server-dom-webpack/server.edge',
112
+ 'react-server-dom-webpack/client',
113
+ ],
114
+ paths: [
115
+ 'react-dom',
116
+ 'react-dom-bindings',
117
+ 'react-dom/client',
118
+ 'react-dom/server.edge',
119
+ 'react-dom/static.edge',
120
+ 'react-dom/unstable_testing',
121
+ 'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
122
+ 'react-dom/src/server/ReactDOMFizzStaticEdge.js',
123
+ 'react-server-dom-webpack',
124
+ 'react-server-dom-webpack/client',
125
+ 'react-server-dom-webpack/server.edge',
126
+ 'react-server-dom-webpack/src/ReactFlightDOMServerEdge.js', // react-server-dom-webpack/server.edge
127
+ 'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
128
+ 'react-devtools',
129
+ 'react-devtools-core',
130
+ 'react-devtools-shell',
131
+ 'react-devtools-shared',
132
+ 'shared/ReactDOMSharedInternals',
133
+ ],
134
+ isFlowTyped: true,
135
+ isServerSupported: true,
136
+ },
137
{
138
shortName: 'dom-legacy',
139
entryPoints: [