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

package/frames/dist/server.js

@@ -1,10 +1,13 @@
-import { runWithOwner, createOwner, sharedConfig, createRoot, ssrHandleError, getOwner, NoHydration, runInServerComponentScope, Hydration } from 'solid-js';
+import { createMemo, runWithOwner, createOwner, sharedConfig, createRoot, ssrHandleError, getOwner, NoHydration, runInServerComponentScope, Hydration } from 'solid-js';
 import { toCrossJSONStream, Feature, Serializer, getCrossReferenceHeader, createPlugin } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
 const runWithHydrationScope = (id, fn) => runWithOwner(createOwner({
   id
 }), fn);
+const ssrAsyncValue = value => createMemo(() => value, {
+  serialize: false
+});
 
 const DEFAULT_DISABLED_FEATURES = Feature.AggregateError | Feature.BigIntTypedArray;
 const serializeOnlyDisabledFeatures = () => process.env.NODE_ENV === "development" ? 0 : Feature.ErrorPrototypeStack;
@@ -135,6 +138,143 @@ function createJSONSerializer({
   };
 }
 
+const ENVELOPE = Symbol.for("solid.ResponseEnvelope");
+function isResponseEnvelope(value) {
+  return !!(value && typeof value === "object" && value[ENVELOPE]);
+}
+const REVALIDATE_HEADER = "X-Revalidate";
+
+function frameAddress(id, args) {
+  return args && args.length ? id + ":" + hashArguments(args) : id;
+}
+function hashArguments(args) {
+  let hash = 0;
+  const text = stableString(args);
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash << 5) - hash + text.charCodeAt(i);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+function stableString(value, seen) {
+  if (value === null || typeof value !== "object") {
+    return typeof value === "bigint" ? value + "n" : String(value);
+  }
+  if (value instanceof Date) return "Date:" + value.getTime();
+  seen || (seen = new Set());
+  if (seen.has(value)) return "~";
+  seen.add(value);
+  if (value instanceof Map) {
+    const entries = [];
+    for (const [k, v] of value) {
+      entries.push(stableString(k, seen) + "=>" + stableString(v, seen));
+    }
+    return "Map{" + entries.sort().join(",") + "}";
+  }
+  if (value instanceof Set) {
+    const members = [];
+    for (const v of value) members.push(stableString(v, seen));
+    return "Set{" + members.sort().join(",") + "}";
+  }
+  if (Array.isArray(value)) {
+    let out = "[";
+    for (let i = 0; i < value.length; i++) out += (i ? "," : "") + stableString(value[i], seen);
+    return out + "]";
+  }
+  const keys = Object.keys(value).sort();
+  let out = "{";
+  for (let i = 0; i < keys.length; i++) {
+    out += (i ? "," : "") + keys[i] + ":" + stableString(value[keys[i]], seen);
+  }
+  return out + "}";
+}
+const ERROR_HEADER = "X-Server-Function-Error";
+const BODY_FORMAT_HEADER = "X-Server-Function-Format";
+const SINGLE_FLIGHT_HEADER = "X-Single-Flight";
+function createChunk(data) {
+  const encoder = new TextEncoder();
+  const encodeData = encoder.encode(data);
+  const bytes = encodeData.length;
+  const chunk = new Uint8Array(12 + bytes);
+  chunk.set(encoder.encode(`;0x${bytes.toString(16).padStart(8, "0")};`));
+  chunk.set(encodeData, 12);
+  return chunk;
+}
+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 decoder = new TextDecoder();
+    const bytes = Number.parseInt(decoder.decode(this.buffer.subarray(1, 11)), 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 = decoder.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 serializeStream(value, codecOptions) {
+  return new ReadableStream({
+    start(controller) {
+      serializeJSON(value, {
+        ...codecOptions,
+        onParse(node) {
+          controller.enqueue(createChunk(JSON.stringify(node)));
+        },
+        onDone() {
+          controller.close();
+        },
+        onError(error) {
+          controller.error(error);
+        }
+      });
+    }
+  });
+}
+
 const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script", "base"]);
 const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
 const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "stylesheet"]);
