Loading...
@@ -3202,6 +3227,50 @@ describe('ReactDOMFizzServer', () => {
);
});
+ it('converts stylesheet links into preinit-as-style resources', async () => {
+ function App() {
+ return (
+ <>
+
+
+
+
a title
+
+ a body
+
+
+ );
+ }
+
+ const chunks = [];
+ function listener(chunk) {
+ chunks.push(chunk);
+ }
+
+ await actIntoEmptyDocument(async () => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
);
+ writable.on('data', listener);
+ pipe(writable);
+ });
+ writable.removeListener('data', listener);
+
+ expect(
+ chunks[0].startsWith(
+ '',
+ ),
+ ).toBe(true);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+
+
+
a title
+
+ a body
+ ,
+ );
+ });
+
describe('error escaping', () => {
it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
window.__outlet = {};
diff --git a/packages/react-dom/src/__tests__/ReactDOMResources-test.js b/packages/react-dom/src/__tests__/ReactDOMResources-test.js
new file mode 100644
index 0000000000000..89539858a247c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMResources-test.js
@@ -0,0 +1,1206 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+let JSDOM;
+let Scheduler;
+let React;
+let ReactDOMClient;
+let ReactDOMFizzServer;
+let container;
+let document;
+let writable;
+let buffer;
+let hasErrored;
+let Stream;
+let fatalError;
+
+describe('ReactDOMResources', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ JSDOM = require('jsdom').JSDOM;
+ Scheduler = require('scheduler');
+ Stream = require('stream');
+ React = require('react');
+ ReactDOMClient = require('react-dom/client');
+ ReactDOMFizzServer = require('react-dom/server');
+
+ // Test Environment
+ const jsdom = new JSDOM(
+ '
',
+ {
+ runScripts: 'dangerously',
+ },
+ );
+ document = jsdom.window.document;
+ container = document.getElementById('container');
+
+ buffer = '';
+ hasErrored = false;
+
+ writable = new Stream.PassThrough();
+ writable.setEncoding('utf8');
+ writable.on('data', chunk => {
+ buffer += chunk;
+ });
+ writable.on('error', error => {
+ hasErrored = true;
+ fatalError = error;
+ });
+ });
+
+ function getVisibleChildren(element) {
+ const children = [];
+ let node = element.firstChild;
+ while (node) {
+ if (node.nodeType === 1) {
+ if (
+ node.tagName !== 'SCRIPT' &&
+ node.tagName !== 'TEMPLATE' &&
+ node.tagName !== 'template' &&
+ !node.hasAttribute('hidden') &&
+ !node.hasAttribute('aria-hidden')
+ ) {
+ const props = {};
+ const attributes = node.attributes;
+ for (let i = 0; i < attributes.length; i++) {
+ if (
+ attributes[i].name === 'id' &&
+ attributes[i].value.includes(':')
+ ) {
+ // We assume this is a React added ID that's a non-visual implementation detail.
+ continue;
+ }
+ props[attributes[i].name] = attributes[i].value;
+ }
+ props.children = getVisibleChildren(node);
+ children.push(React.createElement(node.tagName.toLowerCase(), props));
+ }
+ } else if (node.nodeType === 3) {
+ children.push(node.data);
+ }
+ node = node.nextSibling;
+ }
+ return children.length === 0
+ ? undefined
+ : children.length === 1
+ ? children[0]
+ : children;
+ }
+
+ 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',
+ });
+ document = jsdom.window.document;
+ container = document;
+ buffer = '';
+ }
+
+ async function actInto(callback, prelude, getContainer) {
+ 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(prelude + bufferedContent, {
+ runScripts: 'dangerously',
+ });
+ document = jsdom.window.document;
+ container = getContainer(document);
+ buffer = '';
+ }
+
+ // async function act(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;
+ // buffer = '';
+ // const fakeBody = document.createElement('body');
+ // fakeBody.innerHTML = bufferedContent;
+ // while (fakeBody.firstChild) {
+ // const node = fakeBody.firstChild;
+ // if (
+ // node.nodeName === 'SCRIPT' &&
+ // (CSPnonce === null || node.getAttribute('nonce') === CSPnonce)
+ // ) {
+ // const script = document.createElement('script');
+ // script.textContent = node.textContent;
+ // fakeBody.removeChild(node);
+ // container.appendChild(script);
+ // } else {
+ // container.appendChild(node);
+ // }
+ // }
+ // }
+
+ function normalizeCodeLocInfo(str) {
+ return (
+ str &&
+ str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
+ return '\n in ' + name + ' (at **)';
+ })
+ );
+ }
+
+ // @gate enableFloat
+ it('hoists resources to the head if the container is a Document without hydration', async () => {
+ function App() {
+ return (
+ <>
+
+
+
+
+
hello world
+
+
+
+
+ );
+ }
+
+ await actInto(
+ async () => {},
+ 'this will be replaced on root.render',
+ doc => doc,
+ );
+
+ expect(getVisibleChildren(document)).toEqual(
+
+
+ this will be replaced on root.render
+ ,
+ );
+
+ const root = ReactDOMClient.createRoot(container);
+ root.render(