Add new package with renderToMarkup export (#30105)
Name of the package is tbd (straw: `react-html`). It's a new package separate from `react-dom` though and can be used as a standalone package - e.g. also from a React Native app. ```js import {renderToMarkup} from '...'; const html = await renderToMarkup(<Component />); ``` The idea is that this is a helper for rendering HTML that is not intended to be hydrated. It's primarily intended to support a subset of HTML that can be used as embedding and not served as HTML documents from HTTP. For example as e-mails or in RSS/Atom feeds or other distributions. It's a successor to `renderToStaticMarkup`. A few differences: - This doesn't support "Client Components". It can only use the Server Components subset. No useEffect, no useState etc. since it will never be hydrated. Use of those are errors. - You also can't pass Client References so you can't use components marked with `"use client"`. - Unlike `renderToStaticMarkup` this does support async so you can suspend and use data from these components. - Unlike `renderToReadableStream` this does not support streaming or Suspense boundaries and any error rejects the promise. Since there's no feasible way to "client render" or patch up the document. - Form Actions are not supported since in an embedded environment there's no place to post back to across versions. You can render plain forms with fixed URLs though. - You can't use any resource preloading like `preload()` from `react-dom`. ## Implementation This first version in this PR only supports Server Components since that's the thing that doesn't have an existing API. Might add a Client Components version later that errors. We don't want to maintain a completely separate implementation for this use case so this uses the `dom-legacy` build dimension to wire up a build that encapsulates a Flight Server -> Flight Client -> Fizz stream to render Server Components that then get SSR:ed. There's no problem to use a Flight Client in a Server Component environment since it's already supported for Server-to-Server. Both of these use a bundler config that just errors for Client References though since we don't need any bundling integration and this is just a standalone package. Running Fizz in a Server Component environment is a problem though because it depends on "react" and it needs the client version. Therefore, for this build we embed the client version of "react" shared internals into the build. It doesn't need anything to be able to use those APIs since you can't call the client APIs anyway. One unfortunate thing though is that since Flight currently needs to go to binary and back, we need TextEncoder/TextDecoder to be available but this shouldn't really be necessary. Also since we use the legacy stream config, large strings that use byteLengthOfChunk errors atm. This needs to be fixed before shipping. I'm not sure what would be the best layering though that isn't unnecessarily burdensome to maintain. Maybe some kind of pass-through protocol that would also be useful in general - e.g. when Fizz and Flight are in the same process. --------- Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Sebastian Markbåge committed
Jun 27, 2024 at 18:09 UTC
ffec9ec5b5c846f61d7b40e92f138e2a7b34f273
16 files changed
+627
-20
packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
-1
@@ -11,7 +11,6 @@ export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
11
export * from 'react-client/src/ReactClientConsoleConfigPlain';
12
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
13
14
-export type Response = any;
14
export opaque type ModuleLoading = mixed;
15
export opaque type SSRModuleMap = mixed;
16
export opaque type ServerManifest = mixed;
packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
+77
-15
@@ -7,20 +7,82 @@
7
* @flow
8
*/
9
10
-export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
11
-export * from 'react-client/src/ReactClientConsoleConfigBrowser';
12
-export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
13
-
14
-export type Response = any;
15
-export opaque type ModuleLoading = mixed;
16
-export opaque type SSRModuleMap = mixed;
17
-export opaque type ServerManifest = mixed;
10
+import type {Thenable} from 'shared/ReactTypes';
11
+
12
+export * from 'react-html/src/ReactHTMLLegacyClientStreamConfig.js';
13
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
14
+
15
+export type ModuleLoading = null;
16
+export type SSRModuleMap = null;
17
+export opaque type ServerManifest = null;
18
export opaque type ServerReferenceId = string;
19
-export opaque type ClientReferenceMetadata = mixed;
20
-export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
21
-export const resolveClientReference: any = null;
22
-export const resolveServerReference: any = null;
23
-export const preloadModule: any = null;
24
-export const requireModule: any = null;
25
-export const prepareDestinationForModule: any = null;
19
+export opaque type ClientReferenceMetadata = null;
20
+export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars
21
+
22
+export function prepareDestinationForModule(
23
+ moduleLoading: ModuleLoading,
24
+ nonce: ?string,
25
+ metadata: ClientReferenceMetadata,
26
+) {
27
+ throw new Error(
28
+ 'renderToMarkup should not have emitted Client References. This is a bug in React.',
29
+ );
30
+}
31
+
32
+export function resolveClientReference<T>(
33
+ bundlerConfig: SSRModuleMap,
34
+ metadata: ClientReferenceMetadata,
35
+): ClientReference<T> {
36
+ throw new Error(
37
+ 'renderToMarkup should not have emitted Client References. This is a bug in React.',
38
+ );
39
+}
40
+
41
+export function resolveServerReference<T>(
42
+ config: ServerManifest,
43
+ id: ServerReferenceId,
44
+): ClientReference<T> {
45
+ throw new Error(
46
+ 'renderToMarkup should not have emitted Server References. This is a bug in React.',
47
+ );
48
+}
49
+
50
+export function preloadModule<T>(
51
+ metadata: ClientReference<T>,
52
+): null | Thenable<T> {
53
+ return null;
54
+}
55
+
56
+export function requireModule<T>(metadata: ClientReference<T>): T {
57
+ throw new Error(
58
+ 'renderToMarkup should not have emitted Client References. This is a bug in React.',
59
+ );
60
+}
61
+
62
export const usedWithSSR = true;
63
+
64
+type HintCode = string;
65
+type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars
66
+
67
+export function dispatchHint<Code: HintCode>(
68
+ code: Code,
69
+ model: HintModel<Code>,
70
+): void {
71
+ // Should never happen.
72
+}
73
+
74
+export function preinitModuleForSSR(
75
+ href: string,
76
+ nonce: ?string,
77
+ crossOrigin: ?string,
78
+) {
79
+ // Should never happen.
80
+}
81
+
82
+export function preinitScriptForSSR(
83
+ href: string,
84
+ nonce: ?string,
85
+ crossOrigin: ?string,
86
+) {
87
+ // Should never happen.
88
+}
packages/react-html/README.md
new
+32
@@ -0,0 +1,32 @@
1
+# `react-html`
2
+
3
+This package provides the ability to render standalone HTML from Server Components for use in embedded contexts such as e-mails and RSS/Atom feeds. It cannot use Client Components and does not hydrate. It is intended to be paired with the generic React package, which is shipped as `react` to npm.
4
+
5
+## Installation
6
+
7
+```sh
8
+npm install react react-html
9
+```
10
+
11
+## Usage
12
+
13
+```js
14
+import { renderToMarkup } from 'react-html';
15
+import EmailTemplate from './my-email-template-component.js'
16
+
17
+async function action(email, name) {
18
+ "use server";
19
+ // ... in your server, e.g. a Server Action...
20
+ const htmlString = await renderToMarkup(<EmailTemplate name={name} />);
21
+ // ... send e-mail using some e-mail provider
22
+ await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
23
+}
24
+```
25
+
26
+Note that this is an async function that needs to be awaited - unlike the legacy `renderToString` in `react-dom`.
27
+
28
+## API
29
+
30
+### `react-html`
31
+
32
+See https://react.dev/reference/react-html
packages/react-html/index.js
new
+5
@@ -0,0 +1,5 @@
1
+'use strict';
2
+
3
+throw new Error(
4
+ 'react-html is not supported outside a React Server Components environment.',
5
+);
packages/react-html/npm/index.js
new
+5
@@ -0,0 +1,5 @@
1
+'use strict';
2
+
3
+throw new Error(
4
+ 'react-html is not supported outside a React Server Components environment.'
5
+);
packages/react-html/npm/react-html.react-server.js
new
+7
@@ -0,0 +1,7 @@
1
+'use strict';
2
+
3
+if (process.env.NODE_ENV === 'production') {
4
+ module.exports = require('./cjs/react-html.react-server.production.js');
5
+} else {
6
+ module.exports = require('./cjs/react-html.react-server.development.js');
7
+}
packages/react-html/package.json
new
+38
@@ -0,0 +1,38 @@
1
+{
2
+ "name": "react-html",
3
+ "version": "19.0.0",
4
+ "private": true,
5
+ "description": "React package generating embedded HTML markup such as e-mails using Server Components.",
6
+ "main": "index.js",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/facebook/react.git",
10
+ "directory": "packages/react-html"
11
+ },
12
+ "keywords": [
13
+ "react"
14
+ ],
15
+ "license": "MIT",
16
+ "bugs": {
17
+ "url": "https://github.com/facebook/react/issues"
18
+ },
19
+ "homepage": "https://react.dev/",
20
+ "peerDependencies": {
21
+ "react": "^19.0.0"
22
+ },
23
+ "files": [
24
+ "LICENSE",
25
+ "README.md",
26
+ "index.js",
27
+ "react-html.react-server.js",
28
+ "cjs/"
29
+ ],
30
+ "exports": {
31
+ ".": {
32
+ "react-server": "./react-html.react-server.js",
33
+ "default": "./index.js"
34
+ },
35
+ "./src/*": "./src/*",
36
+ "./package.json": "./package.json"
37
+ }
38
+}
packages/react-html/react-html.react-server.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/ReactHTMLServer';
packages/react-html/src/ReactHTMLLegacyClientStreamConfig.js
new
+32
@@ -0,0 +1,32 @@
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
+// TODO: The legacy one should not use binary.
11
+
12
+export type StringDecoder = TextDecoder;
13
+
14
+export function createStringDecoder(): StringDecoder {
15
+ return new TextDecoder();
16
+}
17
+
18
+const decoderOptions = {stream: true};
19
+
20
+export function readPartialStringChunk(
21
+ decoder: StringDecoder,
22
+ buffer: Uint8Array,
23
+): string {
24
+ return decoder.decode(buffer, decoderOptions);
25
+}
26
+
27
+export function readFinalStringChunk(
28
+ decoder: StringDecoder,
29
+ buffer: Uint8Array,
30
+): string {
31
+ return decoder.decode(buffer);
32
+}
packages/react-html/src/ReactHTMLServer.js
new
+178
@@ -0,0 +1,178 @@
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 {LazyComponent} from 'react/src/ReactLazy';
12
+
13
+import ReactVersion from 'shared/ReactVersion';
14
+
15
+import {
16
+ createRequest as createFlightRequest,
17
+ startWork as startFlightWork,
18
+ startFlowing as startFlightFlowing,
19
+ abort as abortFlight,
20
+} from 'react-server/src/ReactFlightServer';
21
+
22
+import {
23
+ createResponse as createFlightResponse,
24
+ getRoot as getFlightRoot,
25
+ processBinaryChunk as processFlightBinaryChunk,
26
+ close as closeFlight,
27
+} from 'react-client/src/ReactFlightClient';
28
+
29
+import {
30
+ createRequest as createFizzRequest,
31
+ startWork as startFizzWork,
32
+ startFlowing as startFizzFlowing,
33
+ abort as abortFizz,
34
+} from 'react-server/src/ReactFizzServer';
35
+
36
+import {
37
+ createResumableState,
38
+ createRenderState,
39
+ createRootFormatContext,
40
+} from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
41
+
42
+type ReactMarkupNodeList =
43
+ // This is the intersection of ReactNodeList and ReactClientValue minus
44
+ // Client/ServerReferences.
45
+ | React$Element<React$AbstractComponent<any, any>>
46
+ | LazyComponent<ReactMarkupNodeList, any>
47
+ | React$Element<string>
48
+ | string
49
+ | boolean
50
+ | number
51
+ | symbol
52
+ | null
53
+ | void
54
+ | bigint
55
+ | $AsyncIterable<ReactMarkupNodeList, ReactMarkupNodeList, void>
56
+ | $AsyncIterator<ReactMarkupNodeList, ReactMarkupNodeList, void>
57
+ | Iterable<ReactMarkupNodeList>
58
+ | Iterator<ReactMarkupNodeList>
59
+ | Array<ReactMarkupNodeList>
60
+ | Promise<ReactMarkupNodeList>; // Thenable<ReactMarkupNodeList>
61
+
62
+type MarkupOptions = {
63
+ identifierPrefix?: string,
64
+ signal?: AbortSignal,
65
+};
66
+
67
+function noServerCallOrFormAction() {
68
+ throw new Error(
69
+ 'renderToMarkup should not have emitted Server References. This is a bug in React.',
70
+ );
71
+}
72
+
73
+export function renderToMarkup(
74
+ children: ReactMarkupNodeList,
75
+ options?: MarkupOptions,
76
+): Promise<string> {
77
+ return new Promise((resolve, reject) => {
78
+ const textEncoder = new TextEncoder();
79
+ const flightDestination = {
80
+ push(chunk: string | null): boolean {
81
+ if (chunk !== null) {
82
+ // TODO: Legacy should not use binary streams.
83
+ processFlightBinaryChunk(flightResponse, textEncoder.encode(chunk));
84
+ } else {
85
+ closeFlight(flightResponse);
86
+ }
87
+ return true;
88
+ },
89
+ destroy(error: mixed): void {
90
+ abortFizz(fizzRequest, error);
91
+ reject(error);
92
+ },
93
+ };
94
+ let buffer = '';
95
+ const fizzDestination = {
96
+ // $FlowFixMe[missing-local-annot]
97
+ push(chunk) {
98
+ if (chunk !== null) {
99
+ buffer += chunk;
100
+ } else {
101
+ // null indicates that we finished
102
+ resolve(buffer);
103
+ }
104
+ return true;
105
+ },
106
+ // $FlowFixMe[missing-local-annot]
107
+ destroy(error) {
108
+ abortFlight(flightRequest, error);
109
+ reject(error);
110
+ },
111
+ };
112
+ function onError(error: mixed) {
113
+ // Any error rejects the promise, regardless of where it happened.
114
+ // Unlike other React SSR we don't want to put Suspense boundaries into
115
+ // client rendering mode because there's no client rendering here.
116
+ reject(error);
117
+ }
118
+ const flightRequest = createFlightRequest(
119
+ // $FlowFixMe: This should be a subtype but not everything is typed covariant.
120
+ children,
121
+ null,
122
+ onError,
123
+ options ? options.identifierPrefix : undefined,
124
+ undefined,
125
+ 'Markup',
126
+ undefined,
127
+ );
128
+ const flightResponse = createFlightResponse(
129
+ null,
130
+ null,
131
+ noServerCallOrFormAction,
132
+ noServerCallOrFormAction,
133
+ undefined,
134
+ undefined,
135
+ undefined,
136
+ );
137
+ const resumableState = createResumableState(
138
+ options ? options.identifierPrefix : undefined,
139
+ undefined,
140
+ );
141
+ const root = getFlightRoot<ReactNodeList>(flightResponse);
142
+ const fizzRequest = createFizzRequest(
143
+ // $FlowFixMe: Thenables as children are supported.
144
+ root,
145
+ resumableState,
146
+ createRenderState(resumableState, true),
147
+ createRootFormatContext(),
148
+ Infinity,
149
+ onError,
150
+ undefined,
151
+ undefined,
152
+ undefined,
153
+ undefined,
154
+ undefined,
155
+ undefined,
156
+ );
157
+ if (options && options.signal) {
158
+ const signal = options.signal;
159
+ if (signal.aborted) {
160
+ abortFlight(flightRequest, (signal: any).reason);
161
+ abortFizz(fizzRequest, (signal: any).reason);
162
+ } else {
163
+ const listener = () => {
164
+ abortFlight(flightRequest, (signal: any).reason);
165
+ abortFizz(fizzRequest, (signal: any).reason);
166
+ signal.removeEventListener('abort', listener);
167
+ };
168
+ signal.addEventListener('abort', listener);
169
+ }
170
+ }
171
+ startFlightWork(flightRequest);
172
+ startFlightFlowing(flightRequest, flightDestination);
173
+ startFizzWork(fizzRequest);
174
+ startFizzFlowing(fizzRequest, fizzDestination);
175
+ });
176
+}
177
+
178
+export {ReactVersion as version};
packages/react-html/src/__tests__/ReactHTMLServer-test.js
new
+112
@@ -0,0 +1,112 @@
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
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+global.TextDecoder = require('util').TextDecoder;
13
+global.TextEncoder = require('util').TextEncoder;
14
+
15
+let React;
16
+let ReactHTML;
17
+
18
+describe('ReactHTML', () => {
19
+ beforeEach(() => {
20
+ jest.resetModules();
21
+ // We run in the react-server condition.
22
+ jest.mock('react', () => require('react/react.react-server'));
23
+ jest.mock('react-html', () =>
24
+ require('react-html/react-html.react-server'),
25
+ );
26
+
27
+ React = require('react');
28
+ ReactHTML = require('react-html');
29
+ });
30
+
31
+ it('should be able to render a simple component', async () => {
32
+ function Component() {
33
+ // We can't use JSX because that's client-JSX in our tests.
34
+ return React.createElement('div', null, 'hello world');
35
+ }
36
+
37
+ const html = await ReactHTML.renderToMarkup(React.createElement(Component));
38
+ expect(html).toBe('<div>hello world</div>');
39
+ });
40
+
41
+ it('supports the useId Hook', async () => {
42
+ function Component() {
43
+ const firstNameId = React.useId();
44
+ const lastNameId = React.useId();
45
+ // We can't use JSX because that's client-JSX in our tests.
46
+ return React.createElement(
47
+ 'div',
48
+ null,
49
+ React.createElement(
50
+ 'h2',
51
+ {
52
+ id: firstNameId,
53
+ },
54
+ 'First',
55
+ ),
56
+ React.createElement(
57
+ 'p',
58
+ {
59
+ 'aria-labelledby': firstNameId,
60
+ },
61
+ 'Sebastian',
62
+ ),
63
+ React.createElement(
64
+ 'h2',
65
+ {
66
+ id: lastNameId,
67
+ },
68
+ 'Last',
69
+ ),
70
+ React.createElement(
71
+ 'p',
72
+ {
73
+ 'aria-labelledby': lastNameId,
74
+ },
75
+ 'Smith',
76
+ ),
77
+ );
78
+ }
79
+
80
+ const html = await ReactHTML.renderToMarkup(React.createElement(Component));
81
+ const container = document.createElement('div');
82
+ container.innerHTML = html;
83
+
84
+ expect(container.getElementsByTagName('h2')[0].id).toBe(
85
+ container.getElementsByTagName('p')[0].getAttribute('aria-labelledby'),
86
+ );
87
+ expect(container.getElementsByTagName('h2')[1].id).toBe(
88
+ container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
89
+ );
90
+
91
+ // It's not the same id between them.
92
+ expect(container.getElementsByTagName('h2')[0].id).not.toBe(
93
+ container.getElementsByTagName('p')[1].getAttribute('aria-labelledby'),
94
+ );
95
+ });
96
+
97
+ // @gate enableCache
98
+ it('supports cache', async () => {
99
+ let counter = 0;
100
+ const getCount = React.cache(() => {
101
+ return counter++;
102
+ });
103
+ function Component() {
104
+ const a = getCount();
105
+ const b = getCount();
106
+ return React.createElement('div', null, a, b);
107
+ }
108
+
109
+ const html = await ReactHTML.renderToMarkup(React.createElement(Component));
110
+ expect(html).toBe('<div>00</div>');
111
+ });
112
+});
packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
+69
-2
@@ -9,9 +9,15 @@
9
10
import type {Request} from 'react-server/src/ReactFlightServer';
11
import type {ReactComponentInfo} from 'shared/ReactTypes';
12
+import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
13
13
-export * from '../ReactFlightServerConfigBundlerCustom';
14
-export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
14
+export type HintCode = string;
15
+export type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars
16
+export type Hints = null;
17
+
18
+export function createHints(): Hints {
19
+ return null;
20
+}
21
22
export const supportsRequestStorage = false;
23
export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
@@ -21,3 +27,64 @@ export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
27
(null: any);
28
29
export * from '../ReactFlightServerConfigDebugNoop';
30
+
31
+export type ClientManifest = null;
32
+export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars
33
+export opaque type ServerReference<T> = null; // eslint-disable-line no-unused-vars
34
+export opaque type ClientReferenceMetadata: any = null;
35
+export opaque type ServerReferenceId: string = string;
36
+export opaque type ClientReferenceKey: any = string;
37
+
38
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
39
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
40
+
41
+export function isClientReference(reference: Object): boolean {
42
+ return reference.$$typeof === CLIENT_REFERENCE_TAG;
43
+}
44
+
45
+export function isServerReference(reference: Object): boolean {
46
+ return reference.$$typeof === SERVER_REFERENCE_TAG;
47
+}
48
+
49
+export function getClientReferenceKey(
50
+ reference: ClientReference<any>,
51
+): ClientReferenceKey {
52
+ throw new Error(
53
+ 'Attempted to render a Client Component from renderToMarkup. ' +
54
+ 'This is not supported since it will never hydrate. ' +
55
+ 'Only render Server Components with renderToMarkup.',
56
+ );
57
+}
58
+
59
+export function resolveClientReferenceMetadata<T>(
60
+ config: ClientManifest,
61
+ clientReference: ClientReference<T>,
62
+): ClientReferenceMetadata {
63
+ throw new Error(
64
+ 'Attempted to render a Client Component from renderToMarkup. ' +
65
+ 'This is not supported since it will never hydrate. ' +
66
+ 'Only render Server Components with renderToMarkup.',
67
+ );
68
+}
69
+
70
+export function getServerReferenceId<T>(
71
+ config: ClientManifest,
72
+ serverReference: ServerReference<T>,
73
+): ServerReferenceId {
74
+ throw new Error(
75
+ 'Attempted to render a Server Action from renderToMarkup. ' +
76
+ 'This is not supported since it varies by version of the app. ' +
77
+ 'Use a fixed URL for any forms instead.',
78
+ );
79
+}
80
+
81
+export function getServerReferenceBoundArguments<T>(
82
+ config: ClientManifest,
83
+ serverReference: ServerReference<T>,
84
+): null | Array<ReactClientValue> {
85
+ throw new Error(
86
+ 'Attempted to render a Server Action from renderToMarkup. ' +
87
+ 'This is not supported since it varies by version of the app. ' +
88
+ 'Use a fixed URL for any forms instead.',
89
+ );
90
+}
scripts/error-codes/codes.json
+6
-1
@@ -515,5 +515,10 @@
515
"527": "Incompatible React versions: The \"react\" and \"react-dom\" packages must have the exact same version. Instead got:\n - react: %s\n - react-dom: %s\nLearn more: https://react.dev/warnings/version-mismatch",
516
"528": "Expected <link> not to update to be updated to a stylesheet with precedence. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
517
"529": "Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
518
- "530": "The render was aborted by the server with a promise."
518
+ "530": "The render was aborted by the server with a promise.",
519
+ "531": "react-html is not supported outside a React Server Components environment.",
520
+ "532": "Attempted to render a Client Component from renderToMarkup. This is not supported since it will never hydrate. Only render Server Components with renderToMarkup.",
521
+ "533": "Attempted to render a Server Action from renderToMarkup. This is not supported since it varies by version of the app. Use a fixed URL for any forms instead.",
522
+ "534": "renderToMarkup should not have emitted Client References. This is a bug in React.",
523
+ "535": "renderToMarkup should not have emitted Server References. This is a bug in React."
524
}
scripts/rollup/bundles.js
+13
@@ -363,6 +363,19 @@ const bundles = [
363
externals: [],
364
},
365
366
+ /******* React HTML *******/
367
+ {
368
+ bundleTypes: [NODE_DEV, NODE_PROD],
369
+ moduleType: RENDERER,
370
+ entry: 'react-html/src/ReactHTMLServer.js',
371
+ name: 'react-html.react-server',
372
+ condition: 'react-server',
373
+ global: 'ReactHTML',
374
+ minifyWithProdErrorCodes: false,
375
+ wrapWithModuleBoundaries: false,
376
+ externals: ['react'],
377
+ },
378
+
379
/******* React Server DOM Webpack Server *******/
380
{
381
bundleTypes: [NODE_DEV, NODE_PROD],
scripts/rollup/forks.js
+8
-1
@@ -65,6 +65,12 @@ const forks = Object.freeze({
65
if (entry === 'react/src/ReactServer.js') {
66
return './packages/react/src/ReactSharedInternalsServer.js';
67
}
68
+ if (entry === 'react-html/src/ReactHTMLServer.js') {
69
+ // Inside the ReactHTMLServer render we don't refer to any shared internals
70
+ // but instead use our own internal copy of the state because you cannot use
71
+ // any of this state from a component anyway. E.g. you can't use a client hook.
72
+ return './packages/react/src/ReactSharedInternalsClient.js';
73
+ }
74
if (bundle.condition === 'react-server') {
75
return './packages/react-server/src/ReactSharedInternalsServer.js';
76
}
@@ -93,7 +99,8 @@ const forks = Object.freeze({
99
entry === 'react-dom' ||
100
entry === 'react-dom/src/ReactDOMFB.js' ||
101
entry === 'react-dom/src/ReactDOMTestingFB.js' ||
96
- entry === 'react-dom/src/ReactDOMServer.js'
102
+ entry === 'react-dom/src/ReactDOMServer.js' ||
103
+ entry === 'react-html/src/ReactHTMLServer.js'
104
) {
105
if (
106
bundleType === FB_WWW_DEV ||
scripts/shared/inlinedHostConfigs.js
+35
@@ -36,6 +36,9 @@ module.exports = [
36
'react-dom/src/server/react-dom-server.node',
37
'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
38
'react-dom/src/server/ReactDOMFizzStaticNode.js',
39
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
40
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
41
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
42
'react-server-dom-webpack',
43
'react-server-dom-webpack/client.node.unbundled',
44
'react-server-dom-webpack/server',
@@ -71,6 +74,9 @@ module.exports = [
74
'react-dom/src/server/react-dom-server.node',
75
'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
76
'react-dom/src/server/ReactDOMFizzStaticNode.js',
77
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
78
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
79
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
80
'react-server-dom-webpack',
81
'react-server-dom-webpack/client.node',
82
'react-server-dom-webpack/server',
@@ -108,6 +114,9 @@ module.exports = [
114
'react-dom/src/server/react-dom-server.node',
115
'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
116
'react-dom/src/server/ReactDOMFizzStaticNode.js',
117
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
118
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
119
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
120
'react-server-dom-turbopack',
121
'react-server-dom-turbopack/client.node.unbundled',
122
'react-server-dom-turbopack/server',
@@ -145,6 +154,9 @@ module.exports = [
154
'react-dom/src/server/react-dom-server.node',
155
'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
156
'react-dom/src/server/ReactDOMFizzStaticNode.js',
157
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
158
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
159
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
160
'react-server-dom-turbopack',
161
'react-server-dom-turbopack/client.node',
162
'react-server-dom-turbopack/server',
@@ -182,6 +194,9 @@ module.exports = [
194
'react-dom/src/server/react-dom-server.bun',
195
'react-dom/src/server/ReactDOMFizzServerBun.js',
196
'react-dom-bindings',
197
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
198
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
199
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
200
'shared/ReactDOMSharedInternals',
201
],
202
isFlowTyped: true,
@@ -212,6 +227,9 @@ module.exports = [
227
'react-dom/src/server/react-dom-server.browser',
228
'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
229
'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
230
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
231
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
232
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
233
'react-server-dom-webpack',
234
'react-server-dom-webpack/client',
235
'react-server-dom-webpack/client.browser',
@@ -240,6 +258,9 @@ module.exports = [
258
'react-dom/server',
259
'react-dom/server.node',
260
'react-dom-bindings',
261
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
262
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
263
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
264
'react-server-dom-esm',
265
'react-server-dom-esm/client',
266
'react-server-dom-esm/client.browser',
@@ -274,6 +295,9 @@ module.exports = [
295
'react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-turbopack/server.browser
296
'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js',
297
'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser.js',
298
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
299
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
300
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
301
'react-devtools',
302
'react-devtools-core',
303
'react-devtools-shell',
@@ -303,6 +327,9 @@ module.exports = [
327
'react-dom/src/server/react-dom-server.edge',
328
'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
329
'react-dom/src/server/ReactDOMFizzStaticEdge.js',
330
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
331
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
332
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
333
'react-server-dom-webpack',
334
'react-server-dom-webpack/client.edge',
335
'react-server-dom-webpack/server.edge',
@@ -338,6 +365,9 @@ module.exports = [
365
'react-dom/src/server/react-dom-server.edge',
366
'react-dom/src/server/ReactDOMFizzServerEdge.js', // react-dom/server.edge
367
'react-dom/src/server/ReactDOMFizzStaticEdge.js',
368
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
369
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
370
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
371
'react-server-dom-turbopack',
372
'react-server-dom-turbopack/client.edge',
373
'react-server-dom-turbopack/server.edge',
@@ -374,6 +404,9 @@ module.exports = [
404
'react-dom/src/server/react-dom-server.node',
405
'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
406
'react-dom/src/server/ReactDOMFizzStaticNode.js',
407
+ 'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
408
+ 'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
409
+ 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
410
'react-server-dom-esm',
411
'react-server-dom-esm/client.node',
412
'react-server-dom-esm/server',
@@ -395,6 +428,7 @@ module.exports = [
428
entryPoints: [
429
'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
430
'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
431
+ 'react-html/src/ReactHTMLServer.js',
432
],
433
paths: [
434
'react-dom',
@@ -404,6 +438,7 @@ module.exports = [
438
'react-dom/src/server/ReactDOMLegacyServerImpl.js', // not an entrypoint, but only usable in *Browser and *Node files
439
'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
440
'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
441
+ 'react-html',
442
'shared/ReactDOMSharedInternals',
443
],
444
isFlowTyped: true,