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

package/frames/dist/client.cjs

@@ -2,8 +2,8 @@
 
 var solidJs = require('solid-js');
 var web$1 = require('@solidjs/web');
-var client = require('@solidjs/web/server-functions/client');
 var seroval = require('seroval');
+var client = require('@solidjs/web/server-functions/client');
 var web = require('seroval-plugins/web');
 
 const ELEMENT_NODE = 1;
@@ -84,6 +84,7 @@ 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);
@@ -109,6 +110,14 @@ function createFrameHost(options = {}) {
         }
         return;
       }
+      const kept = retained.get(id);
+      if (kept) {
+        retained.delete(id);
+        frame.apply({
+          version: kept.version,
+          r: kept.records
+        });
+      }
       const buffered = pending.get(id);
       if (buffered) {
         pending.delete(id);
@@ -132,6 +141,12 @@ function createFrameHost(options = {}) {
       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);
       }
@@ -344,7 +359,7 @@ class FrameImpl {
   #syncSlots(root) {
     if (!this.#slots && !this.#options.resolveSlot) return;
     const found = new Map();
-    if (root) collectSlots(root, found);else this.#collectSlots(found);
+    if (root) collectSlots(root.firstChild, null, found);else this.#collectSlots(found);
     for (const [occurrence, start] of found) {
       const callback = this.#resolveSlot(propOf(occurrence));
       if (!callback) continue;
@@ -383,12 +398,28 @@ class FrameImpl {
   }
   #invokeSlot(occurrence, callback, record, start, adopted) {
     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;
+    }
     const ctx = {
       frame: this.#options.claimScope ?? this.#options.id,
       key: occurrence,
       adopted: !!adopted,
+      invoked: !!(record && record.kind === "slot"),
       onCleanup: fn => cleanups.push(fn),
-      existing: start ? rangeInterior(start, slotEnd(occurrence)) : []
+      existing,
+      range: end ? {
+        start,
+        end
+      } : undefined
     };
     const props = record && record.kind === "slot" ? this.#resolveArgs(occurrence, record.args) : {};
     const regions = this.#slotRegions.get(occurrence);
@@ -398,7 +429,8 @@ class FrameImpl {
         if (!(argKey in props)) props[argKey] = entry.element;
       }
     }
-    const content = callback(props, ctx);
+    const scope = this.#options.ownerScope;
+    const content = scope ? scope(() => callback(props, ctx)) : callback(props, ctx);
     this.#slotArgs.set(occurrence, record);
     if (cleanups.length) this.#slotCleanups.set(occurrence, cleanups);
     if (content == null) return null;
@@ -429,7 +461,6 @@ class FrameImpl {
       } of regions.values()) frame?.dispose();
       this.#slotRegions.delete(key);
     }
-    this.#slotArgs.delete(key);
   }
   #runSlotCleanups(key) {
     const cleanups = this.#slotCleanups.get(key);
@@ -542,35 +573,35 @@ class FrameImpl {
     }
   }
   #collectSlots(found) {
-    let n = this.#firstContent();
-    const end = this.#end;
-    while (n && n !== end) {
-      const id = slotStartId(n);
-      if (id !== null) {
-        if (!found.has(id)) found.set(id, n);
-        n = afterRange(n, id);
-        continue;
-      }
-      if (n.nodeType === ELEMENT_NODE && !isFrameElement(n)) collectSlots(n, found);
-      n = n.nextSibling;
-    }
+    collectSlots(this.#firstContent(), this.#end, found);
   }
   #findPlaceholder(name) {
-    const id = placeholderId(name);
-    let n = this.#firstContent();
-    const end = this.#end;
-    while (n && n !== end) {
-      if (isPlaceholderStart(n, id)) return n;
-      if (n.nodeType === ELEMENT_NODE) {
-        const found = findPlaceholder(n, id);
-        if (found) return found;
-      }
-      n = n.nextSibling;
+    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
+      };
     }
