[Fizz] Track postponed holes in the prerender pass

packages/react-dom/npm/server.node.js

@@ -15,6 +15,6 @@ exports.renderToStaticMarkup = l.renderToStaticMarkup;
 exports.renderToNodeStream = l.renderToNodeStream;
 exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
 exports.renderToPipeableStream = s.renderToPipeableStream;
-if (s.resume) {
- exports.resume = s.resume;
+if (s.resumeToPipeableStream) {
+ exports.resumeToPipeableStream = s.resumeToPipeableStream;
 }

packages/react-dom/server.node.js

@@ -43,8 +43,8 @@ export function renderToPipeableStream() {
  );
 }
 
-export function resume() {
- return require('./src/server/react-dom-server.node').resume.apply(
+export function resumeToPipeableStream() {
+ return require('./src/server/react-dom-server.node').resumeToPipeableStream.apply(
  this,
  arguments,
  );

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -14,6 +14,7 @@ import {
  mergeOptions,
  stripExternalRuntimeInNodes,
  withLoadingReadyState,
+ getVisibleChildren,
 } from '../test-utils/FizzTestUtils';
 
 let JSDOM;
@@ -23,6 +24,7 @@ let React;
 let ReactDOM;
 let ReactDOMClient;
 let ReactDOMFizzServer;
+let ReactDOMFizzStatic;
 let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
@@ -77,6 +79,9 @@ describe('ReactDOMFizzServer', () => {
  ReactDOM = require('react-dom');
  ReactDOMClient = require('react-dom/client');
  ReactDOMFizzServer = require('react-dom/server');
+ if (__EXPERIMENTAL__) {
+ ReactDOMFizzStatic = require('react-dom/static');
+ }
  Stream = require('stream');
  Suspense = React.Suspense;
  use = React.use;
@@ -289,46 +294,6 @@ describe('ReactDOMFizzServer', () => {
  }, document);
  }
 
- function getVisibleChildren(element) {
- const children = [];
- let node = element.firstChild;
- while (node) {
- if (node.nodeType === 1) {
- if (
- node.tagName !== 'SCRIPT' &&
- 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;
- }
-
  function resolveText(text) {
  const record = textCache.get(text);
  if (record === undefined) {
@@ -6227,4 +6192,60 @@ describe('ReactDOMFizzServer', () => {
  );
  },
  );
+
+ // @gate enablePostpone
+ it('supports postponing in prerender and resuming later', async () => {
+ let prerendering = true;
+ function Postpone() {
+ if (prerendering) {
+ React.unstable_postpone();
+ }
+ return 'Hello';
+ }
+
+ function App() {
+ return (
+ <div>
+ <Suspense fallback="Loading...">
+ <Postpone />
+ </Suspense>
+ </div>
+ );
+ }
+
+ const prerendered = await ReactDOMFizzStatic.prerenderToNodeStream(<App />);
+ expect(prerendered.postponed).not.toBe(null);
+
+ prerendering = false;
+
+ const resumed = ReactDOMFizzServer.resumeToPipeableStream(
+ <App />,
+ prerendered.postponed,
+ );
+
+ // Create a separate stream so it doesn't close the writable. I.e. simple concat.
+ const preludeWritable = new Stream.PassThrough();
+ preludeWritable.setEncoding('utf8');
+ preludeWritable.on('data', chunk => {
+ writable.write(chunk);
+ });
+
+ await act(() => {
+ prerendered.prelude.pipe(preludeWritable);
+ });
+
+ expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+ const b = new Stream.PassThrough();
+ b.setEncoding('utf8');
+ b.on('data', chunk => {
+ writable.write(chunk);
+ });
+
+ await act(() => {
+ resumed.pipe(writable);
+ });
+
+ // TODO: expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+ });
 });

packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

@@ -9,23 +9,37 @@
 
 'use strict';
 
+import {
+ getVisibleChildren,
+ insertNodesAndExecuteScripts,
+} from '../test-utils/FizzTestUtils';
+
 // Polyfills for test environment
 global.ReadableStream =
  require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
 
 let React;
+let ReactDOMFizzServer;
 let ReactDOMFizzStatic;
 let Suspense;
+let container;
 
 describe('ReactDOMFizzStaticBrowser', () => {
  beforeEach(() => {
  jest.resetModules();
  React = require('react');
+ ReactDOMFizzServer = require('react-dom/server.browser');
  if (__EXPERIMENTAL__) {
  ReactDOMFizzStatic = require('react-dom/static.browser');
  }
  Suspense = React.Suspense;
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(container);
  });
 
  const theError = new Error('This is an error');
@@ -37,6 +51,36 @@ describe('ReactDOMFizzStaticBrowser', () => {
  throw theInfinitePromise;
  }
 
+ function concat(streamA, streamB) {
+ const readerA = streamA.getReader();
+ const readerB = streamB.getReader();
+ return new ReadableStream({
+ start(controller) {
+ function readA() {
+ readerA.read().then(({done, value}) => {
+ if (done) {
+ readB();
+ return;
+ }
+ controller.enqueue(value);
+ readA();
+ });
+ }
+ function readB() {
+ readerB.read().then(({done, value}) => {
+ if (done) {
+ controller.close();
+ return;
+ }
+ controller.enqueue(value);
+ readB();
+ });
+ }
+ readA();
+ },
+ });
+ }
+
  async function readContent(stream) {
  const reader = stream.getReader();
  let content = '';
@@ -49,6 +93,21 @@ describe('ReactDOMFizzStaticBrowser', () => {
  }
  }
 
+ async function readIntoContainer(stream) {
+ const reader = stream.getReader();
+ let result = '';
+ while (true) {
+ const {done, value} = await reader.read();
+ if (done) {
+ break;
+ }
+ result += Buffer.from(value).toString('utf8');
+ }
+ const temp = document.createElement('div');
+ temp.innerHTML = result;
+ insertNodesAndExecuteScripts(temp, container, null);
+ }
+
  // @gate experimental
  it('should call prerender', async () => {
  const result = await ReactDOMFizzStatic.prerender(<div>hello world</div>);
@@ -394,4 +453,82 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
  expect(errors).toEqual(['uh oh', 'uh oh']);
  });
+
+ // @gate enablePostpone
+ it('supports postponing in prerender and resuming later', async () => {
+ let prerendering = true;
+ function Postpone() {
+ if (prerendering) {
+ React.unstable_postpone();
+ }
+ return 'Hello';
+ }
+
+ function App() {
+ return (
+ <div>
+ <Suspense fallback="Loading...">
+ <Postpone />
+ </Suspense>
+ </div>
+ );
+ }
+
+ const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+ expect(prerendered.postponed).not.toBe(null);
+
+ prerendering = false;
+
+ const resumed = await ReactDOMFizzServer.resume(
+ <App />,
+ prerendered.postponed,
+ );
+
+ await readIntoContainer(prerendered.prelude);
+
+ expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+ await readIntoContainer(resumed);
+
+ // TODO: expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+ });
+
+ // @gate enablePostpone
+ it('only emits end tags once when resuming', async () => {
+ let prerendering = true;
+ function Postpone() {
+ if (prerendering) {
+ React.unstable_postpone();
+ }
+ return 'Hello';
+ }
+
+ function App() {
+ return (
+ <html>
+ <body>
+ <Suspense fallback="Loading...">
+ <Postpone />
+ </Suspense>
+ </body>
+ </html>
+ );
+ }
+
+ const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+ expect(prerendered.postponed).not.toBe(null);
+
+ prerendering = false;
+
+ const content = await ReactDOMFizzServer.resume(
+ <App />,
+ prerendered.postponed,
+ );
+
+ const html = await readContent(concat(prerendered.prelude, content));
+ const htmlEndTags = /<\/html\s*>/gi;
+ const bodyEndTags = /<\/body\s*>/gi;
+ expect(Array.from(html.matchAll(htmlEndTags)).length).toBe(1);
+ expect(Array.from(html.matchAll(bodyEndTags)).length).toBe(1);
+ });
 });

packages/react-dom/src/server/ReactDOMFizzServerBrowser.js

@@ -16,7 +16,7 @@ import ReactVersion from 'shared/ReactVersion';
 
 import {
  createRequest,
- startWork,
+ startRender,
  startFlowing,
  abort,
 } from 'react-server/src/ReactFizzServer';
@@ -129,7 +129,7 @@ function renderToReadableStream(
  signal.addEventListener('abort', listener);
  }
  }
- startWork(request);
+ startRender(request);
  });
 }
 
@@ -200,7 +200,7 @@ function resume(
  signal.addEventListener('abort', listener);
  }
  }
- startWork(request);
+ startRender(request);
  });
 }
 

packages/react-dom/src/server/ReactDOMFizzServerBun.js

@@ -15,7 +15,7 @@ import ReactVersion from 'shared/ReactVersion';
 
 import {
  createRequest,
- startWork,
+ startRender,
  startFlowing,
  abort,
 } from 'react-server/src/ReactFizzServer';
@@ -121,7 +121,7 @@ function renderToReadableStream(
  signal.addEventListener('abort', listener);
  }
  }
- startWork(request);
+ startRender(request);
  });
 }