Skip to content

Commit 01a0c4e

Browse files
sebmarkbagesebmarkbage
authored
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.
1 parent f0cf832 commit 01a0c4e

22 files changed

+761
-7
lines changed

‎packages/react-client/src/forks/ReactFlightClientHostConfig.dom-edge.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,12 @@
3131
"profiling.js",
3232
"server.js",
3333
"server.browser.js",
34+
"server.edge.js",
3435
"server.node.js",
3536
"server.bun.js",
3637
"static.js",
3738
"static.browser.js",
39+
"static.edge.js",
3840
"static.node.js",
3941
"server-rendering-stub.js",
4042
"test-utils.js",
@@ -47,21 +49,27 @@
4749
".": "./index.js",
4850
"./client": "./client.js",
4951
"./server": {
52+
"workerd": "./server.edge.js",
53+
"edge-light": "./server.edge.js",
5054
"bun": "./server.bun.js",
5155
"deno": "./server.browser.js",
5256
"worker": "./server.browser.js",
5357
"browser": "./server.browser.js",
5458
"default": "./server.node.js"
5559
},
5660
"./server.browser": "./server.browser.js",
61+
"./server.edge": "./server.edge.js",
5762
"./server.node": "./server.node.js",
5863
"./static": {
64+
"workerd": "./static.edge.js",
65+
"edge-light": "./static.edge.js",
5966
"deno": "./static.browser.js",
6067
"worker": "./static.browser.js",
6168
"browser": "./static.browser.js",
6269
"default": "./static.node.js"
6370
},
6471
"./static.browser": "./static.browser.js",
72+
"./static.edge": "./static.edge.js",
6573
"./static.node": "./static.node.js",
6674
"./server-rendering-stub": "./server-rendering-stub.js",
6775
"./profiling": "./profiling.js",

‎packages/react-dom/server.edge.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
}

0 commit comments

Comments
 (0)