From 67441f9e0109738428b19e1295d5ffe556d53afb Mon Sep 17 00:00:00 2001 From: Josh Story Date: Wed, 31 May 2023 11:15:41 -0700 Subject: [PATCH] support fetchPriority as an option for ReactDOM.preload() and ReactDOM.preinit() --- .../src/client/ReactFiberConfigDOM.js | 5 + .../src/server/ReactFizzConfigDOM.js | 5 + packages/react-dom/src/ReactDOMDispatcher.js | 2 + .../src/__tests__/ReactDOMFloat-test.js | 201 +++++++++++++++++- 4 files changed, 211 insertions(+), 2 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 62afafe11efcf..bab0772ca57cd 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -2173,6 +2173,7 @@ type PreloadOptions = { crossOrigin?: string, integrity?: string, type?: string, + fetchPriority?: 'high' | 'low' | 'auto', }; function preload(href: string, options: PreloadOptions) { if (!enableFloat) { @@ -2245,6 +2246,7 @@ function preloadPropsFromPreloadOptions( crossOrigin: as === 'font' ? '' : options.crossOrigin, integrity: options.integrity, type: options.type, + fetchPriority: options.fetchPriority, }; } @@ -2254,6 +2256,7 @@ type PreinitOptions = { crossOrigin?: string, integrity?: string, nonce?: string, + fetchPriority?: 'high' | 'low' | 'auto', }; function preinit(href: string, options: PreinitOptions) { if (!enableFloat) { @@ -2395,6 +2398,7 @@ function stylesheetPropsFromPreinitOptions( 'data-precedence': precedence, crossOrigin: options.crossOrigin, integrity: options.integrity, + fetchPriority: options.fetchPriority, }; } @@ -2408,6 +2412,7 @@ function scriptPropsFromPreinitOptions( crossOrigin: options.crossOrigin, integrity: options.integrity, nonce: options.nonce, + fetchPriority: options.fetchPriority, }; } diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index 9eeb120082991..85f9a2a823739 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -5102,6 +5102,7 @@ type PreloadOptions = { crossOrigin?: string, integrity?: string, type?: string, + fetchPriority?: 'high' | 'low' | 'auto', }; export function preload(href: string, options: PreloadOptions) { if (!enableFloat) { @@ -5247,6 +5248,7 @@ type PreinitOptions = { crossOrigin?: string, integrity?: string, nonce?: string, + fetchPriority?: 'high' | 'low' | 'auto', }; function preinit(href: string, options: PreinitOptions): void { if (!enableFloat) { @@ -5590,6 +5592,7 @@ function preloadPropsFromPreloadOptions( crossOrigin: as === 'font' ? '' : options.crossOrigin, integrity: options.integrity, type: options.type, + fetchPriority: options.fetchPriority, }; } @@ -5631,6 +5634,7 @@ function stylesheetPropsFromPreinitOptions( 'data-precedence': precedence, crossOrigin: options.crossOrigin, integrity: options.integrity, + fetchPriority: options.fetchPriority, }; } @@ -5662,6 +5666,7 @@ function scriptPropsFromPreinitOptions( crossOrigin: options.crossOrigin, integrity: options.integrity, nonce: options.nonce, + fetchPriority: options.fetchPriority, }; } diff --git a/packages/react-dom/src/ReactDOMDispatcher.js b/packages/react-dom/src/ReactDOMDispatcher.js index 0c2b85945006b..2bd42537400a0 100644 --- a/packages/react-dom/src/ReactDOMDispatcher.js +++ b/packages/react-dom/src/ReactDOMDispatcher.js @@ -14,6 +14,7 @@ export type PreloadOptions = { crossOrigin?: string, integrity?: string, type?: string, + fetchPriority?: 'high' | 'low' | 'auto', }; export type PreinitOptions = { as: string, @@ -21,6 +22,7 @@ export type PreinitOptions = { crossOrigin?: string, integrity?: string, nonce?: string, + fetchPriority?: 'high' | 'low' | 'auto', }; export type HostDispatcher = { diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index b0303165d0dba..4b14030757efd 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -3789,6 +3789,7 @@ body { as: 'style', crossOrigin: 'use-credentials', integrity: 'some hash', + fetchPriority: 'low', }); return ( @@ -3909,6 +3910,113 @@ body { 'ReactDOM.preload(): For `href` "foo", The options provided conflict with props on a matching element. When the preload options disagree with the underlying resource it usually means the browser will not be able to use the preload when the resource is fetched, negating any benefit the preload would provide. React will preload the resource using props derived from the resource instead and ignore the options provided to the `ReactDOM.preload()` call. In general, preloading is useful when you expect to render a resource soon but have not yet done so. In this case since the underlying resource was already rendered the preload call may be extraneous. Try removing the call, otherwise try adjusting both the props on the and the options passed to `ReactDOM.preload()` to agree.\n "integrity" missing from options, underlying prop value: "some hash"\n "media" missing from options, underlying prop value: "print"\n "crossOrigin" option value: "use-credentials", missing from underlying props', ]); }); + + it('supports fetchPriority', async () => { + function Component({isServer}) { + ReactDOM.preload(isServer ? 'highserver' : 'highclient', { + as: 'script', + fetchPriority: 'high', + }); + ReactDOM.preload(isServer ? 'lowserver' : 'lowclient', { + as: 'style', + fetchPriority: 'low', + }); + ReactDOM.preload(isServer ? 'autoserver' : 'autoclient', { + as: 'style', + fetchPriority: 'auto', + }); + return 'hello'; + } + + await act(() => { + renderToPipeableStream( + + + + + , + ).pipe(writable); + }); + + expect(getMeaningfulChildren(document)).toEqual( + + + + + + + hello + , + ); + + ReactDOMClient.hydrateRoot( + document, + + + + + , + ); + await waitForAll([]); + expect(getMeaningfulChildren(document)).toEqual( + + + + + + + + + + hello + , + ); + }); }); describe('ReactDOM.preinit(href, { as: ... })', () => { @@ -4442,7 +4550,6 @@ body { hello , ); - await clientAct(() => { ReactDOMClient.hydrateRoot( document, @@ -4453,7 +4560,6 @@ body { , ); }); - expect(getMeaningfulChildren(document)).toEqual( @@ -4474,6 +4580,97 @@ body { , ); }); + + it('supports fetchPriority', async () => { + function Component({isServer}) { + ReactDOM.preinit(isServer ? 'highserver' : 'highclient', { + as: 'script', + fetchPriority: 'high', + }); + ReactDOM.preinit(isServer ? 'lowserver' : 'lowclient', { + as: 'style', + fetchPriority: 'low', + }); + ReactDOM.preinit(isServer ? 'autoserver' : 'autoclient', { + as: 'style', + fetchPriority: 'auto', + }); + return 'hello'; + } + + await act(() => { + renderToPipeableStream( + + + + + , + ).pipe(writable); + }); + + expect(getMeaningfulChildren(document)).toEqual( + + + + +