@solidjs/web 2.0.0-beta.26 → 2.0.0-beta.27

package/frames/dist/client.cjs

@@ -114,7 +114,7 @@ function createFrameHost(options = {}) {
         pending.delete(id);
         const records = {};
         let version;
-        for (const chunk of buffered) {
+        for (const chunk of buffered.chunks) {
           if (chunk.type === "data") {
             options.applyData && options.applyData(chunk);
             continue;
@@ -146,12 +146,20 @@ function createFrameHost(options = {}) {
         for (const frame of set) deliver(frame, chunk);
         return;
       }
-      const buffered = pending.get(chunk.id) ?? [];
-      const maxVersion = buffered.reduce((m, c) => Math.max(m, c.version), chunk.version);
-      if (chunk.version < maxVersion) return;
-      const kept = buffered.filter(c => c.version >= chunk.version);
-      kept.push(chunk);
-      pending.set(chunk.id, kept);
+      const buffered = pending.get(chunk.id);
+      if (!buffered) {
+        pending.set(chunk.id, {
+          version: chunk.version,
+          chunks: [chunk]
+        });
+        return;
+      }
+      if (chunk.version < buffered.version) return;
+      if (chunk.version > buffered.version) {
+        buffered.version = chunk.version;
+        buffered.chunks.length = 0;
+      }
+      buffered.chunks.push(chunk);
     },
     get(id) {
       const set = frames.get(id);
@@ -210,7 +218,7 @@ class FrameImpl {
     if (options.host && options.id !== undefined) {
       options.host.register(options.id, this);
     }
-    if (options.adopt) this.#syncSlots();
+    if (options.adopt && this.#version === undefined) this.#syncSlots();
   }
   #parent() {
     return this.#element ?? this.#start.parentNode;
@@ -354,7 +362,7 @@ class FrameImpl {
         if (nodes) this.#replaceRange(occurrence, start, nodes);
         this.#slotNodes.set(occurrence, nodes);
         this.#mountedSlots.add(occurrence);
-        this.#discoverRegions(occurrence, start);
+        if (!this.#options.adopt || nodes) this.#discoverRegions(occurrence, start);
         this.#bindRegions(occurrence);
       } else if (record !== this.#slotArgs.get(occurrence)) {
         if (this.#refArgsUnchanged(occurrence, record)) {
@@ -1226,15 +1234,18 @@ function normalizeSlotContent(value) {
   if (value == null || typeof value === "boolean") return document.createTextNode("");
   return value instanceof Node ? value : document.createTextNode(String(value));
 }
+function gatherClaims(el, registry) {
+  if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
+  if (el.hasAttribute(FRAME_ID_ATTR)) return;
+  for (let c = el.firstElementChild; c; c = c.nextElementSibling) gatherClaims(c, registry);
+}
 function claimRender(prefix, existing, render) {
   const sc = solidJs.sharedConfig;
   if (!sc.getNextContextId) return render();
   const registry = new Map();
   for (const n of existing) {
-    const el = n;
-    if (el.nodeType !== 1) continue;
-    if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
-    el.querySelectorAll("*[_hk]").forEach(child => registry.set(child.getAttribute("_hk"), child));
+    if (n.nodeType !== 1) continue;
+    gatherClaims(n, registry);
   }
   if (!registry.size) return render();
   const prevRegistry = sc.registry;
@@ -1298,21 +1309,57 @@ function boundaryComponent(host, id) {
 }
 const claimedBoundaries = new Set();
 let boundaryIndex = null;
+const isBoundaryId = id => !id.includes(".");
+function indexBoundaries(root) {
+  root.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
+    const key = el.getAttribute(FRAME_ID_ATTR);
+    if (key && isBoundaryId(key) && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
+  });
+}
 function findBoundaryElement(id) {
   if (!boundaryIndex) {
     boundaryIndex = new Map();
-    if (typeof document !== "undefined" && document.body) {
-      document.body.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
-        const key = el.getAttribute(FRAME_ID_ATTR);
-        if (key && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
-      });
-    }
+    if (typeof document !== "undefined" && document.body) indexBoundaries(document.body);
   }
   return boundaryIndex.get(id);
 }
+const boundaryWaiters = new Map();
+function documentStreaming() {
+  const hy = globalThis._$HY;
+  return !!hy && !hy.done;
+}
+function installRevealHook() {
+  const hy = globalThis._$HY;
+  if (!hy || hy.$sc) return;
+  hy.$sc = true;
+  const prev = hy.fe;
+  hy.fe = (fragmentId, parent) => {
+    if (prev) prev(fragmentId, parent);
+    if (!boundaryIndex) return;
+    const root = parent || (typeof document !== "undefined" ? document.body : null);
+    if (!root) return;
+    indexBoundaries(root);
+    for (const [id, notify] of boundaryWaiters) {
+      const el = boundaryIndex.get(id);
+      if (!el) continue;
+      boundaryWaiters.delete(id);
+      notify(el);
+    }
+  };
+}
 function documentBoundary(host, id, props) {
-  const el = !claimedBoundaries.has(id) ? findBoundaryElement(id) : undefined;
-  if (!el) return boundaryComponent(host, id)(props);
+  const claimed = claimedBoundaries.has(id);
+  const el = !claimed ? findBoundaryElement(id) : undefined;
+  if (el) return adoptBoundary(host, id, el, props);
+  if (!claimed && !boundaryWaiters.has(id) && documentStreaming()) {
+    const owner = solidJs.getOwner();
+    const arrival = new Promise(resolve => boundaryWaiters.set(id, resolve));
+    solidJs.onCleanup(() => boundaryWaiters.delete(id));
+    return solidJs.createMemo(() => arrival.then(node => solidJs.runWithOwner(owner, () => adoptBoundary(host, id, node, props))));
+  }
+  return boundaryComponent(host, id)(props);
+}
+function adoptBoundary(host, id, el, props) {
   claimedBoundaries.add(id);
   const hy = globalThis._$HY;
   if (hy && hy.r) {
@@ -1364,6 +1411,7 @@ function installServerComponents(host = getFrameHost()) {
     };
   }
   g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+  installRevealHook();
   client.configureServerFunctionsClient({
     responseHandler: createServerComponentHandler({
       host,

package/frames/dist/client.dev.cjs

@@ -114,7 +114,7 @@ function createFrameHost(options = {}) {
         pending.delete(id);
         const records = {};
         let version;
-        for (const chunk of buffered) {
+        for (const chunk of buffered.chunks) {
           if (chunk.type === "data") {
             options.applyData && options.applyData(chunk);
             continue;
@@ -146,12 +146,20 @@ function createFrameHost(options = {}) {
         for (const frame of set) deliver(frame, chunk);
         return;
       }
-      const buffered = pending.get(chunk.id) ?? [];
-      const maxVersion = buffered.reduce((m, c) => Math.max(m, c.version), chunk.version);
-      if (chunk.version < maxVersion) return;
-      const kept = buffered.filter(c => c.version >= chunk.version);
-      kept.push(chunk);
-      pending.set(chunk.id, kept);
+      const buffered = pending.get(chunk.id);
+      if (!buffered) {
+        pending.set(chunk.id, {
+          version: chunk.version,
+          chunks: [chunk]
+        });
+        return;
+      }
+      if (chunk.version < buffered.version) return;
+      if (chunk.version > buffered.version) {
+        buffered.version = chunk.version;
+        buffered.chunks.length = 0;
+      }
+      buffered.chunks.push(chunk);
     },
     get(id) {
       const set = frames.get(id);
@@ -210,7 +218,7 @@ class FrameImpl {
     if (options.host && options.id !== undefined) {
       options.host.register(options.id, this);
     }
-    if (options.adopt) this.#syncSlots();
+    if (options.adopt && this.#version === undefined) this.#syncSlots();
   }
   #parent() {
     return this.#element ?? this.#start.parentNode;
@@ -354,7 +362,7 @@ class FrameImpl {
         if (nodes) this.#replaceRange(occurrence, start, nodes);
         this.#slotNodes.set(occurrence, nodes);
         this.#mountedSlots.add(occurrence);
-        this.#discoverRegions(occurrence, start);
+        if (!this.#options.adopt || nodes) this.#discoverRegions(occurrence, start);
         this.#bindRegions(occurrence);
       } else if (record !== this.#slotArgs.get(occurrence)) {
         if (this.#refArgsUnchanged(occurrence, record)) {
@@ -1240,15 +1248,18 @@ function normalizeSlotContent(value) {
   if (value == null || typeof value === "boolean") return document.createTextNode("");
   return value instanceof Node ? value : document.createTextNode(String(value));
 }
+function gatherClaims(el, registry) {
+  if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
+  if (el.hasAttribute(FRAME_ID_ATTR)) return;
+  for (let c = el.firstElementChild; c; c = c.nextElementSibling) gatherClaims(c, registry);
+}
 function claimRender(prefix, existing, render) {
   const sc = solidJs.sharedConfig;
   if (!sc.getNextContextId) return render();
   const registry = new Map();
   for (const n of existing) {
-    const el = n;
-    if (el.nodeType !== 1) continue;
-    if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
-    el.querySelectorAll("*[_hk]").forEach(child => registry.set(child.getAttribute("_hk"), child));
+    if (n.nodeType !== 1) continue;
+    gatherClaims(n, registry);
   }
   if (!registry.size) return render();
   const prevRegistry = sc.registry;
@@ -1312,21 +1323,57 @@ function boundaryComponent(host, id) {
 }
 const claimedBoundaries = new Set();
 let boundaryIndex = null;
+const isBoundaryId = id => !id.includes(".");
+function indexBoundaries(root) {
+  root.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
+    const key = el.getAttribute(FRAME_ID_ATTR);
+    if (key && isBoundaryId(key) && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
+  });
+}
 function findBoundaryElement(id) {
   if (!boundaryIndex) {
     boundaryIndex = new Map();
-    if (typeof document !== "undefined" && document.body) {
-      document.body.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
-        const key = el.getAttribute(FRAME_ID_ATTR);
-        if (key && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
-      });
-    }
+    if (typeof document !== "undefined" && document.body) indexBoundaries(document.body);
   }
   return boundaryIndex.get(id);
 }
+const boundaryWaiters = new Map();
+function documentStreaming() {
+  const hy = globalThis._$HY;
+  return !!hy && !hy.done;
+}
+function installRevealHook() {
+  const hy = globalThis._$HY;
+  if (!hy || hy.$sc) return;
+  hy.$sc = true;
+  const prev = hy.fe;
+  hy.fe = (fragmentId, parent) => {
+    if (prev) prev(fragmentId, parent);
+    if (!boundaryIndex) return;
+    const root = parent || (typeof document !== "undefined" ? document.body : null);
+    if (!root) return;
+    indexBoundaries(root);
+    for (const [id, notify] of boundaryWaiters) {
+      const el = boundaryIndex.get(id);
+      if (!el) continue;
+      boundaryWaiters.delete(id);
+      notify(el);
+    }
+  };
+}
 function documentBoundary(host, id, props) {
-  const el = !claimedBoundaries.has(id) ? findBoundaryElement(id) : undefined;
-  if (!el) return boundaryComponent(host, id)(props);
+  const claimed = claimedBoundaries.has(id);
+  const el = !claimed ? findBoundaryElement(id) : undefined;
+  if (el) return adoptBoundary(host, id, el, props);
+  if (!claimed && !boundaryWaiters.has(id) && documentStreaming()) {
+    const owner = solidJs.getOwner();
+    const arrival = new Promise(resolve => boundaryWaiters.set(id, resolve));
+    solidJs.onCleanup(() => boundaryWaiters.delete(id));
+    return solidJs.createMemo(() => arrival.then(node => solidJs.runWithOwner(owner, () => adoptBoundary(host, id, node, props))));
+  }
+  return boundaryComponent(host, id)(props);
+}
+function adoptBoundary(host, id, el, props) {
   claimedBoundaries.add(id);
   const hy = globalThis._$HY;
   if (hy && hy.r) {
@@ -1378,6 +1425,7 @@ function installServerComponents(host = getFrameHost()) {
     };
   }
   g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+  installRevealHook();
   client.configureServerFunctionsClient({
     responseHandler: createServerComponentHandler({
       host,

package/frames/dist/client.dev.js

@@ -1,4 +1,4 @@
-import { getOwner, runWithOwner, onCleanup, createLoadingBoundary, sharedConfig, createOwner } from 'solid-js';
+import { getOwner, onCleanup, createMemo, runWithOwner, createLoadingBoundary, sharedConfig, createOwner } from 'solid-js';
 import { insert } from '@solidjs/web';
 import { configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
 import { fromCrossJSON, Feature } from 'seroval';
@@ -112,7 +112,7 @@ function createFrameHost(options = {}) {
         pending.delete(id);
         const records = {};
         let version;
-        for (const chunk of buffered) {
+        for (const chunk of buffered.chunks) {
           if (chunk.type === "data") {
             options.applyData && options.applyData(chunk);
             continue;
@@ -144,12 +144,20 @@ function createFrameHost(options = {}) {
         for (const frame of set) deliver(frame, chunk);
         return;
       }
-      const buffered = pending.get(chunk.id) ?? [];
-      const maxVersion = buffered.reduce((m, c) => Math.max(m, c.version), chunk.version);
-      if (chunk.version < maxVersion) return;
-      const kept = buffered.filter(c => c.version >= chunk.version);
-      kept.push(chunk);
-      pending.set(chunk.id, kept);
+      const buffered = pending.get(chunk.id);
+      if (!buffered) {
+        pending.set(chunk.id, {
+          version: chunk.version,
+          chunks: [chunk]
+        });
+        return;
+      }
+      if (chunk.version < buffered.version) return;
+      if (chunk.version > buffered.version) {
+        buffered.version = chunk.version;
+        buffered.chunks.length = 0;
+      }
+      buffered.chunks.push(chunk);
     },
     get(id) {
       const set = frames.get(id);
@@ -208,7 +216,7 @@ class FrameImpl {
     if (options.host && options.id !== undefined) {
       options.host.register(options.id, this);
     }
-    if (options.adopt) this.#syncSlots();
+    if (options.adopt && this.#version === undefined) this.#syncSlots();
   }
   #parent() {
     return this.#element ?? this.#start.parentNode;
@@ -352,7 +360,7 @@ class FrameImpl {
         if (nodes) this.#replaceRange(occurrence, start, nodes);
         this.#slotNodes.set(occurrence, nodes);
         this.#mountedSlots.add(occurrence);
-        this.#discoverRegions(occurrence, start);
+        if (!this.#options.adopt || nodes) this.#discoverRegions(occurrence, start);
         this.#bindRegions(occurrence);
       } else if (record !== this.#slotArgs.get(occurrence)) {
         if (this.#refArgsUnchanged(occurrence, record)) {
@@ -1238,15 +1246,18 @@ function normalizeSlotContent(value) {
   if (value == null || typeof value === "boolean") return document.createTextNode("");
   return value instanceof Node ? value : document.createTextNode(String(value));
 }
+function gatherClaims(el, registry) {
+  if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
+  if (el.hasAttribute(FRAME_ID_ATTR)) return;
+  for (let c = el.firstElementChild; c; c = c.nextElementSibling) gatherClaims(c, registry);
+}
 function claimRender(prefix, existing, render) {
   const sc = sharedConfig;
   if (!sc.getNextContextId) return render();
   const registry = new Map();
   for (const n of existing) {
-    const el = n;
-    if (el.nodeType !== 1) continue;
-    if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
-    el.querySelectorAll("*[_hk]").forEach(child => registry.set(child.getAttribute("_hk"), child));
+    if (n.nodeType !== 1) continue;
+    gatherClaims(n, registry);
   }
   if (!registry.size) return render();
   const prevRegistry = sc.registry;
@@ -1310,21 +1321,57 @@ function boundaryComponent(host, id) {
 }
 const claimedBoundaries = new Set();
 let boundaryIndex = null;
+const isBoundaryId = id => !id.includes(".");
+function indexBoundaries(root) {
+  root.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
+    const key = el.getAttribute(FRAME_ID_ATTR);
+    if (key && isBoundaryId(key) && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
+  });
+}
 function findBoundaryElement(id) {
   if (!boundaryIndex) {
     boundaryIndex = new Map();
-    if (typeof document !== "undefined" && document.body) {
-      document.body.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
-        const key = el.getAttribute(FRAME_ID_ATTR);
-        if (key && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
-      });
-    }
+    if (typeof document !== "undefined" && document.body) indexBoundaries(document.body);
   }
   return boundaryIndex.get(id);
 }
+const boundaryWaiters = new Map();
+function documentStreaming() {
+  const hy = globalThis._$HY;
+  return !!hy && !hy.done;
+}
+function installRevealHook() {
+  const hy = globalThis._$HY;
+  if (!hy || hy.$sc) return;
+  hy.$sc = true;
+  const prev = hy.fe;
+  hy.fe = (fragmentId, parent) => {
+    if (prev) prev(fragmentId, parent);
+    if (!boundaryIndex) return;
+    const root = parent || (typeof document !== "undefined" ? document.body : null);
+    if (!root) return;
+    indexBoundaries(root);
+    for (const [id, notify] of boundaryWaiters) {
+      const el = boundaryIndex.get(id);
+      if (!el) continue;
+      boundaryWaiters.delete(id);
+      notify(el);
+    }
+  };
+}
 function documentBoundary(host, id, props) {
-  const el = !claimedBoundaries.has(id) ? findBoundaryElement(id) : undefined;
-  if (!el) return boundaryComponent(host, id)(props);
+  const claimed = claimedBoundaries.has(id);
+  const el = !claimed ? findBoundaryElement(id) : undefined;
+  if (el) return adoptBoundary(host, id, el, props);
+  if (!claimed && !boundaryWaiters.has(id) && documentStreaming()) {
+    const owner = getOwner();
+    const arrival = new Promise(resolve => boundaryWaiters.set(id, resolve));
+    onCleanup(() => boundaryWaiters.delete(id));
+    return createMemo(() => arrival.then(node => runWithOwner(owner, () => adoptBoundary(host, id, node, props))));
+  }
+  return boundaryComponent(host, id)(props);
+}
+function adoptBoundary(host, id, el, props) {
   claimedBoundaries.add(id);
   const hy = globalThis._$HY;
   if (hy && hy.r) {
@@ -1376,6 +1423,7 @@ function installServerComponents(host = getFrameHost()) {
     };
   }
   g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+  installRevealHook();
   configureServerFunctionsClient({
     responseHandler: createServerComponentHandler({
       host,

package/frames/dist/client.js

@@ -1,4 +1,4 @@
-import { getOwner, runWithOwner, onCleanup, createLoadingBoundary, sharedConfig, createOwner } from 'solid-js';
+import { getOwner, onCleanup, createMemo, runWithOwner, createLoadingBoundary, sharedConfig, createOwner } from 'solid-js';
 import { insert } from '@solidjs/web';
 import { configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
 import { fromCrossJSON, Feature } from 'seroval';
@@ -112,7 +112,7 @@ function createFrameHost(options = {}) {
         pending.delete(id);
         const records = {};
         let version;
-        for (const chunk of buffered) {
+        for (const chunk of buffered.chunks) {
           if (chunk.type === "data") {
             options.applyData && options.applyData(chunk);
             continue;
@@ -144,12 +144,20 @@ function createFrameHost(options = {}) {
         for (const frame of set) deliver(frame, chunk);
         return;
       }
-      const buffered = pending.get(chunk.id) ?? [];
-      const maxVersion = buffered.reduce((m, c) => Math.max(m, c.version), chunk.version);
-      if (chunk.version < maxVersion) return;
-      const kept = buffered.filter(c => c.version >= chunk.version);
-      kept.push(chunk);
-      pending.set(chunk.id, kept);
+      const buffered = pending.get(chunk.id);
+      if (!buffered) {
+        pending.set(chunk.id, {
+          version: chunk.version,
+          chunks: [chunk]
+        });
+        return;
+      }
+      if (chunk.version < buffered.version) return;
+      if (chunk.version > buffered.version) {
+        buffered.version = chunk.version;
+        buffered.chunks.length = 0;
+      }
+      buffered.chunks.push(chunk);
     },
     get(id) {
       const set = frames.get(id);
@@ -208,7 +216,7 @@ class FrameImpl {
     if (options.host && options.id !== undefined) {
       options.host.register(options.id, this);
     }
-    if (options.adopt) this.#syncSlots();
+    if (options.adopt && this.#version === undefined) this.#syncSlots();
   }
   #parent() {
     return this.#element ?? this.#start.parentNode;
@@ -352,7 +360,7 @@ class FrameImpl {
         if (nodes) this.#replaceRange(occurrence, start, nodes);
         this.#slotNodes.set(occurrence, nodes);
         this.#mountedSlots.add(occurrence);
-        this.#discoverRegions(occurrence, start);
+        if (!this.#options.adopt || nodes) this.#discoverRegions(occurrence, start);
         this.#bindRegions(occurrence);
       } else if (record !== this.#slotArgs.get(occurrence)) {
         if (this.#refArgsUnchanged(occurrence, record)) {
@@ -1224,15 +1232,18 @@ function normalizeSlotContent(value) {
   if (value == null || typeof value === "boolean") return document.createTextNode("");
   return value instanceof Node ? value : document.createTextNode(String(value));
 }
+function gatherClaims(el, registry) {
+  if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
+  if (el.hasAttribute(FRAME_ID_ATTR)) return;
+  for (let c = el.firstElementChild; c; c = c.nextElementSibling) gatherClaims(c, registry);
+}
 function claimRender(prefix, existing, render) {
   const sc = sharedConfig;
   if (!sc.getNextContextId) return render();
   const registry = new Map();
   for (const n of existing) {
-    const el = n;
-    if (el.nodeType !== 1) continue;
-    if (el.hasAttribute("_hk")) registry.set(el.getAttribute("_hk"), el);
-    el.querySelectorAll("*[_hk]").forEach(child => registry.set(child.getAttribute("_hk"), child));
+    if (n.nodeType !== 1) continue;
+    gatherClaims(n, registry);
   }
   if (!registry.size) return render();
   const prevRegistry = sc.registry;
@@ -1296,21 +1307,57 @@ function boundaryComponent(host, id) {
 }
 const claimedBoundaries = new Set();
 let boundaryIndex = null;
+const isBoundaryId = id => !id.includes(".");
+function indexBoundaries(root) {
+  root.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
+    const key = el.getAttribute(FRAME_ID_ATTR);
+    if (key && isBoundaryId(key) && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
+  });
+}
 function findBoundaryElement(id) {
   if (!boundaryIndex) {
     boundaryIndex = new Map();
-    if (typeof document !== "undefined" && document.body) {
-      document.body.querySelectorAll(`[${FRAME_ID_ATTR}]`).forEach(el => {
-        const key = el.getAttribute(FRAME_ID_ATTR);
-        if (key && !boundaryIndex.has(key)) boundaryIndex.set(key, el);
-      });
-    }
+    if (typeof document !== "undefined" && document.body) indexBoundaries(document.body);
   }
   return boundaryIndex.get(id);
 }
+const boundaryWaiters = new Map();
+function documentStreaming() {
+  const hy = globalThis._$HY;
+  return !!hy && !hy.done;
+}
+function installRevealHook() {
+  const hy = globalThis._$HY;
+  if (!hy || hy.$sc) return;
+  hy.$sc = true;
+  const prev = hy.fe;
+  hy.fe = (fragmentId, parent) => {
+    if (prev) prev(fragmentId, parent);
+    if (!boundaryIndex) return;
+    const root = parent || (typeof document !== "undefined" ? document.body : null);
+    if (!root) return;
+    indexBoundaries(root);
+    for (const [id, notify] of boundaryWaiters) {
+      const el = boundaryIndex.get(id);
+      if (!el) continue;
+      boundaryWaiters.delete(id);
+      notify(el);
+    }
+  };
+}
 function documentBoundary(host, id, props) {
-  const el = !claimedBoundaries.has(id) ? findBoundaryElement(id) : undefined;
-  if (!el) return boundaryComponent(host, id)(props);
+  const claimed = claimedBoundaries.has(id);
+  const el = !claimed ? findBoundaryElement(id) : undefined;
+  if (el) return adoptBoundary(host, id, el, props);
+  if (!claimed && !boundaryWaiters.has(id) && documentStreaming()) {
+    const owner = getOwner();
+    const arrival = new Promise(resolve => boundaryWaiters.set(id, resolve));
+    onCleanup(() => boundaryWaiters.delete(id));
+    return createMemo(() => arrival.then(node => runWithOwner(owner, () => adoptBoundary(host, id, node, props))));
+  }
+  return boundaryComponent(host, id)(props);
+}
+function adoptBoundary(host, id, el, props) {
   claimedBoundaries.add(id);
   const hy = globalThis._$HY;
   if (hy && hy.r) {
@@ -1362,6 +1409,7 @@ function installServerComponents(host = getFrameHost()) {
     };
   }
   g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+  installRevealHook();
   configureServerFunctionsClient({
     responseHandler: createServerComponentHandler({
       host,