@solidjs/web 2.0.0-beta.29 → 2.0.0-beta.30

package/frames/dist/server.js

@@ -135,6 +135,90 @@ function createJSONSerializer({
   };
 }
 
+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", "icon", "stylesheet"]);
+const RESOURCE_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+const STYLESHEET_FETCH_META = new Set(["crossorigin", "integrity", "referrerpolicy", "fetchpriority"]);
+function evalHeadValue(v) {
+  return typeof v === "function" ? v() : v;
+}
+function evalHeadProps(props, presets) {
+  const out = {};
+  for (const name in props) out[name] = presets && name in presets ? presets[name] : evalHeadValue(props[name]);
+  return out;
+}
+function classifyHeadTag(desc) {
+  const tag = desc.tag;
+  if (tag === "link") {
+    const rel = evalHeadValue(desc.props && desc.props.rel);
+    return {
+      resource: RESOURCE_LINK_RELS.has(rel),
+      rel
+    };
+  }
+  if (tag === "style") return {
+    resource: !!(desc.props && "href" in desc.props)
+  };
+  if (tag === "script") return {
+    resource: !!(desc.props && "src" in desc.props)
+  };
+  return {
+    resource: false
+  };
+}
+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];
+  }
+  return id;
+}
+function replaceableIdentity(tag, props, key, unique) {
+  if (tag === "title") return "title";
+  if (tag === "base") return "base";
+  if (tag === "meta" && props.charset != null) return "charset";
+  if (key != null) return tag + ":key:" + key;
+  if (tag === "meta") {
+    if (props.name != null) return "meta:name:" + props.name;
+    if (props.property != null) return "meta:property:" + props.property;
+    if (props["http-equiv"] != null) return "meta:http-equiv:" + props["http-equiv"];
+    return unique;
+  }
+  if (tag === "link") return "link:" + (props.rel || "") + ":" + (props.href || "");
+  return unique;
+}
+function resolveHead(groups) {
+  const winners = new Map();
+  const sorted = groups.slice().sort((a, b) => a.seq - b.seq);
+  for (let i = 0; i < sorted.length; i++) {
+    const group = sorted[i];
+    const byIdentity = new Map();
+    for (let j = 0; j < group.tags.length; j++) {
+      const t = group.tags[j];
+      let list = byIdentity.get(t.identity);
+      if (!list) byIdentity.set(t.identity, list = []);
+      list.push(t);
+    }
+    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]]
+        });
+      } else {
+        winners.set(identity, {
+          seq: group.seq,
+          tags
+        });
+      }
+    }
+  }
+  return winners;
+}
+
 function joinAssetPath(base, file) {
   if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(file)) return file;
   if (typeof base !== "string" || !base) base = "/";
