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

package/dist/server.js

@@ -102,7 +102,7 @@ Feature.RegExp;
 
 const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script", "base"]);
 const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
-const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "icon", "stylesheet"]);
+const RESOURCE_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) {
@@ -146,12 +146,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) {
@@ -343,6 +345,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];
@@ -430,9 +441,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 ? {
@@ -581,10 +622,10 @@ function useHead(tags) {
     console.warn("useHead() called outside of a server render; registration ignored.");
     return;
   }
-  ctx.registerHeadTags(Array.isArray(tags) ? tags : [tags]);
+  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){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 renderToString(code, options = {}) {
   const {
@@ -667,6 +708,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 => {
@@ -1010,8 +1086,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) {
@@ -1068,14 +1144,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();
@@ -1084,7 +1170,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);
@@ -1127,9 +1213,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) {

package/dist/web.cjs

@@ -172,7 +172,7 @@ function reconcileArrays(parentNode, a, b, marker) {
 
 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"];
 function evalHeadValue(v) {
   return typeof v === "function" ? v() : v;
@@ -215,12 +215,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) {
@@ -831,21 +833,25 @@ function flushHeadRegistry() {
     headOwned.set(identity, els);
   }
 }
-function renderHeadElement(t, identity, existing) {
-  for (let i = 0; i < existing.length; i++) {
-    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
-  }
-  const el = document.createElement(t.tag);
-  for (const name in t.props) {
+function createHeadElement(tag, props) {
+  const el = document.createElement(tag);
+  for (const name in props) {
     if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
     if (!HEAD_ATTR_NAME.test(name)) {
       continue;
     }
-    const v = t.props[name];
+    const v = props[name];
     if (v == null || v === false) continue;
     el.setAttribute(name, v === true ? "" : String(v));
   }
-  if (t.props.children != null) el.textContent = String(t.props.children);
+  if (props.children != null) el.textContent = String(props.children);
+  return el;
+}
+function renderHeadElement(t, identity, existing) {
+  for (let i = 0; i < existing.length; i++) {
+    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
+  }
+  const el = createHeadElement(t.tag, t.props);
   el.setAttribute("data-dh", identity);
   document.head.appendChild(el);
   return el;
@@ -888,23 +894,11 @@ function acquireHeadResource(tag, props) {
   if (url != null) {
     if (tag === "link") el = findAssetElement(`link[rel="${props.rel}"]`, "href", url);else if (tag === "script") el = findAssetElement("script[src]", "src", url);else el = findAssetElement("style[href]", "href", url);
   }
-  if (!el) {
-    el = document.createElement(tag);
-    for (const name in props) {
-      if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
-      if (!HEAD_ATTR_NAME.test(name)) continue;
-      const v = props[name];
-      if (v == null || v === false) continue;
-      el.setAttribute(name, v === true ? "" : String(v));
-    }
-    if (props.children != null) el.textContent = String(props.children);
-    document.head.appendChild(el);
-  }
+  if (!el) document.head.appendChild(createHeadElement(tag, props));
   return noopFn;
 }
 function noopFn() {}
 function useHead(tags) {
-  const list = Array.isArray(tags) ? tags : [tags];
   initHeadRegistry();
   const reg = {
     seq: -1,
@@ -912,6 +906,8 @@ function useHead(tags) {
   };
   const uid = ++headUid;
   effect(() => {
+    let list = typeof tags === "function" ? tags() : tags;
+    if (!Array.isArray(list)) list = [list];
     const replaceable = [];
     const resources = [];
     for (let i = 0; i < list.length; i++) {
@@ -1559,19 +1555,29 @@ function portalImpl(props) {
   });
   return treeMarker;
 }
-const COMPONENT_HANDOFF = Symbol.for("dom-expressions.component-handoff");
-function resolveHandoff(next, prev) {
-  const handoff = typeof next === "function" && next !== null && next[COMPONENT_HANDOFF];
-  return handoff && handoff.take(prev) ? prev : next;
+const COMPONENT_BINDING = Symbol.for("dom-expressions.component-binding");
+function bindingOf(value) {
+  return value !== null && (typeof value === "function" || typeof value === "object") && value[COMPONENT_BINDING] || undefined;
 }
 function dynamic(source) {
   let latest = 0;
+  const sites = new Set();
+  const resolveBinding = (next, prev) => {
+    const binding = bindingOf(next);
+    if (!binding) return next;
+    const prevBinding = bindingOf(prev);
+    if (prevBinding && prevBinding.component === binding.component) {
+      for (const deliver of sites) deliver(binding.address);
+      return prev;
+    }
+    return next;
+  };
   const cached = solidJs.createMemo(prev => {
     const next = source();
-    if (!next || typeof next.then !== "function") return resolveHandoff(next, prev);
+    if (!next || typeof next.then !== "function") return resolveBinding(next, prev);
     const token = ++latest;
     return {
-      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveHandoff(resolved, prev) : resolved), onRejected)
+      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveBinding(resolved, prev) : resolved), onRejected)
     };
   }, {
     lazy: true
@@ -1581,7 +1587,16 @@ function dynamic(source) {
       const component = cached();
       switch (typeof component) {
         case "function":
-          return solidJs.untrack(() => component(props));
+          {
+            const binding = bindingOf(component);
+            if (binding) {
+              const [address, setAddress] = solidJs.createSignal(binding.address);
+              sites.add(setAddress);
+              solidJs.onCleanup(() => sites.delete(setAddress));
+              return solidJs.untrack(() => binding.component(props, address));
+            }
+            return solidJs.untrack(() => component(props));
+          }
         case "string":
           const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
           spread(el, props);
@@ -1618,9 +1633,7 @@ _moduleUrl) {
     if ((Comp = solidJs.untrack(comp)) && !solidJs.sharedConfig.hydrating) return Comp(rest);
     const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.hydrating);
     const gate = solidJs.createMemo(() => (Comp = comp(), m = mounted(), solidJs.untrack(() => Comp && m ? Comp(rest) : props.fallback)));
-    solidJs.onSettled(() => {
-      setMounted(true);
-    });
+    solidJs.sharedConfig.onHydrationEnd(() => setMounted(true));
     return gate;
   };
 }

package/dist/web.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createOwner, createSignal, onSettled, enableHydration, flush, getOwner, createEffect } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createOwner, createSignal, onCleanup, enableHydration, flush, getOwner, createEffect } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 
 const DOMWithState = {
@@ -171,7 +171,7 @@ function reconcileArrays(parentNode, a, b, marker) {
 
 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"];
 function evalHeadValue(v) {
   return typeof v === "function" ? v() : v;
@@ -214,12 +214,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) {
@@ -830,21 +832,25 @@ function flushHeadRegistry() {
     headOwned.set(identity, els);
   }
 }
-function renderHeadElement(t, identity, existing) {
-  for (let i = 0; i < existing.length; i++) {
-    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
-  }
-  const el = document.createElement(t.tag);
-  for (const name in t.props) {
+function createHeadElement(tag, props) {
+  const el = document.createElement(tag);
+  for (const name in props) {
     if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
     if (!HEAD_ATTR_NAME.test(name)) {
       continue;
     }
-    const v = t.props[name];
+    const v = props[name];
     if (v == null || v === false) continue;
     el.setAttribute(name, v === true ? "" : String(v));
   }
-  if (t.props.children != null) el.textContent = String(t.props.children);
+  if (props.children != null) el.textContent = String(props.children);
+  return el;
+}
+function renderHeadElement(t, identity, existing) {
+  for (let i = 0; i < existing.length; i++) {
+    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
+  }
+  const el = createHeadElement(t.tag, t.props);
   el.setAttribute("data-dh", identity);
   document.head.appendChild(el);
   return el;
@@ -887,23 +893,11 @@ function acquireHeadResource(tag, props) {
   if (url != null) {
     if (tag === "link") el = findAssetElement(`link[rel="${props.rel}"]`, "href", url);else if (tag === "script") el = findAssetElement("script[src]", "src", url);else el = findAssetElement("style[href]", "href", url);
   }
-  if (!el) {
-    el = document.createElement(tag);
-    for (const name in props) {
-      if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
-      if (!HEAD_ATTR_NAME.test(name)) continue;
-      const v = props[name];
-      if (v == null || v === false) continue;
-      el.setAttribute(name, v === true ? "" : String(v));
-    }
-    if (props.children != null) el.textContent = String(props.children);
-    document.head.appendChild(el);
-  }
+  if (!el) document.head.appendChild(createHeadElement(tag, props));
   return noopFn;
 }
 function noopFn() {}
 function useHead(tags) {
-  const list = Array.isArray(tags) ? tags : [tags];
   initHeadRegistry();
   const reg = {
     seq: -1,
@@ -911,6 +905,8 @@ function useHead(tags) {
   };
   const uid = ++headUid;
   effect(() => {
+    let list = typeof tags === "function" ? tags() : tags;
+    if (!Array.isArray(list)) list = [list];
     const replaceable = [];
     const resources = [];
     for (let i = 0; i < list.length; i++) {
@@ -1558,19 +1554,29 @@ function portalImpl(props) {
   });
   return treeMarker;
 }
-const COMPONENT_HANDOFF = Symbol.for("dom-expressions.component-handoff");
-function resolveHandoff(next, prev) {
-  const handoff = typeof next === "function" && next !== null && next[COMPONENT_HANDOFF];
-  return handoff && handoff.take(prev) ? prev : next;
+const COMPONENT_BINDING = Symbol.for("dom-expressions.component-binding");
+function bindingOf(value) {
+  return value !== null && (typeof value === "function" || typeof value === "object") && value[COMPONENT_BINDING] || undefined;
 }
 function dynamic(source) {
   let latest = 0;
+  const sites = new Set();
+  const resolveBinding = (next, prev) => {
+    const binding = bindingOf(next);
+    if (!binding) return next;
+    const prevBinding = bindingOf(prev);
+    if (prevBinding && prevBinding.component === binding.component) {
+      for (const deliver of sites) deliver(binding.address);
+      return prev;
+    }
+    return next;
+  };
   const cached = createMemo(prev => {
     const next = source();
-    if (!next || typeof next.then !== "function") return resolveHandoff(next, prev);
+    if (!next || typeof next.then !== "function") return resolveBinding(next, prev);
     const token = ++latest;
     return {
-      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveHandoff(resolved, prev) : resolved), onRejected)
+      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveBinding(resolved, prev) : resolved), onRejected)
     };
   }, {
     lazy: true
@@ -1580,7 +1586,16 @@ function dynamic(source) {
       const component = cached();
       switch (typeof component) {
         case "function":
-          return untrack(() => component(props));
+          {
+            const binding = bindingOf(component);
+            if (binding) {
+              const [address, setAddress] = createSignal(binding.address);
+              sites.add(setAddress);
+              onCleanup(() => sites.delete(setAddress));
+              return untrack(() => binding.component(props, address));
+            }
+            return untrack(() => component(props));
+          }
         case "string":
           const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
           spread(el, props);
@@ -1617,9 +1632,7 @@ _moduleUrl) {
     if ((Comp = untrack(comp)) && !sharedConfig.hydrating) return Comp(rest);
     const [mounted, setMounted] = createSignal(!sharedConfig.hydrating);
     const gate = createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
-    onSettled(() => {
-      setMounted(true);
-    });
+    sharedConfig.onHydrationEnd(() => setMounted(true));
     return gate;
   };
 }