From 30539e6d8aa8ada22bfb41fd85e057b7229cadbd Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sun, 17 Sep 2023 22:50:42 -0400
Subject: [PATCH] Attempt to convert resource maps to serializable sets

---
 .../src/server/ReactFizzConfigDOM.js          | 169 ++++++++----------
 1 file changed, 79 insertions(+), 90 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index d0990c96a6806..4677a98cdc052 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -152,6 +152,7 @@ export type RenderState = {
   fontPreloads: Set<PreloadResource>,
   highImagePreloads: Set<PreloadResource>,
   // usedImagePreloads: Set<PreloadResource>,
+  // TODO: Precedences needs to be seeded with the order of precedence after resuming.
   precedences: Map<string, Set<StyleResource>>,
   stylePrecedences: Map<string, StyleTagResource>,
   bootstrapScripts: Set<PreloadResource>,
@@ -186,10 +187,10 @@ export type ResumableState = {
   hasHtml: boolean,
 
   // Resources - Request local cache
-  preloadsMap: Map<string, PreloadResource>,
-  preconnectsMap: Map<string, PreconnectResource>,
-  stylesMap: Map<string, StyleResource>,
-  scriptsMap: Map<string, ScriptResource>,
+  preloadsMap: {[key: string]: null},
+  preconnectsMap: {[key: string]: null},
+  stylesMap: {[key: string]: null},
+  scriptsMap: {[key: string]: null},
 };
 
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
@@ -491,10 +492,10 @@ export function createResumableState(
     // @TODO add bootstrap script to implicit preloads
 
     // persistent
-    preloadsMap: new Map(),
-    preconnectsMap: new Map(),
-    stylesMap: new Map(),
-    scriptsMap: new Map(),
+    preloadsMap: {},
+    preconnectsMap: {},
+    stylesMap: {},
+    scriptsMap: {},
   };
 }
 