@@ -375,7 +515,8 @@ function createHeadRegistry() {
     resources: new Set(),
     eagerHtml: "",
     flushed: null,
-    shellFlushed: false
+    shellFlushed: false,
+    parkedResources: []
   };
 }
 function registerHeadTags(registry, context, tracking, emitResource, nonce, tags) {
@@ -389,6 +530,7 @@ function registerHeadTags(registry, context, tracking, emitResource, nonce, tags
     return;
   }
   if (!Array.isArray(tags)) tags = [tags];
+  const probe = sharedConfig.context && sharedConfig.context._loadingPhase;
   let replaceable = null;
   for (let i = 0; i < tags.length; i++) {
     const desc = tags[i];
@@ -397,6 +539,16 @@ function registerHeadTags(registry, context, tracking, emitResource, nonce, tags
       continue;
     }
     const cls = classifyHeadTag(desc);
+    if (probe && !cls.resource) {
+      try {
+        evalHeadProps(desc.props || {}, cls.rel !== undefined ? {
+          rel: cls.rel
+        } : undefined);
+        evalHeadValue(desc.key);
+      } catch (err) {
+        if (ssrHandleError(err)) throw err;
+      }
+    }
     if (cls.resource) {
       emitHeadResource(registry, context, tracking, emitResource, nonce, desc, cls.rel);
     } else {
@@ -413,6 +565,52 @@ function registerHeadTags(registry, context, tracking, emitResource, nonce, tags
     tags: replaceable
   });
 }
+function headShellReady(registry, block) {
+  let ready = true;
+  const pends = err => {
+    const source = ssrHandleError(err, true);
+    if (!source) return false;
+    block(source);
+    ready = false;
+    return true;
+  };
+  const parked = registry.parkedResources;
+  for (let i = parked.length - 1; i >= 0; i--) {
+    const {
+      desc,
+      rel,
+      emit
+    } = parked[i];
+    try {
+      evalHeadProps(desc.props || {}, rel !== undefined ? {
+        rel
+      } : undefined);
+    } catch (err) {
+      if (pends(err)) continue;
+      console.warn(`useHead: error evaluating resource tag props`, err);
+      parked.splice(i, 1);
+      continue;
+    }
+    parked.splice(i, 1);
+    emit();
+  }
+  for (let i = 0; i < registry.pending.length; i++) {
+    const reg = registry.pending[i];
+    if (reg.boundary !== "" || reg.list) continue;
+    for (let j = 0; j < reg.tags.length; j++) {
+      const desc = reg.tags[j];
+      try {
+        evalHeadProps(desc.props || {}, desc.rel !== undefined ? {
+          rel: desc.rel
+        } : undefined);
+        evalHeadValue(desc.key);
+      } catch (err) {
+        pends(err);
+      }
+    }
+  }
+  return ready;
+}
 function emitHeadResource(registry, context, tracking, emitResource, nonce, desc, rel) {
   let props;
   try {
@@ -420,6 +618,16 @@ function emitHeadResource(registry, context, tracking, emitResource, nonce, desc
       rel
     } : undefined);
   } catch (err) {
+    const loadingPhase = sharedConfig.context && sharedConfig.context._loadingPhase;
+    if (loadingPhase && ssrHandleError(err)) throw err;
+    if (!loadingPhase && !context._currentBoundaryId && !registry.shellFlushed && typeof context.block === "function" && ssrHandleError(err, true)) {
+      registry.parkedResources.push({
+        desc,
+        rel,
+        emit: () => emitHeadResource(registry, context, tracking, emitResource, nonce, desc, rel)
+      });
+      return;
+    }
     console.warn(`useHead: error evaluating resource tag props`, err);
     return;
   }
@@ -762,7 +970,7 @@ function renderToStream(code, options = {}) {
       }
     },
     shell(shellHtml, meta) {
-      buffer.write(assembleDocument(shellHtml, meta.assets, meta.preloads, meta.inlineStyles, meta.tasks.length ? meta.tasks : "", nonce, meta.head, onHead));
+      buffer.write(assembleDocument(shellHtml, meta.preloads, meta.inlineStyles, meta.tasks.length ? meta.tasks : "", nonce, meta.head, onHead));
     },
     ...options.sink
   };
