@solidjs/web 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/server.cjs

@@ -12,7 +12,10 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
@@ -20,10 +23,10 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
 
@@ -108,11 +111,11 @@ function createAssetTracking() {
       currentBoundaryId = v;
     },
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
       map[moduleUrl] = entryUrl;
     },
@@ -140,7 +143,7 @@ function applyAssetTracking(context, tracking, manifest) {
   if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
 }
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content)}n.remove(),_$HY.fe(e)}function $dfs(e,c){(_$HY.sc=_$HY.sc||{})[e]=c}function $dfc(e){if(--_$HY.sc[e]<=0)delete _$HY.sc[e],$df(e)}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)if($dfl(e[i]))return e[i];return null}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
@@ -195,6 +198,7 @@ function renderToString(code, options = {}) {
   }, {
     id: renderId
   });
+  serializeFragmentAssets("", tracking.boundaryModules, solidJs.sharedConfig.context);
   solidJs.sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
@@ -213,10 +217,12 @@ function renderToStream(code, options = {}) {
   } = options;
   let dispose;
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
@@ -265,7 +271,29 @@ function renderToStream(code, options = {}) {
   let shellCompleted = false;
   let scriptFlushed = false;
   let headStyles;
+  const revealGroups = new Map();
   let timer = null;
+  const emitTask = task => {
+    pushTask(`${task}${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+    scriptFlushed = true;
+  };
+  function resolveRevealKeys(groupOrKeys, release, consume) {
+    if (Array.isArray(groupOrKeys)) return groupOrKeys.slice();
+    let group = revealGroups.get(groupOrKeys);
+    if (!group) {
+      if (!release) return;
+      group = {
+        order: [],
+        keys: new Set(),
+        released: true
+      };
+      revealGroups.set(groupOrKeys, group);
+    } else if (release) group.released = true;
+    if (!group.order.length) return;
+    const keys = group.order.slice();
+    if (consume) revealGroups.delete(groupOrKeys);
+    return keys;
+  }
   let rootHoles = null;
   let nextHoleId = 0;
   let buffer = {
@@ -315,7 +343,26 @@ function renderToStream(code, options = {}) {
     escape: escape,
     resolve: resolveSSRNode,
     ssr: ssr,
-    registerFragment(key) {
+    registerFragment(key, options) {
+      const revealGroup = options && options.revealGroup;
+      if (revealGroup) {
+        let group = revealGroups.get(revealGroup);
+        if (!group) {
+          group = {
+            order: [],
+            keys: new Set(),
+            released: false
+          };
+          revealGroups.set(revealGroup, group);
+        }
+        if (!group.keys.has(key)) {
+          group.keys.add(key);
+          group.order.push(key);
+        }
+        if (group.released) {
+          throw new Error("registerFragment() for reveal group '" + revealGroup + "' was called after revealFragments(). Ensure template payload is emitted before grouped reveal.");
+        }
+      }
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => (resolve = r, reject = rej));
@@ -325,7 +372,7 @@ function renderToStream(code, options = {}) {
             queue(flushEnd);
           }))
         });
-        serializer.write(key, p);
+        serializer.write(key + "_fr", p);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -354,9 +401,9 @@ function renderToStream(code, options = {}) {
             } else {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
+              const deferActivation = !!revealGroup;
               if (styles.length) {
-                pushTask(`$dfs("${key}",${styles.length})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
+                emitTask(`$dfs("${key}",${styles.length},${deferActivation ? 1 : 0})`);
                 writeTasks();
                 for (const url of styles) {
                   buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
@@ -364,8 +411,9 @@ function renderToStream(code, options = {}) {
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
               } else {
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-                pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
+                if (!deferActivation) {
+                  emitTask(`$df("${key}")`);
+                }
               }
               item.resolve(error);
             }
@@ -373,6 +421,16 @@ function renderToStream(code, options = {}) {
         }
         return firstFlushed;
       };
+    },
+    revealFragments(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, true, true);
+      if (!keys) return;
+      emitTask(`$dfj(${JSON.stringify(keys)})`);
+    },
+    revealFallbacks(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, false, false);
+      if (!keys) return;
+      emitTask(`$dflj(${JSON.stringify(keys)})`);
     }
   };
   applyAssetTracking(context, tracking, manifest);
@@ -399,13 +457,32 @@ function renderToStream(code, options = {}) {
   function doShell() {
     if (shellCompleted) return;
     if (rootHoles) {
+      const pending = [];
       for (const {
         id,
         fn
       } of rootHoles) {
         const marker = `<!--rh${id}-->`;
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        if (!res.h.length) {
+          html = html.replace(marker, res.t[0]);
+        } else {
+          let out = res.t[0];
+          for (let j = 0; j < res.h.length; j++) {
+            const newId = nextHoleId++;
+            pending.push({
+              id: newId,
+              fn: res.h[j]
+            });
+            out += `<!--rh${newId}-->` + res.t[j + 1];
+          }
+          html = html.replace(marker, out);
+          for (const p of res.p) blockingPromises.add(p);
+        }
+      }
+      if (pending.length) {
+        rootHoles = pending;
+        return;
       }
       rootHoles = null;
     }
@@ -416,6 +493,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeFragmentAssets("", tracking.boundaryModules, context);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";
@@ -442,48 +520,56 @@ function renderToStream(code, options = {}) {
       queue(flushEnd);
     },
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
   };
 }
@@ -883,6 +969,10 @@ Object.defineProperty(exports, "Repeat", {
   enumerable: true,
   get: function () { return solidJs.Repeat; }
 });
