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

package/frames/dist/client.js

@@ -1,8 +1,6 @@
-import { getOwner, onCleanup, createMemo, runWithOwner, createLoadingBoundary, createOwner, createRenderEffect, sharedConfig, createSignal } from 'solid-js';
+import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig, materializeContainerTrace } 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';
-import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
@@ -65,16 +63,32 @@ function chunkToRecords(chunk) {
           args: chunk.args
         }
       };
+    case "hole":
+      return {
+        [`hole:${chunk.key}`]: {
+          kind: "html",
+          value: chunk.html
+        }
+      };
+    case "attr":
+      return {
+        [`attr:${chunk.key}`]: {
+          kind: "attrs",
+          value: chunk.attrs,
+          removed: chunk.removed
+        }
+      };
     case "complete":
       return {
         ":complete": true
       };
     case "error":
-      return chunk.key ? {
-        [`seg:${chunk.key}:error`]: chunk.error
-      } : {
+      if (!chunk.key) return {
         ":error": chunk.error
       };
+      return {
+        [`${/^lha?:/.test(chunk.key) ? "hole" : "seg"}:${chunk.key}:error`]: chunk.error
+      };
     default:
       return {};
   }
@@ -94,9 +108,7 @@ function createFrameHost(options = {}) {
     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];
-      }
+      clearStreamRecords(store.records);
     }
     Object.assign(store.records, records);
     return true;
@@ -161,7 +173,10 @@ function createFrameHost(options = {}) {
     },
     resolve(ref, frameId) {
       return options.resolve ? options.resolve(ref, frameId) : undefined;
-    }
+    },
+    revive: options.revive,
+    isContainer: options.isContainer,
+    prepareData: options.prepareData
   };
 }
 const FRAME_APPLIED_EVENT = "frame:applied";
@@ -174,8 +189,10 @@ class FrameImpl {
   #store = Object.create(null);
   #appliedRootValue;
   #hasContent = false;
+  #errorNotified = false;
   #revealed = new Set();
   #fallbackShown = new Set();
+  #appliedHoles = new Map();
   #slots;
   #mountedSlots = new Set();
   #slotCleanups = new Map();
@@ -193,10 +210,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;
@@ -257,15 +276,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];
@@ -277,6 +290,13 @@ class FrameImpl {
     }
     this.#flush();
   }
+  #resetStreamState(root) {
+    this.#revealed.clear();
+    this.#fallbackShown.clear();
+    this.#appliedHoles.clear();
+    this.#errorNotified = false;
+    clearStreamRecords(this.#store, root);
+  }
   #flush() {
     if (this.#disposed) return;
     const version = this.#version;
@@ -287,10 +307,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)) {
@@ -299,7 +323,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];
@@ -311,7 +335,24 @@ class FrameImpl {
         }
       }
     }
-    for (const key of Object.keys(this.#store)) {
+    for (const key in this.#store) {
+      const record = this.#store[key];
+      if (!record || this.#appliedHoles.get(key) === record) continue;
+      if (key.startsWith("hole:")) {
+        if (key.endsWith(":error")) {
+          this.#appliedHoles.set(key, record);
+        } else if (this.#applyHole(key.slice(5), record.value)) {
+          this.#appliedHoles.set(key, record);
+          this.#applied(version, "morph");
+        }
+      } else if (key.startsWith("attr:")) {
+        if (this.#applyAttrs(key.slice(5), record.value, record.removed)) {
+          this.#appliedHoles.set(key, record);
+          this.#applied(version, "morph");
+        }
+      }
+    }
+    for (const key in this.#store) {
       if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
       this.#processedAssets.add(key);
       const record = this.#store[key];
@@ -343,6 +384,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;
@@ -398,15 +440,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,
@@ -421,23 +455,16 @@ class FrameImpl {
       } : undefined
     };
     const props = record && record.kind === "slot" ? this.#resolveArgs(occurrence, record.args) : {};
-    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);
@@ -449,9 +476,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);
     }
   }
@@ -461,15 +486,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;
@@ -492,24 +528,15 @@ class FrameImpl {
         }
         props[key] = entry.element;
       } else {
-        props[key] = value;
+        props[key] = host && host.revive ? host.revive(value) : value;
       }
     }
     return props;
   }
   #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);
