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

package/frames/dist/client.js

@@ -1,4 +1,4 @@
-import { getOwner, onCleanup, createMemo, runWithOwner, createLoadingBoundary, createOwner, sharedConfig, createSignal } from 'solid-js';
+import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig } from 'solid-js';
 import { insert } from '@solidjs/web';
 import { createPlugin, fromCrossJSON, Feature } from 'seroval';
 import { ChunkReader, frameAddress, SINGLE_FLIGHT_HEADER, deserializeStream, getServerFunctionsCodec, createChunk, getFlightDataConsumer, ERROR_HEADER, REVALIDATE_HEADER, configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
@@ -81,98 +81,73 @@ 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;
+      clearStreamRecords(store.records);
+    }
+    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);
@@ -197,6 +172,7 @@ class FrameImpl {
   #store = Object.create(null);
   #appliedRootValue;
   #hasContent = false;
+  #errorNotified = false;
   #revealed = new Set();
   #fallbackShown = new Set();
   #slots;
@@ -208,6 +184,7 @@ class FrameImpl {
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
   #processedAssets = new Set();
+  #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
     if (!this.#disposed) this.#flush();
@@ -215,10 +192,12 @@ class FrameImpl {
   #claimTree = (node, direct) => {
     const handlers = claimHandlers();
     if (!handlers) return;
-    const run = () => direct ? claimNode(handlers, node) : claimTree(handlers, node);
-    const scope = this.#options.ownerScope;
-    scope ? scope(run) : run();
+    this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
   };
+  #scoped(fn) {
+    const scope = this.#options.ownerScope;
+    return scope ? scope(fn) : fn();
+  }
   constructor(element, start, end, options = {}) {
     this.#element = element;
     this.#start = start;
@@ -279,15 +258,9 @@ class FrameImpl {
       return;
     } else if (v > this.#version) {
       this.#version = v;
-      this.#revealed.clear();
-      this.#fallbackShown.clear();
-      for (const key of Object.keys(this.#store)) {
-        if (key.startsWith("seg:") || key === ":error") {
-          delete this.#store[key];
-        }
-      }
+      this.#resetStreamState();
     }
-    for (const key of Object.keys(write.r)) {
+    for (const key in write.r) {
       const incoming = write.r[key];
       if (incoming && incoming.kind === "slot" && key.charCodeAt(0) === 115  && key.startsWith("slot:")) {
         const existing = this.#store[key];
@@ -299,6 +272,12 @@ class FrameImpl {
     }
     this.#flush();
   }
+  #resetStreamState(root) {
+    this.#revealed.clear();
+    this.#fallbackShown.clear();
+    this.#errorNotified = false;
+    clearStreamRecords(this.#store, root);
+  }
   #flush() {
     if (this.#disposed) return;
     const version = this.#version;
@@ -309,10 +288,14 @@ class FrameImpl {
       this.#appliedRootValue = root.value;
       this.#applied(version, reason);
     }
+    if (this.#store[":error"] && !this.#errorNotified) {
+      this.#errorNotified = true;
+      this.#applied(version, "error");
+    }
     let progressed = true;
     while (progressed) {
       progressed = false;
-      for (const key of Object.keys(this.#store)) {
+      for (const key in this.#store) {
         const name = segmentName(key);
         if (name === null || this.#revealed.has(name)) continue;
         if (this.#segmentReady(name)) {
@@ -321,7 +304,7 @@ class FrameImpl {
           progressed = true;
         }
       }
-      for (const key of Object.keys(this.#store)) {
+      for (const key in this.#store) {
         const m = /^seg:([^:]+):fallback$/.exec(key);
         if (!m) continue;
         const name = m[1];
@@ -333,7 +316,7 @@ class FrameImpl {
         }
       }
     }
-    for (const key of Object.keys(this.#store)) {
+    for (const key in this.#store) {
       if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
       this.#processedAssets.add(key);
       const record = this.#store[key];
@@ -353,7 +336,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;
@@ -363,6 +348,7 @@ class FrameImpl {
       const callback = this.#resolveSlot(propOf(occurrence));
       if (!callback) continue;
       const record = this.#resolveSlotRecord(occurrence);
+      if (record && record.kind === "slot" && this.#refsUnresolved(record.args)) continue;
       const prev = this.#slotNodes.get(occurrence);
       const prevFirst = Array.isArray(prev) ? prev[0] : prev;
       const zombie = this.#mountedSlots.has(occurrence) && prevFirst && !prevFirst.parentNode;
@@ -371,6 +357,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);
@@ -387,12 +382,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);
@@ -415,15 +404,7 @@ class FrameImpl {
     const cleanups = this.#slotCleanups.get(occurrence) ?? [];
     let existing = [];
     let end = null;
-    if (start) {
-      const endData = slotEnd(occurrence);
-      let n = start.nextSibling;
-      while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-        existing.push(n);
-        n = n.nextSibling;
-      }
-      end = n;
-    }
+    if (start) end = eachInRange(start, occurrence, n => existing.push(n));
     const ctx = {
       frame: this.#options.claimScope ?? this.#options.id,
       key: occurrence,
@@ -438,29 +419,16 @@ 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);
+    const content = this.#scoped(() => callback(props, ctx));
     this.#slotArgs.set(occurrence, record);
     if (cleanups.length) this.#slotCleanups.set(occurrence, cleanups);
     if (content == null) return null;
     return Array.isArray(content) ? content : [content];
   }
   #replaceRange(key, start, nodes) {
-    const end = slotEnd(key);
     const parent = start.parentNode;
-    let n = start.nextSibling;
-    while (n && !(n.nodeType === COMMENT_NODE && n.data === end)) {
-      const next = n.nextSibling;
-      parent.removeChild(n);
-      n = next;
-    }
-    for (const node of nodes) parent.insertBefore(node, n);
+    const end = eachInRange(start, key, n => parent.removeChild(n));
+    for (const node of nodes) parent.insertBefore(node, end);
   }
   #unmountSlot(key) {
     this.#mountedSlots.delete(key);
@@ -472,9 +440,7 @@ class FrameImpl {
     this.#runSlotCleanups(key);
     const regions = this.#slotRegions.get(key);
     if (regions) {
-      for (const {
-        frame
-      } of regions.values()) frame?.dispose();
+      disposeRegions(regions);
       this.#slotRegions.delete(key);
     }
   }
@@ -484,15 +450,26 @@ class FrameImpl {
     this.#slotCleanups.delete(key);
     for (const fn of cleanups) fn();
   }
+  #refsUnresolved(args) {
+    const {
+      host,
+      id
+    } = this.#options;
+    if (host) for (const key in args) {
+      if (isDataRef(args[key]) && host.resolve(args[key], id) === undefined) return true;
+    }
+    return false;
+  }
+  #regionsFor(slotKey) {
+    let regions = this.#slotRegions.get(slotKey);
+    if (!regions) this.#slotRegions.set(slotKey, regions = new Map());
+    return regions;
+  }
   #resolveArgs(slotKey, args) {
     const host = this.#options.host;
-    let regions = this.#slotRegions.get(slotKey);
-    if (!regions) {
-      regions = new Map();
-      this.#slotRegions.set(slotKey, regions);
-    }
+    const regions = this.#regionsFor(slotKey);
     const props = {};
-    for (const key of Object.keys(args)) {
+    for (const key in args) {
       const value = args[key];
       if (isDataRef(value)) {
         const resolved = host ? host.resolve(value, this.#options.id) : undefined;
@@ -522,18 +499,8 @@ class FrameImpl {
   }
   #discoverRegions(slotKey, start) {
     if (!start) return;
-    let regions = this.#slotRegions.get(slotKey);
-    if (!regions) {
-      regions = new Map();
-      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);
-      n = n.nextSibling;
-    }
+    const regions = this.#regionsFor(slotKey);
+    eachInRange(start, slotKey, n => collectRegionElements(n, regions));
   }
   #refArgsUnchanged(occurrence, record) {
     const old = this.#slotArgs.get(occurrence);
@@ -543,26 +510,17 @@ 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];
       const vb = b[key];
       if (va === vb) continue;
-      if (!va || !vb || typeof va !== "object" || typeof vb !== "object") return false;
-      if (typeof va.$frame === "string" && typeof vb.$frame === "string") continue;
-      if (typeof va.$ref === "string" && typeof vb.$ref === "string" && cache && key in cache) {
+      if (isFrameRef(va) && isFrameRef(vb)) continue;
+      if (isDataRef(va) && isDataRef(vb) && cache && key in cache) {
         const host = this.#options.host;
         const next = host ? host.resolve(vb, this.#options.id) : undefined;
+        if (isAsyncLike(next) || isAsyncLike(cache[key])) return false;
         try {
           if (JSON.stringify(next) === JSON.stringify(cache[key])) continue;
         } catch (e) {
@@ -578,7 +536,7 @@ class FrameImpl {
     if (!args) return;
     const regions = this.#slotRegions.get(occurrence);
     if (!regions) return;
-    for (const key of Object.keys(args)) {
+    for (const key in args) {
       const value = args[key];
       if (!isFrameRef(value)) continue;
       const entry = regions.get(key);
@@ -609,22 +567,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;
@@ -641,11 +586,8 @@ class FrameImpl {
       this.#element.setAttribute(FRAME_ID_ATTR, id);
     }
     this.#version = undefined;
-    this.#revealed.clear();
-    this.#fallbackShown.clear();
-    for (const key of Object.keys(this.#store)) {
-      if (key.startsWith("seg:") || key === ":error") delete this.#store[key];
-    }
+    this.#appliedRootValue = undefined;
+    this.#resetStreamState(true);
     if (host) host.register(id, this);
   }
   rebase() {
@@ -659,13 +601,13 @@ 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()) {
-      for (const {
-        frame
-      } of regions.values()) frame?.dispose();
-    }
+    for (const regions of this.#slotRegions.values()) disposeRegions(regions);
     this.#slotRegions.clear();
     this.#mountedSlots.clear();
   }
@@ -681,18 +623,13 @@ 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() {
-    const parent = this.#parent();
-    let n = this.#firstContent();
-    while (n && n !== this.#end) {
-      const next = n.nextSibling;
-      parent.removeChild(n);
-      n = next;
-    }
+    removeUntil(this.#parent(), this.#firstContent(), this.#end);
   }
   #claimContent() {
     if (!claimHandlers()) return;
@@ -709,9 +646,7 @@ class FrameImpl {
     const assets = this.#store[`seg:${name}:assets`];
     if (assets && assets.styles) {
       let ready = true;
-      for (const entry of assets.styles) {
-        if (!ensureStylesheet(entry, this.#styleFlush)) ready = false;
-      }
+      for (const entry of assets.styles) ready = ensureStylesheet(entry, this.#styleFlush) && ready;
       if (!ready) return false;
     }
     if (!this.#findPlaceholder(name)) return false;
@@ -725,12 +660,7 @@ class FrameImpl {
     const content = this.#store[`seg:${name}`];
     const closing = rangeClose(tpl, placeholderId(name));
     const parent = tpl.parentNode;
-    let n = tpl.nextSibling;
-    while (n && n !== closing) {
-      const next = n.nextSibling;
-      parent.removeChild(n);
-      n = next;
-    }
+    removeUntil(parent, tpl.nextSibling, closing);
     if (this.#options.reveal) {
       const fallbackFrag = tpl.content.cloneNode(true);
       this.#claimTree(fallbackFrag);
@@ -779,9 +709,7 @@ function createFrameElement(options) {
   const frame = new FrameImpl(el, null, null, options);
   return {
     element: el,
-    get frame() {
-      return frame;
-    },
+    frame,
     dispose() {
       frame.dispose();
       el.remove();
@@ -801,15 +729,30 @@ function segmentName(key) {
   const m = /^seg:([^:]+)$/.exec(key);
   return m ? m[1] : null;
 }
+function isAsyncLike(v) {
+  return !!v && (typeof v.then === "function" || typeof v[Symbol.asyncIterator] === "function");
+}
 function propOf(occurrence) {
   const hash = occurrence.indexOf("#");
   return hash === -1 ? occurrence : occurrence.slice(0, hash);
 }
 function isDataRef(value) {
-  return typeof value === "object" && value !== null && typeof value.$ref === "string";
+  return !!value && typeof value.$ref === "string";
 }
 function isFrameRef(value) {
-  return typeof value === "object" && value !== null && typeof value.$frame === "string";
+  return !!value && typeof value.$frame === "string";
+}
+function disposeRegions(regions) {
+  for (const {
+    frame
+  } of regions.values()) frame?.dispose();
+}
+function removeUntil(parent, n, stop) {
+  while (n && n !== stop) {
+    const next = n.nextSibling;
+    parent.removeChild(n);
+    n = next;
+  }
 }
 function parseFragment(html) {
   const template = document.createElement("template");
@@ -817,9 +760,8 @@ function parseFragment(html) {
   return template.content;
 }
 function findHeadElement(selector, attr, value) {
-  const nodes = document.head.querySelectorAll(selector);
-  for (let i = 0; i < nodes.length; i++) {
-    if (nodes[i].getAttribute(attr) === value) return nodes[i];
+  for (const node of document.head.querySelectorAll(selector)) {
+    if (node.getAttribute(attr) === value) return node;
   }
   return null;
 }
@@ -868,7 +810,7 @@ function applyInlineStyles(inlineStyles) {
   }
 }
 function isPlaceholderStart(node, id) {
-  return node.nodeType === ELEMENT_NODE && node.tagName === "TEMPLATE" && node.getAttribute("id") === id;
+  return node.tagName === "TEMPLATE" && node.id === id;
 }
 function rangeClose(start, id) {
   let n = start.nextSibling;
@@ -901,11 +843,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, {
@@ -918,12 +860,27 @@ 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;
   if (entry.frame) entry.frame.rebind(childId);else entry.element.setAttribute(FRAME_ID_ATTR, childId);
 }
+function eachInRange(start, key, cb) {
+  const end = slotEnd(key);
+  let n = start.nextSibling;
+  while (n && !(n.nodeType === COMMENT_NODE && n.data === end)) {
+    const next = n.nextSibling;
+    cb(n);
+    n = next;
+  }
+  return n;
+}
+function clearStreamRecords(records, root) {
+  for (const key in records) {
+    if (key.startsWith("seg:") || key === ":error" || root && key === "") delete records[key];
+  }
+}
 function argsEquivalent(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -934,9 +891,7 @@ function argsEquivalent(a, b) {
     const va = a[key];
     const vb = b[key];
     if (va === vb) continue;
-    if (va && vb && typeof va === "object" && typeof vb === "object" && typeof va.$frame === "string" && va.$frame === vb.$frame) {
-      continue;
-    }
+    if (isFrameRef(va) && va.$frame === vb?.$frame) continue;
     return false;
   }
   return true;
@@ -986,11 +941,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;
   }
@@ -1024,6 +979,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;
@@ -1041,7 +1003,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) {
@@ -1057,11 +1019,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);
@@ -1072,17 +1030,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;
@@ -1095,13 +1055,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) {
@@ -1118,20 +1079,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) {
@@ -1163,7 +1128,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));
@@ -1177,7 +1142,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 {
@@ -1201,7 +1166,8 @@ const ServerComponentPlugin = /*#__PURE__*/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);
@@ -1226,120 +1192,79 @@ function createServerComponentHandler({
   host,
   component,
   onStream,
-  documentComponent,
   intercept,
   consumer = getFlightDataConsumer,
   codec = 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 = 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(frameAddress(info.id, info.args), info.id);
     }),
     handle(response, ctx) {
       if (!isFrameStreamResponse(response)) return undefined;
       const address = 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(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 (comp && (typeof comp === "function" || typeof comp === "object") && !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) {
@@ -1350,10 +1275,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);
@@ -1374,7 +1295,7 @@ function createServerComponentHandler({
     if (response.headers.has(ERROR_HEADER) && !response.headers.has("Location") && !response.headers.has(REVALIDATE_HEADER)) {
       throw envelope.value;
     }
-    return rootId ? entry.component : envelope.value;
+    return rootId ? binding : envelope.value;
   }
 }
 
@@ -1425,6 +1346,9 @@ function createJSONDataTable(options) {
   };
 }
 
+function asyncArg(value) {
+  return value;
+}
 let sharedHost;
 const tables = new Map();
 function tableFor(id) {
@@ -1501,8 +1425,26 @@ function claimRender(prefix, existing, render) {
 function liveSlotProps(initial, ctx) {
   const [args, setArgs] = createSignal(initial);
   ctx.onUpdate(next => setArgs(() => next));
+  return slotArgsProxy(args);
+}
+function isAsyncValue(v) {
+  return v !== null && typeof v === "object" && (typeof v.then === "function" || typeof v[Symbol.asyncIterator] === "function");
+}
+function slotArgsProxy(args) {
+  const owner = getOwner();
+  const asyncReads = new Map();
   return new Proxy({}, {
-    get: (_, key) => args()[key],
+    get: (_, key) => {
+      const v = args()[key];
+      if (!isAsyncValue(v)) return v;
+      let read = asyncReads.get(key);
+      if (!read) {
+        const make = () => createMemo(() => args()[key]);
+        read = owner ? runWithOwner(owner, make) : make();
+        asyncReads.set(key, read);
+      }
+      return read();
+    },
     has: (_, key) => key in args(),
     ownKeys: () => Reflect.ownKeys(args()),
     getOwnPropertyDescriptor: (_, key) => key in args() ? {
@@ -1520,6 +1462,7 @@ function isReactiveContent(value) {
 }
 function slotsFor(props) {
   const bindings = new Map();
+  const fillScopes = new Map();
   return new Proxy({}, {
     get(_, prop) {
       if (typeof prop !== "string" || !(prop in props)) return undefined;
@@ -1530,6 +1473,19 @@ function slotsFor(props) {
           bindings.delete(key);
           prev.dispose();
         }
+        const prevFill = key !== undefined && fillScopes.get(key);
+        if (prevFill) {
+          fillScopes.delete(key);
+          prevFill.dispose();
+        }
+        const fillOwner = streamInvoke ? createOwner() : null;
+        if (fillOwner && key !== undefined && ctx) {
+          fillScopes.set(key, fillOwner);
+          ctx.onCleanup(() => {
+            if (fillScopes.get(key) === fillOwner) fillScopes.delete(key);
+            fillOwner.dispose();
+          });
+        }
         const settle = out => {
           const existing = ctx && ctx.existing || [];
           if (existing.length) {
@@ -1542,26 +1498,18 @@ function slotsFor(props) {
         const evaluate = () => {
           const v = props[prop];
           if (typeof v === "function" && ctx && ctx.invoked) {
-            return v(ctx.onUpdate ? liveSlotProps(slotProps, ctx) : slotProps);
+            return v(ctx.onUpdate ? liveSlotProps(slotProps, ctx) : slotArgsProxy(() => slotProps));
           }
           return v;
         };
         const adopted = !!(ctx && ctx.frame && ctx.adopted && ctx.existing && ctx.existing.length);
         const prefix = ctx && ctx.frame ? `sc-${ctx.frame}-${ctx.key}-` : "";
-        const value = adopted ? claimRender(prefix, ctx.existing, evaluate) : evaluate();
+        const value = fillOwner ? runWithOwner(fillOwner, () => adopted ? claimRender(prefix, ctx.existing, evaluate) : evaluate()) : adopted ? claimRender(prefix, ctx.existing, evaluate) : evaluate();
         if (!isReactiveContent(value)) {
           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 = createOwner();
           bindings.set(key, owner);
           ctx.onCleanup(() => {
@@ -1569,7 +1517,8 @@ function slotsFor(props) {
             owner.dispose();
           });
           const end = ctx.range.end;
-          runWithOwner(owner, () => insert(end.parentNode, accessor, end, [...ctx.existing]));
+          const bind = () => insert(end.parentNode, () => typeof source === "function" ? source() : source, end, [...ctx.existing]);
+          runWithOwner(owner, () => adopted ? claimRender(prefix, ctx.existing, bind) : bind());
           return undefined;
         }
         return settle(normalizeSlotContent(value));
@@ -1580,24 +1529,61 @@ function slotsFor(props) {
 function revealSeam(owner) {
   return seam => runWithOwner(owner, () => insert(seam.before.parentNode, createLoadingBoundary(() => seam.content(), () => seam.fallback), seam.before));
 }
+let streamInvoke = false;
 function boundaryScope(owner) {
-  return fn => getOwner() ? fn() : runWithOwner(owner, fn);
+  return fn => {
+    if (getOwner()) return fn();
+    streamInvoke = true;
+    try {
+      return runWithOwner(owner, fn);
+    } finally {
+      streamInvoke = false;
+    }
+  };
 }
-function boundaryComponent(host, id) {
-  return props => {
+function boundaryComponent(host, fnId) {
+  return (props, binding) => {
     const owner = getOwner();
+    const id = binding ? binding() : fnId;
+    let applied = !tables.has(id);
+    let release;
+    const arm = () => new Promise(r => release = r);
+    const mountGate = applied ? undefined : arm();
+    let setGate;
     const {
       element,
+      frame,
       dispose
     } = createFrameElement({
       host,
       id,
       slots: slotsFor(props),
       ownerScope: boundaryScope(owner),
-      reveal: revealSeam(owner)
+      reveal: revealSeam(owner),
+      onApply: () => {
+        applied = true;
+        if (release) {
+          release();
+          release = undefined;
+        }
+        setGate && setGate(undefined);
+      }
     });
+    const [gatePromise, setGatePromise] = createSignal(applied ? undefined : mountGate);
+    setGate = setGatePromise;
+    if (binding) {
+      createRenderEffect(binding, (address, prev) => {
+        if (prev !== undefined && address !== prev && tables.has(address)) {
+          applied = false;
+          setGatePromise(arm());
+        }
+        frame.rebind(address);
+      });
+    }
     onCleanup(dispose);
-    return element;
+    if (applied && !binding) return element;
+    const gate = createMemo(() => gatePromise());
+    return createMemo(() => (gate(), element));
   };
 }
 const claimedBoundaries = new Set();
@@ -1617,51 +1603,76 @@ 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 = 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 createMemo(() => arrival.then(node => runWithOwner(owner, () =>
+    node ? adoptBoundary(host, id, node, props, binding) : boundaryComponent(host, id)(props, binding))));
   }
-  return boundaryComponent(host, id)(props);
+  return boundaryComponent(host, id)(props, binding);
 }
-function adoptBoundary(host, id, el, props) {
+function documentAddress(id) {
+  const records = globalThis._$SC?.a;
+  if (records) {
+    for (const address in records) if (records[address] === id) return address;
+  }
+  return id;
+}
+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 claimedFragments = new Set();
+  const claimRegionFragments = root => {
+    const fr = globalThis._$HY?.fr;
+    if (!fr || !fr.claim) return;
+    root.querySelectorAll('template[id^="pl-"]').forEach(tpl => {
+      const fragId = tpl.id.slice(3);
+      if (claimedFragments.has(fragId)) return;
+      claimedFragments.add(fragId);
+      fr.claim(fragId);
+    });
+  };
+  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]
@@ -1669,6 +1680,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",
@@ -1680,16 +1692,58 @@ function adoptBoundary(host, id, el, props) {
         }
       }
     }
-  }
+  };
+  claimRegionFragments(el);
+  const fr = globalThis._$HY?.fr;
+  const unsubscribe = fr ? fr.subscribe((_fragId, parent) => {
+    if (fr.claim && parent && el.contains(parent)) claimRegionFragments(parent);
+    drainRecords();
+  }) : undefined;
+  onCleanup(() => {
+    unsubscribe && unsubscribe();
+    if (fr && fr.release) for (const fragId of claimedFragments) fr.release(fragId);
+  });
+  drainRecords();
   const owner = getOwner();
+  let release;
+  let setGate;
   const frame = createFrame(el, {
     adopt: true,
     host,
-    id,
+    id: address,
     slots: slotsFor(props),
     ownerScope: boundaryScope(owner),
-    reveal: revealSeam(owner)
+    reveal: revealSeam(owner),
+    onApply: () => {
+      if (release) {
+        release();
+        release = undefined;
+      }
+      setGate && setGate(undefined);
+    },
+    ...{
+      recordsPending: () => {
+        if (document.readyState === "loading") return true;
+        const hy = globalThis._$HY;
+        return !!(hy && hy.fr && hy.fr.pending());
+      },
+      drainRecords,
+      claimScope: id
+    }
   });
+  if (binding) {
+    const arm = () => new Promise(r => release = r);
+    const [gatePromise, setGatePromise] = createSignal(undefined);
+    setGate = setGatePromise;
+    const gate = createMemo(() => gatePromise());
+    createRenderEffect(binding, (address, prev) => {
+      if (prev !== undefined && address !== prev && tables.has(address)) {
+        setGatePromise(arm());
+      }
+      frame.rebind(address);
+    });
+    createRenderEffect(() => (gate(), undefined), () => {});
+  }
   onCleanup(() => frame.dispose());
   return el;
 }
@@ -1704,17 +1758,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
     }) => {
@@ -1722,7 +1775,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;
@@ -1731,4 +1784,4 @@ function installServerComponents(host = getFrameHost()) {
   });
 }
 
-export { FRAME_APPLIED_EVENT, FRAME_STREAM_HEADER, applyFrameResponse, createFrame, createFrameElement, createFrameHost, createJSONDataTable, createServerComponentHandler, getFrameHost, installServerComponents, isFrameStreamResponse };
+export { FRAME_APPLIED_EVENT, FRAME_STREAM_HEADER, applyFrameResponse, asyncArg, createFrame, createFrameElement, createFrameHost, createServerComponentHandler, getFrameHost, installServerComponents, isFrameStreamResponse };