From c8c4d22321f70cc1ecea1ec9f487c07e65807194 Mon Sep 17 00:00:00 2001
From: Josh Story
Date: Fri, 5 Aug 2022 16:33:02 -0700
Subject: [PATCH 01/12] implement preamble and postambl for react-dom/server
---
.../src/__tests__/ReactDOMFizzServer-test.js | 137 +++++++++++++++++-
.../src/server/ReactDOMServerFormatConfig.js | 24 +++
.../src/ReactNoopServer.js | 2 +
packages/react-server/src/ReactFizzServer.js | 47 ++++--
4 files changed, 197 insertions(+), 13 deletions(-)
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 60a3a3938df3e..c18125a7b542a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -128,6 +128,8 @@ describe('ReactDOMFizzServer', () => {
buffer = '';
const fakeBody = document.createElement('body');
fakeBody.innerHTML = bufferedContent;
+ const parent =
+ container.nodeName === '#document' ? container.body : container;
while (fakeBody.firstChild) {
const node = fakeBody.firstChild;
if (
@@ -137,13 +139,37 @@ describe('ReactDOMFizzServer', () => {
const script = document.createElement('script');
script.textContent = node.textContent;
fakeBody.removeChild(node);
- container.appendChild(script);
+ parent.appendChild(script);
} else {
- container.appendChild(node);
+ parent.appendChild(node);
}
}
}
+ async function actIntoEmptyDocument(callback) {
+ await callback();
+ // Await one turn around the event loop.
+ // This assumes that we'll flush everything we have so far.
+ await new Promise(resolve => {
+ setImmediate(resolve);
+ });
+ if (hasErrored) {
+ throw fatalError;
+ }
+ // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+ // We also want to execute any scripts that are embedded.
+ // We assume that we have now received a proper fragment of HTML.
+ const bufferedContent = buffer;
+ // Test Environment
+ const jsdom = new JSDOM(bufferedContent, {
+ runScripts: 'dangerously',
+ });
+ window = jsdom.window;
+ document = jsdom.window.document;
+ container = document;
+ buffer = '';
+ }
+
function getVisibleChildren(element) {
const children = [];
let node = element.firstChild;
@@ -4194,6 +4220,113 @@ describe('ReactDOMFizzServer', () => {
);
});
+ it('emits html and head start tags (the preamble) before other content if rendered in the shell', async () => {
+ await actIntoEmptyDocument(() => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+ <>
+ a title
+
+
+ a body
+
+ ,
+ );
+ pipe(writable);
+ });
+ expect(getVisibleChildren(document)).toEqual(
+
+
+ a title
+
+ a body
+ ,
+ );
+
+ // Hydrate the same thing on the client. We expect this to still fail because is not a Resource
+ // and is unmatched on hydration
+ const errors = [];
+ const root = ReactDOMClient.hydrateRoot(
+ document,
+ <>
+ <title data-baz="baz">a title
+
+
+