@@ -276,7 +360,258 @@ function applyAssetTracking(context, tracking, manifest, noScripts) {
     context.resolveAssetsSync = resolve;
   }
 }
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&(8!==o.nodeType||o.nodeValue!=="pl-"+e);)t=o.nextSibling,o.remove(),o=t;t=o.parentNode,_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e,t),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+function isCssUrl(url) {
+  const q = url.search(/[?#]/);
+  return (q === -1 ? url : url.slice(0, q)).endsWith(".css");
+}
+function createHeadRegistry() {
+  return {
+    pending: [],
+    committed: [],
+    seq: 0,
+    uniq: 0,
+    resources: new Set(),
+    eagerHtml: "",
+    flushed: null,
+    shellFlushed: false
+  };
+}
+function registerHeadTags(registry, context, tracking, emitResource, nonce, tags) {
+  const boundary = context._currentBoundaryId || "";
+  let replaceable = null;
+  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);
+    if (cls.resource) {
+      emitHeadResource(registry, context, tracking, emitResource, nonce, desc, cls.rel);
+    } else {
+      (replaceable || (replaceable = [])).push(cls.rel !== undefined ? {
+        tag: desc.tag,
+        props: desc.props,
+        key: desc.key,
+        rel: cls.rel
+      } : desc);
+    }
+  }
+  if (replaceable) registry.pending.push({
+    boundary,
+    tags: replaceable
+  });
+}
+function emitHeadResource(registry, context, tracking, emitResource, nonce, desc, rel) {
+  let props;
+  try {
+    props = evalHeadProps(desc.props || {}, rel !== undefined ? {
+      rel
+    } : undefined);
+  } catch (err) {
+    console.warn(`useHead: error evaluating resource tag props`, err);
+    return;
+  }
+  const identity = resourceIdentity(desc.tag, props);
+  if (registry.resources.has(identity)) return;
+  registry.resources.add(identity);
+  if (desc.tag === "link" && (rel === "stylesheet" || rel === "modulepreload")) {
+    let plain = true;
+    let gateable = rel === "stylesheet";
+    for (const name in props) {
+      if (name === "rel" || name === "href") continue;
+      plain = false;
+      if (!STYLESHEET_FETCH_META.has(name)) gateable = false;
+    }
+    if (plain && props.href != null) {
+      const isCss = isCssUrl(props.href);
+      if (rel === "stylesheet" ? isCss : !isCss) {
+        context.registerAsset(rel === "stylesheet" ? "style" : "module", props.href);
+        return;
+      }
+    }
+    if (gateable && props.href != null) {
+      const attrHtml = renderHeadAttrHtml(props);
+      const entry = {
+        href: props.href,
+        attrHtml,
+        attrs: headAttrRecord(props)
+      };
+      if (tracking.currentBoundaryId) {
+        let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
+        if (!styles) tracking.boundaryStyles.set(tracking.currentBoundaryId, styles = new Set());
+        styles.add(entry);
+      }
+      const markup = `<link${attrHtml}>`;
+      if (emitResource) emitResource(markup, entry);else {
+        registry.eagerHtml += markup;
+        entry.emitted = true;
+      }
+      return;
+    }
+  }
+  const url = props.href || props.src;
+  if (url != null && tracking.emittedAssets.has(url)) return;
+  const markup = renderHeadTagMarkup(desc.tag, props, null, nonce);
+  if (emitResource) emitResource(markup);else registry.eagerHtml += markup;
+}
+function commitHeadBoundary(registry, boundary, isPendingFragment) {
+  const keep = [];
+  const groups = [];
+  for (let i = 0; i < registry.pending.length; i++) {
+    const reg = registry.pending[i];
+    const mine = boundary === "" ? !(isPendingFragment && reg.boundary !== "" && isPendingFragment(reg.boundary)) : reg.boundary === boundary;
+    if (!mine) {
+      keep.push(reg);
+      continue;
+    }
+    const tags = [];
+    for (let j = 0; j < reg.tags.length; j++) {
+      const desc = reg.tags[j];
+      let props, key;
+      try {
+        props = evalHeadProps(desc.props || {}, desc.rel !== undefined ? {
+          rel: desc.rel
+        } : 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({
+        tag: desc.tag,
+        props,
+        identity
+      });
+    }
+    if (tags.length) groups.push({
+      seq: registry.seq++,
+      tags
+    });
+  }
+  registry.pending = keep;
+  for (let i = 0; i < groups.length; i++) registry.committed.push(groups[i]);
+  return groups;
+}
+function adoptHeadBoundary(registry, childKey, parentKey) {
+  for (let i = 0; i < registry.pending.length; i++) {
+    if (registry.pending[i].boundary === childKey) registry.pending[i].boundary = parentKey;
+  }
+}
+function dropHeadBoundary(registry, boundary) {
+  registry.pending = registry.pending.filter(reg => reg.boundary !== boundary);
+}
+function headGroupSignature(winner) {
+  let sig = "" + winner.seq;
+  for (let i = 0; i < winner.tags.length; i++) {
+    const t = winner.tags[i];
+    sig += "|" + t.tag + JSON.stringify(t.props);
+  }
+  return sig;
+}
+function renderShellHead(registry, nonce, isPendingFragment) {
+  commitHeadBoundary(registry, "", isPendingFragment);
+  registry.shellFlushed = true;
+  const winners = resolveHead(registry.committed);
+  registry.flushed = new Map();
+  let prelude = "";
+  let links = "";
+  let metas = "";
+  let others = "";
+  let scripts = "";
+  for (const [identity, winner] of winners) {
+    registry.flushed.set(identity, headGroupSignature(winner));
+    for (let i = 0; i < winner.tags.length; i++) {
+      const t = winner.tags[i];
+      const markup = renderHeadTagMarkup(t.tag, t.props, identity, nonce);
+      if (identity === "charset" || identity === "base") prelude += markup;else if (t.tag === "link" || t.tag === "style") links += markup;else if (t.tag === "meta") metas += markup;else if (t.tag === "script") scripts += markup;else others += markup;
+    }
+  }
+  return {
+    prelude,
+    html: registry.eagerHtml + links + metas + others + scripts
+  };
+}
+function flushHeadFragment(registry, boundary) {
+  const groups = commitHeadBoundary(registry, boundary);
+  if (!groups.length) return null;
+  const winners = resolveHead(registry.committed);
+  const affected = new Set();
+  for (let i = 0; i < groups.length; i++) for (let j = 0; j < groups[i].tags.length; j++) affected.add(groups[i].tags[j].identity);
+  const ops = [];
+  for (const identity of affected) {
+    const winner = winners.get(identity);
+    const sig = headGroupSignature(winner);
+    if (registry.flushed.get(identity) === sig) continue;
+    const existed = registry.flushed.has(identity);
+    registry.flushed.set(identity, sig);
+    if (identity === "title") {
+      const children = winner.tags[0].props.children;
+      ops.push(["t", children == null ? "" : String(children)]);
+      continue;
+    }
+    if (existed) ops.push(["r", identity]);
+    for (let i = 0; i < winner.tags.length; i++) {
+      const t = winner.tags[i];
+      const attrs = {};
+      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];
+        if (v == null || v === false) continue;
+        attrs[name] = v === true ? "" : String(v);
+      }
+      const children = t.props.children;
+      ops.push(["a", identity, t.tag, attrs, children == null ? null : String(children)]);
+    }
+  }
+  return ops.length ? ops : null;
+}
+function renderHeadAttrHtml(props) {
+  let attrs = "";
+  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];
+    if (v == null || v === false) continue;
+    attrs += v === true ? ` ${name}` : ` ${name}="${escape(String(v), true)}"`;
+  }
+  return attrs;
+}
+function headAttrRecord(props, skipRelHref) {
+  let attrs = null;
+  for (const name in props) {
+    if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
+    if ((name === "rel" || name === "href")) continue;
+    if (!HEAD_ATTR_NAME.test(name)) continue;
+    const v = props[name];
+    if (v == null || v === false) continue;
+    (attrs || (attrs = {}))[name] = v === true ? "" : String(v);
+  }
+  return attrs;
+}
+function renderHeadTagMarkup(tag, props, identity, nonce) {
+  let attrs = renderHeadAttrHtml(props);
+  if (identity != null) attrs += ` data-dh="${escape(identity, true)}"`;
+  if (nonce && (tag === "script" || tag === "style")) attrs += ` nonce="${nonce}"`;
+  if (tag === "meta" || tag === "link" || tag === "base") return `<${tag}${attrs}>`;
+  let body = props.children == null ? "" : String(props.children);
+  if (tag === "script") body = body.replace(/<\/(script)/gi, "<\\/$1");else if (tag === "style") body = escapeStyleContent(body);else body = escape(body);
+  return `<${tag}${attrs}>${body}</${tag}>`;
+}
+const REPLACE_SCRIPT = `function $df(e){return _$HY.f?_$HY.f(e):$dfr(e)}function $dfr(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&(8!==o.nodeType||o.nodeValue!=="pl-"+e);)t=o.nextSibling,o.remove(),o=t;t=o.parentNode,o.replaceWith(n.content),n.remove(),_$HY.fe(e,t),_$HY.hp&&_$HY.hp[e]&&($dh(_$HY.hp[e]),delete _$HY.hp[e]),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const HEAD_SCRIPT = `function $dha(o,i,e,n){for(i=0;i<o.length;i++)e=o[i],"t"==e[0]?((n=document.querySelector("title"))||(n=document.createElement("title"),document.head.appendChild(n)),n.textContent=e[1],n.setAttribute("data-dh","title")):"r"==e[0]?$dhr(e[1]):(n=document.createElement(e[2]),Object.keys(e[3]).forEach(function(a){n.setAttribute(a,e[3][a])}),null!=e[4]&&(n.textContent=e[4]),n.setAttribute("data-dh",e[1]),document.head.appendChild(n))}function $dhr(v,l,i){for(l=document.head.querySelectorAll("[data-dh]"),i=0;i<l.length;i++)l[i].getAttribute("data-dh")==v&&l[i].remove()}function $dh(o){_$HY.h?_$HY.h(o):$dha(o)}`;
 function renderToStream(code, options = {}) {
   let {
     nonce,
@@ -284,7 +619,8 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId = "",
     noScripts,
-    manifest
+    manifest,
+    onHead
   } = options;
   let dispose;
   const blockingPromises = new Set();
@@ -326,8 +662,8 @@ function renderToStream(code, options = {}) {
       if (styles.links.length) {
         emitTask(`$dfs("${key}",${styles.links.length},${deferActivation ? 1 : 0})`);
         writeTasks();
-        for (const url of styles.links) {
-          buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
+        for (const entry of styles.links) {
+          buffer.write(typeof entry === "string" ? `<link rel="stylesheet" href="${entry}" onload="$dfc('${key}')" onerror="$dfc('${key}')">` : `<link${entry.attrHtml} onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
         }
         buffer.write(`<template id="${key}">${value}</template>`);
       } else {
@@ -345,10 +681,12 @@ function renderToStream(code, options = {}) {
         buffer.write(`<link rel="modulepreload" href="${value}">`);
       } else if (type === "inline-style") {
         buffer.write(renderInlineStyle(value, nonce));
+      } else if (type === "head-tag") {
+        buffer.write(value);
       }
     },
     shell(shellHtml, meta) {
-      buffer.write(assembleDocument(shellHtml, meta.assets, meta.preloads, meta.inlineStyles, meta.tasks.length ? meta.tasks : "", nonce));
+      buffer.write(assembleDocument(shellHtml, meta.assets, meta.preloads, meta.inlineStyles, meta.tasks.length ? meta.tasks : "", nonce, meta.head, onHead));
     },
     ...options.sink
   };