-    return null;
+    if (!records[""] && this.#version === undefined) return null;
+    return {
+      version: this.#version ?? 0,
+      records
+    };
   }
   dispose() {
     if (this.#disposed) return;
+    const {
+      host,
+      id
+    } = this.#options;
+    if (host && id !== undefined) host.unregister(id, this);
     this.#disposed = true;
     for (const key of [...this.#slotCleanups.keys()]) this.#runSlotCleanups(key);
     for (const key of this.#mountedSlots) this.#removeSlotRecord(key);
@@ -581,11 +612,6 @@ class FrameImpl {
     }
     this.#slotRegions.clear();
     this.#mountedSlots.clear();
-    const {
-      host,
-      id
-    } = this.#options;
-    if (host && id !== undefined) host.unregister(id, this);
   }
   #applyRoot(html) {
     const fragment = parseFragment(html);
@@ -597,7 +623,9 @@ class FrameImpl {
       this.#hasContent = true;
     } else {
       const claim = claimHandlers() ? this.#claimTree : null;
-      reconcileChildren(parent, fragment, this.#start, this.#end, claim);
+      const ranges = new Map();
+      this.#collectSlots(ranges);
+      reconcileChildren(parent, fragment, this.#start, this.#end, claim, ranges);
     }
   }
   #clearContent() {
@@ -789,28 +817,26 @@ function rangeClose(start, id) {
   }
   return null;
 }
-function findPlaceholder(root, id) {
-  let n = root.firstChild;
-  while (n) {
+function findPlaceholder(n, end, id) {
+  while (n && n !== end) {
     if (isPlaceholderStart(n, id)) return n;
     if (n.nodeType === ELEMENT_NODE) {
-      const found = findPlaceholder(n, id);
+      const found = findPlaceholder(n.firstChild, null, id);
       if (found) return found;
     }
     n = n.nextSibling;
   }
   return null;
 }
-function collectSlots(root, out) {
-  let n = root.firstChild;
-  while (n) {
+function collectSlots(n, end, out) {
+  while (n && n !== end) {
     const id = slotStartId(n);
     if (id !== null) {
       if (!out.has(id)) out.set(id, n);
       n = afterRange(n, id);
       continue;
     }
-    if (n.nodeType === ELEMENT_NODE && !isFrameElement(n)) collectSlots(n, out);
+    if (n.nodeType === ELEMENT_NODE && !isFrameElement(n)) collectSlots(n.firstChild, null, out);
     n = n.nextSibling;
   }
 }
@@ -847,15 +873,6 @@ function argsEquivalent(a, b) {
   }
   return true;
 }
-function rangeInterior(start, endData) {
-  const nodes = [];
-  let n = start.nextSibling;
-  while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-    nodes.push(n);
-    n = n.nextSibling;
-  }
-  return nodes;
-}
 function slotStartId(node) {
   if (node.nodeType !== COMMENT_NODE) return null;
   const m = SLOT_START.exec(node.data);
@@ -901,11 +918,11 @@ function morphAttributes(oldEl, newEl, claim) {
   }
   if (claim && (reclaim || changed && oldEl.matches(CLAIMED_ELEMENTS))) claim(oldEl, true);
 }
-function morphNode(oldNode, newNode, claim) {
+function morphNode(oldNode, newNode, claim, ranges) {
   if (oldNode.nodeType === ELEMENT_NODE) {
     if (oldNode.hasAttribute("data-preserve")) return;
     morphAttributes(oldNode, newNode, claim);
-    reconcileChildren(oldNode, newNode, null, null, claim);
+    reconcileChildren(oldNode, newNode, null, null, claim, ranges);
   } else if (oldNode.data !== newNode.data) {
     oldNode.data = newNode.data;
   }
@@ -919,9 +936,6 @@ function afterRange(start, id) {
   }
   return null;
 }
-function skipRange(start, id) {
-  return afterRange(start, id);
-}
 function findRangeStart(from, id, bound) {
   const target = `slot:${id}:start`;
   let n = from;
@@ -959,7 +973,7 @@ function adoptRange(parent, start, id, ref, claim) {
   }
   return after;
 }
-function reconcileChildren(parent, source, boundStart = null, boundEnd = null, claim = null) {
+function reconcileChildren(parent, source, boundStart = null, boundEnd = null, claim = null, ranges = null) {
   let oldChild = boundStart ? boundStart.nextSibling : parent.firstChild;
   let newChild = source.firstChild;
   while (newChild) {
@@ -969,12 +983,18 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
     if (pid !== null) {
       if (old && slotStartId(old) === pid) {
         oldChild = afterRange(old, pid);
-        newChild = skipRange(newChild, pid);
+        newChild = afterRange(newChild, pid);
       } else {
-        const existing = findRangeStart(old, pid, boundEnd);
+        const displaced = ranges && ranges.get(pid);
+        const existing = displaced || findRangeStart(old, pid, boundEnd);
         if (existing) {
-          moveRangeBefore(parent, existing, pid, old ?? boundEnd);
-          newChild = skipRange(newChild, pid);
+          if (ranges) ranges.delete(pid);
+          if (existing.nodeType === 11 ) {
+            parent.insertBefore(existing, old ?? boundEnd);
+          } else {
+            moveRangeBefore(parent, existing, pid, old ?? boundEnd);
+          }
+          newChild = afterRange(newChild, pid);
         } else {
           newChild = adoptRange(parent, newChild, pid, old ?? boundEnd, claim);
         }
@@ -994,7 +1014,7 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
       continue;
     }
     if (compatible(old, newChild)) {
-      morphNode(old, newChild, claim);
+      morphNode(old, newChild, claim, ranges);
       oldChild = old.nextSibling;
       newChild = nextNew;
       continue;
@@ -1007,7 +1027,7 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
       }
       if (ahead && ahead !== boundEnd) {
         parent.insertBefore(ahead, old);
-        morphNode(ahead, newChild, claim);
+        morphNode(ahead, newChild, claim, ranges);
         newChild = nextNew;
         continue;
       }
@@ -1018,113 +1038,29 @@ function reconcileChildren(parent, source, boundStart = null, boundEnd = null, c
   }
   while (oldChild && oldChild !== boundEnd) {
     const next = oldChild.nextSibling;
+    const pid = ranges ? slotStartId(oldChild) : null;
+    if (pid !== null && ranges.get(pid) === oldChild) {
+      const frag = document.createDocumentFragment();
+      const after = stashRange(frag, oldChild, pid);
+      ranges.set(pid, frag);
+      oldChild = after;
+      continue;
+    }
     parent.removeChild(oldChild);
     oldChild = next;
   }
 }
-
-seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
-const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
-web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
-web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin]);
-function resolveSerializerPlugins(customPlugins) {
-  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
-}
-const JSON_CODEC_DISABLED_FEATURES = seroval.Feature.RegExp;
-const JSON_CODEC_DEPTH_LIMIT = 64;
-function resolveCodecOptions({
-  plugins,
-  disabledFeatures,
-  depthLimit
-} = {}) {
-  return {
-    plugins: resolveSerializerPlugins(plugins),
-    disabledFeatures: disabledFeatures === undefined ? JSON_CODEC_DISABLED_FEATURES : disabledFeatures,
-    depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
-  };
-}
-function createJSONDeserializer(options) {
-  const refs = new Map();
-  const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
-    return seroval.fromCrossJSON(node, {
-      refs,
-      ...resolved
-    });
-  };
-}
-function createJSONDataTable(options) {
-  const deserialize = createJSONDeserializer(options);
-  const table = new Map();
-  return {
-    apply(record) {
-      const value = deserialize(record.node);
-      if (record.initial) table.set(record.key, value);
-    },
-    get(key) {
-      return table.get(key);
-    },
-    resolve(ref) {
-      return table.get(ref.$ref);
-    }
-  };
-}
-
-class ChunkReader {
-  constructor(stream) {
-    this.reader = stream.getReader();
-    this.buffer = new Uint8Array(0);
-    this.done = false;
-  }
-  async readChunk() {
-    const chunk = await this.reader.read();
-    if (!chunk.done) {
-      const newBuffer = new Uint8Array(this.buffer.length + chunk.value.length);
-      newBuffer.set(this.buffer);
-      newBuffer.set(chunk.value, this.buffer.length);
-      this.buffer = newBuffer;
-    } else {
-      this.done = true;
-    }
-  }
-  async next() {
-    while (this.buffer.length < 12) {
-      if (this.done) {
-        if (this.buffer.length === 0) return {
-          done: true,
-          value: undefined
-        };
-        throw new Error("Malformed server function stream.");
-      }
-      await this.readChunk();
-    }
-    const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
-    const bytes = Number.parseInt(head, 16);
-    if (Number.isNaN(bytes)) {
-      throw new Error("Malformed server function stream.");
-    }
-    while (bytes > this.buffer.length - 12) {
-      if (this.done) {
-        throw new Error("Malformed server function stream.");
-      }
-      await this.readChunk();
-    }
-    const partial = new TextDecoder().decode(this.buffer.subarray(12, 12 + bytes));
-    this.buffer = this.buffer.subarray(12 + bytes);
-    return {
-      done: false,
-      value: partial
-    };
-  }
-  async drain(interpret) {
-    while (true) {
-      const result = await this.next();
-      if (result.done) {
-        break;
-      }
-      interpret(result.value);
-    }
+function stashRange(frag, start, id) {
+  const end = slotEnd(id);
+  let n = start;
+  while (n) {
+    const next = n.nextSibling;
+    const isEnd = n.nodeType === COMMENT_NODE && n.data === end;
+    frag.appendChild(n);
+    if (isEnd) return next;
+    n = next;
   }
+  return null;
 }
 
 const FRAME_STREAM_HEADER = "X-Frame-Stream";
@@ -1135,55 +1071,133 @@ async function applyFrameResponse(response, host, options = {}) {
   const rootId = response.headers.get(FRAME_STREAM_HEADER) ?? "";
   const as = options.as;
   const version = options.version;
-  const reader = new ChunkReader(response.body);
+  const perFrame = typeof version === "function" ? new Map() : null;
+  const reader = new client.ChunkReader(response.body);
   let result = await reader.next();
   while (!result.done) {
     const chunk = JSON.parse(result.value);
-    if (as !== undefined && chunk.id === rootId) chunk.id = as;
-    if (version !== undefined) chunk.version = version;
-    host.apply(chunk);
+    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 (perFrame) {
+        let v = perFrame.get(chunk.id);
+        if (v === undefined) perFrame.set(chunk.id, v = version(chunk.id));
+        chunk.version = v;
+      } else if (version !== undefined) chunk.version = version;
+      host.apply(chunk);
+    }
     result = await reader.next();
   }
   return as !== undefined ? as : rootId;
 }
+const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
+const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("dom-expressions.server-component-address");
+let resolveServerComponent;
+function parseServerComponent(value, ctx) {
+  return {
+    id: ctx.parse(value[SERVER_COMPONENT]),
+    address: ctx.parse(value[SERVER_COMPONENT_ADDRESS])
+  };
+}
+const ServerComponentPlugin = /*#__PURE__*/seroval.createPlugin({
+  tag: "dom-expressions/server-component",
+  test(value) {
+    return typeof value === "function" && SERVER_COMPONENT in value;
+  },
+  parse: {
+    sync: parseServerComponent,
+    async async(value, ctx) {
+      return {
+        id: await ctx.parse(value[SERVER_COMPONENT]),
+        address: await ctx.parse(value[SERVER_COMPONENT_ADDRESS])
+      };
+    },
+    stream: parseServerComponent
+  },
+  serialize(node, ctx) {
+    return "self._$SC.r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
+  },
+  deserialize(node, ctx) {
+    const id = ctx.deserialize(node.id);
+    const address = ctx.deserialize(node.address);
+    if (address !== undefined && resolveServerComponent) {
+      return resolveServerComponent(id, address);
+    }
+    return globalThis._$SC.r(id);
+  }
+});
+function flightCodec(codec) {
+  const plugins = codec && codec.plugins || [];
+  for (const plugin of plugins) {
+    if (plugin && plugin.tag === "dom-expressions/server-component") return codec;
+  }
+  return {
+    ...codec,
+    plugins: [...plugins, ServerComponentPlugin]
+  };
+}
 function createServerComponentHandler({
   host,
   component,
-  capture,
   onStream,
   documentComponent,
-  intercept
+  intercept,
+  consumer = client.getFlightDataConsumer,
+  codec = client.getServerFunctionsCodec
 }) {
-  const byContext = new WeakMap();
-  const byFunction = new Map();
-  let boundary = 0;
+  const byAddress = new Map();
+  const boundaryFor = address => {
+    let entry = byAddress.get(address);
+    if (!entry) {
+      entry = {
+        frameId: address,
+        component: component(address)
+      };
+      byAddress.set(address, entry);
+    }
+    return entry;
+  };
+  const resolveAddress = (id, address) => boundaryFor(address).component;
+  resolveServerComponent = resolveAddress;
+  const versions = new Map();
+  const bump = frameId => {
+    const version = (versions.get(frameId) || 0) + 1;
+    versions.set(frameId, version);
+    return version;
+  };
   return {
-    capture,
-    intercept,
+    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: hit
+        });
+      }
+      return hit;
+    }),
     handle(response, ctx) {
       if (!isFrameStreamResponse(response)) return undefined;
-      const key = ctx.context;
-      const keyed = key !== null && typeof key === "object";
-      let entry = keyed ? byContext.get(key) : byFunction.get(ctx.id);
+      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,
-            version: 0,
             component: adopted
           };
+          byAddress.set(address, entry);
         } else {
-          const frameId = `sc:${boundary++}`;
-          entry = {
-            frameId,
-            version: 0,
-            component: component(frameId)
-          };
+          entry = boundaryFor(address);
         }
-        keyed ? byContext.set(key, entry) : byFunction.set(ctx.id, entry);
       }
-      const version = ++entry.version;
+      if (response.headers.has(client.SINGLE_FLIGHT_HEADER)) {
+        return applyFlightResponse(response, entry);
+      }
+      const version = bump(entry.frameId);
       if (onStream) onStream(entry.frameId, version, response);
       applyFrameResponse(response, host, {
         as: entry.frameId,
@@ -1197,6 +1211,101 @@ function createServerComponentHandler({
         }
       }));
       return entry.component;
+    },
+    showing(address, functionId, component) {
+      if (!byAddress.has(address)) {
+        byAddress.set(address, {
+          frameId: functionId,
+          component,
+          address
+        });
+      }
+    }
+  };
+  async function applyFlightResponse(response, entry) {
+    const rootId = response.headers.get(FRAME_STREAM_HEADER) ?? "";
+    const as = rootId ? entry.frameId : undefined;
+    let feed;
+    const source = new ReadableStream({
+      start(controller) {
+        feed = controller;
+      }
+    });
+    const payload = client.deserializeStream(new Response(source), flightCodec(codec()));
+    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);
+        return version;
+      },
+      onOutcome: text => {
+        carried = true;
+        feed.enqueue(client.createChunk(text));
+      }
+    });
+    feed.close();
+    if (!carried) throw new Error("Single-flight frame response carried no outcome");
+    const envelope = await payload;
+    const deliver = consumer();
+    if (deliver) await deliver(envelope.data, {
+      response
+    });
+    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;
+  }
+}
+
+seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
+const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
+web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
+web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin]);
+function resolveSerializerPlugins(customPlugins) {
+  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
+}
+const JSON_CODEC_DISABLED_FEATURES = seroval.Feature.RegExp;
+const JSON_CODEC_DEPTH_LIMIT = 64;
+function resolveCodecOptions({
+  plugins,
+  disabledFeatures,
+  depthLimit
+} = {}) {
+  return {
+    plugins: resolveSerializerPlugins(plugins),
+    disabledFeatures: disabledFeatures === undefined ? JSON_CODEC_DISABLED_FEATURES : disabledFeatures,
+    depthLimit: depthLimit === undefined ? JSON_CODEC_DEPTH_LIMIT : depthLimit
+  };
+}
+function createJSONDeserializer(options) {
+  const refs = new Map();
+  const resolved = resolveCodecOptions(options);
+  return function deserializeJSONChunk(node) {
+    return seroval.fromCrossJSON(node, {
+      refs,
+      ...resolved
+    });
+  };
+}
+function createJSONDataTable(options) {
+  const deserialize = createJSONDeserializer(options);
+  const table = new Map();
+  return {
+    apply(record) {
+      const value = deserialize(record.node);
+      if (record.initial) table.set(record.key, value);
+    },
+    get(key) {
+      return table.get(key);
+    },
+    resolve(ref) {
+      return table.get(ref.$ref);
     }
   };
 }
