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

package/dist/server.js

@@ -1,11 +1,36 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
-import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, getOwner, runWithOwner, createComponent, omit, getNextChildId, onCleanup } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, ssrScope as scope, untrack } from 'solid-js';
+import { Serializer, getCrossReferenceHeader, Feature } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
-import { createMemo } from '@solidjs/signals';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    defaultValue: 2,
+    checked: 1,
+    defaultChecked: 2
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1,
+    defaultSelected: 2
+  },
+  TEXTAREA: {
+    value: 1,
+    defaultValue: 2
+  },
+  VIDEO: {
+    muted: 1,
+    defaultMuted: 2
+  },
+  AUDIO: {
+    muted: 1,
+    defaultMuted: 2
+  }
+};
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -13,52 +38,163 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "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", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
-"webview",
-"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
+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 effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
-  transparent: true
-});
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
-  transparent: true
-}) : createMemo$1(() => fn());
+const transparentOptions = {
+  transparent: true,
+  sync: true
+};
+const syncOptions = {
+  sync: true
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  sync: true,
+  ...options,
+  transparent: !options.scope
+} : transparentOptions);
+const memo = fn => createMemo(() => fn(), syncOptions);
 
-const ES2017FLAG = Feature.AggregateError
-| Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = '_$HY.r';
-function createSerializer({
+const DEFAULT_DISABLED_FEATURES = Feature.AggregateError | Feature.BigIntTypedArray;
+const serializeOnlyDisabledFeatures = () => process.env.NODE_ENV === "development" ? 0 : Feature.ErrorPrototypeStack;
+const HYDRATION_GLOBAL = "_$HY.r";
+const DEFAULT_WEB_PLUGINS = Object.freeze([AbortSignalPlugin,
+CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
+FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin]);
+function resolveSerializerPlugins(customPlugins) {
+  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
+}
+function createSerializer(options) {
+  return new Serializer({
+    ...options,
+    plugins: resolveSerializerPlugins(options.plugins),
+    disabledFeatures: (options.disabledFeatures === undefined ? DEFAULT_DISABLED_FEATURES : options.disabledFeatures) | serializeOnlyDisabledFeatures()
+  });
+}
+function createHydrationSerializer({
   onData,
   onDone,
   scopeId,
   onError,
-  plugins: customPlugins
+  plugins
 }) {
-  const defaultPlugins = [AbortSignalPlugin,
-  CustomEventPlugin, DOMExceptionPlugin, EventPlugin,
-  FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin];
-  const allPlugins = customPlugins ? [...customPlugins, ...defaultPlugins] : defaultPlugins;
-  return new Serializer({
+  return createSerializer({
     scopeId,
-    plugins: allPlugins,
-    globalIdentifier: GLOBAL_IDENTIFIER,
-    disabledFeatures: ES2017FLAG,
+    plugins,
+    globalIdentifier: HYDRATION_GLOBAL,
     onData,
     onDone,
     onError
   });
 }
 function getLocalHeaderScript(id) {
-  return getCrossReferenceHeader(id) + ';';
+  return getCrossReferenceHeader(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", "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") {
+    for (const ns of ["name", "property", "http-equiv"]) if (props[ns] != null) return "meta:" + ns + ":" + props[ns] + (props.media != null ? ":media=" + props.media : "");
+    return unique;
+  }
+  if (tag === "link") {
+    const rel = props.rel || "";
+    if (rel === "icon" || rel === "apple-touch-icon") return "link:" + rel + (props.sizes != null ? ":sizes=" + props.sizes : "") + (props.type != null ? ":type=" + props.type : "");
+    return "link:" + 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 = "/";
+  if (base[base.length - 1] !== "/") base += "/";
+  return base + (file[0] === "/" ? file.slice(1) : file);
+}
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
-  const base = manifest._base || "/";
+  const base = manifest._base;
   const entry = manifest[moduleUrl];
   if (!entry) return null;
   const css = [];
@@ -69,8 +205,8 @@ function resolveAssets(moduleUrl, manifest) {
     visited.add(key);
     const e = manifest[key];
     if (!e) return;
-    js.push(base + e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
+    js.push(joinAssetPath(base, e.file));
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(joinAssetPath(base, e.css[i]));
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
   };
   walk(moduleUrl);
@@ -80,7 +216,7 @@ function resolveAssets(moduleUrl, manifest) {
   };
 }
 function registerEntryAssets(manifest) {
-  if (!manifest) return;
+  if (!manifest || typeof manifest === "function" || typeof manifest.resolve === "function") return;
   const ctx = sharedConfig.context;
   if (!ctx?.registerAsset) return;
   for (const key in manifest) {
@@ -97,25 +233,48 @@ function createAssetTracking() {
   const boundaryModules = new Map();
   const boundaryStyles = new Map();
   const emittedAssets = new Set();
+  const inlineStyles = new Map();
   let currentBoundaryId = null;
   return {
     boundaryModules,
     boundaryStyles,
     emittedAssets,
+    inlineStyles,
+    registerInlineStyle(desc) {
+      let entry = inlineStyles.get(desc.id);
+      if (!entry) {
+        entry = {
+          id: desc.id,
+          content: desc.content || "",
+          attrs: desc.attrs,
+          emitted: false
+        };
+        inlineStyles.set(desc.id, entry);
+      }
+      if (currentBoundaryId) {
+        let styles = boundaryStyles.get(currentBoundaryId);
+        if (!styles) {
+          styles = new Set();
+          boundaryStyles.set(currentBoundaryId, styles);
+        }
+        styles.add(entry);
+      }
+      return entry;
+    },
     get currentBoundaryId() {
       return currentBoundaryId;
     },
     set currentBoundaryId(v) {
       currentBoundaryId = v;
     },
-    registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+    registerModule(key, entryUrl) {
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
-      map[moduleUrl] = entryUrl;
+      map[key] = entryUrl;
     },
     getBoundaryModules(id) {
       return boundaryModules.get(id) || null;
@@ -125,7 +284,24 @@ function createAssetTracking() {
     }
   };
 }
-function applyAssetTracking(context, tracking, manifest) {
+function warnUnresolvedModuleAssets(moduleUrl, warned) {
+  if (warned.has(moduleUrl)) return;
+  warned.add(moduleUrl);
+  console.error(`Asset manifest returned no client assets for module "${moduleUrl}". ` + "If this module is a server-rendered lazy() component, its entry will be missing from " + "the serialized hydration asset map, the client will be unable to preload it, and " + "hydration will fail with 'lazy() module \"…\" was not preloaded before hydration'. " + "This means the integration's asset resolver (dev manifest bridge or build client " + "manifest) failed to answer for this module — check the integration's server logs, " + "restart the dev server, or verify the module is included in the client build.");
+}
+function guardResolvedAssets(moduleUrl, result, warned) {
+  if (result && typeof result.then === "function") {
+    return result.then(assets => {
+      if (!assets || !assets.js || !assets.js.length) warnUnresolvedModuleAssets(moduleUrl, warned);
+      return assets;
+    });
+  }
+  if (!result || !result.js || !result.js.length) warnUnresolvedModuleAssets(moduleUrl, warned);
+  return result;
+}
+function applyAssetTracking(context, tracking, manifest, noScripts) {
+  const warned = new Set();
+  const guard = noScripts ? resolve => resolve : resolve => moduleUrl => guardResolvedAssets(moduleUrl, resolve(moduleUrl), warned);
   Object.defineProperty(context, "_currentBoundaryId", {
     get() {
       return tracking.currentBoundaryId;
@@ -138,19 +314,329 @@ function applyAssetTracking(context, tracking, manifest) {
   });
   context.registerModule = tracking.registerModule;
   context.getBoundaryModules = tracking.getBoundaryModules;
-  if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
+  if (typeof manifest === "function") {
+    context.resolveAssets = guard(manifest);
+  } else if (manifest && typeof manifest.resolve === "function") {
+    context.resolveAssets = guard(key => manifest.resolve(key));
+    if (typeof manifest.resolveSync === "function") {
+      context.resolveAssetsSync = key => manifest.resolveSync(key);
+    }
+  } else if (manifest) {
+    const resolve = moduleUrl => resolveAssets(moduleUrl, manifest);
+    context.resolveAssets = guard(resolve);
+    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 || "";
+  if (typeof tags === "function") {
+    registry.pending.push({
+      boundary,
+      list: tags,
+      resource: (desc, rel) => emitHeadResource(registry, context, tracking, emitResource, nonce, desc, rel)
+    });
+    return;
+  }
+  if (!Array.isArray(tags)) tags = [tags];
+  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;
+    }
+    let descs = reg.tags;
+    if (reg.list) {
+      let resolved;
+      try {
+        resolved = reg.list();
+      } catch (err) {
+        console.warn(`useHead: error evaluating head group membership`, err);
+        continue;
+      }
+      if (!Array.isArray(resolved)) resolved = [resolved];
+      descs = [];
+      for (let j = 0; j < resolved.length; j++) {
+        const desc = resolved[j];
+        if (!desc || !HEAD_ELIGIBLE_TAGS.has(desc.tag)) {
+          console.warn(`useHead: ignoring non-head tag`, desc);
+          continue;
+        }
+        const cls = classifyHeadTag(desc);
+        if (cls.resource) {
+          reg.resource(desc, cls.rel);
+        } else {
+          descs.push(cls.rel !== undefined ? {
+            tag: desc.tag,
+            props: desc.props,
+            key: desc.key,
+            rel: cls.rel
+          } : desc);
+        }
+      }
+    }
+    const tags = [];
+    for (let j = 0; j < descs.length; j++) {
+      const desc = descs[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(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),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content)}n.remove(),_$HY.fe(e)}function $dfs(e,c){(_$HY.sc=_$HY.sc||{})[e]=c}function $dfc(e){if(--_$HY.sc[e]<=0)delete _$HY.sc[e],$df(e)}`;
+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.v=_$HY.v||{})[e]=1,_$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 = createSerializer({
+  const serializer = createHydrationSerializer({
     scopeId: renderId,
     plugins: options.plugins,
     onData(script) {
@@ -163,12 +649,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")) {
@@ -176,19 +666,23 @@ function renderToString(code, options = {}) {
       }
       serializer.write(id, p);
     },
-    registerAsset(type, url) {
+    registerAsset(type, value) {
+      if (type === "inline-style") {
+        tracking.registerInlineStyle(value);
+        return;
+      }
       if (tracking.currentBoundaryId && type === "style") {
         let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
         if (!styles) {
           styles = new Set();
           tracking.boundaryStyles.set(tracking.currentBoundaryId, styles);
         }
-        styles.add(url);
+        styles.add(value);
       }
-      tracking.emittedAssets.add(url);
+      tracking.emittedAssets.add(value);
     }
   };
-  applyAssetTracking(sharedConfig.context, tracking, manifest);
+  applyAssetTracking(sharedConfig.context, tracking, manifest, noScripts);
   registerEntryAssets(manifest);
   let html = createRoot(d => {
     setTimeout(d);
@@ -196,12 +690,12 @@ function renderToString(code, options = {}) {
   }, {
     id: renderId
   });
+  serializeFragmentAssets("", tracking.boundaryModules, sharedConfig.context);
   sharedConfig.context.noHydrate = true;
   serializer.close();
-  html = injectAssets(sharedConfig.context.assets, html);
-  html = injectPreloadLinks(tracking.emittedAssets, html);
-  if (scripts.length) html = injectScripts(html, scripts, options.nonce);
-  return html;
+  const assetsHtml = resolveAssetsHtml(sharedConfig.context.assets);
+  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 {
@@ -210,18 +704,57 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId = "",
     noScripts,
-    manifest
+    manifest,
+    onHead
   } = options;
   let dispose;
+  let dead = false;
+  const abandon = () => {
+    if (dead) return;
+    dead = true;
+    completed = true;
+    buffer = {
+      write() {}
+    };
+    writable = {
+      end() {}
+    };
+    if (dispose) {
+      const d = dispose;
+      dispose = () => {};
+      d();
+    }
+  };
+  const guardSink = w => ({
+    write(payload) {
+      if (dead) return;
+      try {
+        w.write(payload);
+      } catch (_) {
+        abandon();
+      }
+    },
+    end() {
+      if (dead) return;
+      try {
+        w.end();
+      } catch (_) {
+        abandon();
+      }
+    }
+  });
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
-      timer = setTimeout(writeTasks);
+      timer = true;
+      queue(() => queue(writeTasks));
     }
   };
   const onDone = () => {
@@ -236,15 +769,63 @@ function renderToStream(code, options = {}) {
     completed = true;
     if (firstFlushed) dispose();
   };
-  const serializer = createSerializer({
+  const sink = {
+    data(payload) {
+      pushTask(payload);
+    },
+    fragment(key, value, meta) {
+      const deferActivation = !!meta.revealGroup;
+      const styles = meta.styles;
+      for (let i = 0; i < styles.inline.length; i++) {
+        buffer.write(renderInlineStyle(styles.inline[i], nonce));
+      }
+      if (styles.links.length) {
+        emitTask(`$dfs("${key}",${styles.links.length},${deferActivation ? 1 : 0})`);
+        writeTasks();
+        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 {
+        buffer.write(`<template id="${key}">${value}</template>`);
+        if (!deferActivation) {
+          emitTask(`$df("${key}")`);
+        }
+      }
+    },
+    reveal(keys, meta) {
+      emitTask(`${meta.fallback ? "$dflj" : "$dfj"}(${JSON.stringify(keys)})`);
+    },
+    asset(type, value) {
+      if (type === "module") {
+        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, meta.head, onHead));
+    },
+    ...options.sink
+  };
+  const serializer = (options.serializer || createHydrationSerializer)({
     scopeId: options.renderId,
     plugins: options.plugins,
-    onData: pushTask,
+    onData: payload => sink.data(payload),
     onDone,
     onError: options.onError
   });
+  let rootAssetsSerialized = false;
+  const serializeRootAssets = () => {
+    if (rootAssetsSerialized) return;
+    rootAssetsSerialized = true;
+    serializeFragmentAssets("", tracking.boundaryModules, context);
+  };
   const flushEnd = () => {
     if (!registry.size) {
+      serializeRootAssets();
       queue(() => queue(() => serializer.flush()));
     }
   };
@@ -254,7 +835,6 @@ function renderToStream(code, options = {}) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
       tasks = "";
     }
-    timer && clearTimeout(timer);
     timer = null;
   };
   let context;
@@ -266,7 +846,29 @@ function renderToStream(code, options = {}) {
   let shellCompleted = false;
   let scriptFlushed = false;
   let headStyles;
+  const revealGroups = new Map();
   let timer = null;
+  const emitTask = task => {
+    pushTask(`${task}${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+    scriptFlushed = true;
+  };
+  function resolveRevealKeys(groupOrKeys, release, consume) {
+    if (Array.isArray(groupOrKeys)) return groupOrKeys.slice();
+    let group = revealGroups.get(groupOrKeys);
+    if (!group) {
+      if (!release) return;
+      group = {
+        order: [],
+        keys: new Set(),
+        released: true
+      };
+      revealGroups.set(groupOrKeys, group);
+    } else if (release) group.released = true;
+    if (!group.order.length) return;
+    const keys = group.order.slice();
+    if (consume) revealGroups.delete(groupOrKeys);
+    return keys;
+  }
   let rootHoles = null;
   let nextHoleId = 0;
   let buffer = {
@@ -275,24 +877,48 @@ 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,
-    registerAsset(type, url) {
+    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);
+        if (firstFlushed && !tracking.currentBoundaryId && !entry.emitted) {
+          entry.emitted = true;
+          sink.asset("inline-style", entry);
+        }
+        return;
+      }
       if (tracking.currentBoundaryId && type === "style") {
         let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
         if (!styles) {
           styles = new Set();
           tracking.boundaryStyles.set(tracking.currentBoundaryId, styles);
         }
-        styles.add(url);
+        styles.add(value);
       }
-      if (!tracking.emittedAssets.has(url)) {
-        tracking.emittedAssets.add(url);
-        if (firstFlushed && type === "module") {
-          buffer.write(`<link rel="modulepreload" href="${url}">`);
-        }
+      if (!tracking.emittedAssets.has(value)) {
+        tracking.emittedAssets.add(value);
+        if (firstFlushed) sink.asset(type, value);
       }
     },
     block(p) {
@@ -316,7 +942,26 @@ function renderToStream(code, options = {}) {
     escape: escape,
     resolve: resolveSSRNode,
     ssr: ssr,
-    registerFragment(key) {
+    registerFragment(key, options) {
+      const revealGroup = options && options.revealGroup;
+      if (revealGroup) {
+        let group = revealGroups.get(revealGroup);
+        if (!group) {
+          group = {
+            order: [],
+            keys: new Set(),
+            released: false
+          };
+          revealGroups.set(revealGroup, group);
+        }
+        if (!group.keys.has(key)) {
+          group.keys.add(key);
+          group.order.push(key);
+        }
+        if (group.released) {
+          throw new Error("registerFragment() for reveal group '" + revealGroup + "' was called after revealFragments(). Ensure template payload is emitted before grouped reveal.");
+        }
+      }
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => (resolve = r, reject = rej));
@@ -326,7 +971,7 @@ function renderToStream(code, options = {}) {
             queue(flushEnd);
           }))
         });
-        serializer.write(key, p);
+        serializer.write(key + "_fr", p);
       }
       return (value, error) => {
         if (registry.has(key)) {
@@ -344,10 +989,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);
@@ -355,28 +1002,36 @@ function renderToStream(code, options = {}) {
             } else {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
-              if (styles.length) {
-                pushTask(`$dfs("${key}",${styles.length})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
-                writeTasks();
-                for (const url of styles) {
-                  buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
-                }
-                buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-              } else {
-                buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-                pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-                scriptFlushed = true;
-              }
+              const headOps = error ? null : flushHeadFragment(headRegistry, key);
+              if (headOps) emitHeadOps(key, headOps);
+              sink.fragment(key, value !== undefined ? value : " ", {
+                styles,
+                revealGroup,
+                error
+              });
               item.resolve(error);
             }
           }
         }
         return firstFlushed;
       };
+    },
+    revealFragments(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, true, true);
+      if (!keys) return;
+      sink.reveal(keys, {
+        fallback: false
+      });
+    },
+    revealFallbacks(groupOrKeys) {
+      const keys = resolveRevealKeys(groupOrKeys, false, false);
+      if (!keys) return;
+      sink.reveal(keys, {
+        fallback: true
+      });
     }
   };
-  applyAssetTracking(context, tracking, manifest);
+  applyAssetTracking(context, tracking, manifest, noScripts);
   registerEntryAssets(manifest);
   let html = createRoot(d => {
     dispose = d;
@@ -397,28 +1052,56 @@ function renderToStream(code, options = {}) {
   }, {
     id: renderId
   });
-  function doShell() {
-    if (shellCompleted) return;
-    if (rootHoles) {
-      for (const {
-        id,
-        fn
-      } of rootHoles) {
-        const marker = `<!--rh${id}-->`;
-        const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+  function resolveRootHoles() {
+    if (!rootHoles) return true;
+    const pending = [];
+    for (const {
+      id,
+      fn
+    } of rootHoles) {
+      const marker = `<!--rh${id}-->`;
+      const res = resolveSSRNode(fn);
+      if (!res.h.length) {
+        html = html.replace(marker, res.t[0]);
+      } else {
+        let out = res.t[0];
+        for (let j = 0; j < res.h.length; j++) {
+          const newId = nextHoleId++;
+          pending.push({
+            id: newId,
+            fn: res.h[j]
+          });
+          out += `<!--rh${newId}-->` + res.t[j + 1];
+        }
+        html = html.replace(marker, out);
+        for (const p of res.p) blockingPromises.add(p);
       }
-      rootHoles = null;
     }
+    if (pending.length) {
+      rootHoles = pending;
+      return false;
+    }
+    rootHoles = null;
+    return true;
+  }
+  function doShell() {
+    if (shellCompleted) return;
     sharedConfig.context = context;
-    html = injectAssets(context.assets, html);
+    if (!resolveRootHoles()) return;
+    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);
     }
-    html = injectPreloadLinks(tracking.emittedAssets, html);
-    if (tasks.length) html = injectScripts(html, tasks, nonce);
-    buffer.write(html);
+    serializeRootAssets();
+    const head = renderShellHead(headRegistry, nonce, k => registry.has(k));
+    sink.shell(html, {
+      assets: assetsHtml,
+      preloads: tracking.emittedAssets,
+      inlineStyles: tracking.inlineStyles,
+      tasks,
+      head
+    });
     tasks = "";
     onCompleteShell && onCompleteShell({
       write(v) {
@@ -427,53 +1110,67 @@ function renderToStream(code, options = {}) {
     });
     shellCompleted = true;
   }
-  return {
-    then(fn) {
-      function complete() {
-        dispose();
-        fn(tmp);
+  const MIN_DRAIN_TURNS = 8;
+  let lastBlockingSize = -1;
+  let lastRegistrySize = -1;
+  let drainTurn = 0;
+  const scheduleFlush = fn => {
+    const attempt = () => {
+      if (registry.size !== lastRegistrySize || drainTurn++ < MIN_DRAIN_TURNS) {
+        if (registry.size !== lastRegistrySize) drainTurn = 0;
+        lastRegistrySize = registry.size;
+        queue(attempt);
+        return;
       }
-      if (onCompleteAll) {
-        let ogComplete = onCompleteAll;
-        onCompleteAll = options => {
-          ogComplete(options);
-          complete();
-        };
-      } else onCompleteAll = complete;
-      queue(flushEnd);
-    },
-    pipe(w) {
+      fn();
+    };
+    const progressed = blockingPromises.size !== lastBlockingSize;
+    lastBlockingSize = blockingPromises.size;
+    lastRegistrySize = -1;
+    drainTurn = 0;
+    progressed ? queue(attempt) : setTimeout(attempt);
+  };
+  let cachedReadable;
+  let consumer;
+  const claimConsumer = name => {
+    if (consumer && consumer !== name) {
+      throw new Error(`renderToStream result was already consumed via \`${consumer}\`; cannot also consume it via \`${name}\`. Use exactly one of \`pipe\`, \`pipeTo\`, or \`readable\`.`);
+    }
+    consumer = name;
+  };
+  const pipeToImpl = w => {
+    let resolve;
+    const p = new Promise(r => resolve = r);
+    function flush() {
       allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
-        });
-      });
-    },
-    pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
+        scheduleFlush(() => {
+          if (dead) return resolve();
           doShell();
+          if (!shellCompleted) return flush();
           const encoder = new TextEncoder();
           const writer = w.getWriter();
+          let pendingWrites = Promise.resolve();
+          let ended = false;
+          const failed = () => {
+            if (!ended) {
+              abandon();
+              resolve();
+            }
+          };
+          writer.closed && writer.closed.catch(failed);
           writable = {
             end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
+              pendingWrites.then(() => {
+                ended = true;
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              });
             }
           };
           buffer = {
             write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
+              pendingWrites = pendingWrites.then(() => writer.write(encoder.encode(payload))).catch(failed);
             }
           };
           buffer.write(tmp);
@@ -483,9 +1180,67 @@ function renderToStream(code, options = {}) {
             writable.end();
           } else flushEnd();
         });
-        return p;
       });
     }
+    flush();
+    return p;
+  };
+  return {
+    then(fn) {
+      function complete() {
+        dispose();
+        fn(tmp);
+      }
+      if (onCompleteAll) {
+        let ogComplete = onCompleteAll;
+        onCompleteAll = options => {
+          ogComplete(options);
+          complete();
+        };
+      } else onCompleteAll = complete;
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          scheduleFlush(() => {
+            if (!resolveRootHoles()) return flush();
+            queue(flushEnd);
+          });
+        });
+      }
+      flush();
+    },
+    pipe(w) {
+      claimConsumer("pipe");
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          scheduleFlush(() => {
+            if (dead) return;
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = guardSink(w);
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
+        });
+      }
+      flush();
+    },
+    pipeTo(w) {
+      claimConsumer("pipeTo");
+      return pipeToImpl(w);
+    },
+    get readable() {
+      claimConsumer("readable");
+      if (!cachedReadable) {
+        const t = new TransformStream();
+        pipeToImpl(t.writable);
+        cachedReadable = t.readable;
+      }
+      return cachedReadable;
+    }
   };
 }
 function HydrationScript(props) {
@@ -497,11 +1252,176 @@ function HydrationScript(props) {
     ...props
   }));
 }
