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 f4332cef91..4dcba9f814 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 ce7f63b4cc..9bdd89f7f0 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 e1cc69988c..b804268af7 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 { +