refactor external runtime instructions for density

gnoff · Jan 18, 2023 · 8e5cd60 · 8e5cd60
1 parent 9bad42a
commit 8e5cd60
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 55 deletions.
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -80,38 +80,36 @@ function handleNode(node_ /*: Node */) {
   const node = (node_ /*: HTMLElement*/);
   const dataset = node.dataset;
 
-  if (dataset.hasOwnProperty('ri')) {
+  if (dataset['ix'] != null) {
     node.remove();
-    switch (dataset.ri) {
-      case 'x':
-        return clientRenderBoundary(
-          dataset.bid,
-          dataset.dgst,
-          dataset.msg,
-          dataset.stck,
-        );
-      case 's':
-        return completeSegment(dataset.sid, dataset.pid);
-      case 'b':
-        return completeBoundary(dataset.bid, dataset.sid);
-      case 'rb':
-        return completeBoundaryWithStyles(
-          dataset.bid,
-          dataset.sid,
-          JSON.parse(dataset.sty),
-        );
-      case 'c':
-        return completeContainer(dataset.bid, dataset.sid);
-      case 'rc':
-        return completeContainerWithStyles(
-          dataset.bid,
-          dataset.sid,
-          JSON.parse(dataset.sty),
-        );
-      default:
-        throw new Error(
-          'React encountered a render instruction it did not recognize.',
-        );
-    }
+    return clientRenderBoundary(
+      dataset['ix'],
+      dataset['dgst'],
+      dataset['msg'],
+      dataset['stck'],
+    );
+  } else if (dataset['is'] != null) {
+    node.remove();
+    return completeSegment(dataset['is'], dataset['p']);
+  } else if (dataset['ir'] != null) {
+    node.remove();
+    return completeBoundaryWithStyles(
+      dataset['ir'],
+      dataset['s'],
+      JSON.parse(dataset['r']),
+    );
+  } else if (dataset['ib'] != null) {
+    node.remove();
+    return completeBoundary(dataset['ib'], dataset['s']);
+  } else if (dataset['ik'] != null) {
+    node.remove();
+    return completeContainerWithStyles(
+      dataset['ik'],
+      dataset['s'],
+      JSON.parse(dataset['r']),
+    );
+  } else if (dataset['ic'] != null) {
+    node.remove();
+    return completeContainer(dataset['ic'], dataset['s']);
   }
 }
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -2509,10 +2509,23 @@ const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
 const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
 
-const completeSegmentData1 = stringToPrecomputedChunk(
-  '<template data-ri="s" data-sid="',
-);
-const completeSegmentData2 = stringToPrecomputedChunk('" data-pid="');
+/**
+ * Instrucntion enconding legend
+ *
+ * is = complete segment instruction (segmentID)
+ * ix = client render boundaryinstrunction (boundaryID)
+ * ib = complete boundary instruction (boundaryID)
+ * ir = complete boundary with styles insertion instruction (boundaryID)
+ * ic = complete container instruction (containerID)
+ * ik = complete container with styles insertion instruction (containerID)
+ *
+ * s = segmentID
+ * p = placeholderID
+ * r = styles JSON string
+ */
+
+const completeSegmentData1 = stringToPrecomputedChunk('<template data-is="');
+const completeSegmentData2 = stringToPrecomputedChunk('" data-p="');
 const completeSegmentDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedSegmentInstruction(
@@ -2586,24 +2599,16 @@ const bootstrapContainerOpenStart = stringToPrecomputedChunk(
 const bootstrapContainerOpenEnd = stringToPrecomputedChunk('">');
 const bootstrapContainerClose = stringToPrecomputedChunk('</template>');
 
-const completeContainerData1 = stringToPrecomputedChunk(
-  '<template data-ri="c" data-bid="',
-);
+const completeContainerData1 = stringToPrecomputedChunk('<template data-ic="');
 const completeContainerWithStylesData1 = stringToPrecomputedChunk(
-  '<template data-ri="rc" data-bid="',
-);
-const completeBoundaryData1 = stringToPrecomputedChunk(
-  '<template data-ri="b" data-bid="',
+  '<template data-ik="',
 );
+const completeBoundaryData1 = stringToPrecomputedChunk('<template data-ib="');
 const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
-  '<template data-ri="rb" data-bid="',
-);
-const completeBoundaryOrContainerData2 = stringToPrecomputedChunk(
-  '" data-sid="',
-);
-const completeBoundaryOrContainerData3 = stringToPrecomputedChunk(
-  '" data-sty="',
+  '<template data-ir="',
 );
+const completeBoundaryOrContainerData2 = stringToPrecomputedChunk('" data-s="');
+const completeBoundaryOrContainerData3 = stringToPrecomputedChunk('" data-r="');
 const completeBoundaryOrContainerDataEmptyEnd = dataElementQuotedEnd;
 
 export function writeCompletedBoundaryInstruction(
@@ -2852,9 +2857,7 @@ const clientRenderScript1A = stringToPrecomputedChunk('"');
 const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
 
-const clientRenderData1 = stringToPrecomputedChunk(
-  '<template data-ri="x" data-bid="',
-);
+const clientRenderData1 = stringToPrecomputedChunk('<template data-ix="');
 const clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
 const clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
 const clientRenderData4 = stringToPrecomputedChunk('" data-stck="');
@@ -2882,7 +2885,7 @@ export function writeClientRenderBoundaryInstruction(
       writeChunk(destination, clientRenderScript1Partial);
     }
   } else {
-    // <template data-ri="x" data-bid="
+    // <template data-ix="
     writeChunk(destination, clientRenderData1);
   }
 

diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -114,7 +114,18 @@ async function replaceScriptsAndMove(
     node.nodeType === 1 &&
     // $FlowFixMe[prop-missing]
     node.dataset != null &&
-    node.dataset.ri != null
+    // client render instruction
+    (node.dataset.ix != null ||
+      // segement instruction
+      node.dataset.is != null ||
+      // boundary with styles instruction
+      node.dataset.ir != null ||
+      // boundary instruction
+      node.dataset.ib != null ||
+      // container with styles instruction
+      node.dataset.ik != null ||
+      // container instruction
+      node.dataset.ic != null)
   ) {
     // External runtime assumes that instruction data nodes are eventually
     // appended to the body