Allow the root namespace to be configured

This allows us to insert the correct wrappers when streaming into an
existing non-HTML tree.

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

@@ -100,7 +100,8 @@ describe('ReactDOMFizzServer', () => {
  if (
  node.tagName !== 'SCRIPT' &&
  node.tagName !== 'TEMPLATE' &&
- !node.hasAttribute('hidden')
+ !node.hasAttribute('hidden') &&
+ !node.hasAttribute('aria-hidden')
  ) {
  const props = {};
  const attributes = node.attributes;
@@ -596,4 +597,60 @@ describe('ReactDOMFizzServer', () => {
  </table>,
  );
  });
+
+ // @gate experimental
+ it('can stream into an SVG container', async () => {
+ function AsyncPath({id}) {
+ return <path id={readText(id)}>{[]}</path>;
+ }
+
+ function App() {
+ return (
+ <g>
+ <Suspense fallback={<text>Loading...</text>}>
+ <AsyncPath id="my-path" />
+ </Suspense>
+ </g>
+ );
+ }
+
+ await act(async () => {
+ const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+ <App />,
+ writable,
+ {
+ namespaceURI: 'http://www.w3.org/2000/svg',
+ onReadyToStream() {
+ writable.write('<svg>');
+ startWriting();
+ writable.write('</svg>');
+ },
+ },
+ );
+ });
+
+ expect(getVisibleChildren(container)).toEqual(
+ <svg>
+ <g>
+ <text>Loading...</text>
+ </g>
+ </svg>,
+ );
+
+ await act(async () => {
+ resolveText('my-path');
+ });
+
+ expect(getVisibleChildren(container)).toEqual(
+ <svg>
+ <g>
+ <path id="my-path" />
+ </g>
+ </svg>,
+ );
+
+ expect(container.querySelector('#my-path').namespaceURI).toBe(
+ 'http://www.w3.org/2000/svg',
+ );
+ });
 });

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

@@ -23,6 +23,7 @@ import {
 
 type Options = {
  identifierPrefix?: string,
+ namespaceURI?: string,
  progressiveChunkSize?: number,
  signal?: AbortSignal,
  onReadyToStream?: () => void,
@@ -49,7 +50,7 @@ function renderToReadableStream(
  children,
  controller,
  createResponseState(options ? options.identifierPrefix : undefined),
- createRootFormatContext(), // We call this here in case we need options to initialize it.
+ createRootFormatContext(options ? options.namespaceURI : undefined),
  options ? options.progressiveChunkSize : undefined,
  options ? options.onError : undefined,
  options ? options.onCompleteAll : undefined,

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

@@ -28,6 +28,7 @@ function createDrainHandler(destination, request) {
 
 type Options = {
  identifierPrefix?: string,
+ namespaceURI?: string,
  progressiveChunkSize?: number,
  onReadyToStream?: () => void,
  onCompleteAll?: () => void,
@@ -49,7 +50,7 @@ function pipeToNodeWritable(
  children,
  destination,
  createResponseState(options ? options.identifierPrefix : undefined),
- createRootFormatContext(), // We call this here in case we need options to initialize it.
+ createRootFormatContext(options ? options.namespaceURI : undefined),
  options ? options.progressiveChunkSize : undefined,
  options ? options.onError : undefined,
  options ? options.onCompleteAll : undefined,

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

@@ -53,10 +53,9 @@ export function createResponseState(
 // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
 // modes. We only include the variants as they matter for the sake of our purposes.
 // We don't actually provide the namespace therefore we use constants instead of the string.
-const ROOT_MODE = 0; // At the root we don't need to know which mode it is. We just need to know that it's already the right one.
+const HTML_MODE = 0;
 const SVG_MODE = 1;
 const MATHML_MODE = 2;
-const HTML_MODE = 3; // If we reenter HTML from SVG we know for sure it's HTML.
 const HTML_TABLE_MODE = 4;
 const HTML_TABLE_BODY_MODE = 5;
 const HTML_TABLE_ROW_MODE = 6;
@@ -80,8 +79,14 @@ function createFormatContext(
  };
 }
 
-export function createRootFormatContext(): FormatContext {
- return createFormatContext(ROOT_MODE, null);
+export function createRootFormatContext(namespaceURI?: string): FormatContext {
+ const insertionMode =
+ namespaceURI === 'http://www.w3.org/2000/svg'
+ ? SVG_MODE
+ : namespaceURI === 'http://www.w3.org/1998/Math/MathML'
+ ? MATHML_MODE
+ : HTML_MODE;
+ return createFormatContext(insertionMode, null);
 }
 
 export function getChildFormatContext(
@@ -306,10 +311,9 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
  return writeChunk(destination, endSuspenseBoundary);
 }
 
-// TODO: div won't work if the Root is SVG or MathML.
-const startSegmentRoot = stringToPrecomputedChunk('<div hidden id="');
-const startSegmentRoot2 = stringToPrecomputedChunk('">');
-const endSegmentRoot = stringToPrecomputedChunk('</div>');
+const startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+const startSegmentHTML2 = stringToPrecomputedChunk('">');
+const endSegmentHTML = stringToPrecomputedChunk('</div>');
 
 const startSegmentSVG = stringToPrecomputedChunk(
  '<svg aria-hidden="true" style="display:none" id="',
@@ -350,12 +354,11 @@ export function writeStartSegment(
  id: number,
 ): boolean {
  switch (formatContext.insertionMode) {
- case ROOT_MODE:
  case HTML_MODE: {
- writeChunk(destination, startSegmentRoot);
+ writeChunk(destination, startSegmentHTML);
  writeChunk(destination, responseState.segmentPrefix);
  writeChunk(destination, stringToChunk(id.toString(16)));
- return writeChunk(destination, startSegmentRoot2);
+ return writeChunk(destination, startSegmentHTML2);
  }
  case SVG_MODE: {
  writeChunk(destination, startSegmentSVG);
@@ -407,9 +410,8 @@ export function writeEndSegment(
  formatContext: FormatContext,
 ): boolean {
  switch (formatContext.insertionMode) {
- case ROOT_MODE:
  case HTML_MODE: {
- return writeChunk(destination, endSegmentRoot);
+ return writeChunk(destination, endSegmentHTML);
  }
  case SVG_MODE: {
  return writeChunk(destination, endSegmentSVG);