Track PreloadsProps on the resumable map

We have to ensure these are serializable.

We transfer them to the resume so that they can be applied to resources
discovered during the resume.

Author: sebmarkbage

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

@@ -189,7 +189,7 @@ export type ResumableState = {
   hasHtml: boolean,
 
   // Resources - Request local cache
-  preloadsMap: {[key: string]: null},
+  preloadsMap: {[key: string]: PreloadProps},
   preconnectsMap: {[key: string]: null},
   stylesMap: {[key: string]: null},
   scriptsMap: {[key: string]: null},
@@ -2139,23 +2139,23 @@ function pushLink(
         let stylesInPrecedence = renderState.precedences.get(precedence);
         if (!resumableState.stylesMap.hasOwnProperty(key)) {
           const resourceProps = stylesheetPropsFromRawProps(props);
-          const preloadResource = renderState.preloadsMap.get(key);
           let state = NoState;
-          if (preloadResource) {
-            // If we already had a preload we don't want that resource to flush directly.
-            // We let the newly created resource govern flushing.
-            preloadResource.state |= Blocked;
-            adoptPreloadPropsForStylesheetProps(
-              resourceProps,
-              preloadResource.props,
-            );
-            if (preloadResource.state & Flushed) {
+          if (resumableState.preloadsMap.hasOwnProperty(key)) {
+            const preloadProps: PreloadProps = resumableState.preloadsMap[key];
+            adoptPreloadPropsForStylesheetProps(resourceProps, preloadProps);
+            const preloadResource = renderState.preloadsMap.get(key);
+            if (preloadResource) {
+              // If we already had a preload we don't want that resource to flush directly.
+              // We let the newly created resource govern flushing.
+              preloadResource.state |= Blocked;
+              if (preloadResource.state & Flushed) {
+                state = PreloadFlushed;
+              }
+            } else {
+              // If we resumed then we assume that this was already flushed
+              // by the shell.
               state = PreloadFlushed;
             }
-          } else if (resumableState.preloadsMap.hasOwnProperty(key)) {
-            // If we resumed then we assume that this was already flushed
-            // by the shell.
-            state = PreloadFlushed;
           }
           const resource = {
             type: 'stylesheet',
@@ -2549,7 +2549,7 @@ function pushImg(
           referrerPolicy: props.referrerPolicy,
         },
       };
-      resumableState.preloadsMap[key] = null;
+      resumableState.preloadsMap[key] = resource.props;
       renderState.preloadsMap.set(key, resource);
       pushLinkImpl(resource.chunks, resource.props);
       if (
@@ -2907,13 +2907,16 @@ function pushScript(
       renderState.scripts.add(resource);
 
       let scriptProps = props;
-      const preloadResource = renderState.preloadsMap.get(key);
-      if (preloadResource) {
-        // If we already had a preload we don't want that resource to flush directly.
-        // We let the newly created resource govern flushing.
-        preloadResource.state |= Blocked;
+      if (resumableState.preloadsMap.hasOwnProperty(key)) {
+        const preloadProps: PreloadProps = resumableState.preloadsMap[key];
         scriptProps = {...props};
-        adoptPreloadPropsForScriptProps(scriptProps, preloadResource.props);
+        adoptPreloadPropsForScriptProps(scriptProps, preloadProps);
+        const preloadResource = renderState.preloadsMap.get(key);
+        if (preloadResource) {
+          // If we already had a preload we don't want that resource to flush directly.
+          // We let the newly created resource govern flushing.
+          preloadResource.state |= Blocked;
+        }
       }
       // encode the tag as Chunks
       pushScriptImpl(resource.chunks, scriptProps);
@@ -4958,12 +4961,12 @@ type PreloadAsProps = {
   rel: 'preload',
   as: string,
   href: ?string,
-  [string]: mixed,
+  [string]: ?string,
 };
 type PreloadModuleProps = {
   rel: 'modulepreload',
   href: ?string,
-  [string]: mixed,
+  [string]: ?string,
 };
 type PreloadProps = PreloadAsProps | PreloadModuleProps;
 type PreloadResource = TResource<'preload', PreloadProps>;
@@ -5135,9 +5138,9 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         state: NoState,
         props,
       };
-      resumableState.preloadsMap[key] = null;
+      resumableState.preloadsMap[key] = props;
       renderState.preloadsMap.set(key, resource);
-      pushLinkImpl(resource.chunks, resource.props);
+      pushLinkImpl(resource.chunks, props);
       if (as === 'font') {
         renderState.fontPreloads.add(resource);
       } else if (as === 'image' && resource.props.fetchPriority === 'high') {
@@ -5186,7 +5189,7 @@ function preloadModule(
         state: NoState,
         props,
       };
-      resumableState.preloadsMap[key] = null;
+      resumableState.preloadsMap[key] = props;
       renderState.preloadsMap.set(key, resource);
       pushLinkImpl(resource.chunks, resource.props);
       renderState.bulkPreloads.add(resource);
@@ -5397,7 +5400,7 @@ function preloadBootstrapScript(
     state: NoState,
     props,
   };
-  resumableState.preloadsMap[key] = null;
+  resumableState.preloadsMap[key] = props;
   renderState.preloadsMap.set(key, resource);
   renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
@@ -5441,7 +5444,7 @@ function preloadBootstrapModule(
     state: NoState,
     props,
   };
-  resumableState.preloadsMap[key] = null;
+  resumableState.preloadsMap[key] = props;
   renderState.preloadsMap.set(key, resource);
   renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);