-    let n = start.nextSibling;
-    while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-      collectRegionElements(n, regions);
-      n = n.nextSibling;
-    }
+    const regions = this.#regionsFor(slotKey);
+    eachInRange(start, slotKey, n => collectRegionElements(n, regions));
   }
   #refArgsUnchanged(occurrence, record) {
     const old = this.#slotArgs.get(occurrence);
@@ -525,11 +552,15 @@ class FrameImpl {
       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 (host && host.isContainer && (host.isContainer(next) || host.isContainer(cache[key]))) {
+          if (next === cache[key]) continue;
+          return false;
+        }
+        if (isAsyncLike(next) || isAsyncLike(cache[key])) return false;
         try {
           if (JSON.stringify(next) === JSON.stringify(cache[key])) continue;
         } catch (e) {
@@ -545,7 +576,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);
@@ -595,11 +626,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() {
@@ -619,11 +647,7 @@ class FrameImpl {
     }
     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();
   }
@@ -644,14 +668,37 @@ class FrameImpl {
       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;
+  #applyHole(marker, html) {
+    if (!this.#hasContent) return false;
+    const open = findLiveTarget(this.#firstContent(), this.#end, n => n.nodeType === COMMENT_NODE && n.data === marker);
+    if (!open) return false;
+    const close = rangeClose(open, "lh:/" + marker.slice(3));
+    if (!close) {
+      return false;
+    }
+    const claim = claimHandlers() ? this.#claimTree : null;
+    reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
+    return true;
+  }
+  #applyAttrs(addr, text, removed) {
+    if (!this.#hasContent) return false;
+    const el = findLiveTarget(this.#firstContent(), this.#end, n => n.nodeType === ELEMENT_NODE && n.getAttribute("data-lha") === addr);
+    if (!el) return false;
+    const parsed = parseFragment(`<i${text}></i>`).firstChild;
+    if (parsed) {
+      for (let i = 0; i < parsed.attributes.length; i++) {
+        const {
+          name,
+          value
+        } = parsed.attributes[i];
+        if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+      }
     }
+    if (removed) for (const name of removed) el.removeAttribute(name);
+    return true;
+  }
+  #clearContent() {
+    removeUntil(this.#parent(), this.#firstContent(), this.#end);
   }
   #claimContent() {
     if (!claimHandlers()) return;
@@ -668,9 +715,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;
@@ -684,12 +729,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);
@@ -738,9 +778,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();
@@ -760,15 +798,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");
@@ -776,9 +829,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;
 }
@@ -827,7 +879,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;
@@ -837,6 +889,20 @@ function rangeClose(start, id) {
   }
   return null;
 }
+function findLiveTarget(n, end, test) {
+  while (n && n !== end) {
+    if (n.nodeType === ELEMENT_NODE) {
+      const fid = isFrameElement(n) ? n.getAttribute(FRAME_ID_ATTR) : null;
+      if (fid === null || fid.includes(".")) {
+        if (test(n)) return n;
+        const found = findLiveTarget(n.firstChild, null, test);
+        if (found) return found;
+      }
+    } else if (test(n)) return n;
+    n = n.nextSibling;
+  }
+  return null;
+}
 function findPlaceholder(n, end, id) {
   while (n && n !== end) {
     if (isPlaceholderStart(n, id)) return n;
@@ -883,6 +949,23 @@ 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 (/^(seg|hole|attr):/.test(key) || key === ":error" || root && key === "") {
+      delete records[key];
+    }
+  }
+}
 function argsEquivalent(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -893,9 +976,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;
@@ -1138,6 +1219,7 @@ async function applyFrameResponse(response, host, options = {}) {
         if (v === undefined) perFrame.set(chunk.id, v = version(chunk.id));
         chunk.version = v;
       } else if (version !== undefined) chunk.version = version;
+      if (chunk.type === "data" && host.prepareData) await host.prepareData();
       host.apply(chunk);
     }
     result = await reader.next();
@@ -1154,7 +1236,7 @@ function parseServerComponent(value, ctx) {
     address: ctx.parse(value[SERVER_COMPONENT_ADDRESS])
   };
 }
