From 6ff1733e63fdb948ae973a713741b4526102c73c Mon Sep 17 00:00:00 2001 From: Josh Story Date: Sat, 25 Feb 2023 11:06:09 -0800 Subject: [PATCH] [Float][Fizz][Fiber] support type for ReactDOM.preload() options (#26239) preloads often need to come with a type attribute which allows browsers to decide if they support the preloading resource's type. If the type is unsupported the preload will not be fetched by the Browser. This change adds support for `type` in `ReactDOM.preload()` as a string option. --- .../src/client/ReactDOMFloatClient.js | 8 +++++++- .../src/server/ReactDOMServerFormatConfig.js | 3 ++- .../src/__tests__/ReactDOMFloat-test.js | 18 ++++++++++++++++-- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index f4332cef91945..4dcba9f814905 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -253,7 +253,12 @@ function preconnect(href: string, options?: {crossOrigin?: string}) { // ReactDOM.preload // -------------------------------------- type PreloadAs = ResourceType; -type PreloadOptions = {as: PreloadAs, crossOrigin?: string, integrity?: string}; +type PreloadOptions = { + as: PreloadAs, + crossOrigin?: string, + integrity?: string, + type?: string, +}; function preload(href: string, options: PreloadOptions) { if (__DEV__) { validatePreloadArguments(href, options); @@ -309,6 +314,7 @@ function preloadPropsFromPreloadOptions( as, crossOrigin: as === 'font' ? '' : options.crossOrigin, integrity: options.integrity, + type: options.type, }; } diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js index ce7f63b4ccf6f..9bdd89f7f0c8c 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js @@ -4344,7 +4344,7 @@ type PreloadOptions = { as: PreloadAs, crossOrigin?: string, integrity?: string, - media?: string, + type?: string, }; export function preload(href: string, options: PreloadOptions) { if (!currentResources) { @@ -4709,6 +4709,7 @@ function preloadPropsFromPreloadOptions( href, crossOrigin: as === 'font' ? '' : options.crossOrigin, integrity: options.integrity, + type: options.type, }; } diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index e1cc69988c801..b804268af75ab 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -2267,7 +2267,7 @@ body { // @gate enableFloat it('always enforces crossOrigin "anonymous" for font preloads', async () => { function App() { - ReactDOM.preload('foo', {as: 'font'}); + ReactDOM.preload('foo', {as: 'font', type: 'font/woff2'}); ReactDOM.preload('bar', {as: 'font', crossOrigin: 'foo'}); ReactDOM.preload('baz', {as: 'font', crossOrigin: 'use-credentials'}); ReactDOM.preload('qux', {as: 'font', crossOrigin: 'anonymous'}); @@ -2285,7 +2285,13 @@ body { expect(getMeaningfulChildren(document)).toEqual( - + @@ -2488,6 +2494,7 @@ body { function ClientApp() { ReactDOM.preload('foo', {as: 'style'}); + ReactDOM.preload('font', {as: 'font', type: 'font/woff2'}); React.useInsertionEffect(() => ReactDOM.preload('bar', {as: 'script'})); React.useLayoutEffect(() => ReactDOM.preload('baz', {as: 'font'})); React.useEffect(() => ReactDOM.preload('qux', {as: 'style'})); @@ -2507,6 +2514,13 @@ body { +