-function ssr(t, ...nodes) {
-  if (nodes.length) return resolveSSR(t, nodes);
+function ssrGroup(fn, n) {
+  fn.$g = n;
+  return fn;
+}
+function buildAsyncWrap(err, node) {
+  const p = ssrHandleError(err);
+  if (!p) return null;
+  const owner = getOwner();
   return {
+    fn: owner ? () => runWithOwner(owner, node) : node,
+    p
+  };
+}
+function ssrFirstGroupHit(hole) {
+  try {
+    return hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole);
+  }
+}
+function tryResolveFunctionHole(hole) {
+  let value;
+  try {
+    value = hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole) || "";
+  }
+  const t = typeof value;
+  if (t === "string") return value;
+  if (t === "number") return "" + value;
+  if (value == null || t === "boolean") return "";
+  return tryResolveString(value);
+}
+function mergeTemplateInto(result, node) {
+  result.t[result.t.length - 1] += node.t[0];
+  if (node.t.length > 1) {
+    result.t.push(...node.t.slice(1));
+    result.h.push(...node.h);
+    result.p.push(...node.p);
+  }
+}
+function appendResolvedNode(result, node) {
+  if (node.fn !== undefined) {
+    result.h.push(node.fn);
+    result.p.push(node.p);
+    result.t.push("");
+  } else if (node.merge !== undefined) mergeTemplateInto(result, node.merge);else resolveSSRNode(node.bail, result);
+}
+let _lastGroupFn = null;
+let _lastGroupArr = null;
+let _lastGroupErr = null;
+function ssrGroupSlot(fn, idx) {
+  return () => {
+    if (idx > 0 && _lastGroupFn === fn) {
+      if (_lastGroupArr !== null) return _lastGroupArr[idx];
+      throw _lastGroupErr;
+    }
+    _lastGroupFn = fn;
+    _lastGroupArr = null;
+    _lastGroupErr = null;
+    try {
+      _lastGroupArr = fn();
+      return _lastGroupArr[idx];
+    } catch (err) {
+      _lastGroupErr = err;
+      throw err;
+    }
+  };
+}
+function ssr(t) {
+  const len = arguments.length;
+  if (len === 1) return {
     t
   };
+  let s = t[0];
+  let result = null;
+  let lastGroup = null;
+  let lastGroupVal = null;
+  let lastGroupIdx = 0;
+  for (let i = 1; i < len; i++) {
+    const hole = arguments[i];
+    const ht = typeof hole;
+    if (ht === "string") {
+      if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+    } else if (ht === "number") {
+      if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+    } else if (hole == null || ht === "boolean") ; else if (ht === "function" && hole.$g) {
+      let value;
+      let hasValue = false;
+      if (lastGroup !== hole) {
+        const r = ssrFirstGroupHit(hole);
+        if (r !== null) {
+          lastGroup = hole;
+          lastGroupVal = r;
+          lastGroupIdx = 0;
+          if (!Array.isArray(r) && result === null) {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+          }
+        }
+      }
+      if (lastGroup === hole) {
+        if (Array.isArray(lastGroupVal)) {
+          value = lastGroupVal[lastGroupIdx++];
+          hasValue = true;
+        } else {
+          result.h.push(ssrGroupSlot(lastGroupVal.fn, lastGroupIdx++));
+          result.p.push(lastGroupVal.p);
+          result.t.push("");
+        }
+      }
+      if (hasValue) {
+        const vt = typeof value;
+        if (vt === "string" || vt === "number") {
+          if (result === null) s += value;else result.t[result.t.length - 1] += value;
+        } else if (value == null || vt === "boolean") ; else if (result !== null) {
+          resolveSSRNode(value, result);
+        } else {
+          const rs = tryResolveString(value);
+          if (typeof rs === "string") {
+            s += rs;
+          } else {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+            if (rs.merge !== undefined) mergeTemplateInto(result, rs.merge);else resolveSSRNode(rs.bail, result);
+          }
+        }
+      }
+    } else if (result !== null) {
+      resolveSSRNode(hole, result);
+    } else if (ht === "function") {
+      const r = tryResolveFunctionHole(hole);
+      if (typeof r === "string") s += r;else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
+    } else {
+      const r = tryResolveString(hole);
+      if (typeof r === "string") {
+        s += r;
+      } else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
+    }
+    const next = t[i];
+    if (result === null) s += next;else result.t[result.t.length - 1] += next;
+  }
+  if (result === null) return {
+    t: s
+  };
+  return result;
 }
 function ssrClassName(value) {
   if (!value) return "";
@@ -514,7 +1434,7 @@ function ssrClassName(value) {
       classValue = !!value[key];
     if (!key || key === "undefined" || !classValue) continue;
     i && (result += " ");
-    result += escape(key);
+    result += escape(key, true);
   }
   return result;
 }
