@solidjs/web 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/web.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo, sharedConfig, enableHydration, untrack, runWithOwner, createRoot, flatten, flush, createComponent, omit, createOwner, createSignal, onCleanup, getOwner, createEffect } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, enableHydration, untrack, runWithOwner, createRoot, flatten, flush, getOwner, createOwner, patchableRaw, storeHasOptimisticFamily, storeIsShallow, registerRowOps, registerSlotPatch, onCleanup, registerPatch, createComponent, omit, createSignal, createEffect } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 
 const DOMWithState = {
@@ -214,7 +214,8 @@ function resourceIdentity(tag, props) {
   let id = "res:" + tag + ":" + (props.rel || "") + ":" + (props.href || props.src || "");
   for (let i = 0; i < RESOURCE_QUALIFIERS.length; i++) {
     const q = RESOURCE_QUALIFIERS[i];
-    if (props[q] != null) id += ":" + q + "=" + props[q];
+    const value = props[q];
+    if (value != null) id += ":" + q + "=" + (value === true ? "" : value);
   }
   return id;
 }
@@ -293,6 +294,7 @@ function serializeCookie(name, value, options = {}) {
   if (options.expires) cookie += `; Expires=${options.expires.toUTCString()}`;
   if (options.httpOnly) cookie += "; HttpOnly";
   if (options.secure) cookie += "; Secure";
+  if (options.partitioned) cookie += "; Partitioned";
   if (options.sameSite) {
     const sameSite = options.sameSite.toLowerCase();
     cookie += `; SameSite=${sameSite === "none" ? "None" : sameSite === "strict" ? "Strict" : "Lax"}`;
@@ -332,6 +334,10 @@ const waitAsset = promise => {
   }
   gate();
 };
+let listDriver;
+function installListDriver(driver) {
+  listDriver = driver;
+}
 const $$EVENT_OWNER = "_$SOLID_EVENT_OWNER";
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
@@ -575,16 +581,18 @@ function setStyleProperty(node, name, value) {
 }
 function spread(node, props = {}, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) insert(node, () => props.children);
+  const get = typeof props === "function" ? props : () => props;
+  if (!skipChildren) insert(node, () => get().children);
   effect(() => {
-    const r = props.ref;
+    const r = get().ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
   }, () => {});
   effect(() => {
+    const source = get();
     const newProps = {};
-    for (const prop in props) {
+    for (const prop in source) {
       if (prop === "children" || prop === "ref") continue;
-      newProps[prop] = props[prop];
+      newProps[prop] = source[prop];
     }
     return newProps;
   }, props => assign(node, props, true, prevProps, true));
@@ -607,11 +615,6 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
-const PURE_ROW = Symbol.for("solid.pure-row");
-function rowProof(fn) {
-  fn[PURE_ROW] = true;
-  return fn;
-}
 function scope(fn) {
   fn.$s = true;
   return fn;
@@ -675,16 +678,16 @@ function stripTextSeparators(nodes) {
   nodes.length = j;
   return nodes;
 }
-function patchDriver(subject, body) {
-  {
-    effect(() => body(subject, subject, false), () => body(subject, undefined, true));
-  }
-}
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
   const host = options && options.host;
   if (multi && !initial) initial = [];
   if (hydrationRt !== null) initial = hydrationRt.claimInitial(parent, multi, initial);
+  if (listDriver !== undefined && typeof accessor === "function" && accessor.$ll !== undefined) {
+    const listAccessor = accessor;
+    const owner = getOwner();
+    if (listDriver(parent, accessor, marker, () => runWithOwner(owner, () => insert(parent, () => listAccessor(), marker, marker !== undefined ? [] : undefined, options)))) return;
+  }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") {
@@ -1160,6 +1163,15 @@ function hydrate(code, element, options = {}) {
   enableHydration();
   installHydrationRuntime();
   if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  const head = (element.nodeType === 9 ? element : element.ownerDocument).head;
+  if (head && element.contains(head)) {
+    let n = head.firstChild;
+    while (n && n.nodeType === 1 && n.hasAttribute("data-dh") && !n.hasAttribute("data-dhf")) {
+      const next = n.nextSibling;
+      head.appendChild(n);
+      n = next;
+    }
+  }
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -1618,6 +1630,322 @@ function getHydrationKey() {
 }
 const RequestContext = Symbol();
 
+const PURE_ROW = Symbol.for("solid.pure-row");
+const arm = () => {
+  installListDriver(driveList);
+};
+function rowProof(fn) {
+  arm();
+  fn[PURE_ROW] = true;
+  return fn;
+}
+let rowCollector = null;
+const lisPositions = sources => {
+  const n = sources.length;
+  const tails = [];
+  const tailsIdx = [];
+  const prev = new Array(n).fill(-1);
+  for (let j = 0; j < n; j++) {
+    const v = sources[j];
+    if (v === -1) continue;
+    let lo = 0,
+      hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (tails[mid] < v) lo = mid + 1;else hi = mid;
+    }
+    if (lo > 0) prev[j] = tailsIdx[lo - 1];
+    tails[lo] = v;
+    tailsIdx[lo] = j;
+  }
+  const stable = new Set();
+  let k = tailsIdx.length ? tailsIdx[tails.length - 1] : -1;
+  while (k >= 0) {
+    stable.add(k);
+    k = prev[k];
+  }
+  return stable;
+};
+const driveList = (parent, listFn, marker, lateClassic) => {
+  const meta = listFn.$ll;
+  if (meta.row?.[PURE_ROW] !== true) return false;
+  if (typeof meta.keyed === "function") return false;
+  const evalOwner = createOwner({
+    id: "&each"
+  });
+  let subject = runWithOwner(evalOwner, () => untrack(meta.each));
+  evalOwner.dispose();
+  let raw = subject != null ? patchableRaw(subject) : undefined;
+  if (raw === undefined || !Array.isArray(raw)) return false;
+  const optimistic = storeHasOptimisticFamily(subject);
+  if (optimistic) raw = untrack(() => Array.from(subject));
+  const hydrating = !!sharedConfig.hydrating;
+  if (hydrating && raw.length === 0) return false;
+  let domRows;
+  let rowIds;
+  if (hydrating) {
+    if (marker !== undefined) return false;
+    domRows = Array.from(parent.children);
+    if (domRows.length !== raw.length) return false;
+    rowIds = new Array(raw.length);
+    for (let i = 0; i < domRows.length; i++) {
+      const key = domRows[i].getAttribute("_hk");
+      if (key === null || !key.endsWith("0") || key.length < 2) return false;
+      rowIds[i] = key.slice(0, -1);
+    }
+  }
+  const rowFn = meta.row;
+  const endAnchor = marker ?? null;
+  const shallow = storeIsShallow(subject);
+  let lastBodies = null;
+  let lastUnbinds = null;
+  const collectBind = (abs, build) => {
+    const prevC = rowCollector;
+    rowCollector = {
+      row: shallow ? subject[abs] : undefined,
+      bodies: [],
+      unbinds: []
+    };
+    try {
+      return build();
+    } finally {
+      lastBodies = rowCollector.bodies;
+      lastUnbinds = rowCollector.unbinds;
+      rowCollector = prevC;
+    }
+  };
+  const listOwner = createOwner();
+  let declined = false;
+  const bindRow = (abs, claimId) => {
+    return collectBind(abs, () => runWithOwner(listOwner, () => claimId !== undefined ? runWithOwner(createOwner({
+      id: claimId
+    }), () => untrack(() => rowFn(subject[abs]))) : untrack(() => rowFn(subject[abs]))));
+  };
+  let entries = new Array(raw.length);
+  let rowBodies = shallow ? new Array(raw.length) : null;
+  let rowUnbinds = new Array(raw.length);
+  const runUnbinds = list => {
+    if (list !== undefined) for (let u = 0; u < list.length; u++) list[u]();
+  };
+  const unbindAllRows = () => {
+    for (let j = 0; j < rowUnbinds.length; j++) runUnbinds(rowUnbinds[j]);
+    rowUnbinds = [];
+  };
+  let prevRaws = raw.slice();
+  try {
+    if (hydrating) {
+      for (let i = 0; i < raw.length; i++) {
+        entries[i] = bindRow(i, rowIds[i]);
+        if (rowBodies !== null) rowBodies[i] = lastBodies;
+        rowUnbinds[i] = lastUnbinds;
+      }
+    } else {
+      for (let i = 0; i < raw.length; i++) {
+        const node = bindRow(i);
+        entries[i] = node;
+        if (rowBodies !== null) rowBodies[i] = lastBodies;
+        rowUnbinds[i] = lastUnbinds;
+        parent.insertBefore(node, endAnchor);
+      }
+    }
+  } catch (err) {
+    unbindAllRows();
+    runUnbinds(lastUnbinds ?? undefined);
+    for (let j = 0; j < entries.length; j++) {
+      const n = entries[j];
+      if (n !== undefined && n.parentNode === parent) n.remove();
+    }
+    listOwner.dispose();
+    throw err;
+  }
+  const identityOps = nextArr => {
+    const keyOf = r => {
+      const w = r != null ? patchableRaw(r) : undefined;
+      return w !== undefined ? w : r;
+    };
+    const oldIndex = new Map();
+    for (let j = 0; j < prevRaws.length; j++) {
+      const k = keyOf(prevRaws[j]);
+      const existing = oldIndex.get(k);
+      if (existing === undefined) oldIndex.set(k, j);else if (Array.isArray(existing)) existing.push(j);else oldIndex.set(k, [existing, j]);
+    }
+    const sources = new Array(nextArr.length);
+    for (let k = 0; k < nextArr.length; k++) {
+      const m = oldIndex.get(keyOf(nextArr[k]));
+      if (m === undefined) sources[k] = -1;else if (Array.isArray(m)) {
+        sources[k] = m.shift();
+        if (m.length === 1) oldIndex.set(keyOf(nextArr[k]), m[0]);
+      } else {
+        sources[k] = m;
+        oldIndex.delete(keyOf(nextArr[k]));
+      }
+    }
+    return {
+      prefix: 0,
+      sources
+    };
+  };
+  let resyncNeeded = false;
+  const applyOps = (next, ops) => {
+    if (declined) return;
+    if (resyncNeeded) ops = null;
+    if (ops === null) ops = identityOps(next);
+    const {
+      prefix,
+      sources
+    } = ops;
+    const built = new Array(sources.length);
+    const builtBodies = rowBodies !== null ? new Array(sources.length) : null;
+    const builtUnbinds = new Array(sources.length);
+    let j = 0;
+    try {
+      for (; j < sources.length; j++) {
+        const abs = prefix + j;
+        const src = sources[j];
+        if (src === -1 || refRebuild && src >= 0 && next[abs] !== prevRaws[src]) {
+          built[j] = bindRow(abs);
+          if (builtBodies !== null) builtBodies[j] = lastBodies;
+          builtUnbinds[j] = lastUnbinds;
+        }
+      }
+    } catch (err) {
+      for (let k = 0; k < j; k++) runUnbinds(builtUnbinds[k]);
+      runUnbinds(lastUnbinds ?? undefined);
+      resyncNeeded = true;
+      throw err;
+    }
+    const retained = new Set();
+    for (let k = 0; k < sources.length; k++) {
+      if (sources[k] >= 0 && built[k] === undefined) retained.add(sources[k]);
+    }
+    for (let k = prefix; k < entries.length; k++) {
+      if (!retained.has(k)) {
+        entries[k].remove();
+        runUnbinds(rowUnbinds[k]);
+      }
+    }
+    const newEntries = new Array(prefix + sources.length);
+    const newBodies = rowBodies !== null ? new Array(prefix + sources.length) : null;
+    const newUnbinds = new Array(prefix + sources.length);
+    for (let i = 0; i < prefix; i++) {
+      newEntries[i] = entries[i];
+      if (newBodies !== null) newBodies[i] = rowBodies[i];
+      newUnbinds[i] = rowUnbinds[i];
+    }
+    const stable = lisPositions(sources);
+    let anchor = endAnchor;
+    for (let k = sources.length - 1; k >= 0; k--) {
+      const abs = prefix + k;
+      const src = sources[k];
+      let node;
+      if (built[k] !== undefined) {
+        node = built[k];
+        if (newBodies !== null) newBodies[abs] = builtBodies[k];
+        newUnbinds[abs] = builtUnbinds[k];
+        parent.insertBefore(node, anchor);
+      } else {
+        node = entries[src];
+        if (newBodies !== null) newBodies[abs] = rowBodies[src];
+        newUnbinds[abs] = rowUnbinds[src];
+        if (!stable.has(k)) parent.insertBefore(node, anchor);
+      }
+      newEntries[abs] = node;
+      anchor = node;
+    }
+    entries = newEntries;
+    if (newBodies !== null) rowBodies = newBodies;
+    rowUnbinds = newUnbinds;
+    prevRaws = next.slice();
+    resyncNeeded = false;
+  };
+  let unbindOps = runWithOwner(listOwner, () => registerRowOps(subject, applyOps));
+  const refRebuild = shallow && typeof meta.keyed !== "function";
+  const rebuildSlot = i => {
+    runUnbinds(rowUnbinds[i]);
+    const old = entries[i];
+    const node = bindRow(i);
+    rowBodies[i] = lastBodies;
+    rowUnbinds[i] = lastUnbinds;
+    parent.insertBefore(node, old);
+    old.remove();
+    entries[i] = node;
+  };
+  const applySlot = (i, next, prev) => {
+    if (declined) return;
+    if (resyncNeeded) {
+      const live = subject != null ? patchableRaw(subject) : undefined;
+      if (live !== undefined && Array.isArray(live)) applyOps(live, null);
+      return;
+    }
+    if (refRebuild) {
+      rebuildSlot(i);
+      prevRaws[i] = next;
+      return;
+    }
+    const bodies = rowBodies[i];
+    if (bodies !== undefined) {
+      for (let b = 0; b < bodies.length; b++) bodies[b](next, prev, false);
+    }
+    prevRaws[i] = next;
+  };
+  let unbindSlots = shallow ? runWithOwner(listOwner, () => registerSlotPatch(subject, applySlot)) : null;
+  runWithOwner(listOwner, () => effect(() => meta.each(), value => {
+    if (declined || value === subject) return;
+    const nextRaw = value != null ? patchableRaw(value) : undefined;
+    unbindOps();
+    unbindSlots?.();
+    if (nextRaw !== undefined && Array.isArray(nextRaw) && storeIsShallow(value) !== shallow) {
+      for (let j = 0; j < entries.length; j++) entries[j].remove();
+      entries = [];
+      prevRaws = [];
+      unbindAllRows();
+      subject = value;
+      declined = true;
+      listOwner.dispose();
+      lateClassic?.();
+      return;
+    }
+    if (nextRaw === undefined || !Array.isArray(nextRaw)) {
+      for (let j = 0; j < entries.length; j++) entries[j].remove();
+      entries = [];
+      prevRaws = [];
+      unbindAllRows();
+      subject = value;
+      declined = true;
+      listOwner.dispose();
+      lateClassic?.();
+      return;
+    }
+    const swapOps = identityOps(nextRaw);
+    subject = value;
+    unbindOps = runWithOwner(listOwner, () => registerRowOps(subject, applyOps));
+    if (shallow) unbindSlots = runWithOwner(listOwner, () => registerSlotPatch(subject, applySlot));
+    applyOps(nextRaw, swapOps);
+  }));
+  onCleanup(() => {
+    unbindOps();
+    unbindSlots?.();
+    unbindAllRows();
+    listOwner.dispose();
+  });
+  return true;
+};
+const patchDriver = (subject, body) => {
+  const raw = patchableRaw(subject);
+  if (raw !== undefined) {
+    if (!sharedConfig.hydrating) body(raw, undefined, true);
+    const unbind = registerPatch(subject, body);
+    if (rowCollector !== null) rowCollector.unbinds.push(unbind);
+    else onCleanup(unbind);
+  } else if (rowCollector !== null && subject === rowCollector.row) {
+    rowCollector.bodies.push(body);
+    if (!sharedConfig.hydrating) body(subject, undefined, true);
+  } else {
+    effect(() => body(subject, subject, false),
+    () => untrack(() => body(subject, undefined, true)));
+  }
+};
+
 function throwInBrowser(func) {
   const err = new Error(`${func.name} is not supported in the browser, returning undefined`);
   console.error(err);
@@ -1691,6 +2019,7 @@ function isSafeError(value) {
   return !!(value && (typeof value === "object" || typeof value === "function") && value[SAFE_ERROR]);
 }
 const REVALIDATE_HEADER = "X-Revalidate";
+const RESPONSE_HEADER_VALUE_LIMIT = 4096;
 function initWithRevalidate(init = {}) {
   const resolved = typeof init === "number" ? {
     status: init
@@ -1711,7 +2040,13 @@ function initWithRevalidate(init = {}) {
   } else {
     headers = new Headers(responseInit.headers);
   }
-  revalidate !== undefined && headers.set(REVALIDATE_HEADER, revalidate.toString());
+  if (revalidate !== undefined) {
+    const keys = revalidate.toString();
+    if (keys.length > RESPONSE_HEADER_VALUE_LIMIT) {
+      throw new TypeError(`revalidate names ${keys.length} characters of cache keys; past ` + `${RESPONSE_HEADER_VALUE_LIMIT} the ${REVALIDATE_HEADER} header would overflow ` + `receivers (an 8 KiB proxy buffer holds the whole header block) and the response ` + `dies at the socket after the mutation committed. Split the invalidation across ` + `calls or use coarser keys — a dropped key would be a silently stale cache, so ` + `the runtime refuses rather than trims.`);
+    }
+    headers.set(REVALIDATE_HEADER, keys);
+  }
   return {
     responseInit,
     headers
@@ -1728,7 +2063,13 @@ function redirect(url, init = 302) {
   if (responseInit.status === undefined) {
     responseInit.status = 302;
   }
-  headers.set("Location", String(url));
+  const target = typeof url === "string" ? url : url[HREF];
+  const location = typeof target === "string" ? target : String(url);
+  const encoded = location.replace(/[^\x00-\x7f]/gu, encodeURIComponent);
+  if (encoded.length > RESPONSE_HEADER_VALUE_LIMIT) {
+    throw new TypeError(`redirect() target is ${encoded.length} characters; past ` + `${RESPONSE_HEADER_VALUE_LIMIT} the Location header (and the scripted transport's ` + `redirect header) would overflow receivers and the response dies at the socket. ` + `A target this size is usually unbounded input echoed into the url — carry the ` + `state server-side instead. Refused rather than trimmed: a cut target is a ` + `different address.`);
+  }
+  headers.set("Location", encoded);
   return new Response(null, {
     ...responseInit,
     headers
@@ -1744,11 +2085,18 @@ function reload(init = {}) {
     headers
   });
 }
+const NULL_BODY_STATUSES = new Set([204, 205, 304]);
 function respond(value, init = {}) {
   const {
     responseInit,
     headers
   } = initWithRevalidate(init);
+  if (NULL_BODY_STATUSES.has(responseInit.status)) {
+    return new ResponseEnvelope(new Response(null, {
+      ...responseInit,
+      headers
+    }), value);
+  }
   headers.set("Content-Type", "application/json");
   return new ResponseEnvelope(new Response(JSON.stringify(value), {
     ...responseInit,
@@ -1899,4 +2247,4 @@ _moduleUrl) {
 function httpStatus(_code, _text) {}
 function httpHeader(_name, _value, _options) {}
 
-export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, dynamic, dynamicProperty, effect, escape, generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, parseCookieHeader, patchDriver, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, rowProof, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, waitAsset, warmAsset };
+export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, NULL_BODY_STATUSES, Namespaces, Portal, RESPONSE_HEADER_VALUE_LIMIT, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, driveList, dynamic, dynamicProperty, effect, escape, generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, installListDriver, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, listDriver, markSafeError, memo, parseCookieHeader, patchDriver, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, rowProof, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, waitAsset, warmAsset };

package/frames/dist/client.cjs

@@ -177,7 +177,18 @@ function createFrameHost(options = {}) {
       store.version = version;
       clearStreamRecords(store.records);
     }
-    Object.assign(store.records, records);
+    const assets = records["seg::assets"];
+    const previous = assets && store.records["seg::assets"];
+    if (!previous || previous === assets) {
+      Object.assign(store.records, records);
+    } else {
+      for (const name in assets) {
+        const values = assets[name];
+        if (Array.isArray(values)) {
+          previous[name] ? previous[name].push(...values) : previous[name] = values;
+        }
+      }
+    }
     return true;
   };
   return {
@@ -269,7 +280,7 @@ class FrameImpl {
   #slotRegions = new Map();
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
-  #processedAssets = new Set();
+  #processedAssets = new WeakSet();
   #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
@@ -370,6 +381,7 @@ class FrameImpl {
     this.#revealed.clear();
     this.#fallbackShown.clear();
     this.#appliedHoles.clear();
+    this.#processedAssets = new WeakSet();
     this.#errorNotified = false;
     clearStreamRecords(this.#store, root);
   }
@@ -429,12 +441,17 @@ class FrameImpl {
       }
     }
     for (const key in this.#store) {
-      if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
-      this.#processedAssets.add(key);
       const record = this.#store[key];
-      if (record && record.modules) {
+      if (!key.endsWith(":assets") || !record || this.#processedAssets.has(record)) {
+        continue;
+      }
+      this.#processedAssets.add(record);
+      if (record.modules) {
         for (const href of record.modules) ensureModulePreload(href);
       }
+      if (record.preloads) {
+        for (const entry of record.preloads) ensurePreload(entry);
+      }
     }
     this.#syncSlots();
   }
@@ -902,12 +919,28 @@ function parseFragment(html) {
   template.innerHTML = html;
   return template.content;
 }
-function findHeadElement(selector, attr, value) {
-  for (const node of document.head.querySelectorAll(selector)) {
-    if (node.getAttribute(attr) === value) return node;
+const PRELOAD_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+function findHeadElement(selector, attr, value, qualifiers) {
+  candidate: for (const node of document.head.querySelectorAll(selector)) {
+    if (node.getAttribute(attr) !== value) continue;
+    if (!qualifiers) return node;
+    for (let i = 0; i < PRELOAD_QUALIFIERS.length; i++) {
+      const name = PRELOAD_QUALIFIERS[i];
+      if (node.getAttribute(name) !== (qualifiers[name] ?? null)) continue candidate;
+    }
+    return node;
   }
   return null;
 }
+function ensurePreload(entry) {
+  const attrs = entry.attrs;
+  if (findHeadElement('link[rel="preload"]', "href", entry.href, attrs)) return;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  for (const name in attrs) link.setAttribute(name, attrs[name]);
+  link.setAttribute("href", entry.href);
+  document.head.appendChild(link);
+}
 function ensureStylesheet(entry, onSettle) {
   const href = typeof entry === "string" ? entry : entry.href;
   let link = findHeadElement('link[rel="stylesheet"]', "href", href);

package/frames/dist/client.dev.cjs

@@ -180,7 +180,18 @@ function createFrameHost(options = {}) {
       store.version = version;
       clearStreamRecords(store.records);
     }
-    Object.assign(store.records, records);
+    const assets = records["seg::assets"];
+    const previous = assets && store.records["seg::assets"];
+    if (!previous || previous === assets) {
+      Object.assign(store.records, records);
+    } else {
+      for (const name in assets) {
+        const values = assets[name];
+        if (Array.isArray(values)) {
+          previous[name] ? previous[name].push(...values) : previous[name] = values;
+        }
+      }
+    }
     return true;
   };
   return {
@@ -272,7 +283,7 @@ class FrameImpl {
   #slotRegions = new Map();
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
-  #processedAssets = new Set();
+  #processedAssets = new WeakSet();
   #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
@@ -373,6 +384,7 @@ class FrameImpl {
     this.#revealed.clear();
     this.#fallbackShown.clear();
     this.#appliedHoles.clear();
+    this.#processedAssets = new WeakSet();
     this.#errorNotified = false;
     clearStreamRecords(this.#store, root);
   }
@@ -433,12 +445,17 @@ class FrameImpl {
       }
     }
     for (const key in this.#store) {
-      if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
-      this.#processedAssets.add(key);
       const record = this.#store[key];
-      if (record && record.modules) {
+      if (!key.endsWith(":assets") || !record || this.#processedAssets.has(record)) {
+        continue;
+      }
+      this.#processedAssets.add(record);
+      if (record.modules) {
         for (const href of record.modules) ensureModulePreload(href);
       }
+      if (record.preloads) {
+        for (const entry of record.preloads) ensurePreload(entry);
+      }
     }
     this.#syncSlots();
   }
@@ -912,12 +929,28 @@ function parseFragment(html) {
   template.innerHTML = html;
   return template.content;
 }
-function findHeadElement(selector, attr, value) {
-  for (const node of document.head.querySelectorAll(selector)) {
-    if (node.getAttribute(attr) === value) return node;
+const PRELOAD_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+function findHeadElement(selector, attr, value, qualifiers) {
+  candidate: for (const node of document.head.querySelectorAll(selector)) {
+    if (node.getAttribute(attr) !== value) continue;
+    if (!qualifiers) return node;
+    for (let i = 0; i < PRELOAD_QUALIFIERS.length; i++) {
+      const name = PRELOAD_QUALIFIERS[i];
+      if (node.getAttribute(name) !== (qualifiers[name] ?? null)) continue candidate;
+    }
+    return node;
   }
   return null;
 }
+function ensurePreload(entry) {
+  const attrs = entry.attrs;
+  if (findHeadElement('link[rel="preload"]', "href", entry.href, attrs)) return;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  for (const name in attrs) link.setAttribute(name, attrs[name]);
+  link.setAttribute("href", entry.href);
+  document.head.appendChild(link);
+}
 function ensureStylesheet(entry, onSettle) {
   const href = typeof entry === "string" ? entry : entry.href;
   let link = findHeadElement('link[rel="stylesheet"]', "href", href);