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

package/dist/dev.cjs

@@ -170,6 +170,89 @@ 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_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+function evalHeadValue(v) {
+  return typeof v === "function" ? v() : v;
+}
+function evalHeadProps(props, presets) {
+  const out = {};
+  for (const name in props) out[name] = presets && name in presets ? presets[name] : evalHeadValue(props[name]);
+  return out;
+}
+function classifyHeadTag(desc) {
+  const tag = desc.tag;
+  if (tag === "link") {
+    const rel = evalHeadValue(desc.props && desc.props.rel);
+    return {
+      resource: RESOURCE_LINK_RELS.has(rel),
+      rel
+    };
+  }
+  if (tag === "style") return {
+    resource: !!(desc.props && "href" in desc.props)
+  };
+  if (tag === "script") return {
+    resource: !!(desc.props && "src" in desc.props)
+  };
+  return {
+    resource: false
+  };
+}
+function resourceIdentity(tag, props) {
+  let id = "res:" + tag + ":" + (props.rel || "") + ":" + (props.href || props.src || "");
+  for (let i = 0; i < RESOURCE_QUALIFIERS.length; i++) {
+    const q = RESOURCE_QUALIFIERS[i];
+    if (props[q] != null) id += ":" + q + "=" + props[q];
+  }
+  return id;
+}
+function replaceableIdentity(tag, props, key, unique) {
+  if (tag === "title") return "title";
+  if (tag === "base") return "base";
+  if (tag === "meta" && props.charset != null) return "charset";
+  if (key != null) return tag + ":key:" + key;
+  if (tag === "meta") {
+    if (props.name != null) return "meta:name:" + props.name;
+    if (props.property != null) return "meta:property:" + props.property;
+    if (props["http-equiv"] != null) return "meta:http-equiv:" + props["http-equiv"];
+    return unique;
+  }
+  if (tag === "link") return "link:" + (props.rel || "") + ":" + (props.href || "");
+  return unique;
+}
+function resolveHead(groups) {
+  const winners = new Map();
+  const sorted = groups.slice().sort((a, b) => a.seq - b.seq);
+  for (let i = 0; i < sorted.length; i++) {
+    const group = sorted[i];
+    const byIdentity = new Map();
+    for (let j = 0; j < group.tags.length; j++) {
+      const t = group.tags[j];
+      let list = byIdentity.get(t.identity);
+      if (!list) byIdentity.set(t.identity, list = []);
+      list.push(t);
+    }
+    for (const [identity, tags] of byIdentity) {
+      if (identity === "title") {
+        if (tags.length > 1) console.warn("Multiple <title> tags in one head group; the last one wins.");
+        winners.set(identity, {
+          seq: group.seq,
+          tags: [tags[tags.length - 1]]
+        });
+      } else {
+        winners.set(identity, {
+          seq: group.seq,
+          tags
+        });
+      }
+    }
+  }
+  return winners;
+}
+
 const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
@@ -655,6 +738,235 @@ function acquireAsset(descriptor) {
     }, ASSET_REMOVAL_GRACE);
   };
 }