@@ -524,8 +1444,8 @@ function ssrStyle(value) {
   let result = "";
   const k = Object.keys(value);
   for (let i = 0; i < k.length; i++) {
-    const s = k[i];
-    const v = value[s];
+    const s = escape(k[i], true);
+    const v = value[k[i]];
     if (v != undefined) {
       if (i) result += ";";
       const r = escape(v, true);
@@ -540,10 +1460,11 @@ function ssrStyleProperty(name, value) {
   return value != null ? name + value : "";
 }
 function ssrElement(tag, props, children, needsId) {
+  const hk = needsId ? ssrHydrationKey() : "";
   if (props == null) props = {};else if (typeof props === "function") props = props();
   const skipChildren = VOID_ELEMENTS.test(tag);
   const keys = Object.keys(props);
-  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
+  let result = `<${tag}${hk} `;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (ChildProperties.has(prop)) {
@@ -582,18 +1503,31 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && Array.isArray(s)) {
+      const joined = tryJoinPlainSSRArray(s);
+      if (joined !== undefined) return joined;
       s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
     }
-    if (attr && t === "boolean") return s;
+    if (attr) {
+      if (s == null || t === "boolean" || t === "number") return s;
+      return escape(String(s), attr);
+    }
     return s;
   }
+  const i = s.search(attr ? ESCAPE_ATTR : ESCAPE_CONTENT);
+  if (i < 0) return s;
+  return escapeSlow(s, attr, i);
+}
+const ESCAPE_CONTENT = /[&<]/;
+const ESCAPE_ATTR = /[&"]/;
+function escapeSlow(s, attr, start) {
   const delim = attr ? '"' : "<";
+  const delimCode = attr ? 34 : 60;
   const escDelim = attr ? "&quot;" : "&lt;";
-  let iDelim = s.indexOf(delim);
-  let iAmp = s.indexOf("&");
-  if (iDelim < 0 && iAmp < 0) return s;
+  const c0 = s.charCodeAt(start);
+  let iDelim = c0 === delimCode ? start : s.indexOf(delim, start);
+  let iAmp = c0 === 38 ? start : s.indexOf("&", start);
   let left = 0,
     out = "";
   while (iDelim >= 0 && iAmp >= 0) {
@@ -624,28 +1558,17 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
-function mergeProps(...sources) {
-  const target = {};
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i];
-    if (typeof source === "function") source = source();
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source);
-      for (const key in descriptors) {
-        if (key in target) continue;
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              const v = (sources[i] || {})[key];
-              if (v !== undefined) return v;
-            }
-          }
-        });
-      }
+function tryJoinPlainSSRArray(nodes) {
+  if (nodes.length === 0) return undefined;
+  let out = "";
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    if (node == null || typeof node !== "object" || node.h || typeof node.t !== "string") {
+      return undefined;
     }
+    out += node.t;
   }
