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

package/frames/dist/server.cjs

@@ -139,7 +139,7 @@ function createJSONSerializer({
 
 const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script", "base"]);
 const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
-const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "icon", "stylesheet"]);
+const RESOURCE_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) {
@@ -183,12 +183,14 @@ function replaceableIdentity(tag, props, key, unique) {
   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"];
+    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") return "link:" + (props.rel || "") + ":" + (props.href || "");
+  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) {
@@ -380,6 +382,15 @@ function createHeadRegistry() {
 }
 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];
@@ -467,9 +478,39 @@ function commitHeadBoundary(registry, boundary, isPendingFragment) {
       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 < reg.tags.length; j++) {
-      const desc = reg.tags[j];
+    for (let j = 0; j < descs.length; j++) {
+      const desc = descs[j];
       let props, key;
       try {
         props = evalHeadProps(desc.props || {}, desc.rel !== undefined ? {
@@ -612,7 +653,7 @@ function renderHeadTagMarkup(tag, props, identity, nonce) {
   if (tag === "script") body = body.replace(/<\/(script)/gi, "<\\/$1");else if (tag === "style") body = escapeStyleContent(body);else body = escape(body);
   return `<${tag}${attrs}>${body}</${tag}>`;
 }
-const REPLACE_SCRIPT = `function $df(e){return _$HY.f?_$HY.f(e):$dfr(e)}function $dfr(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&(8!==o.nodeType||o.nodeValue!=="pl-"+e);)t=o.nextSibling,o.remove(),o=t;t=o.parentNode,o.replaceWith(n.content),n.remove(),_$HY.fe(e,t),_$HY.hp&&_$HY.hp[e]&&($dh(_$HY.hp[e]),delete _$HY.hp[e]),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const 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 renderToStream(code, options = {}) {
   let {
@@ -625,6 +666,41 @@ function renderToStream(code, options = {}) {
     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 => {
@@ -968,8 +1044,8 @@ function renderToStream(code, options = {}) {
   }
   function doShell() {
     if (shellCompleted) return;
-    if (!resolveRootHoles()) return;
     solidJs.sharedConfig.context = context;
+    if (!resolveRootHoles()) return;
     const assetsHtml = resolveAssetsHtml(context.assets);
     headStyles = new Set();
     for (const url of tracking.emittedAssets) {
@@ -1026,14 +1102,24 @@ function renderToStream(code, options = {}) {
     function flush() {
       allSettled(blockingPromises).then(() => {
         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() {
               pendingWrites.then(() => {
+                ended = true;
                 writer.releaseLock();
                 w.close().catch(() => {});
                 resolve();
@@ -1042,7 +1128,7 @@ function renderToStream(code, options = {}) {
           };
           buffer = {
             write(payload) {
-              pendingWrites = pendingWrites.then(() => writer.write(encoder.encode(payload))).catch(() => {});
+              pendingWrites = pendingWrites.then(() => writer.write(encoder.encode(payload))).catch(failed);
             }
           };
           buffer.write(tmp);
@@ -1085,9 +1171,10 @@ function renderToStream(code, options = {}) {
       function flush() {
         allSettled(blockingPromises).then(() => {
           scheduleFlush(() => {
+            if (dead) return;
             doShell();
             if (!shellCompleted) return flush();
-            buffer = writable = w;
+            buffer = writable = guardSink(w);
             buffer.write(tmp);
             firstFlushed = true;
             if (completed) {
@@ -1724,6 +1811,10 @@ function isFrameStreamResponse(response) {
 const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
 const SERVER_COMPONENT_SOURCE = /*#__PURE__*/Symbol.for("dom-expressions.server-component-source");
 const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("dom-expressions.server-component-address");
+let serverComponentRegistryExpr;
+function setServerComponentBootstrap(resolve) {
+  serverComponentRegistryExpr = resolve;
+}
 function parseServerComponent(value, ctx) {
   return {
     id: ctx.parse(value[SERVER_COMPONENT]),
@@ -1746,7 +1837,8 @@ const ServerComponentPlugin = /*#__PURE__*/seroval.createPlugin({
     stream: parseServerComponent
   },
   serialize(node, ctx) {
-    return "self._$SC.r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
+    const registry = serverComponentRegistryExpr ? serverComponentRegistryExpr(ctx) : "self._$SC";
+    return registry + ".r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
   },
   deserialize(node, ctx) {
     const id = ctx.deserialize(node.id);
@@ -1775,6 +1867,14 @@ function serverOwned(render) {
 function serverComponentScope(render) {
   return solidJs.runInServerComponentScope ? solidJs.runInServerComponentScope(render) : render();
 }
+const SERVER_COMPONENT_BOOTSTRAP_EXPR = "(self._$SC||(self._$SC={c:{},a:{},r(i,a){a&&(this.a[a]=i,this.reg&&this.reg(a,i));return this.c[i]||(this.c[i]=(p,b)=>self._$SC.impl(i,p,b))}}))";
+const bootstrappedScripts = new WeakSet();
+setServerComponentBootstrap(ctx => {
+  if (bootstrappedScripts.has(ctx)) return "self._$SC";
+  bootstrappedScripts.add(ctx);
+  return SERVER_COMPONENT_BOOTSTRAP_EXPR;
+});
+const SERVER_COMPONENT_BOOTSTRAP = SERVER_COMPONENT_BOOTSTRAP_EXPR + ";";
 function createFrameSink(emit, frame) {
   const {
     id,
@@ -2115,24 +2215,19 @@ function createDocumentSlotProps(clientProps, frameId) {
           const unused = regions.filter(r => !r.used);
           if (solidJs.sharedConfig.context) {
             const args = {};
-            let any = false;
             for (const key of Object.keys(vals)) {
               const value = vals[key];
               const region = regions.find(r => r.key === key);
               if (region) {
-                if (!region.used) {
-                  args[key] = {
-                    $frame: region.childId
-                  };
-                  any = true;
-                }
+                args[key] = {
+                  $frame: region.childId
+                };
                 continue;
               }
               if (isServerContent(value)) continue;
               args[key] = value;
-              any = true;
             }
-            if (any) solidJs.sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
+            solidJs.sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
             for (const region of unused) {
               region.locked = true;
               solidJs.sharedConfig.context.serialize(`sc:region:${region.childId}`, resolveRegionHtml(solidJs.sharedConfig.context, region.value));
@@ -2187,7 +2282,6 @@ function resolveRegionHtml(ctx, node) {
     return out;
   });
 }
-const SERVER_COMPONENT_BOOTSTRAP = "self._$SC={c:{},a:{},r(i,a){a&&(this.a[a]=i,this.reg&&this.reg(a,i));return this.c[i]||(this.c[i]=(p)=>self._$SC.impl(i,p))}};";
 function isServerContent(value) {
   if (value && typeof value === "object") {
     if ("t" in value) return true;

package/frames/dist/server.js

@@ -137,7 +137,7 @@ function createJSONSerializer({
 
 const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script", "base"]);
 const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
-const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "icon", "stylesheet"]);
+const RESOURCE_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) {
@@ -181,12 +181,14 @@ function replaceableIdentity(tag, props, key, unique) {
   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"];
+    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") return "link:" + (props.rel || "") + ":" + (props.href || "");
+  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) {
@@ -378,6 +380,15 @@ function createHeadRegistry() {
 }
 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];
@@ -465,9 +476,39 @@ function commitHeadBoundary(registry, boundary, isPendingFragment) {
       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 < reg.tags.length; j++) {
-      const desc = reg.tags[j];
+    for (let j = 0; j < descs.length; j++) {
+      const desc = descs[j];
       let props, key;
       try {
         props = evalHeadProps(desc.props || {}, desc.rel !== undefined ? {
@@ -610,7 +651,7 @@ function renderHeadTagMarkup(tag, props, identity, nonce) {
   if (tag === "script") body = body.replace(/<\/(script)/gi, "<\\/$1");else if (tag === "style") body = escapeStyleContent(body);else body = escape(body);
   return `<${tag}${attrs}>${body}</${tag}>`;
 }
-const REPLACE_SCRIPT = `function $df(e){return _$HY.f?_$HY.f(e):$dfr(e)}function $dfr(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&(8!==o.nodeType||o.nodeValue!=="pl-"+e);)t=o.nextSibling,o.remove(),o=t;t=o.parentNode,o.replaceWith(n.content),n.remove(),_$HY.fe(e,t),_$HY.hp&&_$HY.hp[e]&&($dh(_$HY.hp[e]),delete _$HY.hp[e]),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const 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 renderToStream(code, options = {}) {
   let {
@@ -623,6 +664,41 @@ function renderToStream(code, options = {}) {
     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 => {
@@ -966,8 +1042,8 @@ function renderToStream(code, options = {}) {
   }
   function doShell() {
     if (shellCompleted) return;
-    if (!resolveRootHoles()) return;
     sharedConfig.context = context;
+    if (!resolveRootHoles()) return;
     const assetsHtml = resolveAssetsHtml(context.assets);
     headStyles = new Set();
     for (const url of tracking.emittedAssets) {
@@ -1024,14 +1100,24 @@ function renderToStream(code, options = {}) {
     function flush() {
       allSettled(blockingPromises).then(() => {
         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() {
               pendingWrites.then(() => {
+                ended = true;
                 writer.releaseLock();
                 w.close().catch(() => {});
                 resolve();
@@ -1040,7 +1126,7 @@ function renderToStream(code, options = {}) {
           };
           buffer = {
             write(payload) {
-              pendingWrites = pendingWrites.then(() => writer.write(encoder.encode(payload))).catch(() => {});
+              pendingWrites = pendingWrites.then(() => writer.write(encoder.encode(payload))).catch(failed);
             }
           };
           buffer.write(tmp);
@@ -1083,9 +1169,10 @@ function renderToStream(code, options = {}) {
       function flush() {
         allSettled(blockingPromises).then(() => {
           scheduleFlush(() => {
+            if (dead) return;
             doShell();
             if (!shellCompleted) return flush();
-            buffer = writable = w;
+            buffer = writable = guardSink(w);
             buffer.write(tmp);
             firstFlushed = true;
             if (completed) {
@@ -1722,6 +1809,10 @@ function isFrameStreamResponse(response) {
 const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("dom-expressions.server-component");
 const SERVER_COMPONENT_SOURCE = /*#__PURE__*/Symbol.for("dom-expressions.server-component-source");
 const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("dom-expressions.server-component-address");
+let serverComponentRegistryExpr;
+function setServerComponentBootstrap(resolve) {
+  serverComponentRegistryExpr = resolve;
+}
 function parseServerComponent(value, ctx) {
   return {
     id: ctx.parse(value[SERVER_COMPONENT]),
@@ -1744,7 +1835,8 @@ const ServerComponentPlugin = /*#__PURE__*/createPlugin({
     stream: parseServerComponent
   },
   serialize(node, ctx) {
-    return "self._$SC.r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
+    const registry = serverComponentRegistryExpr ? serverComponentRegistryExpr(ctx) : "self._$SC";
+    return registry + ".r(" + ctx.serialize(node.id) + "," + ctx.serialize(node.address) + ")";
   },
   deserialize(node, ctx) {
     const id = ctx.deserialize(node.id);
@@ -1773,6 +1865,14 @@ function serverOwned(render) {
 function serverComponentScope(render) {
   return runInServerComponentScope ? runInServerComponentScope(render) : render();
 }
+const SERVER_COMPONENT_BOOTSTRAP_EXPR = "(self._$SC||(self._$SC={c:{},a:{},r(i,a){a&&(this.a[a]=i,this.reg&&this.reg(a,i));return this.c[i]||(this.c[i]=(p,b)=>self._$SC.impl(i,p,b))}}))";
+const bootstrappedScripts = new WeakSet();
+setServerComponentBootstrap(ctx => {
+  if (bootstrappedScripts.has(ctx)) return "self._$SC";
+  bootstrappedScripts.add(ctx);
+  return SERVER_COMPONENT_BOOTSTRAP_EXPR;
+});
+const SERVER_COMPONENT_BOOTSTRAP = SERVER_COMPONENT_BOOTSTRAP_EXPR + ";";
 function createFrameSink(emit, frame) {
   const {
     id,
@@ -2113,24 +2213,19 @@ function createDocumentSlotProps(clientProps, frameId) {
           const unused = regions.filter(r => !r.used);
           if (sharedConfig.context) {
             const args = {};
-            let any = false;
             for (const key of Object.keys(vals)) {
               const value = vals[key];
               const region = regions.find(r => r.key === key);
               if (region) {
-                if (!region.used) {
-                  args[key] = {
-                    $frame: region.childId
-                  };
-                  any = true;
-                }
+                args[key] = {
+                  $frame: region.childId
+                };
                 continue;
               }
               if (isServerContent(value)) continue;
               args[key] = value;
-              any = true;
             }
-            if (any) sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
+            sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
             for (const region of unused) {
               region.locked = true;
               sharedConfig.context.serialize(`sc:region:${region.childId}`, resolveRegionHtml(sharedConfig.context, region.value));
@@ -2185,7 +2280,6 @@ function resolveRegionHtml(ctx, node) {
     return out;
   });
 }
-const SERVER_COMPONENT_BOOTSTRAP = "self._$SC={c:{},a:{},r(i,a){a&&(this.a[a]=i,this.reg&&this.reg(a,i));return this.c[i]||(this.c[i]=(p)=>self._$SC.impl(i,p))}};";
 function isServerContent(value) {
   if (value && typeof value === "object") {
     if ("t" in value) return true;

package/package.json

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

package/types/client.d.ts

@@ -143,12 +143,14 @@ export type HeadTag = {
 };
 /**
  * Registers head tags with the ambient head registry under the current
- * owner. An array is a group — one replacement set. Resolution is
- * last-committed group per identity; disposal restores the previous winner.
- * During hydration the server-flushed head state stays authoritative until
- * hydration completes. See docs/head-management-rfc.md.
+ * owner. An array is a group — one replacement set; a function is a
+ * reactive group whose membership is tracked and re-read on change.
+ * Resolution is last-committed group per identity (reactive updates keep
+ * the registration's original commit position); disposal restores the
+ * previous winner. During hydration the server-flushed head state stays
+ * authoritative until hydration completes. See docs/head-management-rfc.md.
  */
-export function useHead(tag: HeadTag | HeadTag[]): void;
+export function useHead(tag: HeadTag | HeadTag[] | (() => HeadTag | HeadTag[])): void;
 export type AssetDescriptor =
   | { type: "style"; href: string; attrs?: Record<string, string> }
   | { type: "inline-style"; id: string; content?: string; attrs?: Record<string, string> }

package/types/frames/client.d.ts

@@ -5,13 +5,15 @@ export type { Slot } from "./server.js";
 export declare function getFrameHost(): any;
 /**
  * Installs the server-component transport policy on the server-function
- * client: boundary identity is the call's intrinsic (function, arguments)
- * address — per-args, exactly like the query cache, so a cached component
- * always mounts the boundary showing the call it was cached for. Repeat
- * calls for the same args resolve the identical component (refetches morph
- * in place, cache hits pass `dynamic`'s equals-gate); a source switching
- * args swaps boundaries, re-materialized instantly from the host's
- * retained state.
+ * client — the identity split (DR-1): CONTENT is keyed by the call's
+ * intrinsic (function, arguments) address — per-args, exactly like the
+ * query cache, so a cached resolution always names the content it was
+ * cached for — while the MOUNT belongs to the call site. Every call of a
+ * function resolves a binding wrapping the same per-function component
+ * (the document placeholder), so `dynamic` keeps its instance across both
+ * refetches AND argument changes; the instance follows delivered addresses
+ * by re-binding its frame's pull, and a preload for unshown args only ever
+ * warms that address's resident store.
  *
  * Call once in the client entry (an explicit call — the package is
  * `sideEffects: false`, so a bare import would be tree-shaken away);

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

@@ -239,6 +239,18 @@ export interface FrameOptions {
    * for the framework-agnostic imperative swap (no reactive reveal).
    */
   reveal?(seam: { before: Node; fallback: Node[]; content: () => Node | DocumentFragment }): void;
+  /**
+   * Document-face record-race guard (adopt path only — solidjs/solid#2968).
+   * Nothing on the wire formally orders an occurrence's args-record data
+   * script before the event that triggers adoption, so a recordless
+   * occurrence is ambiguous while this returns true: the frame defers its
+   * mount one macrotask (all currently parsed scripts run first), calls
+   * `drainRecords`, and classifies with whatever is then resolvable. Return
+   * false once the document can run no further data scripts.
+   */
+  recordsPending?(): boolean;
+  /** Re-absorb the document's arrived-by-now records (idempotent per key). */
+  drainRecords?(): void;
 }
 
 /**

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

@@ -161,8 +161,11 @@ export {
 } from "./frame-transport.js";
 
 /**
- * Inline bootstrap for the document shell: installs the `self._$SC`
- * placeholder registry the hydration references resolve through; the client
- * upgrades it via `installServerComponents()`.
+ * Statement form of the `self._$SC` placeholder-registry bootstrap
+ * (idempotent — first definition wins). No longer required in the document
+ * shell: each hydration script's first serialized server-component reference
+ * self-bootstraps the registry. Kept for integrations still installing it
+ * document-wide; the client upgrades the registry via
+ * `installServerComponents()`.
  */
 export const SERVER_COMPONENT_BOOTSTRAP: string;