[Fizz] External runtime: fix bug in processing existing elements

mofeiZ · mofeiZ · commit b5a35376d730 · 2023-03-03T18:29:44.000-05:00
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -21,35 +21,37 @@ if (!window.$RC) {
   window.$RM = new Map();
 }
 
-if (document.readyState === 'loading') {
-  if (document.body != null) {
+if (document.body != null) {
+  if (document.readyState === 'loading') {
     installFizzInstrObserver(document.body);
-  } else {
-    // body may not exist yet if the fizz runtime is sent in <head>
-    // (e.g. as a preinit resource)
-    // $FlowFixMe[recursive-definition]
-    const domBodyObserver = new MutationObserver(() => {
-      // We expect the body node to be stable once parsed / created
-      if (document.body) {
-        if (document.readyState === 'loading') {
-          installFizzInstrObserver(document.body);
-        }
-        handleExistingNodes();
-        // We can call disconnect without takeRecord here,
-        // since we only expect a single document.body
-        domBodyObserver.disconnect();
-      }
-    });
-    // documentElement must already exist at this point
-    // $FlowFixMe[incompatible-call]
-    domBodyObserver.observe(document.documentElement, {childList: true});
   }
-}
+  // $FlowFixMe[incompatible-cast]
+  handleExistingNodes((document.body /*: HTMLElement */));
+} else {
+  // Document must be loading -- body may not exist yet if the fizz external
+  // runtime is sent in <head> (e.g. as a preinit resource)
+  // $FlowFixMe[recursive-definition]
+  const domBodyObserver = new MutationObserver(() => {
+    // We expect the body node to be stable once parsed / created
+    if (document.body != null) {
+      if (document.readyState === 'loading') {
+        installFizzInstrObserver(document.body);
+      }
+      // $FlowFixMe[incompatible-cast]
+      handleExistingNodes((document.body /*: HTMLElement */));
 
-handleExistingNodes();
+      // We can call disconnect without takeRecord here,
+      // since we only expect a single document.body
+      domBodyObserver.disconnect();
+    }
+  });
+  // documentElement must already exist at this point
+  // $FlowFixMe[incompatible-call]
+  domBodyObserver.observe(document.documentElement, {childList: true});
+}
 
-function handleExistingNodes() {
-  const existingNodes = document.getElementsByTagName('template');
+function handleExistingNodes(target /*: HTMLElement */) {
+  const existingNodes = Array.from(target.children);
   for (let i = 0; i < existingNodes.length; i++) {
     handleNode(existingNodes[i]);
   }