+let headRegistrations = null;
+let headSeq = 0;
+let headUid = 0;
+let headOwned = null;
+let headApplied = null;
+let headFallbackTitle = null;
+let headScheduled = false;
+const headMountedResources = new Set();
+function initHeadRegistry() {
+  if (headRegistrations) return;
+  headRegistrations = [];
+  headOwned = new Map();
+  headApplied = new Map();
+  const t = document.querySelector("title");
+  headFallbackTitle = t && !t.hasAttribute("data-dh") ? t.textContent : null;
+  if (globalThis._$HY) globalThis._$HY.h = applyServerHeadOps;
+}
+function applyServerHeadOps(ops) {
+  for (let i = 0; i < ops.length; i++) {
+    const op = ops[i];
+    const identity = op[0] === "t" ? "title" : op[1];
+    if (headOwned.has(identity)) continue;
+    if (op[0] === "t") setHeadTitle(op[1]);else if (op[0] === "r") {
+      const els = headMarkedElements(identity);
+      for (let j = 0; j < els.length; j++) els[j].remove();
+    } else {
+      const el = document.createElement(op[2]);
+      for (const name in op[3]) el.setAttribute(name, op[3][name]);
+      if (op[4] != null) el.textContent = op[4];
+      el.setAttribute("data-dh", identity);
+      document.head.appendChild(el);
+    }
+  }
+}
+function headMarkedElements(identity) {
+  const nodes = document.head.querySelectorAll("[data-dh]");
+  const out = [];
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].getAttribute("data-dh") === identity) out.push(nodes[i]);
+  }
+  return out;
+}
+function setHeadTitle(text) {
+  let el = document.querySelector("title");
+  if (!el) {
+    el = document.createElement("title");
+    document.head.appendChild(el);
+  }
+  el.textContent = text;
+  el.setAttribute("data-dh", "title");
+  return el;
+}
+function scheduleHeadApply() {
+  if (headScheduled) return;
+  headScheduled = true;
+  queueMicrotask(flushHeadRegistry);
+}
+function flushHeadRegistry() {
+  if (solidJs.sharedConfig.hydrating) {
+    setTimeout(flushHeadRegistry, 0);
+    return;
+  }
+  headScheduled = false;
+  const winners = resolveHead(headRegistrations);
+  for (const [identity, els] of headOwned) {
+    if (winners.has(identity)) continue;
+    headOwned.delete(identity);
+    headApplied.delete(identity);
+    if (identity === "title") {
+      if (headFallbackTitle != null) setHeadTitle(headFallbackTitle).removeAttribute("data-dh");
+    } else {
+      for (let i = 0; i < els.length; i++) els[i].remove();
+    }
+  }
+  for (const [identity, winner] of winners) {
+    let sig = "";
+    for (let i = 0; i < winner.tags.length; i++) sig += winner.tags[i].tag + JSON.stringify(winner.tags[i].props) + "|";
+    if (headApplied.get(identity) === sig) continue;
+    headApplied.set(identity, sig);
+    if (identity === "base" || identity === "charset") {
+      console.warn(`useHead: <${winner.tags[0].tag}> (${identity}) is shell-only and ignored on the client`);
+      continue;
+    }
+    if (identity === "title") {
+      const children = winner.tags[0].props.children;
+      setHeadTitle(children == null ? "" : String(children));
+      headOwned.set(identity, []);
+      continue;
+    }
+    const existing = headMarkedElements(identity);
+    const els = [];
+    for (let i = 0; i < winner.tags.length; i++) {
+      els.push(renderHeadElement(winner.tags[i], identity, existing));
+    }
+    for (let i = 0; i < existing.length; i++) {
+      if (els.indexOf(existing[i]) === -1) existing[i].remove();
+    }
+    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) {
+    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;
+    el.setAttribute(name, v === true ? "" : String(v));
+  }
+  if (t.props.children != null) el.textContent = String(t.props.children);
+  el.setAttribute("data-dh", identity);
+  document.head.appendChild(el);
+  return el;
+}
+function headElementMatches(el, t) {
+  if (el.tagName.toLowerCase() !== t.tag) return false;
+  for (const name in t.props) {
+    if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
+    if (!HEAD_ATTR_NAME.test(name)) continue;
+    const v = t.props[name];
+    if (v == null || v === false) {
+      if (el.hasAttribute(name)) return false;
+    } else if (el.getAttribute(name) !== (v === true ? "" : String(v))) return false;
+  }
+  const children = t.props.children;
+  return (children == null ? "" : String(children)) === el.textContent;
+}
+function acquireHeadResource(tag, props) {
+  if (tag === "link" && (props.rel === "stylesheet" || props.rel === "modulepreload")) {
+    const descriptor = {
+      type: props.rel === "stylesheet" ? "style" : "module",
+      href: props.href
+    };
+    let attrs = null;
+    for (const name in props) {
+      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);
+    }
+    if (attrs) descriptor.attrs = attrs;
+    return acquireAsset(descriptor);
+  }
+  const identity = resourceIdentity(tag, props);
+  if (headMountedResources.has(identity)) return noopFn;
+  headMountedResources.add(identity);
+  const url = props.href || props.src;
+  let el = null;
+  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);
+  }
+  return noopFn;
+}
+function noopFn() {}
+function useHead(tags) {
+  const list = Array.isArray(tags) ? tags : [tags];
+  initHeadRegistry();
+  const reg = {
+    seq: -1,
+    tags: null
+  };
+  const uid = ++headUid;
+  effect(() => {
+    const replaceable = [];
+    const resources = [];
+    for (let i = 0; i < list.length; i++) {
+      const desc = list[i];
+      if (!desc || !HEAD_ELIGIBLE_TAGS.has(desc.tag)) {
+        console.warn(`useHead: ignoring non-head tag`, desc);
+        continue;
+      }
+      const cls = classifyHeadTag(desc);
+      const props = evalHeadProps(desc.props || {}, cls.rel !== undefined ? {
+        rel: cls.rel
+      } : undefined);
+      if (cls.resource) {
+        resources.push({
+          tag: desc.tag,
+          props
+        });
+      } else {
+        const key = evalHeadValue(desc.key);
+        replaceable.push({
+          tag: desc.tag,
+          props,
+          identity: replaceableIdentity(desc.tag, props, key, "u:c" + uid + ":" + i)
+        });
+      }
+    }
+    return {
+      replaceable,
+      resources
+    };
+  }, evaluated => {
+    const releases = [];
+    for (let i = 0; i < evaluated.resources.length; i++) {
+      releases.push(acquireHeadResource(evaluated.resources[i].tag, evaluated.resources[i].props));
+    }
+    reg.tags = evaluated.replaceable;
+    if (reg.seq < 0) reg.seq = ++headSeq;
+    if (headRegistrations.indexOf(reg) === -1) headRegistrations.push(reg);
+    scheduleHeadApply();
+    return () => {
+      const idx = headRegistrations.indexOf(reg);
+      if (idx > -1) headRegistrations.splice(idx, 1);
+      for (let i = 0; i < releases.length; i++) releases[i]();
+      scheduleHeadApply();
+    };
+  });
+}
 function loadModuleAssets(mapping) {
   const hy = globalThis._$HY;
   if (!hy) return;
@@ -1310,8 +1622,21 @@ 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;
+}
 function dynamic(source) {
-  const cached = solidJs.createMemo(source, {
+  let latest = 0;
+  const cached = solidJs.createMemo(prev => {
+    const next = source();
+    if (!next || typeof next.then !== "function") return resolveHandoff(next, prev);
+    const token = ++latest;
+    return {
+      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveHandoff(resolved, prev) : resolved), onRejected)
+    };
+  }, {
     lazy: true
   });
   return props => {
@@ -1343,7 +1668,8 @@ function createElement(tagName, is = undefined) {
 function loadClientOnly(fn, setComp) {
   fn().then(m => setComp(() => m.default));
 }
-function clientOnly(fn, options = {}) {
+function clientOnly(fn, options = {},
+_moduleUrl) {
   const [comp, setComp] = solidJs.createSignal();
   let started = !options.lazy;
   started && loadClientOnly(fn, setComp);
@@ -1500,3 +1826,4 @@ exports.template = template;
 exports.unregisterDelegatedContainer = unregisterDelegatedContainer;
 exports.unregisterDelegatedRoot = unregisterDelegatedRoot;
 exports.useAssets = voidFn;
+exports.useHead = useHead;