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

package/dist/server.js

@@ -100,6 +100,90 @@ function getLocalHeaderScript(id) {
 }
 Feature.RegExp;
 
+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 = "/";
@@ -241,14 +325,274 @@ function applyAssetTracking(context, tracking, manifest, noScripts) {
     context.resolveAssetsSync = resolve;
   }
 }
+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}>`;
+}
+function useHead(tags) {
+  const ctx = sharedConfig.context;
+  if (!ctx || !ctx.registerHeadTags) {
+    console.warn("useHead() called outside of a server render; registration ignored.");
+    return;
+  }
+  ctx.registerHeadTags(Array.isArray(tags) ? tags : [tags]);
+}
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-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])}`;
+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 renderToString(code, options = {}) {
   const {
     renderId = "",
     nonce,
     noScripts,
-    manifest
+    manifest,
+    onHead
   } = options;
   let scripts = "";
   const serializer = createHydrationSerializer({
@@ -264,12 +608,16 @@ function renderToString(code, options = {}) {
     onError: options.onError
   });
   const tracking = createAssetTracking();
+  const headRegistry = createHeadRegistry();
   sharedConfig.context = {
     assets: [],
     nonce,
     escape: escape,
     resolve: resolveSSRNode,
     ssr: ssr,
+    registerHeadTags(tags) {
+      registerHeadTags(headRegistry, sharedConfig.context, tracking, null, nonce, tags);
+    },
     serialize(id, p) {
       if (sharedConfig.context.noHydrate) return;
       if (p != null && typeof p === "object" && (typeof p.then === "function" || typeof p[Symbol.asyncIterator] === "function")) {
@@ -305,7 +653,8 @@ function renderToString(code, options = {}) {
   sharedConfig.context.noHydrate = true;
   serializer.close();
   const assetsHtml = resolveAssetsHtml(sharedConfig.context.assets);
-  return assembleDocument(html, assetsHtml, tracking.emittedAssets, tracking.inlineStyles, scripts.length ? scripts : "", nonce);
+  const head = renderShellHead(headRegistry, nonce, null);
+  return assembleDocument(html, assetsHtml, tracking.emittedAssets, tracking.inlineStyles, scripts.length ? scripts : "", nonce, head, onHead);
 }
 function renderToStream(code, options = {}) {
   let {
@@ -314,7 +663,8 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId = "",
     noScripts,
-    manifest
+    manifest,
+    onHead
   } = options;
   let dispose;
   const blockingPromises = new Set();
@@ -356,8 +706,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 {
@@ -375,10 +725,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
   };
@@ -449,10 +801,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);
@@ -543,10 +913,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);
@@ -554,6 +926,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,
@@ -641,14 +1015,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({
@@ -1148,23 +1524,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) {
@@ -1174,10 +1569,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);
@@ -1207,7 +1599,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);
     }
@@ -1467,8 +1864,41 @@ function Portal(props) {
   if (o?.id != null) getNextChildId(o);
   return undefined;
 }
-function clientOnly(_fn, _options = {}) {
-  return props => createMemo(() => props.fallback);
+function registerClientOnlyPreload(moduleUrl) {
+  const ctx = sharedConfig.context;
+  if (!ctx?.registerAsset || !ctx.resolveAssets) return;
+  const registerAsset = ctx.registerAsset;
+  const resolve = ctx.resolveAssets;
+  const apply = assets => {
+    if (!assets) return;
+    for (let i = 0; i < assets.css.length; i++) {
+      const css = assets.css[i];
+      if (typeof css === "string") registerAsset("style", css);else registerAsset("inline-style", css);
+    }
+    for (let i = 0; i < assets.js.length; i++) registerAsset("module", assets.js[i]);
+  };
+  const assets = resolve(moduleUrl);
+  if (assets && typeof assets.then === "function") {
+    const boundary = ctx._currentBoundaryId;
+    assets.then(resolved => {
+      const current = ctx._currentBoundaryId;
+      ctx._currentBoundaryId = boundary;
+      try {
+        apply(resolved);
+      } finally {
+        ctx._currentBoundaryId = current;
+      }
+    },
+    () => {});
+  } else {
+    apply(assets);
+  }
+}
+function clientOnly(_fn, _options = {}, moduleUrl) {
+  return props => {
+    if (moduleUrl) registerClientOnlyPreload(moduleUrl);
+    return createMemo(() => props.fallback);
+  };
 }
 function httpStatus(code, text) {
   const event = getRequestEvent();
@@ -1499,4 +1929,4 @@ function httpHeader(name, value, options) {
   }
 }
 
-export { Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, notSup as acquireAsset, notSup as addEvent, applyRef, notSup as assign, claimElement, claimElementTree, notSup as className, clientOnly, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, notSup as getDelegatedRoot, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, httpHeader, httpStatus, notSup as hydrate, notSup as insert, isDev, isHref, isResponseEnvelope, isServer, memo, redirect, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, registerElementClaim, reload, notSup as render, renderToStream, renderToString, renderToStringAsync, respond, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useAssets };
+export { Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, notSup as acquireAsset, notSup as addEvent, applyRef, notSup as assign, claimElement, claimElementTree, notSup as className, clientOnly, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, notSup as getDelegatedRoot, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, httpHeader, httpStatus, notSup as hydrate, notSup as insert, isDev, isHref, isResponseEnvelope, isServer, memo, redirect, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, registerElementClaim, reload, notSup as render, renderToStream, renderToString, renderToStringAsync, respond, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useAssets, useHead };