[Float][Fizz] add crossOrigin support for preloading bootstrap script…

…s and bootstrap modules (#26942) The recently merged support for crossorigin in bootstrap scripts did not implement the functionality for preloading. This adds it see #26844
facebook · Jun 13, 2023 · a7bf5ba · a7bf5ba
1 parent 7ed6084
commit a7bf5ba
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -281,7 +281,7 @@ export function createResponseState(
  ? 'use-credentials'
  : '';
 
- preloadBootstrapScript(resources, src, nonce, integrity);
+ preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin);
 
  bootstrapChunks.push(
  startScriptSrc,
@@ -322,7 +322,7 @@ export function createResponseState(
  ? 'use-credentials'
  : '';
 
- preloadBootstrapModule(resources, src, nonce, integrity);
+ preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin);
 
  bootstrapChunks.push(
  startModuleSrc,
@@ -5425,6 +5425,7 @@ function preloadBootstrapScript(
  src: string,
  nonce: ?string,
  integrity: ?string,
+ crossOrigin: ?string,
 ): void {
  const key = getResourceKey('script', src);
  if (__DEV__) {
@@ -5444,6 +5445,7 @@ function preloadBootstrapScript(
  as: 'script',
  nonce,
  integrity,
+ crossOrigin,
  };
  const resource: PreloadResource = {
  type: 'preload',
@@ -5465,6 +5467,7 @@ function preloadBootstrapModule(
  src: string,
  nonce: ?string,
  integrity: ?string,
+ crossOrigin: ?string,
 ): void {
  const key = getResourceKey('script', src);
  if (__DEV__) {
@@ -5483,6 +5486,7 @@ function preloadBootstrapModule(
  href: src,
  nonce,
  integrity,
+ crossOrigin,
  };
  const resource: PreloadResource = {
  type: 'preload',

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3865,7 +3865,19 @@ describe('ReactDOMFizzServer', () => {
 
  expect(getVisibleChildren(document)).toEqual(
  <html>
- <head />
+ <head>
+ <link rel="preload" href="foo" as="script" />
+ <link rel="preload" href="bar" as="script" />
+ <link rel="preload" href="baz" as="script" crossorigin="" />
+ <link rel="preload" href="qux" as="script" crossorigin="" />
+ <link rel="modulepreload" href="quux" />
+ <link rel="modulepreload" href="corge" />
+ <link
+ rel="modulepreload"
+ href="grault"
+ crossorigin="use-credentials"
+ />
+ </head>
  <body>
  <div>hello world</div>
  </body>