-const ServerComponentPlugin = /*#__PURE__*/createPlugin({
+const ServerComponentPlugin = {
   tag: "dom-expressions/server-component",
   test(value) {
     return typeof value === "function" && SERVER_COMPONENT in value;
@@ -1181,12 +1263,10 @@ const ServerComponentPlugin = /*#__PURE__*/createPlugin({
     }
     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;
-  }
+  if (plugins.some(plugin => plugin && plugin.tag === ServerComponentPlugin.tag)) return codec;
   return {
     ...codec,
     plugins: [...plugins, ServerComponentPlugin]
@@ -1258,7 +1338,7 @@ function createServerComponentHandler({
     showing(address, functionId) {
       bindingFor(address, functionId);
       const comp = componentFor(functionId);
-      if ((typeof comp === "function" || typeof comp === "object" && comp !== null) && !comp[COMPONENT_BINDING]) {
+      if (comp && (typeof comp === "function" || typeof comp === "object") && !comp[COMPONENT_BINDING]) {
         comp[COMPONENT_BINDING] = {
           component: comp,
           address
@@ -1303,69 +1383,74 @@ function createServerComponentHandler({
   }
 }
 
-Feature.AggregateError | Feature.BigIntTypedArray;
-const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
-CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
-FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin]);
-function resolveSerializerPlugins(customPlugins) {
-  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
-}
-const JSON_CODEC_DISABLED_FEATURES = 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
-  };
+const STATE = Symbol.for("dom-expressions.container-trace-state");
+const state = globalThis[STATE] || (globalThis[STATE] = {
+  materialized: new WeakMap(),
+  materializedValues: new WeakSet()
+});
+function setContainerTraceMaterializer(fn) {
+  state.materializeTrace = fn;
 }
-function createJSONDeserializer(options) {
-  const refs = new Map();
-  const resolved = resolveCodecOptions(options);
-  return function deserializeJSONChunk(node) {
-    return fromCrossJSON(node, {
-      refs,
-      ...resolved
-    });
-  };
+function materialize(marker) {
+  let value = state.materialized.get(marker.$tr);
+  if (value === undefined) {
+    value = state.materializeTrace(marker);
+    state.materialized.set(marker.$tr, value);
+    if (value !== null && typeof value === "object") state.materializedValues.add(value);
+  }
+  return value;
 }
-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);
-    }
-  };
+function isMaterializedContainer(value) {
+  return value !== null && typeof value === "object" && state.materializedValues.has(value);
+}
+function isContainerTraceMarker(value) {
+  return value != null && typeof value === "object" && value.$tr != null && typeof value.$tr[Symbol.asyncIterator] === "function";
+}
+function reviveContainerTraces(value) {
+  if (!state.materializeTrace || value == null || typeof value !== "object") return value;
+  if (isContainerTraceMarker(value)) return materialize(value);
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) value[i] = reviveContainerTraces(value[i]);
+  } else if (Object.getPrototypeOf(value) === Object.prototype) {
+    for (const key of Object.keys(value)) value[key] = reviveContainerTraces(value[key]);
+  }
+  return value;
 }
 
+setContainerTraceMaterializer(materializeContainerTrace);
+function asyncArg(value) {
+  return value;
+}
 let sharedHost;
+let codec;
+let codecLoading;
+function loadCodec() {
+  return codecLoading ??= import('@solidjs/web/serialization/decode').then(m => {
+    codec = m;
+  });
+}
 const tables = new Map();
+function ensureTable(root) {
+  let table = tables.get(root);
+  if (!table && codec) tables.set(root, table = codec.createJSONDataTable());
+  return table;
+}
 function tableFor(id) {
-  const table = tables.get(id);
-  if (table) return table;
-  for (const [root, t] of tables) if (id.startsWith(root + ".")) return t;
+  if (tables.has(id)) return ensureTable(id);
+  for (const root of tables.keys()) if (id.startsWith(root + ".")) return ensureTable(root);
   return undefined;
 }
 function beginStream(frameId) {
-  tables.set(frameId, createJSONDataTable());
+  tables.set(frameId, undefined);
 }
 function getFrameHost() {
   if (!sharedHost) {
     sharedHost = createFrameHost({
+      prepareData: loadCodec,
       applyData: c => tableFor(c.id)?.apply(c),
-      resolve: (ref, id) => tableFor(id)?.resolve(ref)
+      resolve: (ref, id) => tableFor(id)?.resolve(ref),
+      revive: reviveContainerTraces,
+      isContainer: isMaterializedContainer
     });
   }
   return sharedHost;
@@ -1426,8 +1511,27 @@ 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 (isMaterializedContainer(v)) return v;
+      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() ? {
@@ -1445,6 +1549,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;
@@ -1455,6 +1560,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) {
@@ -1467,13 +1585,13 @@ 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));
         }
@@ -1498,32 +1616,82 @@ 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);
-}
-function followBinding(frame, binding) {
-  createRenderEffect(binding, address => frame.rebind(address));
+  return fn => {
+    if (getOwner()) return fn();
+    streamInvoke = true;
+    try {
+      return runWithOwner(owner, fn);
+    } finally {
+      streamInvoke = false;
+    }
+  };
 }
 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: binding ? binding() : fnId,
+      id,
       slots: slotsFor(props),
       ownerScope: boundaryScope(owner),
-      reveal: revealSeam(owner)
+      reveal: revealSeam(owner),
+      onApply: () => {
+        applied = true;
+        if (release) {
+          release();
+          release = undefined;
+        }
+        setGate && setGate(undefined);
+      }
     });