@@ -419,10 +757,28 @@ function renderToStream(code, options = {}) {
     }
   };
   const tracking = createAssetTracking();
+  const headRegistry = createHeadRegistry();
+  let headScriptFlushed = false;
+  const emitHeadOps = (key, ops) => {
+    const payload = JSON.stringify(ops).replace(/</g, "\\u003C");
+    emitTask(`${!headScriptFlushed ? HEAD_SCRIPT : ""}(_$HY.hp=_$HY.hp||{})[${JSON.stringify(key)}]=${payload}`);
+    headScriptFlushed = true;
+  };
   sharedConfig.context = context = {
     async: true,
     assets: [],
     nonce,
+    registerHeadTags(tags) {
+      registerHeadTags(headRegistry, context, tracking,
+      (markup, gateEntry) => {
+        if (!firstFlushed) {
+          headRegistry.eagerHtml += markup;
+          if (gateEntry) gateEntry.emitted = true;
+        } else if (!gateEntry || !tracking.currentBoundaryId) {
+          sink.asset("head-tag", markup);
+        }
+      }, nonce, tags);
+    },
     registerAsset(type, value) {
       if (type === "inline-style") {
         const entry = tracking.registerInlineStyle(value);
@@ -513,10 +869,12 @@ function renderToStream(code, options = {}) {
             parent.children[key] = value !== undefined ? value : "";
             serializeFragmentAssets(key, tracking.boundaryModules, context);
             propagateBoundaryStyles(key, parentKey, tracking);
+            adoptHeadBoundary(headRegistry, key, parentKey);
             item.resolve();
             return;
           }
           if (!completed) {
+            if (error) dropHeadBoundary(headRegistry, key);
             if (!firstFlushed) {
               queue(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
               serializeFragmentAssets(key, tracking.boundaryModules, context);
@@ -524,6 +882,8 @@ function renderToStream(code, options = {}) {
             } else {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
+              const headOps = error ? null : flushHeadFragment(headRegistry, key);
+              if (headOps) emitHeadOps(key, headOps);
               sink.fragment(key, value !== undefined ? value : " ", {
                 styles,
                 revealGroup,
@@ -611,14 +971,16 @@ function renderToStream(code, options = {}) {
     const assetsHtml = resolveAssetsHtml(context.assets);
     headStyles = new Set();
     for (const url of tracking.emittedAssets) {
-      if (url.endsWith(".css")) headStyles.add(url);
+      if (isCssUrl(url)) headStyles.add(url);
     }
     serializeRootAssets();
+    const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
     sink.shell(html, {
       assets: assetsHtml,
       preloads: tracking.emittedAssets,
       inlineStyles: tracking.inlineStyles,
-      tasks
+      tasks,
+      head
     });
     tasks = "";
     onCompleteShell && onCompleteShell({
@@ -1004,23 +1366,42 @@ function resolveAssetsHtml(assets) {
   for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
   return out;
 }
-function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts, nonce) {
+function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts, nonce, headTags, onHead) {
   const scriptTag = scripts ? `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>` : "";
-  if (!assetsHtml && !(emittedAssets && emittedAssets.size) && !(inlineStyles && inlineStyles.size)) {
+  const headTagsHtml = headTags ? headTags.html : "";
+  const headPrelude = headTags ? headTags.prelude : "";
+  if (!onHead && !assetsHtml && !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);
   }
+  if (headPrelude) {
+    const open = html.match(/<head(?:\s[^>]*)?>/);
+    if (open) {
+      const at = open.index + open[0].length;
+      html = html.slice(0, at) + headPrelude + html.slice(at);
+    }
+  }
   const headIdx = html.indexOf("</head>");
   if (headIdx === -1) {
+    if (onHead) {
+      onHead(headPrelude + headTagsHtml + (assetsHtml || "") + 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);
   }
-  let head = assetsHtml || "";
+  const head = headTagsHtml + (assetsHtml || "") + 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;
+  return xsIdx < headIdx ? html.slice(0, xsIdx) + scriptTag + html.slice(xsIdx, headIdx) + head + html.slice(headIdx) : html.slice(0, headIdx) + head + html.slice(headIdx, xsIdx) + scriptTag + html.slice(xsIdx);
+}
+function renderHeadAssets(emittedAssets, inlineStyles, nonce) {
+  let head = "";
   if (emittedAssets && emittedAssets.size) {
     for (const url of emittedAssets) {
-      head += url.endsWith(".css") ? `<link rel="stylesheet" href="${url}">` : `<link rel="modulepreload" href="${url}">`;
+      head += isCssUrl(url) ? `<link rel="stylesheet" href="${url}">` : `<link rel="modulepreload" href="${url}">`;
     }
   }
   if (inlineStyles && inlineStyles.size) {
@@ -1030,10 +1411,7 @@ function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts
       head += renderInlineStyle(entry, 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;
-  return xsIdx < headIdx ? html.slice(0, xsIdx) + scriptTag + html.slice(xsIdx, headIdx) + head + html.slice(headIdx) : html.slice(0, headIdx) + head + html.slice(headIdx, xsIdx) + scriptTag + html.slice(xsIdx);
+  return head;
 }
 function serializeFragmentAssets(key, boundaryModules, context) {
   const map = boundaryModules.get(key);
@@ -1063,7 +1441,12 @@ function collectStreamStyles(key, tracking, headStyles) {
   for (const entry of styles) {
     if (typeof entry === "string") {
       if (!headStyles || !headStyles.has(entry)) links.push(entry);
-    } else if (!entry.emitted) {
+    } else if (entry.emitted) {
+      continue;
+    } else if (entry.attrHtml !== undefined) {
+      entry.emitted = true;
+      links.push(entry);
+    } else {
       entry.emitted = true;
       inline.push(entry);
     }
@@ -1460,7 +1843,12 @@ function createFrameSink(emit, frame) {
           version,
           key
         };
-        if (links.length) chunk.styles = links;
+        if (links.length) {
+          chunk.styles = links.map(e => typeof e === "string" ? e : e.attrs ? {
+            href: e.href,
+            attrs: e.attrs
+          } : e.href);
+        }
         if (inline.length) {
           chunk.inlineStyles = inline.map(e => ({
             id: e.id,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.29",
+  "version": "2.0.0-beta.30",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -316,10 +316,10 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.29"
+    "solid-js": "^2.0.0-beta.30"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.29"
+    "solid-js": "2.0.0-beta.30"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/types/client.d.ts

@@ -127,8 +127,28 @@ export function getHydrationKey(): string | undefined;
 export function getNextElement(template?: () => Element): Element;
 export function getNextMatch(start: Node, elementName: string): Element;
 export function getNextMarker(start: Node): [Node, Array<Node>];
+/** @deprecated Use `useHead` — removed before `0.50.0` stable. */
 export function useAssets(fn: () => JSX.Element): void;
+/** @deprecated Use `useHead` — removed before `0.50.0` stable. */
 export function getAssets(): string;
+/**
+ * A head tag descriptor. Props values may be getters (reactive on the
+ * client); `children` is the text body. `key` overrides the built-in dedupe
+ * identity (`title` is a hard singleton that `key` cannot fork).
+ */
+export type HeadTag = {
+  tag: "title" | "meta" | "link" | "style" | "script" | "base";
+  props: Record<string, any>;
+  key?: string | (() => string);
+};
+/**
+ * Registers head tags with the ambient head registry under the current
+ * owner. An array is a group — one replacement set. Resolution is
+ * last-committed group per identity; disposal restores the previous winner.
+ * During hydration the server-flushed head state stays authoritative until
+ * hydration completes. See docs/head-management-rfc.md.
+ */
+export function useHead(tag: HeadTag | HeadTag[]): void;
 export type AssetDescriptor =
   | { type: "style"; href: string; attrs?: Record<string, string> }
   | { type: "inline-style"; id: string; content?: string; attrs?: Record<string, string> }

package/types/frames/frame-client.d.ts

@@ -84,6 +84,15 @@ export interface SlotContext {
    * server content, or the owning frame is disposed.
    */
   onCleanup(fn: () => void): void;
+  /**
+   * Live-props opt-in: a binding that registers here receives the
+   * re-resolved props when a re-sent record's args CHANGE in value, instead
+   * of the occurrence being re-called — the invocation's instance (and its
+   * client state) survives the change. Register synchronously during the
+   * invocation; one updater per occurrence (last registration wins). A
+   * genuine re-call or unmount clears it before/with the binding it served.
+   */
+  onUpdate(fn: (props: Record<string, unknown>) => void): void;
   /**
    * The range's current interior — server-rendered client content on an
    * adopted document-SSR boot, or the previous output on a re-call. A
@@ -122,6 +131,22 @@ export interface Frame {
   readonly error: unknown;
   /** Whether the named fragment has been revealed into the boundary. */
   isRevealed(segment: string): boolean;
+  /**
+   * Re-key this live frame to a different boundary id (the mount-preserving
+   * half of a call-site handoff): nothing tears down — the element, store,
+   * and slot state stay — while leaving the old id stashes a retention
+   * snapshot under it and joining the new id seeds/drains its retained
+   * store and buffered chunks. Version affinity resets: histories are per
+   * boundary id.
+   */
+  rebind(id: string): void;
+  /**
+   * Forget the version baseline without touching content — the next write
+   * is accepted whatever its number. Called by the host after seeding a
+   * registration from a retained snapshot, whose numbering belongs to a
+   * different stream space.
+   */
+  rebase(): void;
   /** Tear down: slot cleanups cascade, later chunks are ignored. Idempotent. */
   dispose(): void;
 }

package/types/frames/frame-transport.d.ts

@@ -79,6 +79,32 @@ export const SERVER_COMPONENT_SOURCE: unique symbol;
 /** The call's wire address (`frameAddress`), for regions to be emitted under. */
 export const SERVER_COMPONENT_ADDRESS: unique symbol;
 
+/**
+ * The handoff contract on components the transport resolves: `{ fnId,
+ * frameId, take(prev) }`. A reader whose source resolved a NEW component
+ * while a previous one is mounted offers the old one — `take` rebinds the
+ * live mount when both are boundaries of the same function (the element and
+ * its slot state stay; the incoming stream morphs it), and the reader keeps
+ * its previous value instead of remounting. `Symbol.for`, so frameworks can
+ * honor it without importing this module.
+ */
+export const COMPONENT_HANDOFF: unique symbol;
+
+/** The value under `COMPONENT_HANDOFF` on a transport-resolved component. */
+export interface ComponentHandoff {
+  /** The server function id both peers derive the boundary's calls from. */
+  fnId: string;
+  /** The frame id this component's fresh mounts register under. */
+  frameId: string;
+  /**
+   * Offer `prev` (the reader's current value) to this component. Returns
+   * true when the reader should KEEP prev — the mounted frame was rebound
+   * to this component's id (or already showed it); false means swap
+   * normally (different function, unbranded prev, or nothing mounted).
+   */
+  take(prev: unknown): boolean;
+}
+
 /**
  * Seroval plugin for a server component crossing a serialization boundary:
  * a branded component serializes as a REFERENCE — a per-function document