@@ -842,7 +1050,6 @@ function renderToStream(code, options = {}) {
   };
   sharedConfig.context = context = {
     async: true,
-    assets: [],
     nonce,
     registerHeadTags(tags) {
       registerHeadTags(headRegistry, context, tracking,
@@ -1044,7 +1251,7 @@ function renderToStream(code, options = {}) {
     if (shellCompleted) return;
     sharedConfig.context = context;
     if (!resolveRootHoles()) return;
-    const assetsHtml = resolveAssetsHtml(context.assets);
+    if (!headShellReady(headRegistry, p => blockingPromises.add(p))) return;
     headStyles = new Set();
     for (const url of tracking.emittedAssets) {
       if (isCssUrl(url)) headStyles.add(url);
@@ -1052,7 +1259,6 @@ function renderToStream(code, options = {}) {
     serializeRootAssets();
     const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
     sink.shell(html, {
-      assets: assetsHtml,
       preloads: tracking.emittedAssets,
       inlineStyles: tracking.inlineStyles,
       tasks,
@@ -1142,27 +1348,30 @@ function renderToStream(code, options = {}) {
     return p;
   };
   return {
-    then(fn) {
-      function complete() {
-        dispose();
-        fn(tmp);
-      }
-      if (onCompleteAll) {
-        let ogComplete = onCompleteAll;
-        onCompleteAll = options => {
-          ogComplete(options);
-          complete();
-        };
-      } else onCompleteAll = complete;
-      function flush() {
-        allSettled(blockingPromises).then(() => {
-          scheduleFlush(() => {
-            if (!resolveRootHoles()) return flush();
-            queue(flushEnd);
+    then(onFulfilled, onRejected) {
+      const p = new Promise(resolve => {
+        function complete() {
+          dispose();
+          resolve(tmp);
+        }
+        if (onCompleteAll) {
+          let ogComplete = onCompleteAll;
+          onCompleteAll = options => {
+            ogComplete(options);
+            complete();
+          };
+        } else onCompleteAll = complete;
+        function flush() {
+          allSettled(blockingPromises).then(() => {
+            scheduleFlush(() => {
+              if (!resolveRootHoles() || !headShellReady(headRegistry, p => blockingPromises.add(p))) return flush();
+              queue(flushEnd);
+            });
           });
-        });
-      }
-      flush();
+        }
+        flush();
+      });
+      return p.then(onFulfilled, onRejected);
     },
     pipe(w) {
       claimConsumer("pipe");
@@ -1447,17 +1656,11 @@ function allSettled(promises) {
     return;
   });
 }
-function resolveAssetsHtml(assets) {
-  if (!assets || !assets.length) return "";
-  let out = "";
-  for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
-  return out;
-}
-function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts, nonce, headTags, onHead) {
+function assembleDocument(html, emittedAssets, inlineStyles, scripts, nonce, headTags, onHead) {
   const scriptTag = scripts ? `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>` : "";
   const headTagsHtml = headTags ? headTags.html : "";
   const headPrelude = headTags ? headTags.prelude : "";
-  if (!onHead && !assetsHtml && !headTagsHtml && !headPrelude && !(emittedAssets && emittedAssets.size) && !(inlineStyles && inlineStyles.size)) {
+  if (!onHead && !headTagsHtml && !headPrelude && !(emittedAssets && emittedAssets.size) && !(inlineStyles && inlineStyles.size)) {
     if (!scriptTag) return html;
     const xs = html.indexOf("<!--xs-->");
     return xs === -1 ? html + scriptTag : html.slice(0, xs) + scriptTag + html.slice(xs);
@@ -1472,13 +1675,13 @@ function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts
   const headIdx = html.indexOf("</head>");
   if (headIdx === -1) {
     if (onHead) {
-      onHead(headPrelude + headTagsHtml + (assetsHtml || "") + renderHeadAssets(emittedAssets, inlineStyles, nonce));
+      onHead(headPrelude + headTagsHtml + renderHeadAssets(emittedAssets, inlineStyles, nonce));
     }
     if (!scriptTag) return html;
     const xs = html.indexOf("<!--xs-->");
     return xs === -1 ? html + scriptTag : html.slice(0, xs) + scriptTag + html.slice(xs);
   }
-  const head = headTagsHtml + (assetsHtml || "") + renderHeadAssets(emittedAssets, inlineStyles, nonce);
+  const head = headTagsHtml + renderHeadAssets(emittedAssets, inlineStyles, nonce);
   if (!scriptTag) return html.slice(0, headIdx) + head + html.slice(headIdx);
   const xsIdx = html.indexOf("<!--xs-->");
   if (xsIdx === -1) return html.slice(0, headIdx) + head + html.slice(headIdx) + scriptTag;
@@ -1660,142 +1863,7 @@ function resolveSSRSync(node) {
   if (!res.h.length) return res.t[0];
   throw new Error("This value cannot be rendered synchronously. Are you missing a boundary?");
 }
-
-function frameAddress(id, args) {
-  return args && args.length ? id + ":" + hashArguments(args) : id;
-}
-function hashArguments(args) {
-  let hash = 0;
-  const text = stableString(args);
-  for (let i = 0; i < text.length; i++) {
-    hash = (hash << 5) - hash + text.charCodeAt(i);
-    hash |= 0;
-  }
-  return (hash >>> 0).toString(36);
-}
-function stableString(value, seen) {
-  if (value === null || typeof value !== "object") {
-    return typeof value === "bigint" ? value + "n" : String(value);
-  }
-  if (value instanceof Date) return "Date:" + value.getTime();
-  seen || (seen = new Set());
-  if (seen.has(value)) return "~";
-  seen.add(value);
-  if (value instanceof Map) {
-    const entries = [];
-    for (const [k, v] of value) {
-      entries.push(stableString(k, seen) + "=>" + stableString(v, seen));
-    }
-    return "Map{" + entries.sort().join(",") + "}";
-  }
-  if (value instanceof Set) {
-    const members = [];
-    for (const v of value) members.push(stableString(v, seen));
-    return "Set{" + members.sort().join(",") + "}";
-  }
-  if (Array.isArray(value)) {
-    let out = "[";
-    for (let i = 0; i < value.length; i++) out += (i ? "," : "") + stableString(value[i], seen);
-    return out + "]";
-  }
-  const keys = Object.keys(value).sort();
-  let out = "{";
-  for (let i = 0; i < keys.length; i++) {
-    out += (i ? "," : "") + keys[i] + ":" + stableString(value[keys[i]], seen);
-  }
-  return out + "}";
-}
-const SINGLE_FLIGHT_HEADER = "X-Single-Flight";
-function createChunk(data) {
-  const encodeData = new TextEncoder().encode(data);
-  const bytes = encodeData.length;
-  const baseHex = bytes.toString(16);
-  const totalHex = "00000000".substring(0, 8 - baseHex.length) + baseHex;
-  const head = new TextEncoder().encode(`;0x${totalHex};`);
-  const chunk = new Uint8Array(12 + bytes);
-  chunk.set(head);
-  chunk.set(encodeData, 12);
-  return chunk;
-}
-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 serializeStream(value, codecOptions) {
-  return new ReadableStream({
-    start(controller) {
-      serializeJSON(value, {
-        ...codecOptions,
-        onParse(node) {
-          controller.enqueue(createChunk(JSON.stringify(node)));
-        },
-        onDone() {
-          controller.close();
-        },
-        onError(error) {
-          controller.error(error);
-        }
-      });
-    }
-  });
-}
-
-const ENVELOPE = Symbol.for("solid.ResponseEnvelope");
-function isResponseEnvelope(value) {
-  return !!(value && typeof value === "object" && value[ENVELOPE]);
-}
+/*#__PURE__*/new Set([ERROR_HEADER, BODY_FORMAT_HEADER, SINGLE_FLIGHT_HEADER, REVALIDATE_HEADER, "Location"].map(header => header.toLowerCase()));
 
 const INVOCATIONS = new WeakMap();
 function getEventServerFunctionInvocation(event) {
@@ -1879,6 +1947,29 @@ function createFrameSink(emit, frame) {
     version
   } = frame;
   const styledKeys = new Set();
+  const bindings = new Map();
+  const sweepMinted = new Set();
+  const argRefVersions = new Map();
+  let sweepScheduled = false;
+  let closed = false;
+  let epoch = 0;
+  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();
+    });
+  };
   const regionKeys = new Map();
   const frameOf = key => regionKeys.get(key) || id;
   return {
@@ -1920,6 +2011,7 @@ function createFrameSink(emit, frame) {
           version,
           payload: record
         });
+        scheduleSweep();
       } else {
         emit({
           type: "data",
@@ -1929,6 +2021,7 @@ function createFrameSink(emit, frame) {
           node: record.node,
           initial: record.initial
         });
+        if (!sweepMinted.has(record.key)) scheduleSweep();
       }
     },
     fragment(key, value, meta = {}) {
@@ -1965,6 +2058,7 @@ function createFrameSink(emit, frame) {
         key,
         html: value
       });
+      scheduleSweep();
       if (meta.error) {
         emit({
           type: "error",
@@ -2019,6 +2113,8 @@ function createFrameSink(emit, frame) {
       });
     },
     end() {
+      if (bindings.size) sweep();
+      closed = true;
       emit({
         type: "complete",
         id,
@@ -2050,6 +2146,24 @@ function createFrameSink(emit, frame) {
         version,
         html
       });
+    },
+    openBinding(key, b) {
+      bindings.set(key, b);
+    },
+    closeBinding(key) {
+      bindings.delete(key);
+    },
+    mintRef(ref) {
+      sweepMinted.add(ref);
+    },
+    nextArgRef(ledgerKey) {
+      const n = (argRefVersions.get(ledgerKey) || 0) + 1;
+      argRefVersions.set(ledgerKey, n);
+      return n;
+    },
+    commit: scheduleSweep,
+    get epoch() {
+      return epoch;
     }
   };
 }
@@ -2059,7 +2173,14 @@ function renderToFrameStream(code, options = {}) {
 function renderServerComponent(component, options = {}) {
   return frameStream((sink, frame) => {
     const props = createSlotProps(sink, frame);
-    return () => serverComponentScope(() => component(props));
+    return () => {
+      const ctx = sharedConfig.context;
+      if (ctx) {
+        ctx.commit = sink.commit;
+        ctx.commitEpoch = () => sink.epoch;
+      }
+      return serverComponentScope(() => component(props));
+    };
   }, options);
 }
 function frameStream(makeCode, options) {
@@ -2136,6 +2257,35 @@ function occurrenceId(prop, raw, counts) {
   counts[prop] = n + 1;
   return `${prop}#${n}`;
 }
+function isAsyncValue(v) {
+  return !!v && typeof v === "object" && (typeof v.then === "function" || typeof v[Symbol.asyncIterator] === "function");
+}
+function tapFirstYield(iterable) {
+  const iter = iterable[Symbol.asyncIterator]();
+  const firstStep = Promise.resolve(iter.next());
+  return {
+    first: firstStep.then(r => r.done ? undefined : r.value),
+    rest: {
+      [Symbol.asyncIterator]() {
+        let replayed = false;
+        return {
+          next: () => {
+            if (!replayed) {
+              replayed = true;
+              return firstStep;
+            }
+            return iter.next();
+          },
+          return: v => iter.return ? iter.return(v) : Promise.resolve({
+            done: true,
+            value: v
+          }),
+          throw: e => iter.throw ? iter.throw(e) : Promise.reject(e)
+        };
+      }
+    }
+  };
+}
 function createDocumentSlotProps(clientProps, frameId) {
   const counts = Object.create(null);
   const getters = new Map();
@@ -2205,6 +2355,22 @@ function createDocumentSlotProps(clientProps, frameId) {
                   t: FRAME_ELEMENT_CLOSE
                 }];
               };
+            } else if (ssrAsyncValue && isAsyncValue(value)) {
+              let readable = value;
+              if (typeof value.then !== "function") {
+                const {
+                  first,
+                  rest
+                } = tapFirstYield(value);
+                readable = first;
+                vals[key] = rest;
+              }
+              const read = ssrAsyncValue(readable);
+              Object.defineProperty(resolved, key, {
+                get: read,
+                enumerable: true,
+                configurable: true
+              });
             } else {
               resolved[key] = value;
             }
@@ -2292,6 +2458,88 @@ function isServerContent(value) {
   }
   return false;
 }
+function unwrapThunks(value) {
+  for (let d = 0; typeof value === "function" && d < 16; d++) value = value();
+  return value;
+}
+function contentArgError(key, occurrence) {
+  return new Error("Async slot arg resolved to JSX (arg '" + key + "' of " + occurrence + "). Async args must resolve to serializable values; render async content through a boundary instead.");
+}
+function retryArgUntilSettled(evaluate, blocked, key, occurrence, onSettle) {
+  const owner = getOwner();
+  return new Promise((resolve, reject) => {
+    const retry = () => {
+      try {
+        const value = owner ? runWithOwner(owner, evaluate) : evaluate();
+        if (isServerContent(value)) {
+          reject(contentArgError(key, occurrence));
+          return;
+        }
+        if (onSettle) onSettle(value);
+        resolve(value);
+      } catch (err) {
+        const next = ssrHandleError && ssrHandleError(err);
+        if (next) next.then(retry, retry);else reject(err);
+      }
+    };
+    blocked.then(retry, retry);
+  });
+}
+function openArgBinding(sink, ctx, occurrence, key, evaluate, args, state) {
+  const owner = 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 = {
+    sweep() {
+      if (!state.settled) return;
+      let value;
+      try {
+        value = owner ? runWithOwner(owner, evaluate) : evaluate();
+      } catch (err) {
+        const blocked = ssrHandleError && ssrHandleError(err);
+        if (!blocked) {
+          sink.closeBinding(ledgerKey);
+          reEmit(Promise.reject(err instanceof Error ? err : new Error(String(err))));
+          return;
+        }
+        state.settled = false;
+        reEmit(retryArgUntilSettled(evaluate, blocked, key, occurrence, v => {
+          state.settled = true;
+          state.last = v;
+          sink.commit();
+        }));
+        return;
+      }
+      if (value === state.last) return;
+      state.last = value;
+      if (isServerContent(value)) {
+        sink.closeBinding(ledgerKey);
+        reEmit(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);
+      }
+    }
+  };
+  sink.openBinding(ledgerKey, binding);
+}
 function createSlotProps(sink, frame) {
   const counts = Object.create(null);
   const getters = new Map();
@@ -2311,6 +2559,7 @@ function createSlotProps(sink, frame) {
           const raw = callArgs[0];
           const occurrence = occurrenceId(prop, raw, counts);
           const args = {};
+          const opened = [];
           for (const key of Object.keys(raw)) {
             if (key === "$key") continue;
             const childId = `${frame.id}.${occurrence}.${key}`;
@@ -2321,11 +2570,44 @@ function createSlotProps(sink, frame) {
               return origRegister.call(ctx, fragKey, fragOptions);
             };
             try {
-              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;
+              let state = null;
+              try {
+                if (desc.get) {
+                  const get = desc.get;
+                  evaluate = () => unwrapThunks(get.call(raw));
+                  value = evaluate();
+                } else {
+                  value = desc.value;
+                  if (typeof value === "function") {
+                    const fn = value;
+                    evaluate = () => unwrapThunks(fn);
+                    value = evaluate();
+                  }
+                }
+              } catch (err) {
+                const blocked = ssrHandleError && ssrHandleError(err);
+                if (!blocked) throw err;
+                state = {
+                  settled: false,
+                  last: undefined
+                };
+                const pendingState = state;
+                value = retryArgUntilSettled(evaluate, blocked, key, occurrence, v => {
+                  pendingState.settled = true;
+                  pendingState.last = v;
+                  sink.commit();
+                });
+              }
               const t = typeof value;
               if (value == null || t === "string" || t === "number" || t === "boolean") {
                 args[key] = value;
+                if (evaluate) state = {
+                  settled: true,
+                  last: value
+                };
               } else if (isServerContent(value)) {
                 const resolved = ctx.resolve(value);
                 if (resolved.h.length) {
@@ -2341,12 +2623,27 @@ function createSlotProps(sink, frame) {
                 args[key] = {
                   $ref: ref
                 };
+                if (evaluate && !state) state = {
+                  settled: true,
+                  last: value
+                };
               }
+              if (evaluate && state) opened.push({
+                key,
+                evaluate,
+                state
+              });
             } finally {
               ctx.registerFragment = origRegister;
             }
           }
-          sink.slot(occurrence, args);
+          sink.slot(occurrence, {
+            ...args
+          });
+          const ctx = sharedConfig.context;
+          for (const b of opened) {
+            openArgBinding(sink, ctx, occurrence, b.key, b.evaluate, args, b.state);
+          }
           return slotRange(occurrence);
         };
         getters.set(prop, fn);
@@ -2355,12 +2652,21 @@ function createSlotProps(sink, frame) {
     }
   });
 }
+function copyInitHeaders(init) {
+  if (!init || !init.getSetCookie) return new Headers(init);
+  const headers = new Headers();
+  init.forEach((value, key) => {
+    if (key !== "set-cookie") headers.append(key, value);
+  });
+  for (const cookie of init.getSetCookie()) headers.append("Set-Cookie", cookie);
+  return headers;
+}
 function serverComponentResponse(component, options = {}, init = {}) {
   const {
     id = "",
     version = 1
   } = options.frame || {};
-  const headers = new Headers(init.headers);
+  const headers = copyInitHeaders(init.headers);
   headers.set("Content-Type", "application/x-frame-stream");
   headers.set(FRAME_STREAM_HEADER, id);
   headers.set("X-Content-Raw", "1");
@@ -2459,7 +2765,7 @@ function frameFlightResponse({
   codec
 }, init = {}) {
   const frames = primary ? [primary, ...regions] : regions;
-  const headers = new Headers(init.headers);
+  const headers = copyInitHeaders(init.headers);
   headers.set("Content-Type", "application/x-frame-stream");
   headers.set(FRAME_STREAM_HEADER, primary ? primary.id : "");
   headers.set("X-Content-Raw", "1");
@@ -2505,4 +2811,8 @@ function frameFlightResponse({
   });
 }
 
-export { FRAME_STREAM_HEADER, SERVER_COMPONENT_BOOTSTRAP, ServerComponentPlugin, createFrameSink, frameTransformDirectResult, frameTransformFlightResult, frameTransformResult, isFrameStreamResponse, renderServerComponent, renderToFrameStream, serverComponentResponse };
+function asyncArg(value) {
+  return value;
+}
+
+export { FRAME_STREAM_HEADER, SERVER_COMPONENT_BOOTSTRAP, ServerComponentPlugin, asyncArg, createFrameSink, frameTransformDirectResult, frameTransformFlightResult, frameTransformResult, isFrameStreamResponse, renderServerComponent, renderToFrameStream, serverComponentResponse };