',
+ {
+ runScripts: 'dangerously',
+ },
+ );
+ // We mock matchMedia. for simplicity it only matches 'all' or '' and misses everything else
+ Object.defineProperty(jsdom.window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: query === 'all' || query === '',
+ media: query,
+ })),
+ });
+ streamingContainer = null;
+ global.window = jsdom.window;
+ global.document = jsdom.window.document;
+ container = document.getElementById('container');
+
Scheduler = require('scheduler');
React = require('react');
ReactDOMClient = require('react-dom/client');
@@ -93,9 +103,6 @@ describe('ReactDOMFizzServer', () => {
textCache = new Map();
- resetJSDOM('
');
- container = document.getElementById('container');
-
buffer = '';
hasErrored = false;
@@ -140,6 +147,9 @@ describe('ReactDOMFizzServer', () => {
.join('');
}
+ const bodyStartMatch = /| .*?>)/;
+ const headStartMatch = /| .*?>)/;
+
async function act(callback) {
await callback();
// Await one turn around the event loop.
@@ -153,40 +163,123 @@ describe('ReactDOMFizzServer', () => {
// 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;
+ let bufferedContent = buffer;
buffer = '';
- const fakeBody = document.createElement('body');
- fakeBody.innerHTML = bufferedContent;
- const parent =
- container.nodeName === '#document' ? container.body : container;
- await withLoadingReadyState(async () => {
- while (fakeBody.firstChild) {
- const node = fakeBody.firstChild;
- await replaceScriptsAndMove(window, CSPnonce, node, parent);
- }
- }, document);
- }
-
- 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;
+ if (!bufferedContent) {
+ return;
}
- // 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;
- resetJSDOM(bufferedContent);
- container = document;
- buffer = '';
+
await withLoadingReadyState(async () => {
- await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
+ const bodyMatch = bufferedContent.match(bodyStartMatch);
+ const headMatch = bufferedContent.match(headStartMatch);
+
+ if (streamingContainer === null) {
+ // This is the first streamed content. We decide here where to insert it. If we get , , or
+ // we abandon the pre-built document and start from scratch. If we get anything else we assume it goes into the
+ // container. This is not really production behavior because you can't correctly stream into a deep div effectively
+ // but it's pragmatic for tests.
+
+ if (
+ bufferedContent.startsWith('') ||
+ bufferedContent.startsWith('') ||
+ bufferedContent.startsWith('') ||
+ bufferedContent.startsWith(' without a which is almost certainly a bug in React',
+ );
+ }
+
+ if (bufferedContent.startsWith('')) {
+ // we can just use the whole document
+ const tempDom = new JSDOM(bufferedContent);
+
+ // Wipe existing head and body content
+ document.head.innerHTML = '';
+ document.body.innerHTML = '';
+
+ // Copy the attributes over
+ const tempHtmlNode = tempDom.window.document.documentElement;
+ for (let i = 0; i < tempHtmlNode.attributes.length; i++) {
+ const attr = tempHtmlNode.attributes[i];
+ document.documentElement.setAttribute(attr.name, attr.value);
+ }
+
+ if (headMatch) {
+ // We parsed a head open tag. we need to copy head attributes and insert future
+ // content into
+ streamingContainer = document.head;
+ const tempHeadNode = tempDom.window.document.head;
+ for (let i = 0; i < tempHeadNode.attributes.length; i++) {
+ const attr = tempHeadNode.attributes[i];
+ document.head.setAttribute(attr.name, attr.value);
+ }
+ const source = document.createElement('head');
+ source.innerHTML = tempHeadNode.innerHTML;
+ await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+ }
+
+ if (bodyMatch) {
+ // We parsed a body open tag. we need to copy head attributes and insert future
+ // content into
+ streamingContainer = document.body;
+ const tempBodyNode = tempDom.window.document.body;
+ for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+ const attr = tempBodyNode.attributes[i];
+ document.body.setAttribute(attr.name, attr.value);
+ }
+ const source = document.createElement('body');
+ source.innerHTML = tempBodyNode.innerHTML;
+ await insertNodesAndExecuteScripts(source, document.body, CSPnonce);
+ }
+
+ if (!headMatch && !bodyMatch) {
+ throw new Error('expected or after ');
+ }
+ } else {
+ // we assume we are streaming into the default container'
+ streamingContainer = container;
+ const div = document.createElement('div');
+ div.innerHTML = bufferedContent;
+ await insertNodesAndExecuteScripts(div, container, CSPnonce);
+ }
+ } else if (streamingContainer === document.head) {
+ bufferedContent = '' + bufferedContent;
+ const tempDom = new JSDOM(bufferedContent);
+
+ const tempHeadNode = tempDom.window.document.head;
+ const source = document.createElement('head');
+ source.innerHTML = tempHeadNode.innerHTML;
+ await insertNodesAndExecuteScripts(source, document.head, CSPnonce);
+
+ if (bodyMatch) {
+ streamingContainer = document.body;
+
+ const tempBodyNode = tempDom.window.document.body;
+ for (let i = 0; i < tempBodyNode.attributes.length; i++) {
+ const attr = tempBodyNode.attributes[i];
+ document.body.setAttribute(attr.name, attr.value);
+ }
+ const bodySource = document.createElement('body');
+ bodySource.innerHTML = tempBodyNode.innerHTML;
+ await insertNodesAndExecuteScripts(
+ bodySource,
+ document.body,
+ CSPnonce,
+ );
+ }
+ } else {
+ const div = document.createElement('div');
+ div.innerHTML = bufferedContent;
+ await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
+ }
}, document);
}
@@ -3467,7 +3560,7 @@ describe('ReactDOMFizzServer', () => {
});
it('accepts an integrity property for bootstrapScripts and bootstrapModules', async () => {
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
@@ -3584,7 +3677,7 @@ describe('ReactDOMFizzServer', () => {
// @gate enableFizzExternalRuntime
it('supports option to load runtime as an external script', async () => {
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
@@ -3631,7 +3724,7 @@ describe('ReactDOMFizzServer', () => {
);
}
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(
);
pipe(writable);
});
@@ -3644,7 +3737,7 @@ describe('ReactDOMFizzServer', () => {
});
it('does not send the external runtime for static pages', async () => {
- await actIntoEmptyDocument(() => {
+ await act(() => {
const {pipe} = renderToPipeableStream(