[Fizz] Share code between inline and external runtime (#33066)

Stacked on #33065.

The runtime is about to be a lot more complicated so we need to start
sharing some more code.

The problem with sharing code is that we want the inline runtime to as
much as possible be isolated in its scope using only a few global
variables to refer across runtimes.

A problem with Closure Compiler is that it refuses to inline functions
if they have closures inside of them. Which makes sense because of how
VMs work it can cause memory leaks. However, in our cases this doesn't
matter and code size matters more. So we can't use many clever tricks.

So this just favors writing the source in the inline form. Then we add
an extra compiler pass to turn those global variables into local
variables in the external runtime.

Author: sebmarkbage

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

@@ -7,12 +7,7 @@
 
 // Imports are resolved statically by the closure compiler in release bundles
 // and by rollup in jest unit tests
-import {
-  clientRenderBoundary,
-  completeBoundaryWithStyles,
-  completeBoundary,
-  completeSegment,
-} from './fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime';
+import './fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime';
 
 if (document.body != null) {
   if (document.readyState === 'loading') {
@@ -82,7 +77,7 @@ function handleNode(node_: Node) {
   const node = (node_: HTMLElement);
   const dataset = node.dataset;
   if (dataset['rxi'] != null) {
-    clientRenderBoundary(
+    window['$RX'](
       dataset['bid'],
       dataset['dgst'],
       dataset['msg'],
@@ -92,17 +87,13 @@ function handleNode(node_: Node) {
     node.remove();
   } else if (dataset['rri'] != null) {
     // Convert styles here, since its type is Array<Array<string>>
-    completeBoundaryWithStyles(
-      dataset['bid'],
-      dataset['sid'],
-      JSON.parse(dataset['sty']),
-    );
+    window['$RR'](dataset['bid'], dataset['sid'], JSON.parse(dataset['sty']));
     node.remove();
   } else if (dataset['rci'] != null) {
-    completeBoundary(dataset['bid'], dataset['sid']);
+    window['$RC'](dataset['bid'], dataset['sid']);
     node.remove();
   } else if (dataset['rsi'] != null) {
-    completeSegment(dataset['sid'], dataset['pid']);
+    window['$RS'](dataset['sid'], dataset['pid']);
     node.remove();
   }
 }

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineClientRenderBoundary.js

@@ -1,4 +1,4 @@
-import {clientRenderBoundary} from './ReactDOMFizzInstructionSetInlineSource';
+import {clientRenderBoundary} from './ReactDOMFizzInstructionSetShared';
 
 // This is a string so Closure's advanced compilation mode doesn't mangle it.
 // eslint-disable-next-line dot-notation

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundary.js

@@ -1,4 +1,4 @@
-import {completeBoundary} from './ReactDOMFizzInstructionSetInlineSource';
+import {completeBoundary} from './ReactDOMFizzInstructionSetShared';
 
 // This is a string so Closure's advanced compilation mode doesn't mangle it.
 // eslint-disable-next-line dot-notation

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundaryWithStyles.js

@@ -1,4 +1,4 @@
-import {completeBoundaryWithStyles} from './ReactDOMFizzInstructionSetInlineSource';
+import {completeBoundaryWithStyles} from './ReactDOMFizzInstructionSetShared';
 
 // This is a string so Closure's advanced compilation mode doesn't mangle it.
 // eslint-disable-next-line dot-notation

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteSegment.js

@@ -1,4 +1,4 @@
-import {completeSegment} from './ReactDOMFizzInstructionSetInlineSource';
+import {completeSegment} from './ReactDOMFizzInstructionSetShared';
 
 // This is a string so Closure's advanced compilation mode doesn't mangle it.
 // eslint-disable-next-line dot-notation

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js

@@ -5,138 +5,17 @@
 import {
   clientRenderBoundary,
   completeBoundary,
+  completeBoundaryWithStyles,
   completeSegment,
   listenToFormSubmissionsForReplaying,
 } from './ReactDOMFizzInstructionSetShared';
 
-export {clientRenderBoundary, completeBoundary, completeSegment};
-
-const resourceMap = new Map();
-
-// This function is almost identical to the version used by inline scripts
-// (ReactDOMFizzInstructionSetInlineSource), with the exception of how we read
-// completeBoundary and resourceMap
-export function completeBoundaryWithStyles(
-  suspenseBoundaryID,
-  contentID,
-  stylesheetDescriptors,
-) {
-  const precedences = new Map();
-  const thisDocument = document;
-  let lastResource, node;
-
-  // Seed the precedence list with existing resources and collect hoistable style tags
-  const nodes = thisDocument.querySelectorAll(
-    'link[data-precedence],style[data-precedence]',
-  );
-  const styleTagsToHoist = [];
-  for (let i = 0; (node = nodes[i++]); ) {
-    if (node.getAttribute('media') === 'not all') {
-      styleTagsToHoist.push(node);
-    } else {
-      if (node.tagName === 'LINK') {
-        resourceMap.set(node.getAttribute('href'), node);
-      }
-      precedences.set(node.dataset['precedence'], (lastResource = node));
-    }
-  }
-
-  let i = 0;
-  const dependencies = [];
-  let href, precedence, attr, loadingState, resourceEl, media;
-
-  function cleanupWith(cb) {
-    this['_p'] = null;
-    cb();
-  }
-
-  // Sheets Mode
-  let sheetMode = true;
-  while (true) {
-    if (sheetMode) {
-      // Sheet Mode iterates over the stylesheet arguments and constructs them if new or checks them for
-      // dependency if they already existed
-      const stylesheetDescriptor = stylesheetDescriptors[i++];
-      if (!stylesheetDescriptor) {
-        // enter <style> Mode
-        sheetMode = false;
-        i = 0;
-        continue;
-      }
-
-      let avoidInsert = false;
-      let j = 0;
-      href = stylesheetDescriptor[j++];
-
-      if ((resourceEl = resourceMap.get(href))) {
-        // We have an already inserted stylesheet.
-        loadingState = resourceEl['_p'];
-        avoidInsert = true;
-      } else {
-        // We haven't already processed this href so we need to construct a stylesheet and hoist it
-        // We construct it here and attach a loadingState. We also check whether it matches
-        // media before we include it in the dependency array.
-        resourceEl = thisDocument.createElement('link');
-        resourceEl.href = href;
-        resourceEl.rel = 'stylesheet';
-        resourceEl.dataset['precedence'] = precedence =
-          stylesheetDescriptor[j++];
-        while ((attr = stylesheetDescriptor[j++])) {
-          resourceEl.setAttribute(attr, stylesheetDescriptor[j++]);
-        }
-        loadingState = resourceEl['_p'] = new Promise((resolve, reject) => {
-          resourceEl.onload = cleanupWith.bind(resourceEl, resolve);
-          resourceEl.onerror = cleanupWith.bind(resourceEl, reject);
-        });
-        // Save this resource element so we can bailout if it is used again
-        resourceMap.set(href, resourceEl);
-      }
-      media = resourceEl.getAttribute('media');
-      if (loadingState && (!media || window['matchMedia'](media).matches)) {
-        dependencies.push(loadingState);
-      }
-      if (avoidInsert) {
-        // We have a link that is already in the document. We don't want to fall through to the insert path
-        continue;
-      }
-    } else {
-      // <style> mode iterates over not-yet-hoisted <style> tags with data-precedence and hoists them.
-      resourceEl = styleTagsToHoist[i++];
-      if (!resourceEl) {
-        // we are done with all style tags
-        break;
-      }
-
-      precedence = resourceEl.getAttribute('data-precedence');
-      resourceEl.removeAttribute('media');
-    }
-
-    // resourceEl is either a newly constructed <link rel="stylesheet" ...> or a <style> tag requiring hoisting
-    const prior = precedences.get(precedence) || lastResource;
-    if (prior === lastResource) {
-      lastResource = resourceEl;
-    }
-    precedences.set(precedence, resourceEl);
-
-    // Finally, we insert the newly constructed instance at an appropriate location
-    // in the Document.
-    if (prior) {
-      prior.parentNode.insertBefore(resourceEl, prior.nextSibling);
-    } else {
-      const head = thisDocument.head;
-      head.insertBefore(resourceEl, head.firstChild);
-    }
-  }
-
-  Promise.all(dependencies).then(
-    completeBoundary.bind(null, suspenseBoundaryID, contentID, ''),
-    completeBoundary.bind(
-      null,
-      suspenseBoundaryID,
-      contentID,
-      'Resource failed to load',
-    ),
-  );
-}
+// This is a string so Closure's advanced compilation mode doesn't mangle it.
+// These will be renamed to local references by the external-runtime-plugin.
+window['$RM'] = new Map();
+window['$RX'] = clientRenderBoundary;
+window['$RC'] = completeBoundary;
+window['$RR'] = completeBoundaryWithStyles;
+window['$RS'] = completeSegment;
 
 listenToFormSubmissionsForReplaying();