@solidjs/web 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/web.js

@@ -48,6 +48,7 @@ const Namespaces = {
 const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
 const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(/*#__PURE__*/"a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,isindex,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,math,menu,menuitem,meta,meter,multicol,nav,nextid,nobr,noembed,noframes,noindex,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,portal,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,search,section,select,shadow,slot,small,source,spacer,span,strike,strong,style,sub,summary,sup,svg,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,webview,xmp".split(","));
+const COMPOSED_BODY_FRAMING = /*#__PURE__*/new Set(["content-length", "content-encoding", "transfer-encoding"]);
 
 const transparentOptions = {
   transparent: true,
@@ -214,7 +215,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 +295,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"}`;
@@ -337,6 +340,8 @@ function installListDriver(driver) {
   listDriver = driver;
 }
 const $$EVENT_OWNER = "_$SOLID_EVENT_OWNER";
+const $$EVENT_TUPLE = Symbol();
+const hasOwn = Object.prototype.hasOwnProperty;
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
 const delegatedContainers = new Map();
@@ -454,7 +459,8 @@ function findOwner(target, state) {
 }
 function setProperty(node, name, value) {
   if (isHydrating(node)) return;
-  node[name] = value;
+  const nodeName = node.nodeName;
+  if (name === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else if ((name === "value" || name === "defaultValue") && (nodeName === "INPUT" || nodeName === "TEXTAREA")) node[name] = value ?? "";else node[name] = value;
 }
 let claimHandlers = null;
 const CLAIM_SEAM = Symbol.for("solid.element-claims");
@@ -488,7 +494,17 @@ function claimElement(node) {
 }
 function setAttribute(node, name, value) {
   if (isHydrating(node)) return;
-  if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
+  const selectMultiple = name === "multiple" && node.localName === "select";
+  if (value == null || value === false) node.removeAttribute(name);else {
+    node.setAttribute(name, value === true ? "" : value);
+    if (selectMultiple && !node._$multiple) {
+      const options = node.options;
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].defaultSelected) options[i].selected = true;
+      }
+    }
+  }
+  if (selectMultiple) node._$multiple = true;
   if (claimHandlers !== null && (name === "href" || name === "action")) claimElement(node);
 }
 function setAttributeNS(node, namespace, name, value) {
@@ -496,22 +512,32 @@ function setAttributeNS(node, namespace, name, value) {
   if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
 function className(node, value, prev) {
-  if (isHydrating(node)) return;
+  if (typeof value === "number") value = "" + value;
+  if (typeof prev === "number") prev = "" + prev;
+  if (isHydrating(node)) {
+    node._$classes = value && typeof value === "object" ? classListToObject(value) : undefined;
+    return;
+  }
   if (value == null || value === false) {
-    prev && node.removeAttribute("class");
+    if (prev || node._$classes) {
+      node.removeAttribute("class");
+      node._$classes = undefined;
+    }
     return;
   }
   if (typeof value === "string") {
+    node._$classes = undefined;
     value !== prev && node.setAttribute("class", value);
     return;
   }
+  let applied;
   if (typeof prev === "string") {
-    prev = {};
+    applied = {};
     node.removeAttribute("class");
-  } else prev = classListToObject(prev || {});
+  } else applied = node._$classes || classListToObject(prev || {});
   value = classListToObject(value);
-  const classKeys = Object.keys(value || {});
-  const prevKeys = Object.keys(prev);
+  const classKeys = Object.keys(value);
+  const prevKeys = Object.keys(applied);
   let i, len;
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
@@ -521,22 +547,34 @@ function className(node, value, prev) {
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
-    if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
+    if (!key || key === "undefined" || applied[key] === classValue || !classValue) continue;
     node.classList.add(key);
   }
+  node._$classes = value;
 }
 function addEvent(node, name, handler, delegate) {
   if (delegate) {
+    const key = `$$${name}`;
+    let data;
     if (Array.isArray(handler)) {
-      node[`$$${name}`] = handler[0];
-      node[`$$${name}Data`] = handler[1];
-    } else node[`$$${name}`] = handler;
-  } else if (Array.isArray(handler)) {
+      data = handler[1];
+      node[key] = handler[0];
+    } else node[key] = handler;
+    node[`${key}Data`] = data;
+    return;
+  }
+  if (Array.isArray(handler)) {
     const handlerFn = handler[0];
-    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
-  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
+    const listener = e => handlerFn.call(node, handler[1], e);
+    listener[$$EVENT_TUPLE] = handler;
+    node.addEventListener(name, listener);
+    return listener;
+  }
+  node.addEventListener(name, handler, typeof handler !== "function" && handler);
+  return handler;
 }
 function style(node, value, prev) {
+  if (isHydrating(node)) return;
   if (!value) {
     if (prev || node._$styles) {
       setAttribute(node, "style");
@@ -561,12 +599,13 @@ function style(node, value, prev) {
   }
   let v, s;
   for (s in applied) {
-    if (value[s] == null) {
+    if (!hasOwn.call(value, s) || value[s] == null) {
       nodeStyle.removeProperty(s);
       delete applied[s];
     }
   }
   for (s in value) {
+    if (!hasOwn.call(value, s)) continue;
     v = value[s];
     if (v != null && v !== applied[s]) {
       nodeStyle.setProperty(s, v);
@@ -575,20 +614,28 @@ function style(node, value, prev) {
   }
 }
 function setStyleProperty(node, name, value) {
+  if (isHydrating(node)) return;
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
 function spread(node, props = {}, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) insert(node, () => props.children);
+  const get = typeof props === "function" ? props : () => props;
+  if (!skipChildren) insert(node, () => {
+    const source = get();
+    return hasOwn.call(source, "children") ? source.children : undefined;
+  });
   effect(() => {
-    const r = props.ref;
+    const source = get();
+    const r = hasOwn.call(source, "ref") && source.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 (!hasOwn.call(source, prop)) continue;
       if (prop === "children" || prop === "ref") continue;
-      newProps[prop] = props[prop];
+      newProps[prop] = source[prop];
     }
     return newProps;
   }, props => assign(node, props, true, prevProps, true));
@@ -618,6 +665,19 @@ function scope(fn) {
 const SCOPE_OPTIONS = {
   scope: true
 };
+let insertionParent = null;
+function getInsertionParent() {
+  return insertionParent;
+}
+function withInsertionParent(parent, fn) {
+  const prev = insertionParent;
+  insertionParent = parent;
+  try {
+    return fn();
+  } finally {
+    insertionParent = prev;
+  }
+}
 let hydrationRt = null;
 function installHydrationRuntime() {
   hydrationRt = {
@@ -685,7 +745,7 @@ function insert(parent, accessor, marker, initial, options) {
     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);
+    accessor = withInsertionParent(parent, () => normalize(accessor, initial, multi, true));
     if (typeof accessor !== "function") {
       insertExpression(parent, accessor, initial, marker);
       host && tagHost(accessor, host);
@@ -700,9 +760,9 @@ function insert(parent, accessor, marker, initial, options) {
   let current = initial;
   effect(prev => {
     if (hydrationRt !== null) current = hydrationRt.reclaimRegion(current, parent, marker);
-    const value = normalize(accessor(), current, multi, true);
+    const value = withInsertionParent(parent, () => normalize(accessor(), current, multi, true));
     if (typeof value !== "function") return value;
-    effect(() => (hydrationRt !== null && (current = hydrationRt.reclaimRegion(current, parent, marker)), normalize(value, current, multi)), inner => {
+    effect(() => (hydrationRt !== null && (current = hydrationRt.reclaimRegion(current, parent, marker)), withInsertionParent(parent, () => normalize(value, current, multi))), inner => {
       current = insertExpression(parent, inner, current, marker);
       host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
@@ -1362,7 +1422,8 @@ function classListToObject(classList) {
 function flattenClassList(list, result) {
   for (let i = 0, len = list.length; i < len; i++) {
     const item = list[i];
-    if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
+    if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);
+    else if (typeof item !== "boolean" && (item || item === 0)) result[item] = true;
   }
 }
 function assignProp(node, prop, value, prev, skipRef, nodeName) {
@@ -1378,12 +1439,13 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
-      const h = Array.isArray(prev) ? prev[0] : prev;
-      node.removeEventListener(name, h);
+      if (Array.isArray(value) && typeof prev === "function" && prev[$$EVENT_TUPLE] === value) return prev;
+      node.removeEventListener(name, prev, typeof prev !== "function" && prev);
     }
     if (delegate || value) {
-      addEvent(node, name, value, delegate);
+      const attached = addEvent(node, name, value, delegate);
       delegate && delegateEvents([name]);
+      if (!delegate) return attached;
     }
   } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
     if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
@@ -1423,7 +1485,7 @@ function eventHandler(e, container, state) {
     }
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
-      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
+      data !== undefined ? handler.call(node, data, e) : typeof handler === "function" ? handler.call(node, e) : handler.handleEvent(e);
       if (e.cancelBubble) return;
     }
     node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
@@ -1543,7 +1605,7 @@ function normalize(value, current, multi, doNotUnwrap) {
       const item = value[i],
         prev = current && current[i],
         t = typeof item;
-      if ((t === "string" || t === "number") && prev && prev.nodeType === 3) value[i] = prev;
+      if ((t === "string" || t === "number") && prev && prev.nodeType === 3 && isHydrating(prev)) value[i] = prev;
     }
   }
   return value;
@@ -2015,6 +2077,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
@@ -2035,7 +2098,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
@@ -2053,7 +2122,12 @@ function redirect(url, init = 302) {
     responseInit.status = 302;
   }
   const target = typeof url === "string" ? url : url[HREF];
-  headers.set("Location", typeof target === "string" ? target : String(url));
+  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
@@ -2069,11 +2143,19 @@ function reload(init = {}) {
     headers
   });
 }
+const NULL_BODY_STATUSES = new Set([204, 205, 304]);
 function respond(value, init = {}) {
   const {
     responseInit,
     headers
   } = initWithRevalidate(init);
+  for (const header of COMPOSED_BODY_FRAMING) headers.delete(header);
+  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,
@@ -2180,9 +2262,24 @@ function dynamic(source) {
             return untrack(() => component(props));
           }
         case "string":
-          const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
-          spread(el, props);
-          return el;
+          {
+            if (sharedConfig.hydrating) {
+              const el = getNextElement();
+              spread(el, props);
+              return el;
+            }
+            const owner = getOwner();
+            let el;
+            return () => {
+              if (!el) {
+                runWithOwner(owner, () => {
+                  el = createElement(component, untrack(() => props.is));
+                  spread(el, props);
+                });
+              }
+              return el;
+            };
+          }
       }
     });
   };
@@ -2191,8 +2288,15 @@ function Dynamic(props) {
   const Comp = dynamic(() => props.component);
   return createComponent(Comp, omit(props, "component"));
 }
+const AmbiguousSVGElements = /*#__PURE__*/new Set(["a", "script", "style", "title"]);
 function createElement(tagName, is = undefined) {
-  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+  if (SVGElements.has(tagName)) return document.createElementNS(Namespaces.svg, tagName);
+  if (MathMLElements.has(tagName)) return document.createElementNS(Namespaces.mathml, tagName);
+  if (AmbiguousSVGElements.has(tagName)) {
+    const parent = getInsertionParent();
+    if (parent && parent.namespaceURI === Namespaces.svg && parent.localName !== "foreignObject") return document.createElementNS(Namespaces.svg, tagName);
+  }
+  return document.createElement(tagName, {
     is
   });
 }
@@ -2224,4 +2328,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, 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 };
+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, getInsertionParent, 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);

package/frames/dist/client.dev.js

@@ -178,7 +178,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 {
@@ -270,7 +281,7 @@ class FrameImpl {
   #slotRegions = new Map();
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
-  #processedAssets = new Set();
+  #processedAssets = new WeakSet();
   #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
@@ -371,6 +382,7 @@ class FrameImpl {
     this.#revealed.clear();
     this.#fallbackShown.clear();
     this.#appliedHoles.clear();
+    this.#processedAssets = new WeakSet();
     this.#errorNotified = false;
     clearStreamRecords(this.#store, root);
   }
@@ -431,12 +443,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();
   }
@@ -910,12 +927,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);