Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fizz] implement onHeaders and headersLengthHint options #27641

Merged
merged 3 commits into from
Nov 7, 2023
Merged

[Fizz] implement onHeaders and headersLengthHint options #27641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1196e38
Assert onHeadersReady behavior
gnoff Oct 30, 2023
338be0c
[Fizz] Support onHeadersReady option for `renderTo...` functions
gnoff Oct 23, 2023
4140b11
This commit implements the onHeadersReady call
gnoff Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
662 changes: 573 additions & 89 deletions packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
*/

import type {
RenderState as BaseRenderState,
ResumableState,
BoundaryResources,
StyleQueue,
Resource,
HeadersDescriptor,
} from './ReactFizzConfigDOM';

import {
Expand Down Expand Up @@ -46,6 +48,14 @@ export type RenderState = {
headChunks: null | Array<Chunk | PrecomputedChunk>,
externalRuntimeScript: null | any,
bootstrapChunks: Array<Chunk | PrecomputedChunk>,
onHeaders: void | ((headers: HeadersDescriptor) => void),
headers: null | {
preconnects: string,
fontPreloads: string,
highImagePreloads: string,
remainingCapacity: number,
},
resets: BaseRenderState['resets'],
charsetChunks: Array<Chunk | PrecomputedChunk>,
preconnectChunks: Array<Chunk | PrecomputedChunk>,
importMapChunks: Array<Chunk | PrecomputedChunk>,
Expand Down Expand Up @@ -83,6 +93,7 @@ export function createRenderState(
undefined,
undefined,
undefined,
undefined,
);
return {
// Keep this in sync with ReactFizzConfigDOM
Expand All @@ -94,6 +105,9 @@ export function createRenderState(
headChunks: renderState.headChunks,
externalRuntimeScript: renderState.externalRuntimeScript,
bootstrapChunks: renderState.bootstrapChunks,
onHeaders: renderState.onHeaders,
headers: renderState.headers,
resets: renderState.resets,
charsetChunks: renderState.charsetChunks,
preconnectChunks: renderState.preconnectChunks,
importMapChunks: renderState.importMapChunks,
Expand Down Expand Up @@ -159,6 +173,7 @@ export {
setCurrentlyRenderingBoundaryResourcesTarget,
prepareHostDispatcher,
resetResumableState,
emitEarlyPreloads,
} from './ReactFizzConfigDOM';

import escapeTextForBrowser from './escapeTextForBrowser';
Expand Down
151 changes: 151 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3690,6 +3690,157 @@ describe('ReactDOMFizzServer', () => {
);
});

it('provides headers after initial work if onHeaders option used', async () => {
let headers = null;
function onHeaders(x) {
headers = x;
}

function Preloads() {
ReactDOM.preload('font2', {as: 'font'});
ReactDOM.preload('imagepre2', {as: 'image', fetchPriority: 'high'});
ReactDOM.preconnect('pre2', {crossOrigin: 'use-credentials'});
ReactDOM.prefetchDNS('dns2');
}

function Blocked() {
readText('blocked');
return (
<>
<Preloads />
<img src="image2" />
</>
);
}

function App() {
ReactDOM.preload('font', {as: 'font'});
ReactDOM.preload('imagepre', {as: 'image', fetchPriority: 'high'});
ReactDOM.preconnect('pre', {crossOrigin: 'use-credentials'});
ReactDOM.prefetchDNS('dns');
return (
<html>
<body>
<img src="image" />
<Blocked />
</body>
</html>
);
}

await act(() => {
renderToPipeableStream(<App />, {onHeaders});
});

expect(headers).toEqual({
Link: `
<pre>; rel=preconnect; crossorigin="use-credentials",
<dns>; rel=dns-prefetch,
<font>; rel=preload; as="font"; crossorigin="",
<imagepre>; rel=preload; as="image"; fetchpriority="high",
<image>; rel=preload; as="image"
`
.replaceAll('\n', '')
.trim(),
});
});

it('encodes img srcset and sizes into preload header params', async () => {
let headers = null;
function onHeaders(x) {
headers = x;
}

function App() {
ReactDOM.preload('presrc', {
as: 'image',
fetchPriority: 'high',
imageSrcSet: 'presrcset',
imageSizes: 'presizes',
});
return (
<html>
<body>
<img src="src" srcSet="srcset" sizes="sizes" />
</body>
</html>
);
}

await act(() => {
renderToPipeableStream(<App />, {onHeaders});
});

expect(headers).toEqual({
Link: `
<presrc>; rel=preload; as="image"; fetchpriority="high"; imagesrcset="presrcset"; imagesizes="presizes",
<src>; rel=preload; as="image"; imagesrcset="srcset"; imagesizes="sizes"
`
.replaceAll('\n', '')
.trim(),
});
});

it('emits nothing for headers if you pipe before work begins', async () => {
let headers = null;
function onHeaders(x) {
headers = x;
}

function App() {
ReactDOM.preload('presrc', {
as: 'image',
fetchPriority: 'high',
imageSrcSet: 'presrcset',
imageSizes: 'presizes',
});
return (
<html>
<body>
<img src="src" srcSet="srcset" sizes="sizes" />
</body>
</html>
);
}

await act(() => {
renderToPipeableStream(<App />, {onHeaders}).pipe(writable);
});

expect(headers).toEqual({});
});

it('stops accumulating new headers once the maxHeadersLength limit is satisifed', async () => {
let headers = null;
function onHeaders(x) {
headers = x;
}

function App() {
ReactDOM.preconnect('foo');
ReactDOM.preconnect('bar');
ReactDOM.preconnect('baz');
return (
<html>
<body>hello</body>
</html>
);
}

await act(() => {
renderToPipeableStream(<App />, {onHeaders, maxHeadersLength: 44});
});

expect(headers).toEqual({
Link: `
<foo>; rel=preconnect,
<bar>; rel=preconnect
`
.replaceAll('\n', '')
.trim(),
});
});

describe('error escaping', () => {
it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
window.__outlet = {};
Expand Down
73 changes: 73 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
let JSDOM;
let Stream;
let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMFizzStatic;
let Suspense;
Expand All @@ -29,6 +30,7 @@ describe('ReactDOMFizzStatic', () => {
jest.resetModules();
JSDOM = require('jsdom').JSDOM;
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
if (__EXPERIMENTAL__) {
ReactDOMFizzStatic = require('react-dom/static');
Expand Down Expand Up @@ -262,4 +264,75 @@ describe('ReactDOMFizzStatic', () => {
'hello world',
]);
});

// @gate experimental
it('supports onHeaders', async () => {
let headers;
function onHeaders(x) {
headers = x;
}

function App() {
ReactDOM.preload('image', {as: 'image', fetchPriority: 'high'});
ReactDOM.preload('font', {as: 'font'});
return (
<html>
<body>hello</body>
</html>
);
}

const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
onHeaders,
});
expect(headers).toEqual({
Link: `
<font>; rel=preload; as="font"; crossorigin="",
<image>; rel=preload; as="image"; fetchpriority="high"
`
.replaceAll('\n', '')
.trim(),
});

await act(async () => {
result.prelude.pipe(writable);
});
expect(getVisibleChildren(container)).toEqual('hello');
});

// @gate experimental && enablePostpone
it('includes stylesheet preloads in onHeaders when postponing in the Shell', async () => {
let headers;
function onHeaders(x) {
headers = x;
}

function App() {
ReactDOM.preload('image', {as: 'image', fetchPriority: 'high'});
ReactDOM.preinit('style', {as: 'style'});
React.unstable_postpone();
return (
<html>
<body>hello</body>
</html>
);
}

const result = await ReactDOMFizzStatic.prerenderToNodeStream(<App />, {
onHeaders,
});
expect(headers).toEqual({
Link: `
<image>; rel=preload; as="image"; fetchpriority="high",
<style>; rel=preload; as="style"
`
.replaceAll('\n', '')
.trim(),
});

await act(async () => {
result.prelude.pipe(writable);
});
expect(getVisibleChildren(container)).toEqual(undefined);
});
});
Loading