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

package/dist/dev.js

@@ -169,6 +169,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();
@@ -654,6 +737,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 (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;
@@ -1309,8 +1621,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 = createMemo(source, {
+  let latest = 0;
+  const cached = 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 => {
@@ -1342,7 +1667,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] = createSignal();
   let started = !options.lazy;
   started && loadClientOnly(fn, setComp);
@@ -1366,4 +1692,4 @@ function clientOnly(fn, options = {}) {
 function httpStatus(_code, _text) {}
 function httpHeader(_name, _value, _options) {}
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clientOnly, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isServer, memo, mergeProps, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, respond, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clientOnly, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isServer, memo, mergeProps, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, respond, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets, useHead };