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

package/frames/dist/server.cjs

@@ -4,6 +4,98 @@ var solidJs = require('solid-js');
 var seroval = require('seroval');
 var web = require('seroval-plugins/web');
 
+const STATE = Symbol.for("dom-expressions.container-trace-state");
+const state = globalThis[STATE] || (globalThis[STATE] = {
+  materialized: new WeakMap(),
+  materializedValues: new WeakSet()
+});
+function setContainerTraceResolver(fn) {
+  state.resolveTrace = fn;
+}
+function isContainerTraced(value) {
+  const resolve = state.resolveTrace;
+  return !!(resolve && value && typeof value === "object" && resolve(value));
+}
+const TRACE = Symbol.for("dom-expressions.container-trace");
+function envelopeContainerTraces(value) {
+  if (!state.resolveTrace || value == null || typeof value !== "object") return value;
+  const trace = state.resolveTrace(value);
+  if (trace) return {
+    [TRACE]: trace
+  };
+  if (Array.isArray(value)) {
+    let out = value;
+    for (let i = 0; i < value.length; i++) {
+      const next = envelopeContainerTraces(value[i]);
+      if (next !== value[i]) {
+        if (out === value) out = value.slice();
+        out[i] = next;
+      }
+    }
+    return out;
+  }
+  if (Object.getPrototypeOf(value) === Object.prototype) {
+    let out = value;
+    for (const key of Object.keys(value)) {
+      const next = envelopeContainerTraces(value[key]);
+      if (next !== value[key]) {
+        if (out === value) out = {
+          ...value
+        };
+        out[key] = next;
+      }
+    }
+    return out;
+  }
+  return value;
+}
+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 parseTrace(value, ctx) {
+  const trace = value[TRACE];
+  return {
+    a: trace.array ? 1 : 0,
+    i: ctx.parse(trace.subscribe())
+  };
+}
+const ContainerTracePlugin = {
+  tag: "dom-expressions/container-trace",
+  test(value) {
+    return value != null && typeof value === "object" && TRACE in value;
+  },
+  parse: {
+    sync() {
+      throw new Error("A reactive container can only be serialized by a streaming serializer.");
+    },
+    async async(value, ctx) {
+      const trace = value[TRACE];
+      return {
+        a: trace.array ? 1 : 0,
+        i: await ctx.parse(trace.subscribe())
+      };
+    },
+    stream: parseTrace
+  },
+  serialize(node, ctx) {
+    return "{$tr:" + ctx.serialize(node.i) + ",$ta:" + node.a + "}";
+  },
+  deserialize(node, ctx) {
+    const iterable = ctx.deserialize(node.i);
+    const marker = {
+      $tr: iterable,
+      $ta: node.a
+    };
+    return state.materializeTrace ? materialize(marker) : marker;
+  }
+};
+
 const runWithHydrationScope = (id, fn) => solidJs.runWithOwner(solidJs.createOwner({
   id
 }), fn);
@@ -11,15 +103,30 @@ const ssrAsyncValue = value => solidJs.createMemo(() => value, {
   serialize: false
 });
 
-const DEFAULT_DISABLED_FEATURES = seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
-const serializeOnlyDisabledFeatures = () => process.env.NODE_ENV === "development" ? 0 : seroval.Feature.ErrorPrototypeStack;
-const HYDRATION_GLOBAL = "_$HY.r";
 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]);
+web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin,
+ContainerTracePlugin]);
 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
