Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 500bea5

Browse filesBrowse files
acdliteacdlite
authored
Add option to load Fizz runtime from external file (#25499)
* Add feature flag for external Fizz runtime Only enabled for www for now * Add option to load Fizz runtime from external file When unstable_externalRuntimeSrc is provided, React will inject a script tag that points to the provided URL. Then, instead of emitting inline scripts, the Fizz stream will emit HTML nodes with data attributes that encode the instructions. The external runtime will detect these with a mutation observer and translate them into runtime commands. This part isn't implemented in this PR, though — all this does is set up the option to use an external runtime, and inject the script tag. The external runtime is injected at the same time as bootstrap scripts.
1 parent 4494f2a commit 500bea5
Copy full SHA for 500bea5

14 files changed

+73Lines changed: 73 additions & 0 deletions
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js‎

Copy file name to clipboardExpand all lines: packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+25Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
enableFilterEmptyStringAttributesDOM,
2424
enableCustomElementPropertySupport,
2525
enableFloat,
26+
enableFizzExternalRuntime,
2627
} from 'shared/ReactFeatureFlags';
2728

2829
import type {
@@ -157,6 +158,7 @@ export function createResponseState(
157158
bootstrapScriptContent: string | void,
158159
bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
159160
bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
161+
externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
160162
): ResponseState {
161163
const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
162164
const inlineScriptWithNonce =
@@ -173,6 +175,29 @@ export function createResponseState(
173175
endInlineScript,
174176
);
175177
}
178+
if (enableFizzExternalRuntime) {
179+
if (externalRuntimeConfig !== undefined) {
180+
const src =
181+
typeof externalRuntimeConfig === 'string'
182+
? externalRuntimeConfig
183+
: externalRuntimeConfig.src;
184+
const integrity =
185+
typeof externalRuntimeConfig === 'string'
186+
? undefined
187+
: externalRuntimeConfig.integrity;
188+
bootstrapChunks.push(
189+
startScriptSrc,
190+
stringToChunk(escapeTextForBrowser(src)),
191+
);
192+
if (integrity) {
193+
bootstrapChunks.push(
194+
scriptIntegirty,
195+
stringToChunk(escapeTextForBrowser(integrity)),
196+
);
197+
}
198+
bootstrapChunks.push(endAsyncScript);
199+
}
200+
}
176201
if (bootstrapScripts !== undefined) {
177202
for (let i = 0; i < bootstrapScripts.length; i++) {
178203
const scriptConfig = bootstrapScripts[i];
Collapse file

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js‎

Copy file name to clipboardExpand all lines: packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+30Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3546,6 +3546,36 @@ describe('ReactDOMFizzServer', () => {
35463546
});
35473547
});
35483548

3549+
// @gate enableFizzExternalRuntime
3550+
it('supports option to load runtime as an external script', async () => {
3551+
await actIntoEmptyDocument(() => {
3552+
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
3553+
<html>
3554+
<head />
3555+
<body>
3556+
<div>hello world</div>
3557+
</body>
3558+
</html>,
3559+
{
3560+
unstable_externalRuntimeSrc: 'src-of-external-runtime',
3561+
},
3562+
);
3563+
pipe(writable);
3564+
});
3565+
3566+
expect(getVisibleChildren(document)).toEqual(
3567+
<html>
3568+
<head />
3569+
<body>
3570+
<div>hello world</div>
3571+
</body>
3572+
</html>,
3573+
);
3574+
expect(
3575+
Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
3576+
).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
3577+
});
3578+
35493579
it('#24384: Suspending should halt hydration warnings and not emit any if hydration completes successfully after unsuspending', async () => {
35503580
const makeApp = () => {
35513581
let resolve, resolved;
Collapse file

‎packages/react-dom/src/server/ReactDOMFizzServerBrowser.js‎

Copy file name to clipboardExpand all lines: packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ type Options = {
3434
progressiveChunkSize?: number,
3535
signal?: AbortSignal,
3636
onError?: (error: mixed) => ?string,
37+
unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
3738
};
3839

3940
// TODO: Move to sub-classing ReadableStream.
@@ -86,6 +87,7 @@ function renderToReadableStream(
8687
options ? options.bootstrapScriptContent : undefined,
8788
options ? options.bootstrapScripts : undefined,
8889
options ? options.bootstrapModules : undefined,
90+
options ? options.unstable_externalRuntimeSrc : undefined,
8991
),
9092
createRootFormatContext(options ? options.namespaceURI : undefined),
9193
options ? options.progressiveChunkSize : undefined,
Collapse file

‎packages/react-dom/src/server/ReactDOMFizzServerNode.js‎

Copy file name to clipboardExpand all lines: packages/react-dom/src/server/ReactDOMFizzServerNode.js
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ type Options = {
4747
onShellError?: (error: mixed) => void,
4848
onAllReady?: () => void,
4949
onError?: (error: mixed) => ?string,
50+
unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
5051
};
5152

5253
type PipeableStream = {
@@ -65,6 +66,7 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
6566
options ? options.bootstrapScriptContent : undefined,
6667
options ? options.bootstrapScripts : undefined,
6768
options ? options.bootstrapModules : undefined,
69+
options ? options.unstable_externalRuntimeSrc : undefined,
6870
),
6971
createRootFormatContext(options ? options.namespaceURI : undefined),
7072
options ? options.progressiveChunkSize : undefined,
Collapse file

‎packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js‎

Copy file name to clipboardExpand all lines: packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ type Options = {
3333
progressiveChunkSize?: number,
3434
signal?: AbortSignal,
3535
onError?: (error: mixed) => ?string,
36+
unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
3637
};
3738

3839
type StaticResult = {
@@ -71,6 +72,7 @@ function prerender(
7172
options ? options.bootstrapScriptContent : undefined,
7273
options ? options.bootstrapScripts : undefined,
7374
options ? options.bootstrapModules : undefined,
75+
options ? options.unstable_externalRuntimeSrc : undefined,
7476
),
7577
createRootFormatContext(options ? options.namespaceURI : undefined),
7678
options ? options.progressiveChunkSize : undefined,
Collapse file

‎packages/react-dom/src/server/ReactDOMFizzStaticNode.js‎

Copy file name to clipboardExpand all lines: packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ type Options = {
3535
progressiveChunkSize?: number,
3636
signal?: AbortSignal,
3737
onError?: (error: mixed) => ?string,
38+
unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
3839
};
3940

4041
type StaticResult = {
@@ -86,6 +87,7 @@ function prerenderToNodeStreams(
8687
options ? options.bootstrapScriptContent : undefined,
8788
options ? options.bootstrapScripts : undefined,
8889
options ? options.bootstrapModules : undefined,
90+
options ? options.unstable_externalRuntimeSrc : undefined,
8991
),
9092
createRootFormatContext(options ? options.namespaceURI : undefined),
9193
options ? options.progressiveChunkSize : undefined,
Collapse file

‎packages/shared/ReactFeatureFlags.js‎

Copy file name to clipboardExpand all lines: packages/shared/ReactFeatureFlags.js
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@ export const enableUseMemoCacheHook = __EXPERIMENTAL__;
125125

126126
export const enableUseEventHook = __EXPERIMENTAL__;
127127

128+
// Test in www before enabling in open source.
129+
export const enableFizzExternalRuntime = false;
130+
128131
// -----------------------------------------------------------------------------
129132
// Chopping Block
130133
//
Collapse file

‎packages/shared/forks/ReactFeatureFlags.native-fb.js‎

Copy file name to clipboardExpand all lines: packages/shared/forks/ReactFeatureFlags.native-fb.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const enableFloat = false;
8686
export const enableHostSingletons = false;
8787

8888
export const useModernStrictMode = false;
89+
export const enableFizzExternalRuntime = false;
8990

9091
// Flow magic to verify the exports of this file match the original version.
9192
((((null: any): ExportsType): FeatureFlagsType): ExportsType);
Collapse file

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Copy file name to clipboardExpand all lines: packages/shared/forks/ReactFeatureFlags.native-oss.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export const enableFloat = false;
7676
export const enableHostSingletons = false;
7777

7878
export const useModernStrictMode = false;
79+
export const enableFizzExternalRuntime = false;
7980

8081
// Flow magic to verify the exports of this file match the original version.
8182
((((null: any): ExportsType): FeatureFlagsType): ExportsType);
Collapse file

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Copy file name to clipboardExpand all lines: packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export const enableFloat = false;
7676
export const enableHostSingletons = false;
7777

7878
export const useModernStrictMode = false;
79+
export const enableFizzExternalRuntime = false;
7980

8081
// Flow magic to verify the exports of this file match the original version.
8182
((((null: any): ExportsType): FeatureFlagsType): ExportsType);

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.