@@ -1250,8 +1359,10 @@ function claimRender(prefix, existing, render) {
   if (!registry.size) return render();
   const prevRegistry = sc.registry;
   const prevHydrating = sc.hydrating;
+  const prevClaimRoots = sc.claimRoots;
   sc.registry = registry;
   sc.hydrating = true;
+  sc.claimRoots = existing;
   try {
     return solidJs.runWithOwner(solidJs.createOwner({
       id: prefix
@@ -1259,13 +1370,28 @@ function claimRender(prefix, existing, render) {
   } finally {
     sc.registry = prevRegistry;
     sc.hydrating = prevHydrating;
+    sc.claimRoots = prevClaimRoots;
+  }
+}
+function isReactiveContent(value) {
+  if (typeof value === "function") return true;
+  if (Array.isArray(value)) {
+    for (const v of value) if (isReactiveContent(v)) return true;
   }
+  return false;
 }
 function slotsFor(props) {
+  const bindings = new Map();
   return new Proxy({}, {
     get(_, prop) {
       if (typeof prop !== "string" || !(prop in props)) return undefined;
       return (slotProps, ctx) => {
+        const key = ctx && ctx.key;
+        const prev = key !== undefined && bindings.get(key);
+        if (prev) {
+          bindings.delete(key);
+          prev.dispose();
+        }
         const settle = out => {
           const existing = ctx && ctx.existing || [];
           if (existing.length) {
@@ -1275,14 +1401,37 @@ function slotsFor(props) {
           }
           return out;
         };
-        const render = () => {
+        const evaluate = () => {
           const v = props[prop];
-          return settle(normalizeSlotContent(typeof v === "function" ? v(slotProps) : v));
+          return typeof v === "function" && ctx && ctx.invoked ? v(slotProps) : v;
         };
-        if (ctx && ctx.frame && ctx.adopted && ctx.existing && ctx.existing.length) {
-          return claimRender(`sc-${ctx.frame}-${ctx.key}-`, ctx.existing, render);
+        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();
+        if (!isReactiveContent(value)) {
+          return settle(normalizeSlotContent(value));
         }
-        return render();
+        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(() => {
+            if (bindings.get(key) === owner) bindings.delete(key);
+            owner.dispose();
+          });
+          const end = ctx.range.end;
+          solidJs.runWithOwner(owner, () => web$1.insert(end.parentNode, accessor, end, [...ctx.existing]));
+          return undefined;
+        }
+        return settle(normalizeSlotContent(value));
       };
     }
   });
@@ -1290,6 +1439,9 @@ function slotsFor(props) {
 function revealSeam(owner) {
   return seam => solidJs.runWithOwner(owner, () => web$1.insert(seam.before.parentNode, solidJs.createLoadingBoundary(() => seam.content(), () => seam.fallback), seam.before));
 }
+function boundaryScope(owner) {
+  return fn => solidJs.getOwner() ? fn() : solidJs.runWithOwner(owner, fn);
+}
 function boundaryComponent(host, id) {
   return props => {
     const owner = solidJs.getOwner();
@@ -1300,7 +1452,7 @@ function boundaryComponent(host, id) {
       host,
       id,
       slots: slotsFor(props),
-      ownerScope: fn => solidJs.runWithOwner(owner, fn),
+      ownerScope: boundaryScope(owner),
       reveal: revealSeam(owner)
     });
     solidJs.onCleanup(dispose);
@@ -1394,7 +1546,7 @@ function adoptBoundary(host, id, el, props) {
     host,
     id,
     slots: slotsFor(props),
-    ownerScope: fn => solidJs.runWithOwner(owner, fn),
+    ownerScope: boundaryScope(owner),
     reveal: revealSeam(owner)
   });
   solidJs.onCleanup(() => frame.dispose());
@@ -1405,27 +1557,36 @@ function installServerComponents(host = getFrameHost()) {
   if (!g._$SC) {
     g._$SC = {
       c: {},
-      r(i) {
+      a: {},
+      r(i, a) {
+        if (a) {
+          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));
       }
     };
   }
   g._$SC.impl = (id, props) => documentBoundary(host, id, props);
   installRevealHook();
+  const handler = createServerComponentHandler({
+    host,
+    component: frameId => boundaryComponent(host, frameId),
+    onStream: frameId => beginStream(frameId),
+    documentComponent: functionId => claimedBoundaries.has(functionId) ? undefined : g._$SC.c[functionId],
+    intercept: ({
+      id
+    }) => {
+      if (claimedBoundaries.has(id) || !findBoundaryElement(id)) return undefined;
+      return g._$SC.r(id);
+    }
+  });
+  const showing = (address, id) => handler.showing(address, id, g._$SC.r(id));
+  const records = g._$SC.a || (g._$SC.a = {});
+  for (const address in records) showing(address, records[address]);
+  g._$SC.reg = showing;
   client.configureServerFunctionsClient({
-    responseHandler: createServerComponentHandler({
-      host,
-      capture: () => solidJs.getOwner() ?? undefined,
-      component: frameId => boundaryComponent(host, frameId),
-      onStream: frameId => beginStream(frameId),
-      documentComponent: functionId => g._$SC.c[functionId],
-      intercept: ({
-        id
-      }) => {
-        if (claimedBoundaries.has(id) || !findBoundaryElement(id)) return undefined;
-        return g._$SC.r(id);
-      }
-    })
+    responseHandler: handler
   });
 }