amirho/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2026-02-27 03:07:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Float] Don't preload images inside <noscript> (#28815)

Browse Source 
`<noscript>` scopes should be considered inert from the perspective of
Fizz since we assume they'll only be used in rare and adverse
circumstances. When we added preload support for img tags we did not
include the noscript scope check in the opt-out for preloading. This
change adds it in

fixes: #27910
This commit is contained in:
Josh Story
2024-04-10 12:15:04 -07:00
committed by GitHub
parent 3f947b1b46
commit dc6a7e01e1
2 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js vendored
View File

@@ -2762,7 +2762,7 @@ function pushImg(
props: Object,
resumableState: ResumableState,
renderState: RenderState,
pictureTagInScope: boolean,
pictureOrNoScriptTagInScope: boolean,
): null {
const {src, srcSet} = props;
if (
@@ -2771,7 +2771,7 @@ function pushImg(
(typeof src === 'string' || src == null) &&
(typeof srcSet === 'string' || srcSet == null) &&
props.fetchPriority !== 'low' &&
pictureTagInScope === false &&
pictureOrNoScriptTagInScope === false &&
// We exclude data URIs in src and srcSet since these should not be preloaded
!(
typeof src === 'string' &&
@@ -3599,7 +3599,7 @@ export function pushStartInstance(
props,
resumableState,
renderState,
!!(formatContext.tagScope & PICTURE_SCOPE),
!!(formatContext.tagScope & (PICTURE_SCOPE | NOSCRIPT_SCOPE)),
);
}
// Omitted close tags

32
packages/react-dom/src/__tests__/ReactDOMFloat-test.js vendored
View File

@@ -4261,6 +4261,38 @@ body {
);
});
// Fixes: https://github.com/facebook/react/issues/27910
it('omits preloads for images inside noscript tags', async () => {
function App() {
return (
<html>
<body>
<img src="foo" />
<noscript>
<img src="bar" />
</noscript>
</body>
</html>
);
}
await act(() => {
renderToPipeableStream(<App />).pipe(writable);
});
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
<link rel="preload" href="foo" as="image" />
</head>
<body>
<img src="foo" />
<noscript>&lt;img src="bar"&gt;</noscript>
</body>
</html>,
);
});
it('should handle media on image preload', async () => {
function App({isClient}) {
ReactDOM.preload('/server', {