+  };
+}
+
+const DEFAULT_DISABLED_FEATURES = seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
+const serializeOnlyDisabledFeatures = () => process.env.NODE_ENV === "development" ? 0 : seroval.Feature.ErrorPrototypeStack;
+const HYDRATION_GLOBAL = "_$HY.r";
 function createSerializer(options) {
   return new seroval.Serializer({
     ...options,
@@ -46,34 +153,6 @@ function createHydrationSerializer({
 function getLocalHeaderScript(id) {
   return seroval.getCrossReferenceHeader(id) + ";";
 }
-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 serializeJSON(value, {
-  onParse,
-  onDone,
-  onError,
-  ...codecOptions
-}) {
-  const resolved = resolveCodecOptions(codecOptions);
-  return seroval.toCrossJSONStream(value, {
-    onParse,
-    onDone,
-    onError,
-    ...resolved,
-    disabledFeatures: resolved.disabledFeatures | serializeOnlyDisabledFeatures()
-  });
-}
 function createJSONSerializer({
   onData,
   onDone,
@@ -260,7 +339,10 @@ class ChunkReader {
 }
 function serializeStream(value, codecOptions) {
   return new ReadableStream({
-    start(controller) {
+    async start(controller) {
+      const {
+        serializeJSON
+      } = await import('@solidjs/web/serialization');
       serializeJSON(value, {
         ...codecOptions,
         onParse(node) {
@@ -347,7 +429,6 @@ function resolveHead(groups) {
     }
     for (const [identity, tags] of byIdentity) {
       if (identity === "title") {
-        if (tags.length > 1) console.warn("Multiple <title> tags in one head group; the last one wins.");
         winners.set(identity, {
           seq: group.seq,
           tags: [tags[tags.length - 1]]
@@ -537,7 +618,6 @@ function registerHeadTags(registry, context, tracking, emitResource, nonce, tags
   for (let i = 0; i < tags.length; i++) {
     const desc = tags[i];
     if (!desc || !HEAD_ELIGIBLE_TAGS.has(desc.tag)) {
-      console.warn(`useHead: ignoring non-head tag`, desc);
       continue;
     }
     const cls = classifyHeadTag(desc);
@@ -589,7 +669,6 @@ function headShellReady(registry, block) {
       } : undefined);
     } catch (err) {
       if (pends(err)) continue;
-      console.warn(`useHead: error evaluating resource tag props`, err);
       parked.splice(i, 1);
       continue;
     }
@@ -630,7 +709,6 @@ function emitHeadResource(registry, context, tracking, emitResource, nonce, desc
       });
       return;
     }
-    console.warn(`useHead: error evaluating resource tag props`, err);
     return;
   }
   const identity = resourceIdentity(desc.tag, props);
@@ -692,7 +770,6 @@ function commitHeadBoundary(registry, boundary, isPendingFragment) {
       try {
         resolved = reg.list();
       } catch (err) {
-        console.warn(`useHead: error evaluating head group membership`, err);
         continue;
       }
       if (!Array.isArray(resolved)) resolved = [resolved];
@@ -700,7 +777,6 @@ function commitHeadBoundary(registry, boundary, isPendingFragment) {
       for (let j = 0; j < resolved.length; j++) {
         const desc = resolved[j];
         if (!desc || !HEAD_ELIGIBLE_TAGS.has(desc.tag)) {
-          console.warn(`useHead: ignoring non-head tag`, desc);
           continue;
         }
         const cls = classifyHeadTag(desc);
@@ -726,12 +802,10 @@ function commitHeadBoundary(registry, boundary, isPendingFragment) {
         } : undefined);
         key = evalHeadValue(desc.key);
       } catch (err) {
-        console.warn(`useHead: error evaluating tag props`, err);
         continue;
       }
       const identity = replaceableIdentity(desc.tag, props, key, "u:" + registry.uniq++);
       if ((identity === "base" || identity === "charset") && registry.shellFlushed) {
-        console.warn(`useHead: <${desc.tag}> (${identity}) registered after shell flush is ignored`);
         continue;
       }
       tags.push({
@@ -813,7 +887,6 @@ function flushHeadFragment(registry, boundary) {
       for (const name in t.props) {
         if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
         if (!HEAD_ATTR_NAME.test(name)) {
-          console.warn(`useHead: ignoring invalid attribute name "${name}"`);
           continue;
         }
         const v = t.props[name];
@@ -831,7 +904,6 @@ function renderHeadAttrHtml(props) {
   for (const name in props) {
     if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
     if (!HEAD_ATTR_NAME.test(name)) {
-      console.warn(`useHead: ignoring invalid attribute name "${name}"`);
       continue;
     }
     const v = props[name];
@@ -891,6 +963,12 @@ function renderToStream(code, options = {}) {
       d();
     }
   };
+  const failRender = err => {
+    try {
+      options.onError ? options.onError(err) : console.error(err);
+    } catch (_) {}
+    abandon();
+  };
   const guardSink = w => ({
     write(payload) {
       if (dead) return;
@@ -987,12 +1065,20 @@ function renderToStream(code, options = {}) {
   const serializeRootAssets = () => {
     if (rootAssetsSerialized) return;
     rootAssetsSerialized = true;
-    serializeFragmentAssets("", tracking.boundaryModules, context);
+    serializeFragmentAssets("", tracking.boundaryModules, context, renderId);
   };
+  let holds = 0;
   const flushEnd = () => {
-    if (!registry.size) {
+    if (!registry.size && !holds) {
       serializeRootAssets();
-      queue(() => queue(() => serializer.flush()));
+      queue(() => queue(() => {
+        if (context.live.end) {
+          const end = context.live.end;
+          context.live.end = null;
+          end();
+        }
+        serializer.flush();
+      }));
     }
   };
   const registry = new Map();
@@ -1053,6 +1139,7 @@ function renderToStream(code, options = {}) {
   solidJs.sharedConfig.context = context = {
     async: true,
     nonce,
+    live: {},
     registerHeadTags(tags) {
       registerHeadTags(headRegistry, context, tracking,
       (markup, gateEntry) => {
@@ -1089,6 +1176,16 @@ function renderToStream(code, options = {}) {
     block(p) {
       if (!firstFlushed) blockingPromises.add(p);
     },
+    hold() {
+      holds++;
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        holds--;
+        if (!holds) queue(flushEnd);
+      };
+    },
     replace(id, payloadFn) {
       if (firstFlushed) return;
       const placeholder = `<!--!$${id}-->`;
@@ -1197,6 +1294,7 @@ function renderToStream(code, options = {}) {
     }
   };
   applyAssetTracking(context, tracking, manifest, noScripts);
+  context.failRender = failRender;
   registerEntryAssets(manifest);
   let html = solidJs.createRoot(d => {
     dispose = d;
@@ -1309,7 +1407,12 @@ function renderToStream(code, options = {}) {
       allSettled(blockingPromises).then(() => {
         scheduleFlush(() => {
           if (dead) return resolve();
-          doShell();
+          try {
+            doShell();
+          } catch (err) {
+            failRender(err);
+            return resolve();
+          }
           if (!shellCompleted) return flush();
           const encoder = new TextEncoder();
           const writer = w.getWriter();
@@ -1366,7 +1469,12 @@ function renderToStream(code, options = {}) {
         function flush() {
           allSettled(blockingPromises).then(() => {
             scheduleFlush(() => {
-              if (!resolveRootHoles() || !headShellReady(headRegistry, p => blockingPromises.add(p))) return flush();
+              try {
+                if (!resolveRootHoles() || !headShellReady(headRegistry, p => blockingPromises.add(p))) return flush();
+              } catch (err) {
+                failRender(err);
+                return resolve(tmp);
+              }
               queue(flushEnd);
             });
           });
@@ -1381,7 +1489,15 @@ function renderToStream(code, options = {}) {
         allSettled(blockingPromises).then(() => {
           scheduleFlush(() => {
             if (dead) return;
-            doShell();
+            try {
+              doShell();
+            } catch (err) {
+              failRender(err);
+              try {
+                w.end();
+              } catch (_) {}
+              return;
+            }
             if (!shellCompleted) return flush();
             buffer = writable = guardSink(w);
             buffer.write(tmp);
@@ -1413,9 +1529,27 @@ function renderToStream(code, options = {}) {
 function buildAsyncWrap(err, node) {
   const p = solidJs.ssrHandleError(err);
   if (!p) return null;
+  if (node.$rw) return {
+    fn: node,
+    p
+  };
   const owner = solidJs.getOwner();
+  const live = solidJs.sharedConfig.context && solidJs.sharedConfig.context.liveHoles;
+  const suppress = node.$lhSuppress || live && (live.suppressed || live.sweeping);
+  if (!owner) {
+    if (suppress) node.$lhSuppress = true;
+    return {
+      fn: node,
+      p
+    };
+  }
+  const fn = () => solidJs.runWithOwner(owner, node);
+  fn.$rw = true;
+  if (suppress) fn.$lhSuppress = true;
+  if (node.$lhSkip) fn.$lhSkip = true;
+  if (node.$lhBinding) fn.$lhBinding = node.$lhBinding;
   return {
-    fn: owner ? () => solidJs.runWithOwner(owner, node) : node,
+    fn,
     p
   };
 }
@@ -1475,6 +1609,326 @@ function ssrGroupSlot(fn, idx) {
     }
   };
 }
+const holePositionCache = new WeakMap();
+function holeContentPositions(t) {
+  let cached = holePositionCache.get(t);
+  if (cached) return cached;
+  const pos = [];
+  const openOff = [];
+  const closeOff = [];
+  let inTag = false;
+  let quote = "";
+  let curOpen = null;
+  let scanningName = false;
+  for (let i = 0; i < t.length; i++) {
+    const seg = t[i];
+    let close = -1;
+    const openAtStart = inTag;
+    let reopened = false;
+    for (let j = 0; j < seg.length; j++) {
+      const ch = seg[j];
+      if (quote) {
+        if (ch === quote) quote = "";
+      } else if (inTag) {
+        if (scanningName && (ch === " " || ch === "\t" || ch === "\n" || ch === ">" || ch === "/")) {
+          scanningName = false;
+          curOpen = {
+            seg: i,
+            off: j
+          };
+        }
+        if (ch === '"' || ch === "'") quote = ch;else if (ch === ">") {
+          inTag = false;
+          if (openAtStart && !reopened && close === -1) close = j;
+          curOpen = null;
+        }
+      } else if (ch === "<") {
+        inTag = true;
+        scanningName = true;
+        reopened = true;
+        curOpen = null;
+      }
+    }
+    if (inTag && scanningName) {
+      scanningName = false;
+      curOpen = {
+        seg: i,
+        off: seg.length
+      };
+    }
+    closeOff.push(close);
+    openOff.push(inTag && curOpen && curOpen.seg === i ? curOpen.off : -1);
+    if (i < t.length - 1) pos.push(!inTag);
+  }
+  cached = {
+    pos,
+    openOff,
+    closeOff
+  };
+  holePositionCache.set(t, cached);
+  return cached;
+}
+function createLiveHoles(sink, scoped) {
+  let nextId = 0;
+  const stamp = typeof solidJs.creationStamp === "function" ? solidJs.creationStamp : () => 0;
+  const inScope = scoped && typeof solidJs.inServerComponentScope === "function" ? solidJs.inServerComponentScope : null;
+  const stripMarkers = html => html.replace(/<!--lh:\/?\d+-->/g, "");
+  function resolveHoleValue(hole) {
+    const result = {
+      t: [""],
+      h: [],
+      p: []
+    };
+    try {
+      resolveSSRNode(hole(), result);
+    } catch (err) {
+      const wrap = buildAsyncWrap(err, hole);
+      if (!wrap) throw err;
+      result.h.push(wrap.fn);
+      result.p.push(wrap.p);
+      result.t.push("");
+    }
+    return result;
+  }
+  function closeChildren(b) {
+    for (const c of b.children) {
+      c.closed = true;
+      if (c.key) sink.closeBinding(c.key);
+      closeChildren(c);
+    }
+    b.children.length = 0;
+  }
+  const engine = {
+    suppressed: 0,
+    sweeping: false,
+    parent: null,
+    recordStamp: 0,
+    gateHit: false,
+    content(hole) {
+      if (hole.$lhSuppress) {
+        const r = {
+          t: [""],
+          h: [],
+          p: []
+        };
+        engine.suppressed++;
+        try {
+          try {
+            resolveSSRNode(hole(), r);
+          } catch (err) {
+            const wrap = buildAsyncWrap(err, hole);
+            if (wrap) {
+              r.h.push(wrap.fn);
+              r.p.push(wrap.p);
+              r.t.push("");
+            }
+          }
+        } finally {
+          engine.suppressed--;
+        }
+        const b = hole.$lhBinding;
+        if (b && !b.closed && !r.h.length && !engine.sweeping) {
+          b.last = stripMarkers(r.t[0]);
+        }
+        return r.h.length ? r : r.t[0];
+      }
+      if (engine.suppressed || engine.sweeping) return null;
+      if (hole.$lhSkip) return null;
+      if (inScope && !inScope()) return null;
+      const recordsBefore = engine.recordStamp;
+      const ownersBefore = stamp();
+      const owner = solidJs.getOwner();
+      const b = {
+        key: null,
+        children: [],
+        last: null,
+        closed: false,
+        sweep() {
+          if (b.closed) return;
+          const prevSweeping = engine.sweeping;
+          engine.sweeping = true;
+          engine.gateHit = false;
+          const sweepOwnersBefore = stamp();
+          let res;
+          try {
+            res = owner ? solidJs.runWithOwner(owner, () => resolveHoleValue(hole)) : resolveHoleValue(hole);
+          } catch (err) {
+            b.closed = true;
+            sink.closeBinding(b.key);
+            sink.error(b.key, String(err && err.message || err));
+            return;
+          } finally {
+            engine.sweeping = prevSweeping;
+          }
+          if (engine.gateHit || stamp() !== sweepOwnersBefore) {
+            b.closed = true;
+            sink.closeBinding(b.key);
+            return;
+          }
+          if (res.h.length) return;
+          const html = res.t[0];
+          if (b.last === null || html === b.last) return;
+          b.last = html;
+          closeChildren(b);
+          sink.hole(b.key, html);
+        }
+      };
+      if (engine.parent) engine.parent.children.push(b);
+      const prevParent = engine.parent;
+      engine.parent = b;
+      let value;
+      let escalated = null;
+      try {
+        value = hole();
+      } catch (err) {
+        const wrap = buildAsyncWrap(err, hole);
+        if (!wrap) {
+          engine.parent = prevParent;
+          closeChildren(b);
+          return "";
+        }
+        escalated = wrap;
+      }
+      if (!escalated && (typeof value === "function" && value.$lhSkip || value !== null && typeof value === "object" && value.$slot)) {
+        engine.parent = prevParent;
+        const r = {
+          t: [""],
+          h: [],
+          p: []
+        };
+        engine.suppressed++;
+        try {
+          resolveSSRNode(value, r);
+        } finally {
+          engine.suppressed--;
+        }
+        return r.h.length ? r : r.t[0];
+      }
+      let res;
+      if (escalated) {
+        closeChildren(b);
+        escalated.fn.$lhSuppress = true;
+        escalated.fn.$lhBinding = b;
+        res = {
+          t: ["", ""],
+          h: [escalated.fn],
+          p: [escalated.p]
+        };
+      } else {
+        res = {
+          t: [""],
+          h: [],
+          p: []
+        };
+        try {
+          resolveSSRNode(value, res);
+        } catch (_) {
+          engine.parent = prevParent;
+          closeChildren(b);
+          return "";
+        }
+      }
+      engine.parent = prevParent;
+      if (engine.recordStamp !== recordsBefore || stamp() !== ownersBefore) {
+        return res.h.length ? res : res.t[0];
+      }
+      const id = nextId++;
+      const key = b.key = "lh:" + id;
+      const open = `<!--lh:${id}-->`;
+      const close = `<!--lh:/${id}-->`;
+      if (!res.h.length) {
+        b.last = stripMarkers(res.t[0]);
+        sink.openBinding(key, b);
+        return open + res.t[0] + close;
+      }
+      const t = res.t.slice();
+      t[0] = open + t[0];
+      t[t.length - 1] += close;
+      sink.openBinding(key, b);
+      return {
+        t,
+        h: res.h,
+        p: res.p
+      };
+    },
+    mint() {
+      return nextId++;
+    },
+    active() {
+      return !inScope || inScope();
+    },
+    attr(cap) {
+      const owner = solidJs.getOwner();
+      const b = {
+        key: "lha:" + cap.id,
+        children: [],
+        last: cap.base,
+        closed: false,
+        sweep() {
+          if (b.closed) return;
+          const prevSweeping = engine.sweeping;
+          engine.sweeping = true;
+          engine.gateHit = false;
+          const sweepOwnersBefore = stamp();
+          let html = "";
+          try {
+            let group = null;
+            let groupVal = null;
+            const run = () => {
+              for (const part of cap.parts) {
+                if (typeof part === "string") {
+                  html += part;
+                  continue;
+                }
+                let v;
+                if (part.g) {
+                  if (group !== part.g) {
+                    group = part.g;
+                    groupVal = part.g();
+                  }
+                  v = groupVal[part.i];
+                } else {
+                  v = part.f();
+                }
+                const vt = typeof v;
+                if (vt === "string" || vt === "number") html += v;
+              }
+            };
+            owner ? solidJs.runWithOwner(owner, run) : run();
+          } catch (err) {
+            if (solidJs.ssrHandleError(err, true)) return;
+            b.closed = true;
+            sink.closeBinding(b.key);
+            sink.error("lha:" + cap.id, String(err && err.message || err));
+            return;
+          } finally {
+            engine.sweeping = prevSweeping;
+          }
+          if (engine.gateHit || stamp() !== sweepOwnersBefore) {
+            b.closed = true;
+            sink.closeBinding(b.key);
+            return;
+          }
+          if (html === b.last) return;
+          const before = attrNames(b.last);
+          const after = attrNames(html);
+          const removed = before.filter(n => !after.includes(n));
+          b.last = html;
+          sink.attr(String(cap.id), html, removed);
+        }
+      };
+      sink.openBinding(b.key, b);
+    }
+  };
+  return engine;
+}
+function attrNames(text) {
+  const names = [];
+  const re = /(?:^|\s)([^\s=/>"']+)(?:="[^"]*")?/g;
+  let m;
+  while (m = re.exec(text)) names.push(m[1]);
+  return names;
+}
 function ssr(t) {
   const len = arguments.length;
   if (len === 1) return {
@@ -1485,13 +1939,54 @@ function ssr(t) {
   let lastGroup = null;
   let lastGroupVal = null;
   let lastGroupIdx = 0;
+  const live = solidJs.sharedConfig.context && solidJs.sharedConfig.context.liveHoles;
+  const hp = live ? holeContentPositions(t) : null;
+  let lastOpen = null;
+  let cap = null;
+  if (live && hp.openOff[0] >= 0) lastOpen = {
+    r: null,
+    seg: -1,
+    off: hp.openOff[0]
+  };
+  const captureStart = () => {
+    if (cap) return true;
+    if (!lastOpen || live.suppressed || live.sweeping || !live.active()) return false;
+    if (lastOpen.r !== result || result !== null && lastOpen.seg !== result.t.length - 1) {
+      return false;
+    }
+    const id = live.mint();
+    const inject = ` data-lha="${id}"`;
+    let prefix;
+    if (result === null) {
+      s = s.slice(0, lastOpen.off) + inject + s.slice(lastOpen.off);
+      prefix = s.slice(lastOpen.off + inject.length);
+    } else {
+      const seg = result.t[lastOpen.seg];
+      result.t[lastOpen.seg] = seg.slice(0, lastOpen.off) + inject + seg.slice(lastOpen.off);
+      prefix = result.t[lastOpen.seg].slice(lastOpen.off + inject.length);
+    }
+    cap = {
+      id,
+      parts: [prefix],
+      base: prefix
+    };
+    return true;
+  };
   for (let i = 1; i < len; i++) {
     const hole = arguments[i];
     const ht = typeof hole;
     if (ht === "string") {
       if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+      if (cap) {
+        cap.parts.push(hole);
+        cap.base += hole;
+      }
     } else if (ht === "number") {
       if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+      if (cap) {
+        cap.parts.push("" + hole);
+        cap.base += hole;
+      }
     } else if (hole == null || ht === "boolean") ; else if (ht === "function" && hole.$g) {
       let value;
       let hasValue = false;
@@ -1515,7 +2010,14 @@ function ssr(t) {
         if (Array.isArray(lastGroupVal)) {
           value = lastGroupVal[lastGroupIdx++];
           hasValue = true;
+          if (live && !hp.pos[i - 1] && captureStart()) {
+            cap.parts.push({
+              g: hole,
+              i: lastGroupIdx - 1
+            });
+          }
         } else {
+          cap = null;
           result.h.push(ssrGroupSlot(lastGroupVal.fn, lastGroupIdx++));
           result.p.push(lastGroupVal.p);
           result.t.push("");
@@ -1525,6 +2027,7 @@ function ssr(t) {
         const vt = typeof value;
         if (vt === "string" || vt === "number") {
           if (result === null) s += value;else result.t[result.t.length - 1] += value;
+          if (cap && !hp.pos[i - 1]) cap.base += value;
         } else if (value == null || vt === "boolean") ; else if (result !== null) {
           resolveSSRNode(value, result);
         } else {
@@ -1542,19 +2045,67 @@ function ssr(t) {
           }
         }
       }
-    } else if (result !== null) {
-      resolveSSRNode(hole, result);
     } else if (ht === "function") {
-      const r = tryResolveFunctionHole(hole);
-      if (typeof r === "string") s += r;else {
-        result = {
-          t: [s],
-          h: [],
-          p: []
-        };
-        s = "";
-        appendResolvedNode(result, r);
+      let liveNode = null;
+      if (live && hp.pos[i - 1] && (liveNode = live.content(hole)) !== null) {
+        if (typeof liveNode === "string") {
+          if (result === null) s += liveNode;else result.t[result.t.length - 1] += liveNode;
+        } else {
+          if (result === null) {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+          }
+          resolveSSRNode(liveNode, result);
+        }
+      } else if (result !== null) {
+        const inTag = live && !hp.pos[i - 1];
+        const capturing = inTag && captureStart();
+        const li = capturing ? result.t.length - 1 : 0;
+        const before = capturing ? result.t[li].length : 0;
+        if (live) live.suppressed++;
+        try {
+          resolveSSRNode(hole, result);
+        } finally {
+          if (live) live.suppressed--;
+        }
+        if (capturing) {
+          if (result.t.length - 1 === li) {
+            cap.base += result.t[li].slice(before);
+            cap.parts.push({
+              f: hole
+            });
+          } else {
+            cap = null;
+          }
+        }
+      } else {
+        const capturing = live && !hp.pos[i - 1] && captureStart();
+        const r = tryResolveFunctionHole(hole);
+        if (typeof r === "string") {
+          s += r;
+          if (capturing) {
+            cap.base += r;
+            cap.parts.push({
+              f: hole
+            });
+          }
+        } else {
+          if (capturing) cap = null;
+          result = {
+            t: [s],
+            h: [],
+            p: []
+          };
+          s = "";
+          appendResolvedNode(result, r);
+        }
       }
+    } else if (result !== null) {
+      resolveSSRNode(hole, result);
     } else {
       const r = tryResolveString(hole);
       if (typeof r === "string") {
@@ -1570,6 +2121,32 @@ function ssr(t) {
       }
     }
     const next = t[i];
+    if (live) {
+      if (cap) {
+        const co = hp.closeOff[i];
+        if (co >= 0) {
+          const tail = next.slice(0, co);
+          cap.parts.push(tail);
+          cap.base += tail;
+          live.attr(cap);
+          cap = null;
+        } else {
+          cap.parts.push(next);
+          cap.base += next;
+        }
+      }
+      if (hp.openOff[i] >= 0) {
+        lastOpen = result === null ? {
+          r: null,
+          seg: -1,
+          off: s.length + hp.openOff[i]
+        } : {
+          r: result,
+          seg: result.t.length - 1,
+          off: result.t[result.t.length - 1].length + hp.openOff[i]
+        };
+      }
+    }
     if (result === null) s += next;else result.t[result.t.length - 1] += next;
   }
   if (result === null) return {
@@ -1705,10 +2282,10 @@ function renderHeadAssets(emittedAssets, inlineStyles, nonce) {
   }
   return head;
 }
-function serializeFragmentAssets(key, boundaryModules, context) {
+function serializeFragmentAssets(key, boundaryModules, context, name = key) {
   const map = boundaryModules.get(key);
   if (!map || !Object.keys(map).length) return;
-  context.serialize(key + "_assets", map);
+  context.serialize(name + "_assets", map);
 }
 function propagateBoundaryStyles(childKey, parentKey, tracking) {
   const childStyles = tracking.getBoundaryStyles(childKey);
@@ -1802,7 +2379,6 @@ function tryResolveString(node) {
       merge: node
     };
     if (node.t === undefined) {
-      console.warn(`Unrecognized value. Skipped inserting`, node);
       return "";
     }
     return Array.isArray(node.t) ? node.t[0] : node.t;
@@ -1827,13 +2403,19 @@ function resolveSSRNode(node, result = {
   if (t === "string" || t === "number") {
     result.t[result.t.length - 1] += node;
   } else if (node == null || t === "boolean") ; else if (Array.isArray(node)) {
-    let prevNonObj = false;
-    for (let i = 0, len = node.length; i < len; i++) {
-      const item = node[i];
-      const itemNonObj = item !== null && typeof item !== "object";
-      if (!top && prevNonObj && itemNonObj) result.t[result.t.length - 1] += `<!--!$-->`;
-      prevNonObj = itemNonObj;
-      resolveSSRNode(item, result);
+    const slotLive = node.$slot && solidJs.sharedConfig.context && solidJs.sharedConfig.context.liveHoles;
+    if (slotLive) slotLive.suppressed++;
+    try {
+      let prevNonObj = false;
+      for (let i = 0, len = node.length; i < len; i++) {
+        const item = node[i];
+        const itemNonObj = item !== null && typeof item !== "object";
+        if (!top && prevNonObj && itemNonObj) result.t[result.t.length - 1] += `<!--!$-->`;
+        prevNonObj = itemNonObj;
+        resolveSSRNode(item, result);
+      }
+    } finally {
+      if (slotLive) slotLive.suppressed--;
     }
   } else if (t === "object") {
     if (node.h) {
@@ -1845,16 +2427,22 @@ function resolveSSRNode(node, result = {
       }
     } else if (node.t !== undefined) {
       result.t[result.t.length - 1] += node.t;
-    } else console.warn(`Unrecognized value. Skipped inserting`, node);
+    } else ;
   } else if (t === "function") {
-    try {
-      resolveSSRNode(node(), result);
-    } catch (err) {
-      const wrap = buildAsyncWrap(err, node);
-      if (wrap) {
-        result.h.push(wrap.fn);
-        result.p.push(wrap.p);
-        result.t.push("");
+    const live = solidJs.sharedConfig.context && solidJs.sharedConfig.context.liveHoles;
+    let liveNode = null;
+    if (live && (liveNode = live.content(node)) !== null) {
+      if (typeof liveNode === "string") result.t[result.t.length - 1] += liveNode;else resolveSSRNode(liveNode, result);
+    } else {
+      try {
+        resolveSSRNode(node(), result);
+      } catch (err) {
+        const wrap = buildAsyncWrap(err, node);
+        if (wrap) {
+          result.h.push(wrap.fn);
+          result.p.push(wrap.p);
+          result.t.push("");
+        }
       }
     }
   }
@@ -1889,7 +2477,7 @@ function parseServerComponent(value, ctx) {
     address: ctx.parse(value[SERVER_COMPONENT_ADDRESS])
   };
 }
-const ServerComponentPlugin = /*#__PURE__*/seroval.createPlugin({
+const ServerComponentPlugin = {
   tag: "dom-expressions/server-component",
   test(value) {
     return typeof value === "function" && SERVER_COMPONENT in value;
@@ -1913,18 +2501,17 @@ const ServerComponentPlugin = /*#__PURE__*/seroval.createPlugin({
     ctx.deserialize(node.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;
-  }
+  if (plugins.some(plugin => plugin && plugin.tag === ServerComponentPlugin.tag)) return codec;
   return {
     ...codec,
     plugins: [...plugins, ServerComponentPlugin]
   };
 }
 
+const scopeStamp = typeof solidJs.creationStamp === "function" ? solidJs.creationStamp : () => 0;
 function serverOwned(render) {
   return solidJs.NoHydration ? solidJs.NoHydration({
     get children() {
@@ -2149,6 +2736,26 @@ function createFrameSink(emit, frame) {
         html
       });
     },
+    hole(key, html) {
+      emit({
+        type: "hole",
+        id,
+        version,
+        key,
+        html
+      });
+    },
+    attr(key, attrs, removed) {
+      const chunk = {
+        type: "attr",
+        id,
+        version,
+        key,
+        attrs
+      };
+      if (removed && removed.length) chunk.removed = removed;
+      emit(chunk);
+    },
     openBinding(key, b) {
       bindings.set(key, b);
     },
@@ -2180,6 +2787,7 @@ function renderServerComponent(component, options = {}) {
       if (ctx) {
         ctx.commit = sink.commit;
         ctx.commitEpoch = () => sink.epoch;
+        ctx.liveHoles = createLiveHoles(sink);
       }
       return serverComponentScope(() => component(props));
     };
@@ -2240,7 +2848,8 @@ function frameStream(makeCode, options) {
 }
 function slotRange(occurrence) {
   return {
-    t: `<!--slot:${occurrence}:start--><!--slot:${occurrence}:end-->`
+    t: `<!--slot:${occurrence}:start--><!--slot:${occurrence}:end-->`,
+    $slot: true
   };
 }
 const OCCURRENCE_UNSAFE = /[^A-Za-z0-9_.-]/g;
@@ -2288,14 +2897,28 @@ function tapFirstYield(iterable) {
     }
   };
 }
+function suppressedFill(render) {
+  const live = solidJs.sharedConfig.context && solidJs.sharedConfig.context.liveHoles;
+  if (!live) return render();
+  live.suppressed++;
+  try {
+    return render();
+  } finally {
+    live.suppressed--;
+  }
+}
 function createDocumentSlotProps(clientProps, frameId) {
   const counts = Object.create(null);
   const getters = new Map();
-  const range = (occurrence, content) => [{
-    t: `<!--slot:${occurrence}:start-->`
-  }, content, {
-    t: `<!--slot:${occurrence}:end-->`
-  }];
+  const range = (occurrence, content) => {
+    const r = [{
+      t: `<!--slot:${occurrence}:start-->`
+    }, content, {
+      t: `<!--slot:${occurrence}:end-->`
+    }];
+    r.$slot = true;
+    return r;
+  };
   const zoneOwner = solidJs.getOwner ? solidJs.getOwner() : null;
   const scoped = (occurrence, render) => {
     const id = `sc-${frameId}-${occurrence}-`;
@@ -2318,27 +2941,68 @@ function createDocumentSlotProps(clientProps, frameId) {
       if (!fn) {
         fn = (...callArgs) => {
           if (callArgs.length === 0 || callArgs[0] === undefined) {
-            return scoped(prop, () => {
+            return suppressedFill(() => scoped(prop, () => {
               const value = clientProps[prop];
               return range(prop, typeof value === "function" ? value() : value);
-            });
+            }));
           }
           const raw = callArgs[0];
           const occurrence = occurrenceId(prop, raw, counts);
           const slot = clientProps[prop];
           if (typeof slot !== "function") return range(occurrence, undefined);
           const resolved = {};
+          const liveArgs = solidJs.sharedConfig.context && solidJs.sharedConfig.context.live && solidJs.sharedConfig.context.live.args;
           const vals = {};
+          const evals = {};
+          const states = {};
+          const minted = {};
           for (const key of Object.keys(raw)) {
             if (key === "$key") continue;
-            let value = raw[key];
-            for (let d = 0; typeof value === "function" && d < 16; d++) value = value();
+            const desc = Object.getOwnPropertyDescriptor(raw, key);
+            let evaluate = null;
+            let value;
+            if (desc.get) {
+              const get = desc.get;
+              evaluate = () => unwrapThunks(get.call(raw));
+            } else {
+              value = desc.value;
+              if (typeof value === "function") {
+                const fn = value;
+                evaluate = () => unwrapThunks(fn);
+              }
+            }
+            if (evaluate) {
+              evals[key] = evaluate;
+              const stampBefore = scopeStamp();
+              try {
+                value = evaluate();
+                states[key] = {
+                  settled: true,
+                  last: value
+                };
+              } catch (err) {
+                const blocked = solidJs.ssrHandleError && solidJs.ssrHandleError(err);
+                if (!blocked) throw err;
+                const state = states[key] = {
+                  settled: false,
+                  last: undefined
+                };
+                value = retryArgUntilSettled(evaluate, blocked, key, occurrence, v => {
+                  state.settled = true;
+                  state.last = v;
+                  if (liveArgs) liveArgs.commit();
+                });
+              }
+              if (scopeStamp() !== stampBefore) minted[key] = true;
+            }
             vals[key] = value;
           }
           const regions = [];
           for (const key of Object.keys(vals)) {
             const value = vals[key];
-            if (isServerContent(value)) {
+            if (isContainerTraced(value)) {
+              resolved[key] = value;
+            } else if (isServerContent(value)) {
               const childId = `${frameId}.${occurrence}.${key}`;
               const region = {
                 key,
@@ -2377,7 +3041,7 @@ function createDocumentSlotProps(clientProps, frameId) {
               resolved[key] = value;
             }
           }
-          const out = scoped(occurrence, () => range(occurrence, slot(resolved)));
+          const out = suppressedFill(() => scoped(occurrence, () => range(occurrence, slot(resolved))));
           const unused = regions.filter(r => !r.used);
           if (solidJs.sharedConfig.context) {
             const args = {};
@@ -2390,17 +3054,33 @@ function createDocumentSlotProps(clientProps, frameId) {
                 };
                 continue;
               }
-              if (isServerContent(value)) continue;
-              args[key] = value;
+              if (!isContainerTraced(value) && isServerContent(value)) continue;
+              args[key] = envelopeContainerTraces(value);
             }
-            solidJs.sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
+            solidJs.sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, {
+              ...args
+            });
             for (const region of unused) {
               region.locked = true;
               solidJs.sharedConfig.context.serialize(`sc:region:${region.childId}`, resolveRegionHtml(solidJs.sharedConfig.context, region.value));
             }
+            if (liveArgs) {
+              for (const key of Object.keys(evals)) {
+                if (regions.some(r => r.key === key)) continue;
+                if (minted[key]) continue;
+                const ledgerKey = `${frameId}:${occurrence}:${key}`;
+                openArgBinding(liveArgs, ledgerKey, occurrence, key, evals[key], states[key], value => {
+                  args[key] = envelopeContainerTraces(value);
+                  liveArgs.slot(frameId, occurrence, {
+                    ...args
+                  });
+                });
+              }
+            }
           }
           return out;
         };
+        fn.$lhSkip = true;
         getters.set(prop, fn);
       }
       return fn;
@@ -2414,6 +3094,113 @@ function frameElementOpen(id) {
   return `<${FRAME_TAG} ${FRAME_ID_ATTR}="${escaped}" style="display:contents">`;
 }
 const FRAME_ELEMENT_CLOSE = `</${FRAME_TAG}>`;
+function armDocumentLiveHoles(ctx) {
+  if (!ctx || ctx.liveHoles !== undefined) return;
+  const live = ctx.live;
+  if (live && live.holes !== undefined) {
+    ctx.liveHoles = live.holes;
+    if (live.holes) {
+      ctx.commit = live.commit;
+      ctx.commitEpoch = live.commitEpoch;
+    }
+    return;
+  }
+  if (!live || !ctx.async || ctx.noHydrate || !ctx.serialize || typeof ReadableStream !== "function") {
+    ctx.liveHoles = null;
+    if (live) live.holes = null;
+    return;
+  }
+  const bindings = new Map();
+  let epoch = 0;
+  let sweepScheduled = false;
+  let closed = false;
+  const sweep = () => {
+    epoch++;
+    for (const b of [...bindings.values()]) {
+      try {
+        b.sweep();
+      } catch (_) {
+      }
+    }
+  };
+  const scheduleSweep = () => {
+    if (closed || sweepScheduled || !bindings.size) return;
+    sweepScheduled = true;
+    queueMicrotask(() => {
+      sweepScheduled = false;
+      if (!closed) sweep();
+    });
+  };
+  let channel;
+  ctx.serialize("sc:live", new ReadableStream({
+    start(c) {
+      channel = c;
+    }
+  }));
+  const push = op => {
+    if (!closed) channel.enqueue(op);
+  };
+  ctx.liveHoles = live.holes = createLiveHoles({
+    openBinding(key, b) {
+      bindings.set(key, b);
+    },
+    closeBinding(key) {
+      bindings.delete(key);
+    },
+    hole(key, html) {
+      push({
+        type: "hole",
+        key,
+        html
+      });
+    },
+    attr(key, attrs, removed) {
+      const op = {
+        type: "attr",
+        key,
+        attrs
+      };
+      if (removed && removed.length) op.removed = removed;
+      push(op);
+    },
+    error(key, error) {
+      push({
+        type: "error",
+        key,
+        error
+      });
+    },
+    commit: scheduleSweep,
+    get epoch() {
+      return epoch;
+    }
+  }, true);
+  ctx.commit = live.commit = scheduleSweep;
+  ctx.commitEpoch = live.commitEpoch = () => epoch;
+  live.args = {
+    openBinding(key, b) {
+      bindings.set(key, b);
+    },
+    closeBinding(key) {
+      bindings.delete(key);
+    },
+    slot(fid, occurrence, args) {
+      push({
+        type: "slot",
+        fid,
+        key: occurrence,
+        args
+      });
+    },
+    commit: scheduleSweep
+  };
+  live.end = () => {
+    if (closed) return;
+    if (bindings.size) sweep();
+    closed = true;
+    channel.close();
+  };
+}
 function frameTransformDirectResult(value, {
   id,
   args
@@ -2424,6 +3211,7 @@ function frameTransformDirectResult(value, {
     t: frameElementOpen(id)
   },
   serverOwned(() => {
+    armDocumentLiveHoles(solidJs.sharedConfig.context);
     const slotProps = createDocumentSlotProps(props, id);
     return serverComponentScope(() => component(slotProps));
   }), {
@@ -2487,60 +3275,48 @@ function retryArgUntilSettled(evaluate, blocked, key, occurrence, onSettle) {
     blocked.then(retry, retry);
   });
 }
-function openArgBinding(sink, ctx, occurrence, key, evaluate, args, state) {
+function openArgBinding(sink, ledgerKey, occurrence, key, evaluate, state, emit) {
   const owner = solidJs.getOwner();
-  const ledgerKey = `${occurrence}:${key}`;
-  const reEmit = value => {
-    const ref = `arg:${occurrence}:${key}@${sink.nextArgRef(ledgerKey)}`;
-    sink.mintRef(ref);
-    ctx.serialize(ref, value);
-    args[key] = {
-      $ref: ref
-    };
-    sink.slot(occurrence, {
-      ...args
-    });
-  };
-  const binding = {
+  sink.openBinding(ledgerKey, {
     sweep() {
       if (!state.settled) return;
       let value;
+      const stampBefore = scopeStamp();
       try {
         value = owner ? solidJs.runWithOwner(owner, evaluate) : evaluate();
       } catch (err) {
         const blocked = solidJs.ssrHandleError && solidJs.ssrHandleError(err);
         if (!blocked) {
           sink.closeBinding(ledgerKey);
-          reEmit(Promise.reject(err instanceof Error ? err : new Error(String(err))));
+          emit(Promise.reject(err instanceof Error ? err : new Error(String(err))));
+          return;
+        }
+        if (scopeStamp() !== stampBefore) {
+          sink.closeBinding(ledgerKey);
           return;
         }
         state.settled = false;
-        reEmit(retryArgUntilSettled(evaluate, blocked, key, occurrence, v => {
+        emit(retryArgUntilSettled(evaluate, blocked, key, occurrence, v => {
           state.settled = true;
           state.last = v;
           sink.commit();
         }));
         return;
       }
+      if (scopeStamp() !== stampBefore) {
+        sink.closeBinding(ledgerKey);
+        return;
+      }
       if (value === state.last) return;
       state.last = value;
       if (isServerContent(value)) {
         sink.closeBinding(ledgerKey);
-        reEmit(Promise.reject(contentArgError(key, occurrence)));
+        emit(Promise.reject(contentArgError(key, occurrence)));
         return;
       }
-      const t = typeof value;
-      if (value == null || t === "string" || t === "number" || t === "boolean") {
-        args[key] = value;
-        sink.slot(occurrence, {
-          ...args
-        });
-      } else {
-        reEmit(value);
-      }
+      emit(value);
     }
-  };
-  sink.openBinding(ledgerKey, binding);
+  });
 }
 function createSlotProps(sink, frame) {
   const counts = Object.create(null);
@@ -2558,6 +3334,17 @@ function createSlotProps(sink, frame) {
           if (callArgs.length === 0 || callArgs[0] === undefined) {
             return slotRange(prop);
           }
+          const live = solidJs.sharedConfig.context && solidJs.sharedConfig.context.liveHoles;
+          if (live) {
+            if (live.sweeping) {
+              live.gateHit = true;
+              return {
+                t: "",
+                $slot: true
+              };
+            }
+            live.recordStamp++;
+          }
           const raw = callArgs[0];
           const occurrence = occurrenceId(prop, raw, counts);
           const args = {};
@@ -2576,6 +3363,7 @@ function createSlotProps(sink, frame) {
               let evaluate = null;
               let value;
               let state = null;
+              const stampBefore = scopeStamp();
               try {
                 if (desc.get) {
                   const get = desc.get;
@@ -2603,6 +3391,7 @@ function createSlotProps(sink, frame) {
                   sink.commit();
                 });
               }
+              const mintedEval = scopeStamp() !== stampBefore;
               const t = typeof value;
               if (value == null || t === "string" || t === "number" || t === "boolean") {
                 args[key] = value;
@@ -2610,7 +3399,7 @@ function createSlotProps(sink, frame) {
                   settled: true,
                   last: value
                 };
-              } else if (isServerContent(value)) {
+              } else if (!isContainerTraced(value) && isServerContent(value)) {
                 const resolved = ctx.resolve(value);
                 if (resolved.h.length) {
                   throw new Error("Async server content in a slot arg needs a boundary (arg '" + key + "' of " + occurrence + "). Wrap the async read in a <Suspense>, or move it above the slot.");
@@ -2621,7 +3410,7 @@ function createSlotProps(sink, frame) {
                 };
               } else {
                 const ref = `arg:${occurrence}:${key}`;
-                ctx.serialize(ref, value);
+                ctx.serialize(ref, envelopeContainerTraces(value));
                 args[key] = {
                   $ref: ref
                 };
@@ -2630,7 +3419,7 @@ function createSlotProps(sink, frame) {
                   last: value
                 };
               }
-              if (evaluate && state) opened.push({
+              if (evaluate && state && !mintedEval) opened.push({
                 key,
                 evaluate,
                 state
@@ -2644,10 +3433,28 @@ function createSlotProps(sink, frame) {
           });
           const ctx = solidJs.sharedConfig.context;
           for (const b of opened) {
-            openArgBinding(sink, ctx, occurrence, b.key, b.evaluate, args, b.state);
+            const key = b.key;
+            const ledgerKey = `${occurrence}:${key}`;
+            openArgBinding(sink, ledgerKey, occurrence, key, b.evaluate, b.state, value => {
+              const t = typeof value;
+              if (value == null || t === "string" || t === "number" || t === "boolean") {
+                args[key] = value;
+              } else {
+                const ref = `arg:${occurrence}:${key}@${sink.nextArgRef(ledgerKey)}`;
+                sink.mintRef(ref);
+                ctx.serialize(ref, envelopeContainerTraces(value));
+                args[key] = {
+                  $ref: ref
+                };
+              }
+              sink.slot(occurrence, {
+                ...args
+              });
+            });
           }
           return slotRange(occurrence);
         };
+        fn.$lhSkip = true;
         getters.set(prop, fn);
       }
       return fn;
@@ -2679,16 +3486,27 @@ function serverComponentResponse(component, options = {}, init = {}) {
       version
     }
   });
+  let closed = false;
   const body = new ReadableStream({
     start(controller) {
       stream.pipe({
         write(chunk) {
-          controller.enqueue(createChunk(JSON.stringify(chunk)));
+          if (closed) return;
+          try {
+            controller.enqueue(createChunk(JSON.stringify(chunk)));
+          } catch (_) {
+            closed = true;
+          }
         },
         end() {
+          if (closed) return;
+          closed = true;
           controller.close();
         }
       });
+    },
+    cancel() {
+      closed = true;
     }
   });
   return new Response(body, {
@@ -2772,9 +3590,17 @@ function frameFlightResponse({
   headers.set(FRAME_STREAM_HEADER, primary ? primary.id : "");
   headers.set("X-Content-Raw", "1");
   headers.set(SINGLE_FLIGHT_HEADER, "true");
+  let closed = false;
   const body = new ReadableStream({
     async start(controller) {
-      const write = chunk => controller.enqueue(createChunk(JSON.stringify(chunk)));
+      const write = chunk => {
+        if (closed) return;
+        try {
+          controller.enqueue(createChunk(JSON.stringify(chunk)));
+        } catch (_) {
+          closed = true;
+        }
+      };
       try {
         for (const {
           id,
@@ -2801,10 +3627,19 @@ function frameFlightResponse({
             });
           }
         }
-        controller.close();
+        if (!closed) {
+          closed = true;
+          controller.close();
+        }
       } catch (err) {
-        controller.error(err);
+        if (!closed) {
+          closed = true;
+          controller.error(err);
+        }
       }
+    },
+    cancel() {
+      closed = true;
     }
   });
   return new Response(body, {
@@ -2813,6 +3648,7 @@ function frameFlightResponse({
   });
 }
 
+setContainerTraceResolver(solidJs.getProjectionTrace);
 function asyncArg(value) {
   return value;
 }