Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Float][Fizz][Fiber] support type for ReactDOM.preload() options (#26239)

Browse Source 
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.
This commit is contained in:
Josh Story
2023-02-25 11:06:09 -08:00
committed by GitHub
parent 1173a17e6e
commit 6ff1733e63
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
Vendored
+7 -1
View File
@@ -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,
};
}
packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
Vendored
+2 -1
View File
@@ -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,
};
}
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
Vendored
+16 -2
View File
@@ -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(
<html>
<head>
<link rel="preload" as="font" href="foo" crossorigin="" />
<link
rel="preload"
as="font"
href="foo"
crossorigin=""
type="font/woff2"
/>
<link rel="preload" as="font" href="bar" crossorigin="" />
<link rel="preload" as="font" href="baz" crossorigin="" />
<link rel="preload" as="font" href="qux" crossorigin="" />
@@ -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 {
<html>
<head>
<link rel="preload" as="style" href="foo" />
<link
rel="preload"
as="font"
href="font"
crossorigin=""
type="font/woff2"
/>
<link rel="preload" as="font" href="baz" crossorigin="" />
<link rel="preload" as="style" href="qux" />
</head>