@solidjs/web 2.0.0-beta.30 → 2.0.0-beta.31

package/frames/dist/client.dev.cjs

@@ -83,98 +83,75 @@ function chunkToRecords(chunk) {
 }
 function createFrameHost(options = {}) {
   const frames = new Map();
-  const pending = new Map();
-  const retained = new Map();
-  const deliver = (frame, chunk) => {
-    if (chunk.type === "data") {
-      options.applyData && options.applyData(chunk);
-      return;
-    }
-    frame.apply({
-      version: chunk.version,
-      r: chunkToRecords(chunk)
+  const stores = new Map();
+  const storeFor = id => {
+    let store = stores.get(id);
+    if (!store) stores.set(id, store = {
+      version: undefined,
+      records: {}
     });
+    return store;
+  };
+  const write = (store, version, records) => {
+    if (store.version !== undefined && version < store.version) return false;
+    if (store.version === undefined || version > store.version) {
+      store.version = version;
+      for (const key of Object.keys(store.records)) {
+        if (key.startsWith("seg:") || key === ":error") delete store.records[key];
+      }
+    }
+    Object.assign(store.records, records);
+    return true;
   };
   return {
     register(id, frame) {
       let set = frames.get(id);
       if (!set) frames.set(id, set = new Set());
-      const sibling = set.size ? set.values().next().value : undefined;
       set.add(frame);
-      if (sibling) {
+      const store = stores.get(id);
+      if (store && store.version !== undefined) {
         frame.apply({
-          version: sibling.version ?? 0,
-          r: sibling.store
-        });
-        if (sibling.version === undefined) frame.rebase && frame.rebase();
-        return;
-      }
-      const kept = retained.get(id);
-      if (kept) {
-        retained.delete(id);
-        frame.apply({
-          version: kept.version,
-          r: kept.records
+          version: store.version,
+          r: store.records
         });
         frame.rebase && frame.rebase();
       }
-      const buffered = pending.get(id);
-      if (buffered) {
-        pending.delete(id);
-        const records = {};
-        let version;
-        for (const chunk of buffered.chunks) {
-          if (chunk.type === "data") {
-            options.applyData && options.applyData(chunk);
-            continue;
-          }
-          version = chunk.version;
-          Object.assign(records, chunkToRecords(chunk));
-        }
-        if (version !== undefined) frame.apply({
-          version,
-          r: records
-        });
-      }
     },
     unregister(id, frame) {
       const set = frames.get(id);
       if (set && frame) set.delete(frame);
       if (!set || !frame || !set.size) {
-        if (frame) {
-          const kept = frame.snapshot && frame.snapshot();
-          if (kept) retained.set(id, kept);
-        } else {
-          retained.delete(id);
-        }
         frames.delete(id);
-        pending.delete(id);
+        if (frame && frame.contentHTML) {
+          const store = storeFor(id);
+          if (!store.records[""]) {
+            const html = frame.contentHTML();
+            if (html != null) {
+              store.records[""] = {
+                kind: "html",
+                value: html
+              };
+              if (store.version === undefined) store.version = 0;
+            }
+          }
+        }
       }
+      if (!frame) stores.delete(id);
     },
     apply(chunk) {
       if (chunk.type === "data") {
         options.applyData && options.applyData(chunk);
         return;
       }
+      const records = chunkToRecords(chunk);
+      if (!write(storeFor(chunk.id), chunk.version, records)) return;
       const set = frames.get(chunk.id);
-      if (set && set.size) {
-        for (const frame of set) deliver(frame, chunk);
-        return;
-      }
-      const buffered = pending.get(chunk.id);
-      if (!buffered) {
-        pending.set(chunk.id, {
+      if (set) {
+        for (const frame of set) frame.apply({
           version: chunk.version,
-          chunks: [chunk]
+          r: records
         });
-        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,6 +187,7 @@ class FrameImpl {
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
   #processedAssets = new Set();
+  #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
     if (!this.#disposed) this.#flush();
@@ -355,7 +333,9 @@ class FrameImpl {
   }
   #removeSlotRecord(occurrence) {
     const key = `slot:${occurrence}`;
-    if (key in this.#store) delete this.#store[key];else this.#options.removeSlotRecord?.(occurrence);
+    if (key in this.#store) {
+      if (!this.#mountedSlots.has(occurrence)) delete this.#store[key];
+    } else this.#options.removeSlotRecord?.(occurrence);
   }
   #syncSlots(root) {
     if (!this.#slots && !this.#options.resolveSlot) return;
@@ -373,6 +353,15 @@ class FrameImpl {
         this.#runSlotCleanups(occurrence);
       }
       if (!this.#mountedSlots.has(occurrence)) {
+        if (record === undefined && !root && this.#options.adopt && this.#options.recordsPending?.()) {
+          this.#recordRefresh ??= setTimeout(() => {
+            this.#recordRefresh = null;
+            if (this.#disposed) return;
+            this.#options.drainRecords?.();
+            this.#syncSlots();
+          });
+          continue;
+        }
         if (this.#options.adopt) this.#discoverRegions(occurrence, start);
         const nodes = this.#invokeSlot(occurrence, callback, record, start, this.#options.adopt);
         if (nodes) this.#replaceRange(occurrence, start, nodes);
@@ -389,12 +378,6 @@ class FrameImpl {
         const update = this.#slotUpdaters.get(occurrence);
         if (update) {
           const props = this.#resolveArgs(occurrence, record.args);
-          const regions = this.#slotRegions.get(occurrence);
-          if (regions) {
-            for (const [argKey, entry] of regions) {
-              if (!(argKey in props)) props[argKey] = entry.element;
-            }
-          }
           this.#slotArgs.set(occurrence, record);
           update(props);
           this.#bindRegions(occurrence);
@@ -440,12 +423,6 @@ class FrameImpl {
       } : undefined
     };
     const props = record && record.kind === "slot" ? this.#resolveArgs(occurrence, record.args) : {};
-    const regions = this.#slotRegions.get(occurrence);
-    if (regions) {
-      for (const [argKey, entry] of regions) {
-        if (!(argKey in props)) props[argKey] = entry.element;
-      }
-    }
     const scope = this.#options.ownerScope;
     const content = scope ? scope(() => callback(props, ctx)) : callback(props, ctx);
     this.#slotArgs.set(occurrence, record);
@@ -530,10 +507,9 @@ class FrameImpl {
       this.#slotRegions.set(slotKey, regions);
     }
     const endData = slotEnd(slotKey);
-    const prefix = `${this.#options.id}.`;
     let n = start.nextSibling;
     while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-      collectRegionElements(n, regions, prefix);
+      collectRegionElements(n, regions);
       n = n.nextSibling;
     }
   }
@@ -545,16 +521,7 @@ class FrameImpl {
     const b = record.args || {};
     const ka = Object.keys(a);
     const kb = Object.keys(b);
-    if (kb.length < ka.length) return false;
-    if (kb.length !== ka.length) {
-      const regions = this.#slotRegions.get(occurrence);
-      for (const key of kb) {
-        if (key in a) continue;
-        const vb = b[key];
-        if (!vb || typeof vb !== "object" || typeof vb.$frame !== "string") return false;
-        if (!regions || !regions.has(key)) return false;
-      }
-    }
+    if (kb.length !== ka.length) return false;
     const cache = this.#slotResolvedRefs.get(occurrence);
     for (const key of ka) {
       const va = a[key];
@@ -611,22 +578,9 @@ class FrameImpl {
   #findPlaceholder(name) {
     return findPlaceholder(this.#firstContent(), this.#end, placeholderId(name));
   }
-  snapshot() {
-    if (this.#disposed) return null;
-    const records = {
-      ...this.#store
-    };
-    if (!records[""] && this.#element && this.#hasContent) {
-      records[""] = {
-        kind: "html",
-        value: this.#element.innerHTML
-      };
-    }
-    if (!records[""] && this.#version === undefined) return null;
-    return {
-      version: this.#version ?? 0,
-      records
-    };
+  contentHTML() {
+    if (this.#disposed || !this.#element || !this.#hasContent) return null;
+    return this.#element.innerHTML;
   }
   rebind(id) {
     if (this.#disposed || id === this.#options.id) return;
@@ -661,6 +615,10 @@ class FrameImpl {
     } = this.#options;
     if (host && id !== undefined) host.unregister(id, this);
     this.#disposed = true;
+    if (this.#recordRefresh) {
+      clearTimeout(this.#recordRefresh);
+      this.#recordRefresh = null;
+    }
     for (const key of [...this.#slotCleanups.keys()]) this.#runSlotCleanups(key);
     for (const key of this.#mountedSlots) this.#removeSlotRecord(key);
     for (const regions of this.#slotRegions.values()) {
@@ -683,8 +641,9 @@ class FrameImpl {
       const claim = claimHandlers() ? this.#claimTree : null;
       const ranges = new Map();
       this.#collectSlots(ranges);
-      reconcileChildren(parent, fragment, this.#start, this.#end, claim, ranges);
-      if (ranges.size) restoreDisplacedRanges(this.#firstContent(), this.#end, ranges);
+      const grafts = [];
+      reconcileChildren(parent, fragment, this.#start, this.#end, claim, ranges, grafts);
+      if (ranges.size) for (const root of grafts) flushGrafts(root, ranges);
     }
   }
   #clearContent() {
@@ -907,11 +866,11 @@ function collectSlots(n, end, out) {
     n = n.nextSibling;
   }
 }
-function collectRegionElements(node, regions, prefix) {
+function collectRegionElements(node, regions) {
   if (node.nodeType !== ELEMENT_NODE) return;
   if (isFrameElement(node)) {
     const childId = node.getAttribute(FRAME_ID_ATTR);
-    if (childId && childId.startsWith(prefix)) {
+    if (childId && childId.includes(".")) {
       const argKey = childId.slice(childId.lastIndexOf(".") + 1);
       if (!regions.has(argKey)) {
         regions.set(argKey, {
@@ -924,7 +883,7 @@ function collectRegionElements(node, regions, prefix) {
     }
     return;
   }
-  for (let c = node.firstChild; c; c = c.nextSibling) collectRegionElements(c, regions, prefix);
+  for (let c = node.firstChild; c; c = c.nextSibling) collectRegionElements(c, regions);
 }
 function renameRegion(entry, childId) {
   entry.childId = childId;
@@ -992,11 +951,11 @@ function morphAttributes(oldEl, newEl, claim) {
   }
   if (claim && (reclaim || changed && oldEl.matches(CLAIMED_ELEMENTS))) claim(oldEl, true);
 }
-function morphNode(oldNode, newNode, claim, ranges) {
+function morphNode(oldNode, newNode, claim, ranges, grafts) {
   if (oldNode.nodeType === ELEMENT_NODE) {
     if (oldNode.hasAttribute("data-preserve")) return;
     morphAttributes(oldNode, newNode, claim);
-    reconcileChildren(oldNode, newNode, null, null, claim, ranges);
+    reconcileChildren(oldNode, newNode, null, null, claim, ranges, grafts);
   } else if (oldNode.data !== newNode.data) {
     oldNode.data = newNode.data;
   }
@@ -1039,6 +998,13 @@ function moveRangeBefore(parent, start, id, ref) {
     n = next;
   }
 }
+function placeRange(parent, range, id, ref) {
+  if (range.nodeType === 11 ) {
+    parent.insertBefore(range, ref);
+  } else {
+    moveRangeBefore(parent, range, id, ref);
+  }
+}
 function adoptRange(parent, start, id, ref, claim) {
   const end = slotEnd(id);
   let n = start;
@@ -1056,7 +1022,7 @@ function adoptRange(parent, start, id, ref, claim) {
   }
   return after;
 }
-function reconcileChildren(parent, source, boundStart = null, boundEnd = null, claim = null, ranges = null) {
+function reconcileChildren(parent, source, boundStart = null, boundEnd = null, claim = null, ranges = null, grafts = null) {
   let oldChild = boundStart ? boundStart.nextSibling : parent.firstChild;
   let newChild = source.firstChild;
   while (newChild) {
@@ -1072,11 +1038,7 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
         const existing = displaced || findRangeStart(old, pid, boundEnd);
         if (existing) {
           if (ranges) ranges.delete(pid);
-          if (existing.nodeType === 11 ) {
-            parent.insertBefore(existing, old ?? boundEnd);
-          } else {
-            moveRangeBefore(parent, existing, pid, old ?? boundEnd);
-          }
+          placeRange(parent, existing, pid, old ?? boundEnd);
           newChild = afterRange(newChild, pid);
         } else {
           newChild = adoptRange(parent, newChild, pid, old ?? boundEnd, claim);
@@ -1087,17 +1049,19 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
     if (!old) {
       parent.insertBefore(newChild, boundEnd);
       if (claim) claim(newChild);
+      if (grafts) grafts.push(newChild);
       newChild = nextNew;
       continue;
     }
     if (isSlotMarker(old)) {
       parent.insertBefore(newChild, old);
       if (claim) claim(newChild);
+      if (grafts) grafts.push(newChild);
       newChild = nextNew;
       continue;
     }
     if (compatible(old, newChild)) {
-      morphNode(old, newChild, claim, ranges);
+      morphNode(old, newChild, claim, ranges, grafts);
       oldChild = old.nextSibling;
       newChild = nextNew;
       continue;
@@ -1110,13 +1074,14 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
       }
       if (ahead && ahead !== boundEnd) {
         parent.insertBefore(ahead, old);
-        morphNode(ahead, newChild, claim, ranges);
+        morphNode(ahead, newChild, claim, ranges, grafts);
         newChild = nextNew;
         continue;
       }
     }
     parent.insertBefore(newChild, old);
     if (claim) claim(newChild);
+    if (grafts) grafts.push(newChild);
     newChild = nextNew;
   }
   while (oldChild && oldChild !== boundEnd) {
@@ -1133,20 +1098,24 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
     oldChild = next;
   }
 }
-function restoreDisplacedRanges(first, end, ranges) {
-  const found = new Map();
-  collectSlots(first, end, found);
-  for (const [id, start] of found) {
-    const displaced = ranges.get(id);
-    if (!displaced || displaced === start) continue;
-    ranges.delete(id);
-    const parent = start.parentNode;
-    if (displaced.nodeType === 11 ) {
-      parent.insertBefore(displaced, start);
-    } else {
-      moveRangeBefore(parent, displaced, id, start);
+function flushGrafts(node, ranges) {
+  if (node.nodeType !== ELEMENT_NODE || isFrameElement(node)) return;
+  let n = node.firstChild;
+  while (n) {
+    const id = slotStartId(n);
+    if (id !== null) {
+      const next = afterRange(n, id);
+      const displaced = ranges.get(id);
+      if (displaced) {
+        ranges.delete(id);
+        placeRange(node, displaced, id, n);
+        stashRange(document.createDocumentFragment(), n, id);
+      }
+      n = next;
+      continue;
     }
-    stashRange(document.createDocumentFragment(), start, id);
+    flushGrafts(n, ranges);
+    n = n.nextSibling;
   }
 }
 function stashRange(frag, start, id) {
@@ -1178,7 +1147,7 @@ async function applyFrameResponse(response, host, options = {}) {
     if (chunk.type === "outcome") {
       if (options.onOutcome) options.onOutcome(chunk.payload);
     } else {
-      if (as !== undefined && chunk.id === rootId) chunk.id = as;else if (options.route) chunk.id = options.route(chunk.id);
+      if (as !== undefined && chunk.id === rootId) chunk.id = as;
       if (perFrame) {
         let v = perFrame.get(chunk.id);
         if (v === undefined) perFrame.set(chunk.id, v = version(chunk.id));
@@ -1192,7 +1161,7 @@ async function applyFrameResponse(response, host, options = {}) {
 }
 const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
 const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("dom-expressions.server-component-address");
-const COMPONENT_HANDOFF = /*#__PURE__*/Symbol.for("dom-expressions.component-handoff");
+const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("dom-expressions.component-binding");
 let resolveServerComponent;
 function parseServerComponent(value, ctx) {
   return {
@@ -1216,7 +1185,8 @@ const ServerComponentPlugin = /*#__PURE__*/seroval.createPlugin({
     stream: parseServerComponent
   },
   serialize(node, ctx) {
-    return "self._$SC.r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
+    const registry = "self._$SC";
+    return registry + ".r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
   },
   deserialize(node, ctx) {
     const id = ctx.deserialize(node.id);
@@ -1241,120 +1211,79 @@ function createServerComponentHandler({
   host,
   component,
   onStream,
-  documentComponent,
   intercept,
   consumer = client.getFlightDataConsumer,
   codec = client.getServerFunctionsCodec
 }) {
-  const byAddress = new Map();
-  const forwards = new Map();
-  const brand = (comp, fnId, frameId) => {
-    const brandable = typeof comp === "function" || typeof comp === "object" && comp !== null;
-    if (brandable && !comp[COMPONENT_HANDOFF]) {
-      comp[COMPONENT_HANDOFF] = {
-        fnId,
-        frameId,
-        take(prev) {
-          const meta = prev !== null && (typeof prev === "function" || typeof prev === "object") && prev[COMPONENT_HANDOFF];
-          if (!meta || meta.fnId !== fnId) return false;
-          const root = meta.frameId;
-          let cur = forwards.get(root) ?? root;
-          if (cur !== root && !host.get(cur)) {
-            forwards.delete(root);
-            cur = root;
-          }
-          if (cur === frameId) return true;
-          let frame = host.get(cur);
-          if (!frame) return false;
-          while (frame) {
-            frame.rebind(frameId);
-            frame = host.get(cur);
-          }
-          if (frameId === root) forwards.delete(root);else forwards.set(root, frameId);
-          return true;
-        }
-      };
-    }
+  const byFn = new Map();
+  const componentFor = fnId => {
+    let comp = byFn.get(fnId);
+    if (comp === undefined) byFn.set(fnId, comp = component(fnId));
     return comp;
   };
-  const boundaryFor = (address, fnId) => {
-    let entry = byAddress.get(address);
-    if (!entry) {
-      entry = {
-        frameId: address,
-        component: brand(component(address), fnId, address)
+  const byAddress = new Map();
+  const bindingFor = (address, fnId) => {
+    let binding = byAddress.get(address);
+    if (!binding) {
+      const comp = componentFor(fnId);
+      binding = props => comp(props, () => address);
+      binding[COMPONENT_BINDING] = {
+        component: comp,
+        address
       };
-      byAddress.set(address, entry);
+      byAddress.set(address, binding);
     }
-    return entry;
+    return binding;
   };
-  const resolveAddress = (id, address) => boundaryFor(address, id).component;
-  resolveServerComponent = resolveAddress;
+  resolveServerComponent = (id, address) => bindingFor(address, id);
   const versions = new Map();
-  const bump = frameId => {
-    const version = (versions.get(frameId) || 0) + 1;
-    versions.set(frameId, version);
+  const bump = address => {
+    const version = (versions.get(address) || 0) + 1;
+    versions.set(address, version);
     return version;
   };
   return {
     intercept: intercept && (info => {
       const hit = intercept(info);
-      if (hit !== undefined) {
-        const address = client.frameAddress(info.id, info.args);
-        byAddress.set(address, {
-          frameId: info.id,
-          component: brand(hit, info.id, info.id)
-        });
-      }
-      return hit;
+      if (hit === undefined) return undefined;
+      return bindingFor(client.frameAddress(info.id, info.args), info.id);
     }),
     handle(response, ctx) {
       if (!isFrameStreamResponse(response)) return undefined;
       const address = client.frameAddress(ctx.id, ctx.args);
-      let entry = byAddress.get(address);
-      if (!entry) {
-        const adopted = documentComponent && documentComponent(ctx.id);
-        if (adopted) {
-          entry = {
-            frameId: ctx.id,
-            component: brand(adopted, ctx.id, ctx.id)
-          };
-          byAddress.set(address, entry);
-        } else {
-          entry = boundaryFor(address, ctx.id);
-        }
-      }
+      const binding = bindingFor(address, ctx.id);
       if (response.headers.has(client.SINGLE_FLIGHT_HEADER)) {
-        return applyFlightResponse(response, entry);
+        return applyFlightResponse(response, address, binding);
       }
-      const version = bump(entry.frameId);
-      if (onStream) onStream(entry.frameId, version, response);
+      const version = bump(address);
+      if (onStream) onStream(address, version, response);
       applyFrameResponse(response, host, {
-        as: entry.frameId,
+        as: address,
         version
       }).catch(err => host.apply({
         type: "error",
-        id: entry.frameId,
+        id: address,
         version,
         error: {
           message: String(err && err.message)
         }
       }));
-      return entry.component;
+      return binding;
     },
-    showing(address, functionId, component) {
-      if (!byAddress.has(address)) {
-        byAddress.set(address, {
-          frameId: functionId,
-          component: brand(component, functionId, functionId),
+    showing(address, functionId) {
+      bindingFor(address, functionId);
+      const comp = componentFor(functionId);
+      if ((typeof comp === "function" || typeof comp === "object" && comp !== null) && !comp[COMPONENT_BINDING]) {
+        comp[COMPONENT_BINDING] = {
+          component: comp,
           address
-        });
+        };
       }
     }
   };
-  async function applyFlightResponse(response, entry) {
+  async function applyFlightResponse(response, address, binding) {
     const rootId = response.headers.get(FRAME_STREAM_HEADER) ?? "";
-    const as = rootId ? entry.frameId : undefined;
+    const as = rootId ? address : undefined;
     let feed;
     const source = new ReadableStream({
       start(controller) {
@@ -1365,10 +1294,6 @@ function createServerComponentHandler({
     let carried = false;
     await applyFrameResponse(response, host, {
       as,
-      route: id => {
-        const local = byAddress.get(id);
-        return local ? local.frameId : id;
-      },
       version: frameId => {
         const version = bump(frameId);
         if (onStream) onStream(frameId, version, response);
@@ -1389,7 +1314,7 @@ function createServerComponentHandler({
     if (response.headers.has(client.ERROR_HEADER) && !response.headers.has("Location") && !response.headers.has(client.REVALIDATE_HEADER)) {
       throw envelope.value;
     }
-    return rootId ? entry.component : envelope.value;
+    return rootId ? binding : envelope.value;
   }
 }
 
@@ -1568,15 +1493,7 @@ function slotsFor(props) {
           return settle(normalizeSlotContent(value));
         }
         if (ctx && ctx.range) {
-          let claim = adopted;
           const source = value;
-          const accessor = () => {
-            if (claim) {
-              claim = false;
-              return claimRender(prefix, ctx.existing, () => typeof source === "function" ? source() : source);
-            }
-            return typeof source === "function" ? source() : source;
-          };
           const owner = solidJs.createOwner();
           bindings.set(key, owner);
           ctx.onCleanup(() => {
@@ -1584,7 +1501,8 @@ function slotsFor(props) {
             owner.dispose();
           });
           const end = ctx.range.end;
-          solidJs.runWithOwner(owner, () => web$1.insert(end.parentNode, accessor, end, [...ctx.existing]));
+          const bind = () => web$1.insert(end.parentNode, () => typeof source === "function" ? source() : source, end, [...ctx.existing]);
+          solidJs.runWithOwner(owner, () => adopted ? claimRender(prefix, ctx.existing, bind) : bind());
           return undefined;
         }
         return settle(normalizeSlotContent(value));
@@ -1598,19 +1516,24 @@ function revealSeam(owner) {
 function boundaryScope(owner) {
   return fn => solidJs.getOwner() ? fn() : solidJs.runWithOwner(owner, fn);
 }
-function boundaryComponent(host, id) {
-  return props => {
+function followBinding(frame, binding) {
+  solidJs.createRenderEffect(binding, address => frame.rebind(address));
+}
+function boundaryComponent(host, fnId) {
+  return (props, binding) => {
     const owner = solidJs.getOwner();
     const {
       element,
+      frame,
       dispose
     } = createFrameElement({
       host,
-      id,
+      id: binding ? binding() : fnId,
       slots: slotsFor(props),
       ownerScope: boundaryScope(owner),
       reveal: revealSeam(owner)
     });
+    if (binding) followBinding(frame, binding);
     solidJs.onCleanup(dispose);
     return element;
   };
@@ -1632,51 +1555,65 @@ function findBoundaryElement(id) {
   return boundaryIndex.get(id);
 }
 const boundaryWaiters = new Map();
-function documentStreaming() {
+function boundaryMayArrive() {
   const hy = globalThis._$HY;
-  return !!hy && !hy.done;
+  if (!hy) return false;
+  return !hy.done || !!(hy.fr && hy.fr.pending());
 }
 function installRevealHook() {
   const hy = globalThis._$HY;
-  if (!hy || hy.$sc) return;
+  if (!hy || hy.$sc || !hy.fr) return;
   hy.$sc = true;
-  const prev = hy.fe;
-  hy.fe = (fragmentId, parent) => {
-    if (prev) prev(fragmentId, parent);
+  hy.fr.subscribe((_id, parent) => {
     if (!boundaryIndex) return;
     const root = parent || (typeof document !== "undefined" ? document.body : null);
-    if (!root) return;
-    indexBoundaries(root);
+    if (root) indexBoundaries(root);
+    if (!boundaryWaiters.size) return;
+    const exhausted = hy.done && !hy.fr.pending();
     for (const [id, notify] of boundaryWaiters) {
-      const el = boundaryIndex.get(id);
-      if (!el) continue;
+      const el = boundaryIndex && boundaryIndex.get(id);
+      if (!el && !exhausted) continue;
       boundaryWaiters.delete(id);
       notify(el);
     }
-  };
+  });
 }
-function documentBoundary(host, id, props) {
+function documentBoundary(host, id, props, binding) {
+  installRevealHook();
   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()) {
+  if (el) return adoptBoundary(host, id, el, props, binding);
+  if (!claimed && !boundaryWaiters.has(id) && boundaryMayArrive()) {
     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 solidJs.createMemo(() => arrival.then(node => solidJs.runWithOwner(owner, () =>
+    node ? adoptBoundary(host, id, node, props, binding) : boundaryComponent(host, id)(props, binding))));
+  }
+  return boundaryComponent(host, id)(props, binding);
+}
+function documentAddress(id) {
+  const records = globalThis._$SC?.a;
+  if (records) {
+    for (const address in records) if (records[address] === id) return address;
   }
-  return boundaryComponent(host, id)(props);
+  return id;
 }
-function adoptBoundary(host, id, el, props) {
+function adoptBoundary(host, id, el, props, binding) {
   claimedBoundaries.add(id);
-  const hy = globalThis._$HY;
-  if (hy && hy.r) {
+  const address = binding ? binding() : documentAddress(id);
+  const appliedRecords = new Set();
+  const drainRecords = () => {
+    const hy = globalThis._$HY;
+    if (!hy || !hy.r) return;
     const slotPrefix = `sc:slot:${id}:`;
     for (const key of Object.keys(hy.r)) {
+      if (appliedRecords.has(key)) continue;
       if (key.startsWith(slotPrefix)) {
+        appliedRecords.add(key);
         host.apply({
           type: "slot",
-          id,
+          id: address,
           version: 0,
           key: key.slice(slotPrefix.length),
           args: hy.r[key]
@@ -1684,6 +1621,7 @@ function adoptBoundary(host, id, el, props) {
       } else if (key.startsWith("sc:region:")) {
         const childId = key.slice("sc:region:".length);
         if (childId.startsWith(id + ".")) {
+          appliedRecords.add(key);
           const val = hy.r[key];
           const apply = html => host.apply({
             type: "html",
@@ -1695,16 +1633,27 @@ function adoptBoundary(host, id, el, props) {
         }
       }
     }
-  }
+  };
+  drainRecords();
   const owner = solidJs.getOwner();
   const frame = createFrame(el, {
     adopt: true,
     host,
-    id,
+    id: address,
     slots: slotsFor(props),
     ownerScope: boundaryScope(owner),
-    reveal: revealSeam(owner)
+    reveal: revealSeam(owner),
+    ...{
+      recordsPending: () => {
+        if (document.readyState === "loading") return true;
+        const hy = globalThis._$HY;
+        return !!(hy && hy.fr && hy.fr.pending());
+      },
+      drainRecords,
+      claimScope: id
+    }
   });
+  if (binding) followBinding(frame, binding);
   solidJs.onCleanup(() => frame.dispose());
   return el;
 }
@@ -1719,17 +1668,16 @@ function installServerComponents(host = getFrameHost()) {
           g._$SC.a[a] = i;
           g._$SC.reg && g._$SC.reg(a, i);
         }
-        return g._$SC.c[i] || (g._$SC.c[i] = p => g._$SC.impl(i, p));
+        return g._$SC.c[i] || (g._$SC.c[i] = (p, b) => g._$SC.impl(i, p, b));
       }
     };
   }
-  g._$SC.impl = (id, props) => documentBoundary(host, id, props);
+  g._$SC.impl = (id, props, binding) => documentBoundary(host, id, props, binding);
   installRevealHook();
   const handler = createServerComponentHandler({
     host,
-    component: frameId => boundaryComponent(host, frameId),
-    onStream: frameId => beginStream(frameId),
-    documentComponent: functionId => claimedBoundaries.has(functionId) ? undefined : g._$SC.c[functionId],
+    component: fnId => g._$SC.r(fnId),
+    onStream: address => beginStream(address),
     intercept: ({
       id
     }) => {
@@ -1737,7 +1685,7 @@ function installServerComponents(host = getFrameHost()) {
       return g._$SC.r(id);
     }
   });
-  const showing = (address, id) => handler.showing(address, id, g._$SC.r(id));
+  const showing = (address, id) => handler.showing(address, id);
   const records = g._$SC.a || (g._$SC.a = {});
   for (const address in records) showing(address, records[address]);
   g._$SC.reg = showing;