@@ -2131,10 +2132,9 @@ function pushLink(
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
-        let resource = resumableState.stylesMap.get(key);
-        if (!resource) {
+        if (!resumableState.stylesMap.hasOwnProperty(key)) {
           const resourceProps = stylesheetPropsFromRawProps(props);
-          const preloadResource = resumableState.preloadsMap.get(key);
+          const preloadResource = resumableState.preloadsMap.get(key); // TODO
           let state = NoState;
           if (preloadResource) {
             // If we already had a preload we don't want that resource to flush directly.
@@ -2148,13 +2148,13 @@ function pushLink(
               state = PreloadFlushed;
             }
           }
-          resource = {
+          const resource = {
             type: 'stylesheet',
             chunks: ([]: Array<Chunk | PrecomputedChunk>),
             state,
             props: resourceProps,
           };
-          resumableState.stylesMap.set(key, resource);
+          resumableState.stylesMap[key] = null;
           let precedenceSet = renderState.precedences.get(precedence);
           if (!precedenceSet) {
             precedenceSet = new Set();
@@ -2182,7 +2182,7 @@ function pushLink(
           precedenceSet.add(resource);
         }
         if (renderState.boundaryResources) {
-          renderState.boundaryResources.add(resource);
+          renderState.boundaryResources.add(resource); // TODO
         }
         if (textEmbedded) {
           // This link follows text but we aren't writing a tag. while not as efficient as possible we need
@@ -2313,9 +2313,8 @@ function pushStyle(
     }
 
     const key = getResourceKey('style', href);
-    let resource = resumableState.stylesMap.get(key);
-    if (!resource) {
-      resource = renderState.stylePrecedences.get(precedence);
+    if (!resumableState.stylesMap.hasOwnProperty(key)) {
+      let resource = renderState.stylePrecedences.get(precedence);
       if (!resource) {
         resource = {
           type: 'style',
@@ -2341,12 +2340,12 @@ function pushStyle(
       } else {
         resource.props.hrefs.push(href);
       }
-      resumableState.stylesMap.set(key, resource);
-      if (renderState.boundaryResources) {
-        renderState.boundaryResources.add(resource);
-      }
+      resumableState.stylesMap[key] = null;
       pushStyleContents(resource.chunks, props);
     }
+    if (renderState.boundaryResources) {
+      renderState.boundaryResources.add(resource); // TODO
+    }
 
     if (textEmbedded) {
       // This link follows text but we aren't writing a tag. while not as efficient as possible we need
@@ -2499,9 +2498,8 @@ function pushImg(
     // resumableState.
     const {sizes} = props;
     const key = getImagePreloadKey(src, srcSet, sizes);
-    let resource = resumableState.preloadsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const resource = {
         type: 'preload',
         chunks: [],
         state: NoState,
@@ -2522,16 +2520,16 @@ function pushImg(
           referrerPolicy: props.referrerPolicy,
         },
       };
-      resumableState.preloadsMap.set(key, resource);
+      resumableState.preloadsMap[key] = resource;
       pushLinkImpl(resource.chunks, resource.props);
-    }
-    if (
-      props.fetchPriority === 'high' ||
-      renderState.highImagePreloads.size < 10
-    ) {
-      renderState.highImagePreloads.add(resource);
-    } else {
-      renderState.bulkPreloads.add(resource);
+      if (
+        props.fetchPriority === 'high' ||
+        renderState.highImagePreloads.size < 10
+      ) {
+        renderState.highImagePreloads.add(resource);
+      } else {
+        renderState.bulkPreloads.add(resource);
+      }
     }
   }
   return pushSelfClosing(target, props, 'img');
@@ -2867,20 +2865,19 @@ function pushScript(
     const src = props.src;
     const key = getResourceKey('script', src);
     // We can make this <script> into a ScriptResource
-    let resource = resumableState.scriptsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.scriptsMap.set(key, resource);
+      resumableState.scriptsMap[key] = null;
       // Add to the script flushing queue
       renderState.scripts.add(resource);
 
       let scriptProps = props;
-      const preloadResource = resumableState.preloadsMap.get(key);
+      const preloadResource = resumableState.preloadsMap.get(key); // TODO
       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.
@@ -5011,21 +5008,20 @@ function prefetchDNS(href: string) {
 
   if (typeof href === 'string' && href) {
     const key = getResourceKey('prefetchDNS', href);
-    let resource = resumableState.preconnectsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+      const resource = {
         type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.preconnectsMap.set(key, resource);
+      resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
         resource.chunks,
         ({href, rel: 'dns-prefetch'}: PreconnectProps),
       );
+      renderState.preconnects.add(resource);
     }
-    renderState.preconnects.add(resource);
     flushResources(request);
   }
 }
@@ -5050,21 +5046,20 @@ function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
     const key = `[preconnect][${
       typeof crossOrigin === 'string' ? crossOrigin : 'null'
     }]${href}`;
-    let resource = resumableState.preconnectsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+      const resource = {
         type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.preconnectsMap.set(key, resource);
+      resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
         resource.chunks,
         ({rel: 'preconnect', href, crossOrigin}: PreconnectProps),
       );
+      renderState.preconnects.add(resource);
     }
-    renderState.preconnects.add(resource);
     flushResources(request);
   }
 }
@@ -5095,8 +5090,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
     } else {
       key = getResourceKey(as, href);
     }
-    let resource = resumableState.preloadsMap.get(key);
-    if (!resource) {
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
       const props = Object.assign(
         ({
           rel: 'preload',
@@ -5105,21 +5099,21 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         }: PreloadProps),
         options,
       );
-      resource = {
+      const resource = {
         type: 'preload',
         chunks: [],
         state: NoState,
         props,
       };
-      resumableState.preloadsMap.set(key, resource);
+      resumableState.preloadsMap[key] = null;
       pushLinkImpl(resource.chunks, resource.props);
-    }
-    if (as === 'font') {
-      renderState.fontPreloads.add(resource);
-    } else if (as === 'image' && resource.props.fetchPriority === 'high') {
-      renderState.highImagePreloads.add(resource);
-    } else {
-      renderState.bulkPreloads.add(resource);
+      if (as === 'font') {
+        renderState.fontPreloads.add(resource);
+      } else if (as === 'image' && resource.props.fetchPriority === 'high') {
+        renderState.highImagePreloads.add(resource);
+      } else {
+        renderState.bulkPreloads.add(resource);
+      }
     }
     flushResources(request);
   }
@@ -5147,25 +5141,24 @@ function preloadModule(
     const as =
       options && typeof options.as === 'string' ? options.as : 'script';
     const key = getResourceKey(as, href);
-    let resource = resumableState.preloadsMap.get(key);
-    const props: PreloadModuleProps = Object.assign(
-      ({
-        rel: 'modulepreload',
-        href,
-      }: PreloadModuleProps),
-      options,
-    );
-    if (!resource) {
-      resource = {
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const props: PreloadModuleProps = Object.assign(
+        ({
+          rel: 'modulepreload',
+          href,
+        }: PreloadModuleProps),
+        options,
+      );
+      const resource = {
         type: 'preload',
         chunks: [],
         state: NoState,
         props,
       };
-      resumableState.preloadsMap.set(key, resource);
+      resumableState.preloadsMap[key] = null;
       pushLinkImpl(resource.chunks, resource.props);
+      renderState.bulkPreloads.add(resource);
     }
-    renderState.bulkPreloads.add(resource);
     flushResources(request);
   }
 }
@@ -5192,11 +5185,10 @@ function preinitStyle(
   if (href) {
     const as = 'style';
     const key = getResourceKey(as, href);
-    let resource = resumableState.stylesMap.get(key);
-    if (!resource) {
+    if (!resumableState.stylesMap.hasOwnProperty(key)) {
       precedence = precedence || 'default';
       let state = NoState;
-      const preloadResource = resumableState.preloadsMap.get(key);
+      const preloadResource = resumableState.preloadsMap.get(key); // TODO
       if (preloadResource && preloadResource.state & Flushed) {
         state = PreloadFlushed;
       }
@@ -5208,13 +5200,13 @@ function preinitStyle(
         }: StylesheetProps),
         options,
       );
-      resource = {
+      const resource = {
         type: 'stylesheet',
         chunks: ([]: Array<Chunk | PrecomputedChunk>),
         state,
         props,
       };
-      resumableState.stylesMap.set(key, resource);
+      resumableState.stylesMap[key] = null;
       let precedenceSet = renderState.precedences.get(precedence);
       if (!precedenceSet) {
         precedenceSet = new Set();
@@ -5263,15 +5255,14 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
   const renderState = getRenderState(request);
   if (src) {
     const key = getResourceKey('script', src);
-    let resource = resumableState.scriptsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.scriptsMap.set(key, resource);
+      resumableState.scriptsMap[key] = null;
       const props: ScriptProps = Object.assign(
         ({
           src,
@@ -5307,15 +5298,14 @@ function preinitModuleScript(
   const renderState = getRenderState(request);
   if (src) {
     const key = getResourceKey('script', src);
-    let resource = resumableState.scriptsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.scriptsMap.set(key, resource);
+      resumableState.scriptsMap[key] = null;
       const props = Object.assign(
         ({
           src,
@@ -5371,7 +5361,7 @@ function preloadBootstrapScript(
     state: NoState,
     props,
   };
-  resumableState.preloadsMap.set(key, resource);
+  resumableState.preloadsMap[key] = null;
   renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
 }
@@ -5414,7 +5404,7 @@ function preloadBootstrapModule(
     state: NoState,
     props,
   };
-  resumableState.preloadsMap.set(key, resource);
+  resumableState.preloadsMap[key] = null;
   renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
   return;
@@ -5427,15 +5417,14 @@ function internalPreinitScript(
   chunks: Array<Chunk | PrecomputedChunk>,
 ): void {
   const key = getResourceKey('script', src);
-  let resource = resumableState.scriptsMap.get(key);
-  if (!resource) {
-    resource = {
+  if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+    const resource = {
       type: 'script',
       chunks,
       state: NoState,
       props: null,
     };
-    resumableState.scriptsMap.set(key, resource);
+    resumableState.scriptsMap[key] = null;
     renderState.scripts.add(resource);
   }
   return;