+Object.defineProperty(exports, "Reveal", {
+  enumerable: true,
+  get: function () { return solidJs.Reveal; }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
@@ -912,10 +1002,11 @@ exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = HydrationScript;
+exports.MathMLElements = MathMLElements;
+exports.Namespaces = Namespaces;
 exports.Portal = Portal;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
-exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = notSup;
 exports.applyRef = applyRef;
 exports.assign = notSup;

package/dist/server.js

@@ -1,5 +1,5 @@
 import { createRenderEffect, createMemo as createMemo$1, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 import { createMemo } from '@solidjs/signals';
@@ -11,7 +11,10 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
@@ -19,10 +22,10 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
 
@@ -107,11 +110,11 @@ function createAssetTracking() {
       currentBoundaryId = v;
     },
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
       map[moduleUrl] = entryUrl;
     },
@@ -139,7 +142,7 @@ function applyAssetTracking(context, tracking, manifest) {
   if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
 }
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content)}n.remove(),_$HY.fe(e)}function $dfs(e,c){(_$HY.sc=_$HY.sc||{})[e]=c}function $dfc(e){if(--_$HY.sc[e]<=0)delete _$HY.sc[e],$df(e)}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)if($dfl(e[i]))return e[i];return null}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
@@ -194,6 +197,7 @@ function renderToString(code, options = {}) {
   }, {
     id: renderId
   });
+  serializeFragmentAssets("", tracking.boundaryModules, sharedConfig.context);
   sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(sharedConfig.context.assets, html);
@@ -212,10 +216,12 @@ function renderToStream(code, options = {}) {
   } = options;
   let dispose;
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
@@ -264,7 +270,29 @@ function renderToStream(code, options = {}) {
   let shellCompleted = false;
   let scriptFlushed = false;
   let headStyles;
+  const revealGroups = new Map();
   let timer = null;
+  const emitTask = task => {
+    pushTask(`${task}${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+    scriptFlushed = true;
+  };
+  function resolveRevealKeys(groupOrKeys, release, consume) {
+    if (Array.isArray(groupOrKeys)) return groupOrKeys.slice();
+    let group = revealGroups.get(groupOrKeys);
+    if (!group) {
+      if (!release) return;
+      group = {
+        order: [],
+        keys: new Set(),
+        released: true
+      };
+      revealGroups.set(groupOrKeys, group);
+    } else if (release) group.released = true;
+    if (!group.order.length) return;
+    const keys = group.order.slice();
+    if (consume) revealGroups.delete(groupOrKeys);
+    return keys;
+  }
   let rootHoles = null;
   let nextHoleId = 0;
   let buffer = {
@@ -314,7 +342,26 @@ function renderToStream(code, options = {}) {
     escape: escape,
     resolve: resolveSSRNode,
     ssr: ssr,
-    registerFragment(key) {
+    registerFragment(key, options) {
+      const revealGroup = options && options.revealGroup;
+      if (revealGroup) {
+        let group = revealGroups.get(revealGroup);
+        if (!group) {
+          group = {
+            order: [],
+            keys: new Set(),
+            released: false
+          };
+          revealGroups.set(revealGroup, group);
+        }
+        if (!group.keys.has(key)) {
+          group.keys.add(key);
+          group.order.push(key);
+        }
+        if (group.released) {
+          throw new Error("registerFragment() for reveal group '" + revealGroup + "' was called after revealFragments(). Ensure template payload is emitted before grouped reveal.");
+        }
+      }
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => (resolve = r, reject = rej));
@@ -324,7 +371,7 @@ function renderToStream(code, options = {}) {
             queue(flushEnd);
           }))
         });
-        serializer.write(key, p);
+        serializer.write(key + "_fr", p);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -353,9 +400,9 @@ function renderToStream(code, options = {}) {
             } else {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
+              const deferActivation = !!revealGroup;
               if (styles.length) {
-                pushTask(`$dfs("${key}",${styles.length})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
+                emitTask(`$dfs("${key}",${styles.length},${deferActivation ? 1 : 0})`);
                 writeTasks();
                 for (const url of styles) {
                   buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
@@ -363,8 +410,9 @@ function renderToStream(code, options = {}) {
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
               } else {
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-                pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
+                if (!deferActivation) {
+                  emitTask(`$df("${key}")`);
+                }
               }
               item.resolve(error);
             }
@@ -372,6 +420,16 @@ function renderToStream(code, options = {}) {
         }
         return firstFlushed;
       };
+    },
+    revealFragments(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, true, true);
+      if (!keys) return;
+      emitTask(`$dfj(${JSON.stringify(keys)})`);
+    },
+    revealFallbacks(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, false, false);
+      if (!keys) return;
+      emitTask(`$dflj(${JSON.stringify(keys)})`);
     }
   };
   applyAssetTracking(context, tracking, manifest);
@@ -398,13 +456,32 @@ function renderToStream(code, options = {}) {
   function doShell() {
     if (shellCompleted) return;
     if (rootHoles) {
+      const pending = [];
       for (const {
         id,
         fn
       } of rootHoles) {
         const marker = `<!--rh${id}-->`;
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        if (!res.h.length) {
+          html = html.replace(marker, res.t[0]);
+        } else {
+          let out = res.t[0];
+          for (let j = 0; j < res.h.length; j++) {
+            const newId = nextHoleId++;
+            pending.push({
+              id: newId,
+              fn: res.h[j]
+            });
+            out += `<!--rh${newId}-->` + res.t[j + 1];
+          }
+          html = html.replace(marker, out);
+          for (const p of res.p) blockingPromises.add(p);
+        }
+      }
+      if (pending.length) {
+        rootHoles = pending;
+        return;
       }
       rootHoles = null;
     }
@@ -415,6 +492,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeFragmentAssets("", tracking.boundaryModules, context);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";
@@ -441,48 +519,56 @@ function renderToStream(code, options = {}) {
       queue(flushEnd);
     },
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
   };
 }
@@ -854,4 +940,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, Portal, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };