@praxisjs/head 0.3.0 → 0.3.2

package/src/head-stack.ts

@@ -49,19 +49,32 @@ interface HeadEntry {
 }
 
 const _stack: HeadEntry[] = [];
+let _managed = new Map<string, HTMLElement>();
 let _initialTitle: string | undefined;
+// Tags a prerender left in the document are not in `_managed`; they are swept once, on the first
+// sync, instead of querying the whole <head> on every update.
+let _swept = false;
 
 /** Increments on every head update. Read reactively to subscribe to head changes. */
 export const headVersion = signal(0);
 
+function _bump(): void {
+  headVersion.update((n) => n + 1);
+}
+
 export function pushHead(id: symbol, config: HeadConfig): void {
   if (typeof document === "undefined") return;
   _initialTitle ??= document.title;
   const idx = _stack.findIndex((e) => e.id === id);
-  if (idx >= 0) {
-    _stack[idx].config = config;
-  } else {
+  if (idx === -1) {
     _stack.push({ id, config });
+  } else {
+    _stack[idx].config = config;
+    // Only the top entry is shown; one below it changes nothing in the document yet.
+    if (idx !== _stack.length - 1) {
+      _bump();
+      return;
+    }
   }
   _apply();
 }
@@ -69,109 +82,119 @@ export function pushHead(id: symbol, config: HeadConfig): void {
 export function removeHead(id: symbol): void {
   if (typeof document === "undefined") return;
   const idx = _stack.findIndex((e) => e.id === id);
-  if (idx >= 0) _stack.splice(idx, 1);
-  _apply();
+  if (idx === -1) return;
+  const wasTop = idx === _stack.length - 1;
+  _stack.splice(idx, 1);
+  if (wasTop) _apply();
+  else _bump();
 }
 
-function _apply(): void {
-  headVersion.update((n) => n + 1);
-  document.querySelectorAll(`[${ATTR}]`).forEach((el) => { el.remove(); });
-
-  const top = _stack.at(-1);
-  if (top === undefined) {
-    document.title = _initialTitle ?? "";
-    return;
-  }
+interface TagSpec {
+  tag: "meta" | "link";
+  /** Attribute names and values, alternating. */
+  attrs: string[];
+}
 
-  const { config } = top;
+function _meta(specs: TagSpec[], attr: "name" | "property", key: string, content: string | undefined): void {
+  if (content != null) specs.push({ tag: "meta", attrs: [attr, key, "content", content] });
+}
 
-  if (config.title != null) document.title = config.title;
-  if (config.description != null) _metaName("description", config.description);
-  if (config.canonical != null) _canonical(config.canonical);
-  for (const link of config.preload ?? []) _linkPreload(link);
-  for (const link of config.prefetch ?? []) _linkPrefetch(link);
+function _collect(config: HeadConfig): TagSpec[] {
+  const specs: TagSpec[] = [];
 
+  _meta(specs, "name", "description", config.description);
+  if (config.canonical != null) {
+    specs.push({ tag: "link", attrs: ["rel", "canonical", "href", config.canonical] });
+  }
+  for (const link of config.preload ?? []) {
+    const attrs = ["rel", "preload", "href", link.href, "as", link.as];
+    if (link.type != null) attrs.push("type", link.type);
+    if (link.crossOrigin != null) attrs.push("crossorigin", link.crossOrigin);
+    specs.push({ tag: "link", attrs });
+  }
+  for (const link of config.prefetch ?? []) {
+    const attrs = ["rel", "prefetch", "href", link.href];
+    if (link.as != null) attrs.push("as", link.as);
+    specs.push({ tag: "link", attrs });
+  }
   for (const tag of config.meta ?? []) {
-    if (tag.property != null) _metaProp(tag.property, tag.content);
-    else if (tag.name != null) _metaName(tag.name, tag.content);
+    if (tag.property != null) _meta(specs, "property", tag.property, tag.content);
+    else if (tag.name != null) _meta(specs, "name", tag.name, tag.content);
   }
 
-  if (config.og != null) {
-    const og = config.og;
-    _applyMap("property", {
-      "og:title": og.title,
-      "og:description": og.description,
-      "og:image": og.image,
-      "og:url": og.url,
-      "og:type": og.type,
-      "og:site_name": og.siteName,
-    });
+  const og = config.og;
+  if (og != null) {
+    _meta(specs, "property", "og:title", og.title);
+    _meta(specs, "property", "og:description", og.description);
+    _meta(specs, "property", "og:image", og.image);
+    _meta(specs, "property", "og:url", og.url);
+    _meta(specs, "property", "og:type", og.type);
+    _meta(specs, "property", "og:site_name", og.siteName);
   }
-
-  if (config.twitter != null) {
-    const tw = config.twitter;
-    _applyMap("name", {
-      "twitter:card": tw.card,
-      "twitter:title": tw.title,
-      "twitter:description": tw.description,
-      "twitter:image": tw.image,
-    });
+  const tw = config.twitter;
+  if (tw != null) {
+    _meta(specs, "name", "twitter:card", tw.card);
+    _meta(specs, "name", "twitter:title", tw.title);
+    _meta(specs, "name", "twitter:description", tw.description);
+    _meta(specs, "name", "twitter:image", tw.image);
   }
+  return specs;
+}
+
+function _create(spec: TagSpec): HTMLElement {
+  const el = document.createElement(spec.tag);
+  const { attrs } = spec;
+  for (let i = 0; i < attrs.length; i += 2) el.setAttribute(attrs[i], attrs[i + 1]);
+  el.setAttribute(ATTR, "");
+  return el;
 }
 
-function _applyMap(
-  attr: "name" | "property",
-  map: Record<string, string | undefined>,
-): void {
-  for (const [key, value] of Object.entries(map)) {
-    if (value != null) {
-      if (attr === "name") { _metaName(key, value); } else { _metaProp(key, value); }
+// Tags the new config shares with the previous one stay in the document untouched instead of being
+// removed and recreated on every update; only the difference is added or removed.
+function _syncTags(specs: TagSpec[]): void {
+  const next = new Map<string, HTMLElement>();
+
+  for (const spec of specs) {
+    const base = `${spec.tag}\0${spec.attrs.join("\0")}`;
+    let key = base;
+    for (let n = 2; next.has(key); n++) key = `${base}#${String(n)}`;
+
+    let el = _managed.get(key);
+    if (el?.isConnected) {
+      _managed.delete(key);
+    } else {
+      el = _create(spec);
+      document.head.appendChild(el);
     }
+    next.set(key, el);
   }
-}
 
-function _metaName(name: string, content: string): void {
-  const el = document.createElement("meta");
-  el.name = name;
-  el.content = content;
-  el.setAttribute(ATTR, "");
-  document.head.appendChild(el);
-}
+  for (const stale of _managed.values()) stale.remove();
 
-function _metaProp(property: string, content: string): void {
-  const el = document.createElement("meta");
-  el.setAttribute("property", property);
-  el.content = content;
-  el.setAttribute(ATTR, "");
-  document.head.appendChild(el);
+  if (!_swept) {
+    _swept = true;
+    const keep = new Set<Element>(next.values());
+    document.head.querySelectorAll(`[${ATTR}]`).forEach((el) => {
+      if (!keep.has(el)) el.remove();
+    });
+  }
+  _managed = next;
 }
 
-function _canonical(href: string): void {
-  const el = document.createElement("link");
-  el.rel = "canonical";
-  el.href = href;
-  el.setAttribute(ATTR, "");
-  document.head.appendChild(el);
-}
+function _apply(): void {
+  _bump();
 
-function _linkPreload(link: LinkPreload): void {
-  const el = document.createElement("link");
-  el.rel = "preload";
-  el.href = link.href;
-  el.setAttribute("as", link.as);
-  if (link.type != null) el.type = link.type;
-  if (link.crossOrigin != null) el.crossOrigin = link.crossOrigin;
-  el.setAttribute(ATTR, "");
-  document.head.appendChild(el);
-}
+  const top = _stack.at(-1);
+  if (top === undefined) {
+    _syncTags([]);
+    // Set by the push that the removal emptying the stack undid.
+    document.title = _initialTitle as string;
+    return;
+  }
 
-function _linkPrefetch(link: LinkPrefetch): void {
-  const el = document.createElement("link");
-  el.rel = "prefetch";
-  el.href = link.href;
-  if (link.as != null) el.setAttribute("as", link.as);
-  el.setAttribute(ATTR, "");
-  document.head.appendChild(el);
+  const { config } = top;
+  if (config.title != null) document.title = config.title;
+  _syncTags(_collect(config));
 }
 
 /**
@@ -182,7 +205,9 @@ function _linkPrefetch(link: LinkPrefetch): void {
  */
 export function resetHeadState(): void {
   _stack.length = 0;
+  _managed = new Map();
   _initialTitle = undefined;
+  _swept = false;
   if (typeof document !== "undefined") {
     document.querySelectorAll(`[${ATTR}]`).forEach((el) => { el.remove(); });
   }

package/dist/__tests__/head.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=head.test.d.ts.map

package/dist/__tests__/head.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"head.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/head.test.ts"],"names":[],"mappings":""}