-    if (binding) followBinding(frame, binding);
+    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();
+const liveOps = new Map();
+const liveAppliers = new Set();
+let livePumped = null;
+function pumpLiveChannel() {
+  const stream = globalThis._$HY?.r?.["sc:live"];
+  if (!stream || stream === livePumped || typeof stream.getReader !== "function") return;
+  livePumped = stream;
+  const reader = stream.getReader();
+  const pump = () => reader.read().then(r => {
+    if (r.done) return;
+    const op = r.value;
+    liveOps.set(`${op.type}:${op.fid || ""}:${op.key || ""}`, op);
+    for (const apply of liveAppliers) apply(op);
+    return pump();
+  });
+  pump().catch(() => {
+  });
+}
 let boundaryIndex = null;
 const isBoundaryId = id => !id.includes(".");
 function indexBoundaries(root) {
@@ -1588,9 +1756,21 @@ function adoptBoundary(host, id, el, props, binding) {
   claimedBoundaries.add(id);
   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;
+    pumpLiveChannel();
     const slotPrefix = `sc:slot:${id}:`;
     for (const key of Object.keys(hy.r)) {
       if (appliedRecords.has(key)) continue;
@@ -1619,8 +1799,31 @@ function adoptBoundary(host, id, el, props, binding) {
       }
     }
   };
+  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;
+  const applyLiveOp = op => {
+    if (op.type === "slot" && op.fid !== id) return;
+    host.apply({
+      ...op,
+      id: address,
+      version: 0
+    });
+  };
+  liveAppliers.add(applyLiveOp);
+  onCleanup(() => {
+    liveAppliers.delete(applyLiveOp);
+    unsubscribe && unsubscribe();
+    if (fr && fr.release) for (const fragId of claimedFragments) fr.release(fragId);
+  });
   drainRecords();
+  for (const op of liveOps.values()) applyLiveOp(op);
   const owner = getOwner();
+  let release;
+  let setGate;
   const frame = createFrame(el, {
     adopt: true,
     host,
@@ -1628,6 +1831,13 @@ function adoptBoundary(host, id, el, props, binding) {
     slots: slotsFor(props),
     ownerScope: boundaryScope(owner),
     reveal: revealSeam(owner),
+    onApply: () => {
+      if (release) {
+        release();
+        release = undefined;
+      }
+      setGate && setGate(undefined);
+    },
     ...{
       recordsPending: () => {
         if (document.readyState === "loading") return true;
@@ -1638,7 +1848,19 @@ function adoptBoundary(host, id, el, props, binding) {
       claimScope: id
     }
   });
-  if (binding) followBinding(frame, binding);
+  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;
 }
@@ -1679,4 +1901,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 };