-  return target;
+  return out;
 }
 function getHydrationKey() {
   const hydrate = sharedConfig.context;
@@ -663,11 +1586,14 @@ function getAssets() {
   for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
   return out;
 }
+function Assets(props) {
+  useAssets(() => props.children);
+}
 function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
 function queue(fn) {
   return Promise.resolve().then(fn);
@@ -679,27 +1605,58 @@ function allSettled(promises) {
     return;
   });
 }
-function injectAssets(assets, html) {
-  if (!assets || !assets.length) return html;
+function resolveAssetsHtml(assets) {
+  if (!assets || !assets.length) return "";
   let out = "";
   for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
-  const index = html.indexOf("</head>");
-  if (index === -1) return html;
-  return html.slice(0, index) + out + html.slice(index);
+  return out;
 }
-function injectPreloadLinks(emittedAssets, html, nonce) {
-  if (!emittedAssets.size) return html;
-  let links = "";
-  for (const url of emittedAssets) {
-    if (url.endsWith(".css")) {
-      links += `<link rel="stylesheet" href="${url}">`;
-    } else {
-      links += `<link rel="modulepreload" href="${url}">`;
+function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts, nonce, headTags, onHead) {
+  const scriptTag = scripts ? `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>` : "";
+  const headTagsHtml = headTags ? headTags.html : "";
+  const headPrelude = headTags ? headTags.prelude : "";
+  if (!onHead && !assetsHtml && !headTagsHtml && !headPrelude && !(emittedAssets && emittedAssets.size) && !(inlineStyles && inlineStyles.size)) {
+    if (!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);
+  }
+  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 += isCssUrl(url) ? `<link rel="stylesheet" href="${url}">` : `<link rel="modulepreload" href="${url}">`;
+    }
+  }
+  if (inlineStyles && inlineStyles.size) {
+    for (const entry of inlineStyles.values()) {
+      if (entry.emitted) continue;
+      entry.emitted = true;
+      head += renderInlineStyle(entry, nonce);
     }
   }
-  const index = html.indexOf("</head>");
-  if (index === -1) return html;
-  return html.slice(0, index) + links + html.slice(index);
+  return head;
 }
 function serializeFragmentAssets(key, boundaryModules, context) {
   const map = boundaryModules.get(key);
@@ -720,22 +1677,41 @@ function propagateBoundaryStyles(childKey, parentKey, tracking) {
 }
 function collectStreamStyles(key, tracking, headStyles) {
   const styles = tracking.getBoundaryStyles(key);
-  if (!styles) return [];
-  const result = [];
-  for (const url of styles) {
-    if (!headStyles || !headStyles.has(url)) {
-      result.push(url);
+  const links = [];
+  const inline = [];
+  if (!styles) return {
+    links,
+    inline
+  };
+  for (const entry of styles) {
+    if (typeof entry === "string") {
+      if (!headStyles || !headStyles.has(entry)) links.push(entry);
+    } else if (entry.emitted) {
+      continue;
+    } else if (entry.attrHtml !== undefined) {
+      entry.emitted = true;
+      links.push(entry);
+    } else {
+      entry.emitted = true;
+      inline.push(entry);
     }
   }
-  return result;
+  return {
+    links,
+    inline
+  };
+}
+function escapeStyleContent(content) {
+  return content.replace(/<\/(style)/gi, "<\\/$1");
 }
-function injectScripts(html, scripts, nonce) {
-  const tag = `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>`;
-  const index = html.indexOf("<!--xs-->");
-  if (index > -1) {
-    return html.slice(0, index) + tag + html.slice(index);
+function renderInlineStyle(entry, nonce) {
+  let attrs = "";
+  if (entry.attrs) {
+    for (const name in entry.attrs) {
+      attrs += ` ${name}="${escape(String(entry.attrs[name]), true)}"`;
+    }
   }
-  return html + tag;
+  return `<style${nonce ? ` nonce="${nonce}"` : ""} data-asset="${escape(entry.id, true)}"${attrs}>${escapeStyleContent(entry.content)}</style>`;
 }
 function waitForFragments(registry, key) {
   for (const k of [...registry.keys()].reverse()) {
@@ -765,19 +1741,49 @@ function flattenClassList(list, result) {
     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;
   }
 }
-function resolveSSR(template, holes, result = {
-  t: [""],
-  h: [],
-  p: []
-}) {
-  for (let i = 0; i < holes.length; i++) {
-    const hole = holes[i];
-    result.t[result.t.length - 1] += template[i];
-    if (hole == null || hole === true || hole === false) continue;
-    resolveSSRNode(hole, result);
+function tryResolveString(node) {
+  const t = typeof node;
+  if (t === "string") return node;
+  if (t === "number") return "" + node;
+  if (node == null || t === "boolean") return "";
+  if (t === "object") {
+    if (Array.isArray(node)) {
+      const joined = tryJoinPlainSSRArray(node);
+      if (joined !== undefined) return joined;
+      let s = "";
+      let prevNonObj = false;
+      for (let i = 0, len = node.length; i < len; i++) {
+        const item = node[i];
+        const itemNonObj = item !== null && typeof item !== "object";
+        if (prevNonObj && itemNonObj) s += "<!--!$-->";
+        prevNonObj = itemNonObj;
+        const r = tryResolveString(item);
+        if (typeof r !== "string") return {
+          bail: node
+        };
+        s += r;
+      }
+      return s;
+    }
+    if (node.h && node.h.length > 0) return {
+      merge: node
+    };
+    if (node.t === undefined) {
+      console.warn(`Unrecognized value. Skipped inserting`, node);
+      return "";
+    }
+    return Array.isArray(node.t) ? node.t[0] : node.t;
   }
-  result.t[result.t.length - 1] += template[template.length - 1];
-  return result;
+  if (t === "function") {
+    let v;
+    try {
+      v = node();
+    } catch (err) {
+      return buildAsyncWrap(err, node) || "";
+    }
+    return tryResolveString(v);
+  }
+  return "";
 }
 function resolveSSRNode(node, result = {
   t: [""],
@@ -788,10 +1794,13 @@ function resolveSSRNode(node, result = {
   if (t === "string" || t === "number") {
     result.t[result.t.length - 1] += node;
   } else if (node == null || t === "boolean") ; else if (Array.isArray(node)) {
-    let prev = {};
+    let prevNonObj = false;
     for (let i = 0, len = node.length; i < len; i++) {
-      if (!top && typeof prev !== "object" && typeof node[i] !== "object") result.t[result.t.length - 1] += `<!--!$-->`;
-      resolveSSRNode(prev = node[i], result);
+      const item = node[i];
+      const itemNonObj = item !== null && typeof item !== "object";
+      if (!top && prevNonObj && itemNonObj) result.t[result.t.length - 1] += `<!--!$-->`;
+      prevNonObj = itemNonObj;
+      resolveSSRNode(item, result);
     }
   } else if (t === "object") {
     if (node.h) {
@@ -801,15 +1810,17 @@ function resolveSSRNode(node, result = {
         result.h.push(...node.h);
         result.p.push(...node.p);
       }
-    } else result.t[result.t.length - 1] += node.t;
+    } else if (node.t !== undefined) {
+      result.t[result.t.length - 1] += node.t;
+    } else console.warn(`Unrecognized value. Skipped inserting`, node);
   } else if (t === "function") {
     try {
       resolveSSRNode(node(), result);
     } catch (err) {
-      const p = ssrHandleError(err);
-      if (p) {
-        result.h.push(node);
-        result.p.push(p);
+      const wrap = buildAsyncWrap(err, node);
+      if (wrap) {
+        result.h.push(wrap.fn);
+        result.p.push(wrap.p);
         result.t.push("");
       }
     }
@@ -821,39 +1832,188 @@ function resolveSSRSync(node) {
   if (!res.h.length) return res.t[0];
   throw new Error("This value cannot be rendered synchronously. Are you missing a boundary?");
 }
-const RequestContext = Symbol();
+const RequestContext = Symbol.for("solid.RequestContext");
 function getRequestEvent() {
   return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || sharedConfig.context && sharedConfig.context.event || console.warn("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
 }
 function renderToStringAsync(code, options = {}) {
   return new Promise(resolve => renderToStream(code, options).then(resolve));
 }
+function registerElementClaim() {
+  return noopCleanup;
+}
+function noopCleanup() {}
+function claimElement(node) {
+  return node;
+}
+function claimElementTree(root) {
+  return root;
+}
 function notSup() {
   throw new Error("Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.");
 }
 
+const ENVELOPE = Symbol.for("solid.ResponseEnvelope");
+class ResponseEnvelope {
+  constructor(response, value) {
+    this.response = response;
+    this.value = value;
+  }
+}
+ResponseEnvelope.prototype[ENVELOPE] = true;
+function isResponseEnvelope(value) {
+  return !!(value && typeof value === "object" && value[ENVELOPE]);
+}
+const HREF = Symbol.for("solid.Href");
+function isHref(value) {
+  return !!(value && (typeof value === "object" || typeof value === "function") && value[HREF]);
+}
+const REVALIDATE_HEADER = "X-Revalidate";
+function initWithRevalidate(init) {
+  const {
+    revalidate,
+    ...responseInit
+  } = init;
+  const headers = new Headers(responseInit.headers);
+  revalidate !== undefined && headers.set(REVALIDATE_HEADER, revalidate.toString());
+  return {
+    responseInit,
+    headers
+  };
+}
+function redirect(url, init = 302) {
+  if (typeof url !== "string" && !isHref(url)) {
+    throw new TypeError("redirect() expects a string URL or an Href-branded value (Symbol.for('solid.Href')).");
+  }
+  const {
+    responseInit,
+    headers
+  } = initWithRevalidate(typeof init === "number" ? {
+    status: init
+  } : init);
+  if (responseInit.status === undefined) {
+    responseInit.status = 302;
+  }
+  headers.set("Location", String(url));
+  return new Response(null, {
+    ...responseInit,
+    headers
+  });
+}
+function reload(init = {}) {
+  const {
+    responseInit,
+    headers
+  } = initWithRevalidate(init);
+  return new Response(null, {
+    ...responseInit,
+    headers
+  });
+}
+function respond(value, init = {}) {
+  const {
+    responseInit,
+    headers
+  } = initWithRevalidate(init);
+  headers.set("Content-Type", "application/json");
+  return new ResponseEnvelope(new Response(JSON.stringify(value), {
+    ...responseInit,
+    headers
+  }), value);
+}
+
 const isServer = true;
 const isDev = false;
-function createDynamic(component, props) {
-  const o = getOwner();
-  if (o?.id != null) getNextChildId(o);
-  const memoOwner = createOwner();
-  return runWithOwner(memoOwner, () => {
-    const comp = component(),
-      t = typeof comp;
-    if (comp) {
-      if (t === "function") return comp(props);else if (t === "string") {
-        return ssrElement(comp, props, undefined, true);
-      }
-    }
+function dynamic(source) {
+  const cached = createMemo(source, {
+    serialize: false
   });
+  return props => {
+    return createMemo(() => {
+      const c = cached();
+      if (c) {
+        if (typeof c === "function") return c(props);
+        if (typeof c === "string") {
+          return ssrElement(c, props, undefined, true);
+        }
+      }
+    }, {
+      sync: true
+    });
+  };
 }
 function Dynamic(props) {
-  const others = omit(props, "component");
-  return createDynamic(() => props.component, others);
+  const Comp = dynamic(() => props.component);
+  return createComponent(Comp, omit(props, "component"));
 }
 function Portal(props) {
-  throw new Error("Portal is not supported on the server");
+  const o = getOwner();
+  if (o?.id != null) getNextChildId(o);
+  return undefined;
+}
+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();
+  const response = event && event.response;
+  if (response && !response.committed) {
+    const prevStatus = response.status;
+    const prevStatusText = response.statusText;
+    response.status = code;
+    response.statusText = text;
+    onCleanup(() => {
+      if (response.committed) return;
+      response.status = prevStatus;
+      response.statusText = prevStatusText;
+    });
+  }
+}
+function httpHeader(name, value, options) {
+  const event = getRequestEvent();
+  const response = event && event.response;
+  if (response && !response.committed) {
+    const headers = response.headers;
+    const prev = headers.get(name);
+    if (options && options.append) headers.append(name, value);else headers.set(name, value);
+    onCleanup(() => {
+      if (response.committed) return;
+      if (prev === null) headers.delete(name);else headers.set(name, prev);
+    });
+  }
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, 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 };