Support Document as a container for hydration and rendering

gnoff · gnoff · commit fd0613113695 · 2022-05-09T09:02:23.000-07:00
Previously Document was not handled effectively as a container. in particual when hydrating if there was a fallback to client rendering React would attempt to append a new &lt;html&gt; element into the document before clearing out the existing one which errored leaving the application in brokent state.

The initial approach I took was to recycle the documentElement and never remove or append it, always just moving it to the right fiber and appending the right children (heady/body) as needed. However in testing a simple approach in modern browsers it seems like treating the documentElement like any other element works fine. This change modifies the clearContainer method to remove the documentElement if the container is a DOCUMENT_NODE. Once the container is cleared React can append a new documentElement via normal means.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -672,9 +672,8 @@ export function clearContainer(container: Container): void {
   if (container.nodeType === ELEMENT_NODE) {
     ((container: any): Element).textContent = '';
   } else if (container.nodeType === DOCUMENT_NODE) {
-    const body = ((container: any): Document).body;
-    if (body != null) {
-      body.textContent = '';
+    if (container.documentElement) {
+      container.removeChild(container.documentElement);
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -672,9 +672,8 @@ export function clearContainer(container: Container): void {`
`672`	`672`	`if (container.nodeType === ELEMENT_NODE) {`
`673`	`673`	`((container: any): Element).textContent = '';`
`674`	`674`	`} else if (container.nodeType === DOCUMENT_NODE) {`
`675`		`- const body = ((container: any): Document).body;`
`676`		`- if (body != null) {`
`677`		`- body.textContent = '';`
	`675`	`+ if (container.documentElement) {`
	`676`	`+ container.removeChild(container.documentElement);`
`678`	`677`	`}`
`679`	`678`	`}`
`680`	`679`	`}`