react-markup 0.0.0-experimental-d46b04a2-20250117 → 0.0.0-experimental-18eaf51b-20250118

package/cjs/react-markup.production.js

@@ -324,26 +324,26 @@ function createRenderState(
       ("" + JSON.stringify(importMap)).replace(scriptRegex, scriptReplacer)
     ),
     externalRuntimeConfig.push("\x3c/script>"));
-  importMap = {
+  importMap = onHeaders
+    ? {
+        preconnects: "",
+        fontPreloads: "",
+        highImagePreloads: "",
+        remainingCapacity:
+          2 + ("number" === typeof maxHeadersLength ? maxHeadersLength : 2e3)
+      }
+    : null;
+  onHeaders = {
     placeholderPrefix: idPrefix + "P:",
     segmentPrefix: idPrefix + "S:",
     boundaryPrefix: idPrefix + "B:",
     startInlineScript: inlineScriptWithNonce,
-    htmlChunks: null,
-    headChunks: null,
+    preamble: createPreambleState(),
     externalRuntimeScript: externalRuntimeScript,
     bootstrapChunks: bootstrapChunks,
     importMapChunks: externalRuntimeConfig,
     onHeaders: onHeaders,
-    headers: onHeaders
-      ? {
-          preconnects: "",
-          fontPreloads: "",
-          highImagePreloads: "",
-          remainingCapacity:
-            2 + ("number" === typeof maxHeadersLength ? maxHeadersLength : 2e3)
-        }
-      : null,
+    headers: importMap,
     resets: {
       font: {},
       dns: {},
@@ -372,25 +372,27 @@ function createRenderState(
     stylesToHoist: !1
   };
   if (void 0 !== bootstrapScripts)
-    for (onHeaders = 0; onHeaders < bootstrapScripts.length; onHeaders++)
-      (externalRuntimeConfig = bootstrapScripts[onHeaders]),
-        (idPrefix = inlineScriptWithNonce = void 0),
-        (externalRuntimeScript = {
+    for (
+      inlineScriptWithNonce = 0;
+      inlineScriptWithNonce < bootstrapScripts.length;
+      inlineScriptWithNonce++
+    )
+      (externalRuntimeConfig = bootstrapScripts[inlineScriptWithNonce]),
+        (importMap = externalRuntimeScript = void 0),
+        (maxHeadersLength = {
           rel: "preload",
           as: "script",
           fetchPriority: "low",
           nonce: nonce
         }),
         "string" === typeof externalRuntimeConfig
-          ? (externalRuntimeScript.href = maxHeadersLength =
-              externalRuntimeConfig)
-          : ((externalRuntimeScript.href = maxHeadersLength =
-              externalRuntimeConfig.src),
-            (externalRuntimeScript.integrity = idPrefix =
+          ? (maxHeadersLength.href = idPrefix = externalRuntimeConfig)
+          : ((maxHeadersLength.href = idPrefix = externalRuntimeConfig.src),
+            (maxHeadersLength.integrity = importMap =
               "string" === typeof externalRuntimeConfig.integrity
                 ? externalRuntimeConfig.integrity
                 : void 0),
-            (externalRuntimeScript.crossOrigin = inlineScriptWithNonce =
+            (maxHeadersLength.crossOrigin = externalRuntimeScript =
               "string" === typeof externalRuntimeConfig ||
               null == externalRuntimeConfig.crossOrigin
                 ? void 0
@@ -398,24 +400,24 @@ function createRenderState(
                   ? "use-credentials"
                   : "")),
         (externalRuntimeConfig = resumableState),
-        (bootstrapScriptContent = maxHeadersLength),
+        (bootstrapScriptContent = idPrefix),
         (externalRuntimeConfig.scriptResources[bootstrapScriptContent] = null),
         (externalRuntimeConfig.moduleScriptResources[bootstrapScriptContent] =
           null),
         (externalRuntimeConfig = []),
-        pushLinkImpl(externalRuntimeConfig, externalRuntimeScript),
-        importMap.bootstrapScripts.add(externalRuntimeConfig),
-        bootstrapChunks.push(
-          '<script src="',
-          escapeTextForBrowser(maxHeadersLength)
-        ),
+        pushLinkImpl(externalRuntimeConfig, maxHeadersLength),
+        onHeaders.bootstrapScripts.add(externalRuntimeConfig),
+        bootstrapChunks.push('<script src="', escapeTextForBrowser(idPrefix)),
         nonce && bootstrapChunks.push('" nonce="', escapeTextForBrowser(nonce)),
-        "string" === typeof idPrefix &&
-          bootstrapChunks.push('" integrity="', escapeTextForBrowser(idPrefix)),
-        "string" === typeof inlineScriptWithNonce &&
+        "string" === typeof importMap &&
+          bootstrapChunks.push(
+            '" integrity="',
+            escapeTextForBrowser(importMap)
+          ),
+        "string" === typeof externalRuntimeScript &&
           bootstrapChunks.push(
             '" crossorigin="',
-            escapeTextForBrowser(inlineScriptWithNonce)
+            escapeTextForBrowser(externalRuntimeScript)
           ),
         bootstrapChunks.push('" async="">\x3c/script>');
   if (void 0 !== bootstrapModules)
@@ -424,52 +426,51 @@ function createRenderState(
       bootstrapScripts < bootstrapModules.length;
       bootstrapScripts++
     )
-      (externalRuntimeScript = bootstrapModules[bootstrapScripts]),
-        (inlineScriptWithNonce = maxHeadersLength = void 0),
-        (idPrefix = {
+      (maxHeadersLength = bootstrapModules[bootstrapScripts]),
+        (externalRuntimeScript = idPrefix = void 0),
+        (importMap = {
           rel: "modulepreload",
           fetchPriority: "low",
           nonce: nonce
         }),
-        "string" === typeof externalRuntimeScript
-          ? (idPrefix.href = onHeaders = externalRuntimeScript)
-          : ((idPrefix.href = onHeaders = externalRuntimeScript.src),
-            (idPrefix.integrity = inlineScriptWithNonce =
-              "string" === typeof externalRuntimeScript.integrity
-                ? externalRuntimeScript.integrity
+        "string" === typeof maxHeadersLength
+          ? (importMap.href = inlineScriptWithNonce = maxHeadersLength)
+          : ((importMap.href = inlineScriptWithNonce = maxHeadersLength.src),
+            (importMap.integrity = externalRuntimeScript =
+              "string" === typeof maxHeadersLength.integrity
+                ? maxHeadersLength.integrity
                 : void 0),
-            (idPrefix.crossOrigin = maxHeadersLength =
-              "string" === typeof externalRuntimeScript ||
-              null == externalRuntimeScript.crossOrigin
+            (importMap.crossOrigin = idPrefix =
+              "string" === typeof maxHeadersLength ||
+              null == maxHeadersLength.crossOrigin
                 ? void 0
-                : "use-credentials" === externalRuntimeScript.crossOrigin
+                : "use-credentials" === maxHeadersLength.crossOrigin
                   ? "use-credentials"
                   : "")),
-        (externalRuntimeScript = resumableState),
-        (externalRuntimeConfig = onHeaders),
-        (externalRuntimeScript.scriptResources[externalRuntimeConfig] = null),
-        (externalRuntimeScript.moduleScriptResources[externalRuntimeConfig] =
-          null),
-        (externalRuntimeScript = []),
-        pushLinkImpl(externalRuntimeScript, idPrefix),
-        importMap.bootstrapScripts.add(externalRuntimeScript),
+        (maxHeadersLength = resumableState),
+        (externalRuntimeConfig = inlineScriptWithNonce),
+        (maxHeadersLength.scriptResources[externalRuntimeConfig] = null),
+        (maxHeadersLength.moduleScriptResources[externalRuntimeConfig] = null),
+        (maxHeadersLength = []),
+        pushLinkImpl(maxHeadersLength, importMap),
+        onHeaders.bootstrapScripts.add(maxHeadersLength),
         bootstrapChunks.push(
           '<script type="module" src="',
-          escapeTextForBrowser(onHeaders)
+          escapeTextForBrowser(inlineScriptWithNonce)
         ),
         nonce && bootstrapChunks.push('" nonce="', escapeTextForBrowser(nonce)),
-        "string" === typeof inlineScriptWithNonce &&
+        "string" === typeof externalRuntimeScript &&
           bootstrapChunks.push(
             '" integrity="',
-            escapeTextForBrowser(inlineScriptWithNonce)
+            escapeTextForBrowser(externalRuntimeScript)
           ),
-        "string" === typeof maxHeadersLength &&
+        "string" === typeof idPrefix &&
           bootstrapChunks.push(
             '" crossorigin="',
-            escapeTextForBrowser(maxHeadersLength)
+            escapeTextForBrowser(idPrefix)
           ),
         bootstrapChunks.push('" async="">\x3c/script>');
-  return importMap;
+  return onHeaders;
 }
 function createResumableState(
   identifierPrefix,
@@ -500,6 +501,9 @@ function createResumableState(
     moduleScriptResources: {}
   };
 }
+function createPreambleState() {
+  return { htmlChunks: null, headChunks: null, bodyChunks: null };
+}
 function createFormatContext(insertionMode, selectedValue, tagScope) {
   return {
     insertionMode: insertionMode,
@@ -518,33 +522,34 @@ function getChildFormatContext(parentContext, type, props) {
         parentContext.tagScope
       );
     case "svg":
-      return createFormatContext(3, null, parentContext.tagScope);
+      return createFormatContext(4, null, parentContext.tagScope);
     case "picture":
       return createFormatContext(2, null, parentContext.tagScope | 2);
     case "math":
-      return createFormatContext(4, null, parentContext.tagScope);
+      return createFormatContext(5, null, parentContext.tagScope);
     case "foreignObject":
       return createFormatContext(2, null, parentContext.tagScope);
     case "table":
-      return createFormatContext(5, null, parentContext.tagScope);
+      return createFormatContext(6, null, parentContext.tagScope);
     case "thead":
     case "tbody":
     case "tfoot":
-      return createFormatContext(6, null, parentContext.tagScope);
+      return createFormatContext(7, null, parentContext.tagScope);
     case "colgroup":
-      return createFormatContext(8, null, parentContext.tagScope);
+      return createFormatContext(9, null, parentContext.tagScope);
     case "tr":
-      return createFormatContext(7, null, parentContext.tagScope);
+      return createFormatContext(8, null, parentContext.tagScope);
+    case "head":
+      if (2 > parentContext.insertionMode)
+        return createFormatContext(3, null, parentContext.tagScope);
+      break;
+    case "html":
+      if (0 === parentContext.insertionMode)
+        return createFormatContext(1, null, parentContext.tagScope);
   }
-  return 5 <= parentContext.insertionMode
+  return 6 <= parentContext.insertionMode || 2 > parentContext.insertionMode
     ? createFormatContext(2, null, parentContext.tagScope)
-    : 0 === parentContext.insertionMode
-      ? "html" === type
-        ? createFormatContext(1, null, parentContext.tagScope)
-        : createFormatContext(2, null, parentContext.tagScope)
-      : 1 === parentContext.insertionMode
-        ? createFormatContext(2, null, parentContext.tagScope)
-        : parentContext;
+    : parentContext;
 }
 var styleNameCache = new Map();
 function pushStyleAttribute(target, style) {
@@ -1011,6 +1016,7 @@ function pushStartInstance$1(
   props,
   resumableState,
   renderState,
+  preambleState,
   hoistableState,
   formatContext,
   textEmbedded,
@@ -1490,7 +1496,7 @@ function pushStartInstance$1(
       return JSCompiler_inline_result$jscomp$2;
     case "title":
       if (
-        3 === formatContext.insertionMode ||
+        4 === formatContext.insertionMode ||
         formatContext.tagScope & 1 ||
         null != props.itemProp
       )
@@ -1509,7 +1515,7 @@ function pushStartInstance$1(
         href = props.href,
         precedence = props.precedence;
       if (
-        3 === formatContext.insertionMode ||
+        4 === formatContext.insertionMode ||
         formatContext.tagScope & 1 ||
         null != props.itemProp ||
         "string" !== typeof rel ||
@@ -1591,7 +1597,7 @@ function pushStartInstance$1(
         "symbol" === typeof asyncProp ||
         props.onLoad ||
         props.onError ||
-        3 === formatContext.insertionMode ||
+        4 === formatContext.insertionMode ||
         formatContext.tagScope & 1 ||
         null != props.itemProp
       )
@@ -1632,7 +1638,7 @@ function pushStartInstance$1(
       var precedence$jscomp$0 = props.precedence,
         href$jscomp$0 = props.href;
       if (
-        3 === formatContext.insertionMode ||
+        4 === formatContext.insertionMode ||
         formatContext.tagScope & 1 ||
         null != props.itemProp ||
         "string" !== typeof precedence$jscomp$0 ||
@@ -1735,7 +1741,7 @@ function pushStartInstance$1(
       return JSCompiler_inline_result$jscomp$6;
     case "meta":
       if (
-        3 === formatContext.insertionMode ||
+        4 === formatContext.insertionMode ||
         formatContext.tagScope & 1 ||
         null != props.itemProp
       )
@@ -1913,10 +1919,13 @@ function pushStartInstance$1(
     case "missing-glyph":
       break;
     case "head":
-      if (2 > formatContext.insertionMode && null === renderState.headChunks) {
-        renderState.headChunks = [];
+      if (2 > formatContext.insertionMode) {
+        var preamble = preambleState || renderState.preamble;
+        if (preamble.headChunks)
+          throw Error("The `<head>` tag may only be rendered once.");
+        preamble.headChunks = [];
         var JSCompiler_inline_result$jscomp$9 = pushStartGenericElement(
-          renderState.headChunks,
+          preamble.headChunks,
           props,
           "head"
         );
@@ -1927,24 +1936,42 @@ function pushStartInstance$1(
           "head"
         );
       return JSCompiler_inline_result$jscomp$9;
-    case "html":
-      if (
-        0 === formatContext.insertionMode &&
-        null === renderState.htmlChunks
-      ) {
-        renderState.htmlChunks = ["<!DOCTYPE html>"];
+    case "body":
+      if (2 > formatContext.insertionMode) {
+        var preamble$jscomp$0 = preambleState || renderState.preamble;
+        if (preamble$jscomp$0.bodyChunks)
+          throw Error("The `<body>` tag may only be rendered once.");
+        preamble$jscomp$0.bodyChunks = [];
         var JSCompiler_inline_result$jscomp$10 = pushStartGenericElement(
-          renderState.htmlChunks,
+          preamble$jscomp$0.bodyChunks,
           props,
-          "html"
+          "body"
         );
       } else
         JSCompiler_inline_result$jscomp$10 = pushStartGenericElement(
           target$jscomp$0,
           props,
-          "html"
+          "body"
         );
       return JSCompiler_inline_result$jscomp$10;
+    case "html":
+      if (0 === formatContext.insertionMode) {
+        var preamble$jscomp$1 = preambleState || renderState.preamble;
+        if (preamble$jscomp$1.htmlChunks)
+          throw Error("The `<html>` tag may only be rendered once.");
+        preamble$jscomp$1.htmlChunks = ["<!DOCTYPE html>"];
+        var JSCompiler_inline_result$jscomp$11 = pushStartGenericElement(
+          preamble$jscomp$1.htmlChunks,
+          props,
+          "html"
+        );
+      } else
+        JSCompiler_inline_result$jscomp$11 = pushStartGenericElement(
+          target$jscomp$0,
+          props,
+          "html"
+        );
+      return JSCompiler_inline_result$jscomp$11;
     default:
       if (-1 !== type.indexOf("-")) {
         target$jscomp$0.push(startChunkForTag(type));
@@ -2005,6 +2032,15 @@ function endChunkForTag(tag) {
   void 0 === chunk && ((chunk = "</" + tag + ">"), endTagCache.set(tag, chunk));
   return chunk;
 }
+function hoistPreambleState(renderState, preambleState) {
+  renderState = renderState.preamble;
+  null === renderState.htmlChunks &&
+    (renderState.htmlChunks = preambleState.htmlChunks);
+  null === renderState.headChunks &&
+    (renderState.headChunks = preambleState.headChunks);
+  null === renderState.bodyChunks &&
+    (renderState.bodyChunks = preambleState.bodyChunks);
+}
 function writeBootstrap(destination, renderState) {
   renderState = renderState.bootstrapChunks;
   for (var i = 0; i < renderState.length - 1; i++)
@@ -2028,6 +2064,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
   switch (formatContext.insertionMode) {
     case 0:
     case 1:
+    case 3:
     case 2:
       return (
         destination.push('<div hidden id="'),
@@ -2036,7 +2073,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
         destination.push(renderState),
         destination.push('">')
       );
-    case 3:
+    case 4:
       return (
         destination.push('<svg aria-hidden="true" style="display:none" id="'),
         destination.push(renderState.segmentPrefix),
@@ -2044,7 +2081,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
         destination.push(renderState),
         destination.push('">')
       );
-    case 4:
+    case 5:
       return (
         destination.push('<math aria-hidden="true" style="display:none" id="'),
         destination.push(renderState.segmentPrefix),
@@ -2052,7 +2089,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
         destination.push(renderState),
         destination.push('">')
       );
-    case 5:
+    case 6:
       return (
         destination.push('<table hidden id="'),
         destination.push(renderState.segmentPrefix),
@@ -2060,7 +2097,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
         destination.push(renderState),
         destination.push('">')
       );
-    case 6:
+    case 7:
       return (
         destination.push('<table hidden><tbody id="'),
         destination.push(renderState.segmentPrefix),
@@ -2068,7 +2105,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
         destination.push(renderState),
         destination.push('">')
       );
-    case 7:
+    case 8:
       return (
         destination.push('<table hidden><tr id="'),
         destination.push(renderState.segmentPrefix),
@@ -2076,7 +2113,7 @@ function writeStartSegment(destination, renderState, formatContext, id) {
         destination.push(renderState),
         destination.push('">')
       );
-    case 8:
+    case 9:
       return (
         destination.push('<table hidden><colgroup id="'),
         destination.push(renderState.segmentPrefix),
@@ -2092,19 +2129,20 @@ function writeEndSegment(destination, formatContext) {
   switch (formatContext.insertionMode) {
     case 0:
     case 1:
+    case 3:
     case 2:
       return destination.push("</div>");
-    case 3:
-      return destination.push("</svg>");
     case 4:
-      return destination.push("</math>");
+      return destination.push("</svg>");
     case 5:
-      return destination.push("</table>");
+      return destination.push("</math>");
     case 6:
-      return destination.push("</tbody></table>");
+      return destination.push("</table>");
     case 7:
-      return destination.push("</tr></table>");
+      return destination.push("</tbody></table>");
     case 8:
+      return destination.push("</tr></table>");
+    case 9:
       return destination.push("</colgroup></table>");
     default:
       throw Error("Unknown insertion mode. This is a bug in React.");
@@ -3250,7 +3288,7 @@ function RequestInstance(
   this.status = 10;
   this.fatalError = null;
   this.pendingRootTasks = this.allPendingTasks = this.nextSegmentId = 0;
-  this.completedRootSegment = null;
+  this.completedPreambleSegments = this.completedRootSegment = null;
   this.abortableTasks = abortSet;
   this.pingedTasks = [];
   this.clientRenderedBoundaries = [];
@@ -3309,6 +3347,7 @@ function createRequest(
     null,
     renderState,
     null,
+    null,
     resumableState.abortableTasks,
     null,
     rootFormatContext,
@@ -3327,7 +3366,12 @@ function pingTask(request, task) {
     ((request.flushScheduled = null !== request.destination),
     performWork(request));
 }
-function createSuspenseBoundary(request, fallbackAbortableTasks) {
+function createSuspenseBoundary(
+  request,
+  fallbackAbortableTasks,
+  contentPreamble,
+  fallbackPreamble
+) {
   return {
     status: 0,
     rootSegmentID: -1,
@@ -3339,6 +3383,8 @@ function createSuspenseBoundary(request, fallbackAbortableTasks) {
     errorDigest: null,
     contentState: createHoistableState(),
     fallbackState: createHoistableState(),
+    contentPreamble: contentPreamble,
+    fallbackPreamble: fallbackPreamble,
     trackedContentKeyPath: null,
     trackedFallbackNode: null
   };
@@ -3350,6 +3396,7 @@ function createRenderTask(
   childIndex,
   blockedBoundary,
   blockedSegment,
+  blockedPreamble,
   hoistableState,
   abortSet,
   keyPath,
@@ -3372,6 +3419,7 @@ function createRenderTask(
     },
     blockedBoundary: blockedBoundary,
     blockedSegment: blockedSegment,
+    blockedPreamble: blockedPreamble,
     hoistableState: hoistableState,
     abortSet: abortSet,
     keyPath: keyPath,
@@ -3415,6 +3463,7 @@ function createReplayTask(
     },
     blockedBoundary: blockedBoundary,
     blockedSegment: null,
+    blockedPreamble: null,
     hoistableState: hoistableState,
     abortSet: abortSet,
     keyPath: keyPath,
@@ -3438,11 +3487,12 @@ function createPendingSegment(
 ) {
   return {
     status: 0,
+    parentFlushed: !1,
     id: -1,
     index: index,
-    parentFlushed: !1,
     chunks: [],
     children: [],
+    preambleChildren: [],
     parentFormatContext: parentFormatContext,
     boundary: boundary,
     lastPushedText: lastPushedText,
@@ -3681,9 +3731,10 @@ function renderElement(request, task, keyPath, type, props, ref) {
       defaultProps = newProps.chunks;
       initialState = request.resumableState;
       ref = request.renderState;
-      propName$23 = task.hoistableState;
-      propName = task.formatContext;
-      var textEmbedded = newProps.lastPushedText,
+      propName$23 = task.blockedPreamble;
+      propName = task.hoistableState;
+      var formatContext = task.formatContext,
+        textEmbedded = newProps.lastPushedText,
         isFallback = task.isFallback;
       for (contextType in props)
         if (hasOwnProperty.call(props, contextType)) {
@@ -3699,7 +3750,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
                 ") in renderToHTML because the HTML will never be hydrated so they can never get called."
             );
         }
-      initialState = pushStartInstance$1(
+      contextType = pushStartInstance$1(
         defaultProps,
         type,
         props,
@@ -3707,17 +3758,48 @@ function renderElement(request, task, keyPath, type, props, ref) {
         ref,
         propName$23,
         propName,
+        formatContext,
         textEmbedded,
         isFallback
       );
       newProps.lastPushedText = !1;
       defaultProps = task.formatContext;
-      contextType = task.keyPath;
-      task.formatContext = getChildFormatContext(defaultProps, type, props);
+      initialState = task.keyPath;
       task.keyPath = keyPath;
-      renderNode(request, task, initialState, -1);
+      3 ===
+      (task.formatContext = getChildFormatContext(defaultProps, type, props))
+        .insertionMode
+        ? ((keyPath = createPendingSegment(
+            request,
+            0,
+            null,
+            task.formatContext,
+            !1,
+            !1
+          )),
+          newProps.preambleChildren.push(keyPath),
+          (keyPath = createRenderTask(
+            request,
+            null,
+            contextType,
+            -1,
+            task.blockedBoundary,
+            keyPath,
+            task.blockedPreamble,
+            task.hoistableState,
+            request.abortableTasks,
+            task.keyPath,
+            task.formatContext,
+            task.context,
+            task.treeContext,
+            task.componentStack,
+            task.isFallback
+          )),
+          pushComponentStack(keyPath),
+          request.pingedTasks.push(keyPath))
+        : renderNode(request, task, contextType, -1);
       task.formatContext = defaultProps;
-      task.keyPath = contextType;
+      task.keyPath = initialState;
       a: {
         task = newProps.chunks;
         request = request.resumableState;
@@ -3752,6 +3834,9 @@ function renderElement(request, task, keyPath, type, props, ref) {
               request.hasHtml = !0;
               break a;
             }
+            break;
+          case "head":
+            if (1 >= defaultProps.insertionMode) break a;
         }
         task.push(endChunkForTag(type));
       }
@@ -3802,24 +3887,33 @@ function renderElement(request, task, keyPath, type, props, ref) {
         } else {
           type = task.keyPath;
           isFallback = task.blockedBoundary;
+          contextType = task.blockedPreamble;
           propValue = task.hoistableState;
-          contextType = task.blockedSegment;
-          ref = props.fallback;
+          ref = task.blockedSegment;
+          propName$23 = props.fallback;
           props = props.children;
           var fallbackAbortSet = new Set();
-          propName$23 = createSuspenseBoundary(request, fallbackAbortSet);
+          propName =
+            2 > task.formatContext.insertionMode
+              ? createSuspenseBoundary(
+                  request,
+                  fallbackAbortSet,
+                  createPreambleState(),
+                  createPreambleState()
+                )
+              : createSuspenseBoundary(request, fallbackAbortSet, null, null);
           null !== request.trackedPostpones &&
-            (propName$23.trackedContentKeyPath = keyPath);
-          propName = createPendingSegment(
+            (propName.trackedContentKeyPath = keyPath);
+          formatContext = createPendingSegment(
             request,
-            contextType.chunks.length,
-            propName$23,
+            ref.chunks.length,
+            propName,
             task.formatContext,
             !1,
             !1
           );
-          contextType.children.push(propName);
-          contextType.lastPushedText = !1;
+          ref.children.push(formatContext);
+          ref.lastPushedText = !1;
           textEmbedded = createPendingSegment(
             request,
             0,
@@ -3833,27 +3927,33 @@ function renderElement(request, task, keyPath, type, props, ref) {
             newProps = [keyPath[0], "Suspense Fallback", keyPath[2]];
             defaultProps = [newProps[1], newProps[2], [], null];
             request.trackedPostpones.workingMap.set(newProps, defaultProps);
-            propName$23.trackedFallbackNode = defaultProps;
-            task.blockedSegment = propName;
+            propName.trackedFallbackNode = defaultProps;
+            task.blockedSegment = formatContext;
+            task.blockedPreamble = propName.fallbackPreamble;
             task.keyPath = newProps;
-            propName.status = 6;
+            formatContext.status = 6;
             try {
-              renderNode(request, task, ref, -1), (propName.status = 1);
+              renderNode(request, task, propName$23, -1),
+                (formatContext.status = 1);
             } catch (thrownValue) {
               throw (
-                ((propName.status = 12 === request.status ? 3 : 4), thrownValue)
+                ((formatContext.status = 12 === request.status ? 3 : 4),
+                thrownValue)
               );
             } finally {
-              (task.blockedSegment = contextType), (task.keyPath = type);
+              (task.blockedSegment = ref),
+                (task.blockedPreamble = contextType),
+                (task.keyPath = type);
             }
             task = createRenderTask(
               request,
               null,
               props,
               -1,
-              propName$23,
+              propName,
               textEmbedded,
-              propName$23.contentState,
+              propName.contentPreamble,
+              propName.contentState,
               task.abortSet,
               keyPath,
               task.formatContext,
@@ -3865,8 +3965,9 @@ function renderElement(request, task, keyPath, type, props, ref) {
             pushComponentStack(task);
             request.pingedTasks.push(task);
           } else {
-            task.blockedBoundary = propName$23;
-            task.hoistableState = propName$23.contentState;
+            task.blockedBoundary = propName;
+            task.blockedPreamble = propName.contentPreamble;
+            task.hoistableState = propName.contentState;
             task.blockedSegment = textEmbedded;
             task.keyPath = keyPath;
             textEmbedded.status = 6;
@@ -3874,14 +3975,17 @@ function renderElement(request, task, keyPath, type, props, ref) {
               if (
                 (renderNode(request, task, props, -1),
                 (textEmbedded.status = 1),
-                queueCompletedSegment(propName$23, textEmbedded),
-                0 === propName$23.pendingTasks && 0 === propName$23.status)
+                queueCompletedSegment(propName, textEmbedded),
+                0 === propName.pendingTasks && 0 === propName.status)
               ) {
-                propName$23.status = 1;
+                propName.status = 1;
+                0 === request.pendingRootTasks &&
+                  task.blockedPreamble &&
+                  preparePreamble(request);
                 break a;
               }
             } catch (thrownValue$18) {
-              (propName$23.status = 4),
+              (propName.status = 4),
                 12 === request.status
                   ? ((textEmbedded.status = 3), (newProps = request.fatalError))
                   : ((textEmbedded.status = 4), (newProps = thrownValue$18)),
@@ -3896,22 +4000,24 @@ function renderElement(request, task, keyPath, type, props, ref) {
                       newProps,
                       defaultProps
                     )),
-                (propName$23.errorDigest = initialState),
-                untrackBoundary(request, propName$23);
+                (propName.errorDigest = initialState),
+                untrackBoundary(request, propName);
             } finally {
               (task.blockedBoundary = isFallback),
+                (task.blockedPreamble = contextType),
                 (task.hoistableState = propValue),
-                (task.blockedSegment = contextType),
+                (task.blockedSegment = ref),
                 (task.keyPath = type);
             }
             task = createRenderTask(
               request,
               null,
-              ref,
+              propName$23,
               -1,
               isFallback,
-              propName,
-              propName$23.fallbackState,
+              formatContext,
+              propName.fallbackPreamble,
+              propName.fallbackState,
               fallbackAbortSet,
               [keyPath[0], "Suspense Fallback", keyPath[2]],
               task.formatContext,
@@ -3930,9 +4036,9 @@ function renderElement(request, task, keyPath, type, props, ref) {
       switch (type.$$typeof) {
         case REACT_FORWARD_REF_TYPE:
           if ("ref" in props)
-            for (textEmbedded in ((newProps = {}), props))
-              "ref" !== textEmbedded &&
-                (newProps[textEmbedded] = props[textEmbedded]);
+            for (formatContext in ((newProps = {}), props))
+              "ref" !== formatContext &&
+                (newProps[formatContext] = props[formatContext]);
           else newProps = props;
           type = renderWithHooks(
             request,
@@ -4134,17 +4240,27 @@ function retryNode(request, task) {
                         previousReplaySet = task.replay,
                         parentBoundary = task.blockedBoundary,
                         parentHoistableState = task.hoistableState,
-                        content = props.children;
-                      props = props.fallback;
-                      var fallbackAbortSet = new Set(),
-                        resumedBoundary = createSuspenseBoundary(
-                          request,
-                          fallbackAbortSet
-                        );
-                      resumedBoundary.parentFlushed = !0;
-                      resumedBoundary.rootSegmentID = ref;
-                      task.blockedBoundary = resumedBoundary;
-                      task.hoistableState = resumedBoundary.contentState;
+                        content = props.children,
+                        fallback = props.fallback,
+                        fallbackAbortSet = new Set();
+                      props =
+                        2 > task.formatContext.insertionMode
+                          ? createSuspenseBoundary(
+                              request,
+                              fallbackAbortSet,
+                              createPreambleState(),
+                              createPreambleState()
+                            )
+                          : createSuspenseBoundary(
+                              request,
+                              fallbackAbortSet,
+                              null,
+                              null
+                            );
+                      props.parentFlushed = !0;
+                      props.rootSegmentID = ref;
+                      task.blockedBoundary = props;
+                      task.hoistableState = props.contentState;
                       task.keyPath = key;
                       task.replay = {
                         nodes: replay,
@@ -4161,16 +4277,13 @@ function retryNode(request, task) {
                             "Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering."
                           );
                         task.replay.pendingTasks--;
-                        if (
-                          0 === resumedBoundary.pendingTasks &&
-                          0 === resumedBoundary.status
-                        ) {
-                          resumedBoundary.status = 1;
-                          request.completedBoundaries.push(resumedBoundary);
+                        if (0 === props.pendingTasks && 0 === props.status) {
+                          props.status = 1;
+                          request.completedBoundaries.push(props);
                           break b;
                         }
                       } catch (error) {
-                        (resumedBoundary.status = 4),
+                        (props.status = 4),
                           (childNodes = getThrownInfo(task.componentStack)),
                           "object" === typeof error &&
                           null !== error &&
@@ -4182,11 +4295,9 @@ function retryNode(request, task) {
                                 error,
                                 childNodes
                               )),
-                          (resumedBoundary.errorDigest = type),
+                          (props.errorDigest = type),
                           task.replay.pendingTasks--,
-                          request.clientRenderedBoundaries.push(
-                            resumedBoundary
-                          );
+                          request.clientRenderedBoundaries.push(props);
                       } finally {
                         (task.blockedBoundary = parentBoundary),
                           (task.hoistableState = parentHoistableState),
@@ -4201,10 +4312,10 @@ function retryNode(request, task) {
                           slots: node$jscomp$0,
                           pendingTasks: 0
                         },
-                        props,
+                        fallback,
                         -1,
                         parentBoundary,
-                        resumedBoundary.fallbackState,
+                        props.fallbackState,
                         fallbackAbortSet,
                         [key[0], "Suspense Fallback", key[2]],
                         task.formatContext,
@@ -4534,6 +4645,7 @@ function spawnNewSuspendedRenderTask(request, task, thenableState) {
     task.childIndex,
     task.blockedBoundary,
     newSegment,
+    task.blockedPreamble,
     task.hoistableState,
     task.abortSet,
     task.keyPath,
@@ -4719,7 +4831,12 @@ function abortRemainingReplayNodes(
       node = node[5];
       var request = request$jscomp$0,
         errorDigest = errorDigest$jscomp$0,
-        resumedBoundary = createSuspenseBoundary(request, new Set());
+        resumedBoundary = createSuspenseBoundary(
+          request,
+          new Set(),
+          null,
+          null
+        );
       resumedBoundary.parentFlushed = !0;
       resumedBoundary.rootSegmentID = node;
       resumedBoundary.status = 4;
@@ -4909,6 +5026,7 @@ function safelyEmitEarlyPreloads(request, shellComplete) {
 }
 function completeShell(request) {
   null === request.trackedPostpones && safelyEmitEarlyPreloads(request, !0);
+  null === request.trackedPostpones && preparePreamble(request);
   request.onShellError = noop;
   request = request.onShellReady;
   request();
@@ -4921,6 +5039,7 @@ function completeAll(request) {
       : null === request.completedRootSegment ||
           5 !== request.completedRootSegment.status
   );
+  preparePreamble(request);
   request = request.onAllReady;
   request();
 }
@@ -4961,7 +5080,11 @@ function finishedTask(request, boundary, segment) {
               request.completedBoundaries.push(boundary),
             1 === boundary.status &&
               (boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request),
-              boundary.fallbackAbortableTasks.clear()))
+              boundary.fallbackAbortableTasks.clear(),
+              0 === request.pendingRootTasks &&
+                null === request.trackedPostpones &&
+                null !== boundary.contentPreamble &&
+                preparePreamble(request)))
           : null !== segment &&
             segment.parentFlushed &&
             1 === segment.status &&
@@ -5150,7 +5273,11 @@ function performWork(request$jscomp$1) {
                         (boundary.errorDigest = request$jscomp$0),
                         untrackBoundary(request, boundary),
                         boundary.parentFlushed &&
-                          request.clientRenderedBoundaries.push(boundary)));
+                          request.clientRenderedBoundaries.push(boundary),
+                        0 === request.pendingRootTasks &&
+                          null === request.trackedPostpones &&
+                          null !== boundary.contentPreamble &&
+                          preparePreamble(request)));
                   request.allPendingTasks--;
                   0 === request.allPendingTasks && completeAll(request);
                 }
@@ -5173,6 +5300,85 @@ function performWork(request$jscomp$1) {
     }
   }
 }
+function preparePreambleFromSubtree(
+  request,
+  segment,
+  collectedPreambleSegments
+) {
+  segment.preambleChildren.length &&
+    collectedPreambleSegments.push(segment.preambleChildren);
+  for (var pendingPreambles = !1, i = 0; i < segment.children.length; i++)
+    pendingPreambles =
+      preparePreambleFromSegment(
+        request,
+        segment.children[i],
+        collectedPreambleSegments
+      ) || pendingPreambles;
+  return pendingPreambles;
+}
+function preparePreambleFromSegment(
+  request,
+  segment,
+  collectedPreambleSegments
+) {
+  var boundary = segment.boundary;
+  if (null === boundary)
+    return preparePreambleFromSubtree(
+      request,
+      segment,
+      collectedPreambleSegments
+    );
+  var preamble = boundary.contentPreamble,
+    fallbackPreamble = boundary.fallbackPreamble;
+  if (null === preamble || null === fallbackPreamble) return !1;
+  switch (boundary.status) {
+    case 1:
+      hoistPreambleState(request.renderState, preamble);
+      segment = boundary.completedSegments[0];
+      if (!segment)
+        throw Error(
+          "A previously unvisited boundary must have exactly one root segment. This is a bug in React."
+        );
+      return preparePreambleFromSubtree(
+        request,
+        segment,
+        collectedPreambleSegments
+      );
+    case 5:
+      if (null !== request.trackedPostpones) return !0;
+    case 4:
+      if (1 === segment.status)
+        return (
+          hoistPreambleState(request.renderState, fallbackPreamble),
+          preparePreambleFromSubtree(
+            request,
+            segment,
+            collectedPreambleSegments
+          )
+        );
+    default:
+      return !0;
+  }
+}
+function preparePreamble(request) {
+  if (
+    request.completedRootSegment &&
+    null === request.completedPreambleSegments
+  ) {
+    var collectedPreambleSegments = [],
+      hasPendingPreambles = preparePreambleFromSegment(
+        request,
+        request.completedRootSegment,
+        collectedPreambleSegments
+      ),
+      preamble = request.renderState.preamble;
+    if (
+      !1 === hasPendingPreambles ||
+      (preamble.headChunks && preamble.bodyChunks)
+    )
+      request.completedPreambleSegments = collectedPreambleSegments;
+  }
+}
 function flushSubtree(request, destination, segment, hoistableState) {
   segment.parentFlushed = !0;
   switch (segment.status) {
@@ -5387,6 +5593,8 @@ function flushCompletedQueues(request, destination) {
         completedRootSegment = request.completedRootSegment;
       if (null !== completedRootSegment) {
         if (5 === completedRootSegment.status) return;
+        var completedPreambleSegments = request.completedPreambleSegments;
+        if (null === completedPreambleSegments) return;
         var renderState = request.renderState;
         if (
           (0 !== request.allPendingTasks ||
@@ -5401,8 +5609,9 @@ function flushCompletedQueues(request, destination) {
             ((resumableState.scriptResources[src] = null),
             renderState.scripts.add(chunks));
         }
-        var htmlChunks = renderState.htmlChunks,
-          headChunks = renderState.headChunks,
+        var preamble = renderState.preamble,
+          htmlChunks = preamble.htmlChunks,
+          headChunks = preamble.headChunks,
           i$jscomp$0;
         if (htmlChunks) {
           for (i$jscomp$0 = 0; i$jscomp$0 < htmlChunks.length; i$jscomp$0++)
@@ -5445,11 +5654,38 @@ function flushCompletedQueues(request, destination) {
         var hoistableChunks = renderState.hoistableChunks;
         for (i$jscomp$0 = 0; i$jscomp$0 < hoistableChunks.length; i$jscomp$0++)
           destination.push(hoistableChunks[i$jscomp$0]);
-        hoistableChunks.length = 0;
-        if (htmlChunks && null === headChunks) {
+        for (
+          renderState = hoistableChunks.length = 0;
+          renderState < completedPreambleSegments.length;
+          renderState++
+        ) {
+          var segments = completedPreambleSegments[renderState];
+          for (
+            _renderState$external = 0;
+            _renderState$external < segments.length;
+            _renderState$external++
+          )
+            flushSegment(
+              request,
+              destination,
+              segments[_renderState$external],
+              null
+            );
+        }
+        var preamble$jscomp$0 = request.renderState.preamble,
+          headChunks$jscomp$0 = preamble$jscomp$0.headChunks;
+        if (preamble$jscomp$0.htmlChunks || headChunks$jscomp$0) {
           var chunk$jscomp$0 = endChunkForTag("head");
           destination.push(chunk$jscomp$0);
         }
+        var bodyChunks = preamble$jscomp$0.bodyChunks;
+        if (bodyChunks)
+          for (
+            completedPreambleSegments = 0;
+            completedPreambleSegments < bodyChunks.length;
+            completedPreambleSegments++
+          )
+            destination.push(bodyChunks[completedPreambleSegments]);
         flushSegment(request, destination, completedRootSegment, null);
         request.completedRootSegment = null;
         writeBootstrap(destination, request.renderState);
@@ -5717,4 +5953,4 @@ exports.experimental_renderToHTML = function (children, options) {
     });
   });
 };
-exports.version = "19.1.0-experimental-d46b04a2-20250117";
+exports.version = "19.1.0-experimental-18eaf51b-20250118";