[Fizz] Deduplicate <link rel="preload"> from Flight preload hints

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

packages/react-cache/package.json

@@ -4,8 +4,8 @@
   "description": "A basic cache for React applications",
   "version": "2.0.0-alpha.0",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-cache"
   },
   "files": [

packages/react-client/package.json

@@ -16,8 +16,8 @@
     "cjs/"
   ],
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-client"
   },
   "engines": {

packages/react-debug-tools/package.json

@@ -17,8 +17,8 @@
   ],
   "main": "index.js",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-debug-tools"
   },
   "engines": {

packages/react-devtools-fusebox/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-devtools-fusebox",
   "version": "0.0.0",
-  "private": "true",
   "license": "MIT",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build:frontend:copy-types": "cp src/*.d.ts dist/",
     "build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",

packages/react-devtools-shared/package.json

@@ -22,8 +22,8 @@
     "jsc-safe-url": "^0.2.4",
     "json5": "^2.2.3",
     "local-storage-fallback": "^4.1.1",
+    "rbush": "4.0.1",
     "react-virtualized-auto-sizer": "^1.0.23",
-    "react-window": "^1.8.10",
-    "rbush": "4.0.1"
+    "react-window": "^1.8.10"
   }
 }

packages/react-devtools/package.json

@@ -8,9 +8,7 @@
     "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-devtools"
   },
-  "bin": {
-    "react-devtools": "./bin.js"
-  },
+  "bin": "./bin.js",
   "files": [
     "bin.js",
     "app.html",

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -3018,6 +3018,66 @@ function pushLink(
       // boundaries in fallback are awaited or client render, in either case there is never hydration
       return null;
     } else {
+      if (rel === 'preload') {
+        // Preload links can be deduplicated against preloads initiated via the
+        // imperative preload() API or received as Flight hints. We check and
+        // register in resumableState to avoid duplicate link tags.
+        const as = props.as;
+        if (typeof as === 'string') {
+          switch (as) {
+            case 'image': {
+              const imageSrcSet =
+                typeof props.imageSrcSet === 'string'
+                  ? props.imageSrcSet
+                  : undefined;
+              const imageSizes =
+                typeof props.imageSizes === 'string'
+                  ? props.imageSizes
+                  : undefined;
+              const key = getImageResourceKey(href, imageSrcSet, imageSizes);
+              if (resumableState.imageResources.hasOwnProperty(key)) {
+                return null;
+              }
+              resumableState.imageResources[key] = PRELOAD_NO_CREDS;
+              break;
+            }
+            case 'style': {
+              const key = getResourceKey(href);
+              if (resumableState.styleResources.hasOwnProperty(key)) {
+                return null;
+              }
+              resumableState.styleResources[key] = PRELOAD_NO_CREDS;
+              break;
+            }
+            case 'script': {
+              const key = getResourceKey(href);
+              if (resumableState.scriptResources.hasOwnProperty(key)) {
+                return null;
+              }
+              resumableState.scriptResources[key] = PRELOAD_NO_CREDS;
+              break;
+            }
+            default: {
+              // font, audio, video, document, embed, fetch, object, track, worker, and others
+              const key = getResourceKey(href);
+              const hasAsType =
+                resumableState.unknownResources.hasOwnProperty(as);
+              let resources;
+              if (hasAsType) {
+                resources = resumableState.unknownResources[as];
+                if (resources.hasOwnProperty(key)) {
+                  return null;
+                }
+              } else {
+                resources = ({}: ResumableState['unknownResources']['asType']);
+                resumableState.unknownResources[as] = resources;
+              }
+              resources[key] = PRELOAD_NO_CREDS;
+              break;
+            }
+          }
+        }
+      }
       return pushLinkImpl(renderState.hoistableChunks, props);
     }
   }

packages/react-noop-renderer/package.json

@@ -5,14 +5,14 @@
   "description": "React package for testing the Fiber, Fizz and Flight reconcilers.",
   "main": "index.js",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-noop-renderer"
   },
   "license": "MIT",
   "dependencies": {
-    "react-reconciler": "*",
     "react-client": "*",
+    "react-reconciler": "*",
     "react-server": "*"
   },
   "peerDependencies": {

packages/react-server-dom-esm/package.json

@@ -46,8 +46,8 @@
   },
   "main": "index.js",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-server-dom-esm"
   },
   "engines": {

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -1978,6 +1978,87 @@ describe('ReactFlightDOM', () => {
     expect(hintRows.length).toEqual(6);
   });
 
+  it('does not duplicate font preload links from Flight hints during Fizz SSR', async () => {
+    async function ServerComponent() {
+      return (
+        <html>
+          <head>
+            <link
+              rel="preload"
+              as="font"
+              href="font-resource"
+              type="font/woff2"
+            />
+          </head>
+        </html>
+      );
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+    const {pipe} = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream(
+        <ServerComponent />,
+        webpackMap,
+      ),
+    );
+    pipe(flightWritable);
+
+    let response = null;
+    function getResponse() {
+      if (response === null) {
+        response =
+          ReactServerDOMClient.createFromReadableStream(flightReadable);
+      }
+      return response;
+    }
+
+    function App() {
+      return (
+        <html>
+          <body>{getResponse()}</body>
+        </html>
+      );
+    }
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(<App />).pipe(fizzWritable);
+    });
+
+    async function read(stream) {
+      const decoder = new TextDecoder();
+      const reader = stream.getReader();
+      let buffer = '';
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) {
+          buffer += decoder.decode();
+          break;
+        }
+        buffer += decoder.decode(value, {stream: true});
+      }
+      return buffer;
+    }
+
+    const html = await read(fizzReadable);
+    // The font preload should only appear once, from the Flight hint.
+    // It should not be duplicated by the rendered <link> element.
+    expect(html).toEqual(
+      '<!DOCTYPE html><html><head>' +
+        '<link rel="preload" href="font-resource" as="font" type="font/woff2"/>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<link rel="expect" href="#_R_" blocking="render"/>'
+          : '') +
+        '</head>' +
+        '<body><html><head></head></html>' +
+        (gate(flags => flags.enableFizzBlockingRender)
+          ? '<template id="_R_"></template>'
+          : '') +
+        '</body></html>',
+    );
+  });
+
   it('preloads resources without needing to render them', async () => {
     function NoScriptComponent() {
       return (

packages/react-server/package.json

@@ -18,8 +18,8 @@
   ],
   "main": "index.js",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-server"
   },
   "engines": {

packages/react-suspense-test-utils/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/facebook/react.git",
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
     "directory": "packages/react-suspense-test-utils"
   },
   "license": "MIT",