@unhead/dom 1.0.22 → 1.1.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 const shared = require('@unhead/shared');
 
-const setAttrs = (ctx, markSideEffect) => {
+const setAttrs = (ctx, newEntry = false, markSideEffect) => {
   const { tag, $el } = ctx;
   if (!$el)
     return;
@@ -23,86 +23,97 @@ const setAttrs = (ctx, markSideEffect) => {
     }
     if (markSideEffect && !k.startsWith("data-h-"))
       markSideEffect(ctx, attrSdeKey, () => $el.removeAttribute(k));
-    if ($el.getAttribute(k) !== value)
+    if (newEntry || $el.getAttribute(k) !== value)
       $el.setAttribute(k, value);
   });
-  if (shared.TagsWithInnerContent.includes(tag.tag) && $el.innerHTML !== (tag.children || ""))
-    $el.innerHTML = tag.children || "";
+  if (shared.TagsWithInnerContent.includes(tag.tag)) {
+    if (tag.textContent && tag.textContent !== $el.textContent)
+      $el.textContent = tag.textContent;
+    else if (tag.innerHTML && tag.innerHTML !== $el.innerHTML)
+      $el.innerHTML = tag.innerHTML;
+  }
 };
 
+let prevHash = false;
 async function renderDOMHead(head, options = {}) {
-  const ctx = { shouldRender: true };
-  await head.hooks.callHook("dom:beforeRender", ctx);
-  if (!ctx.shouldRender)
+  const beforeRenderCtx = { shouldRender: true };
+  await head.hooks.callHook("dom:beforeRender", beforeRenderCtx);
+  if (!beforeRenderCtx.shouldRender)
     return;
-  const dom = options.document || window.document;
+  const dom = options.document || head.resolvedOptions.document || window.document;
+  const tagContexts = (await head.resolveTags()).map(setupTagRenderCtx);
+  if (head.resolvedOptions.experimentalHashHydration) {
+    prevHash = prevHash || head._hash || false;
+    if (prevHash) {
+      const hash = shared.computeHashes(tagContexts.map((ctx) => ctx.tag._h));
+      if (prevHash === hash)
+        return;
+      prevHash = hash;
+    }
+  }
   const staleSideEffects = head._popSideEffectQueue();
   head.headEntries().map((entry) => entry._sde).forEach((sde) => {
     Object.entries(sde).forEach(([key, fn]) => {
       staleSideEffects[key] = fn;
     });
   });
-  const setupTagRenderCtx = async (tag) => {
+  const markSideEffect = (ctx, key, fn) => {
+    key = `${ctx.renderId}:${key}`;
+    if (ctx.entry)
+      ctx.entry._sde[key] = fn;
+    delete staleSideEffects[key];
+  };
+  function setupTagRenderCtx(tag) {
     const entry = head.headEntries().find((e) => e._i === tag._e);
     const renderCtx = {
-      renderId: tag._d || shared.hashCode(JSON.stringify({ ...tag, _e: void 0, _p: void 0 })),
+      renderId: tag._d || shared.hashTag(tag),
       $el: null,
       shouldRender: true,
       tag,
       entry,
-      staleSideEffects
+      markSideEffect: (key, fn) => markSideEffect(renderCtx, key, fn)
     };
-    await head.hooks.callHook("dom:beforeRenderTag", renderCtx);
     return renderCtx;
-  };
+  }
   const renders = [];
   const pendingRenders = {
     body: [],
     head: []
   };
-  const markSideEffect = (ctx2, key, fn) => {
-    key = `${ctx2.renderId}:${key}`;
-    if (ctx2.entry)
-      ctx2.entry._sde[key] = fn;
-    delete staleSideEffects[key];
-  };
-  const markEl = (ctx2) => {
-    head._elMap[ctx2.renderId] = ctx2.$el;
-    renders.push(ctx2);
-    markSideEffect(ctx2, "el", () => {
-      ctx2.$el?.remove();
-      delete head._elMap[ctx2.renderId];
+  const markEl = (ctx) => {
+    head._elMap[ctx.renderId] = ctx.$el;
+    renders.push(ctx);
+    markSideEffect(ctx, "el", () => {
+      ctx.$el?.remove();
+      delete head._elMap[ctx.renderId];
     });
   };
-  for (const t of await head.resolveTags()) {
-    const ctx2 = await setupTagRenderCtx(t);
-    if (!ctx2.shouldRender)
+  for (const ctx of tagContexts) {
+    await head.hooks.callHook("dom:beforeRenderTag", ctx);
+    if (!ctx.shouldRender)
       continue;
-    const { tag } = ctx2;
+    const { tag } = ctx;
     if (tag.tag === "title") {
-      dom.title = tag.children || "";
-      renders.push(ctx2);
+      dom.title = tag.textContent || "";
+      renders.push(ctx);
       continue;
     }
     if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
-      ctx2.$el = dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"];
-      setAttrs(ctx2, markSideEffect);
-      renders.push(ctx2);
+      ctx.$el = dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"];
+      setAttrs(ctx, false, markSideEffect);
+      renders.push(ctx);
       continue;
     }
-    ctx2.$el = head._elMap[ctx2.renderId];
-    if (!ctx2.$el && tag._hash) {
-      ctx2.$el = dom.querySelector(`${tag.tagPosition?.startsWith("body") ? "body" : "head"} > ${tag.tag}[data-h-${tag._hash}]`);
-    }
-    if (ctx2.$el) {
-      if (ctx2.tag._d)
-        setAttrs(ctx2);
-      markEl(ctx2);
+    ctx.$el = head._elMap[ctx.renderId];
+    if (!ctx.$el && tag.key)
+      ctx.$el = dom.querySelector(`${tag.tagPosition?.startsWith("body") ? "body" : "head"} > ${tag.tag}[data-h-${tag._h}]`);
+    if (ctx.$el) {
+      if (ctx.tag._d)
+        setAttrs(ctx);
+      markEl(ctx);
       continue;
     }
-    ctx2.$el = dom.createElement(tag.tag);
-    setAttrs(ctx2);
-    pendingRenders[tag.tagPosition?.startsWith("body") ? "body" : "head"].push(ctx2);
+    pendingRenders[tag.tagPosition?.startsWith("body") ? "body" : "head"].push(ctx);
   }
   const fragments = {
     bodyClose: void 0,
@@ -119,25 +130,33 @@ async function renderDOMHead(head, options = {}) {
       const elTag = $el.tagName.toLowerCase();
       if (!shared.HasElementTags.includes(elTag))
         continue;
-      const dedupeKey = shared.tagDedupeKey({
-        tag: elTag,
-        // convert attributes to object
-        props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
-      });
-      const matchIdx = queue.findIndex((ctx2) => ctx2 && (ctx2.tag._d === dedupeKey || $el.isEqualNode?.(ctx2.$el)));
+      const props = $el.getAttributeNames().reduce((props2, name) => ({ ...props2, [name]: $el.getAttribute(name) }), {});
+      const tmpTag = { tag: elTag, props };
+      if ($el.innerHTML)
+        tmpTag.innerHTML = $el.innerHTML;
+      const tmpRenderId = shared.hashTag(tmpTag);
+      let matchIdx = queue.findIndex((ctx) => ctx?.renderId === tmpRenderId);
+      if (matchIdx === -1) {
+        const tmpDedupeKey = shared.tagDedupeKey(tmpTag);
+        matchIdx = queue.findIndex((ctx) => ctx?.tag._d && ctx.tag._d === tmpDedupeKey);
+      }
       if (matchIdx !== -1) {
-        const ctx2 = queue[matchIdx];
-        ctx2.$el = $el;
-        setAttrs(ctx2);
-        markEl(ctx2);
+        const ctx = queue[matchIdx];
+        ctx.$el = $el;
+        setAttrs(ctx);
+        markEl(ctx);
         delete queue[matchIdx];
       }
     }
-    queue.forEach((ctx2) => {
-      const pos2 = ctx2.tag.tagPosition || "head";
+    queue.forEach((ctx) => {
+      const pos2 = ctx.tag.tagPosition || "head";
       fragments[pos2] = fragments[pos2] || dom.createDocumentFragment();
-      fragments[pos2].appendChild(ctx2.$el);
-      markEl(ctx2);
+      if (!ctx.$el) {
+        ctx.$el = dom.createElement(ctx.tag.tag);
+        setAttrs(ctx, true);
+      }
+      fragments[pos2].appendChild(ctx.$el);
+      markEl(ctx);
     });
   });
   if (fragments.head)
@@ -146,8 +165,8 @@ async function renderDOMHead(head, options = {}) {
     dom.body.insertBefore(fragments.bodyOpen, dom.body.firstChild);
   if (fragments.bodyClose)
     dom.body.appendChild(fragments.bodyClose);
-  for (const ctx2 of renders)
-    await head.hooks.callHook("dom:renderTag", ctx2);
+  for (const ctx of renders)
+    await head.hooks.callHook("dom:renderTag", ctx);
   Object.values(staleSideEffects).forEach((fn) => fn());
 }
 exports.domUpdatePromise = null;
@@ -175,7 +194,12 @@ const PatchDomOnEntryUpdatesPlugin = (options) => {
   });
 };
 
+function maybeGetSSRHash(document) {
+  return document?.head.querySelector('meta[name="unhead:ssr"]')?.getAttribute("content") || false;
+}
+
 exports.PatchDomOnEntryUpdatesPlugin = PatchDomOnEntryUpdatesPlugin;
 exports.debouncedRenderDOMHead = debouncedRenderDOMHead;
+exports.maybeGetSSRHash = maybeGetSSRHash;
 exports.renderDOMHead = renderDOMHead;
 exports.setAttrs = setAttrs;

package/dist/index.d.ts

@@ -7,6 +7,12 @@ interface RenderDomHeadOptions {
      */
     document?: Document;
 }
+interface DebouncedRenderDomHeadOptions extends RenderDomHeadOptions {
+    /**
+     * Specify a custom delay function for delaying the render.
+     */
+    delayFn?: (fn: () => void) => void;
+}
 /**
  * Render the head tags to the DOM.
  */
@@ -18,9 +24,7 @@ declare let domUpdatePromise: Promise<void> | null;
 /**
  * Queue a debounced update of the DOM head.
  */
-declare function debouncedRenderDOMHead<T extends Unhead<any>>(head: T, options?: RenderDomHeadOptions & {
-    delayFn?: (fn: () => void) => void;
-}): Promise<void>;
+declare function debouncedRenderDOMHead<T extends Unhead<any>>(head: T, options?: DebouncedRenderDomHeadOptions): Promise<void>;
 
 interface TriggerDomPatchingOnUpdatesPluginOptions extends RenderDomHeadOptions {
     delayFn?: (fn: () => void) => void;
@@ -30,6 +34,8 @@ declare const PatchDomOnEntryUpdatesPlugin: (options?: TriggerDomPatchingOnUpdat
 /**
  * Set attributes on a DOM element, while adding entry side effects.
  */
-declare const setAttrs: (ctx: DomRenderTagContext, markSideEffect?: ((ctx: DomRenderTagContext, k: string, fn: () => void) => void) | undefined) => void;
+declare const setAttrs: (ctx: DomRenderTagContext, newEntry?: boolean, markSideEffect?: ((ctx: DomRenderTagContext, k: string, fn: () => void) => void) | undefined) => void;
+
+declare function maybeGetSSRHash(document: Document): string | false;
 
-export { PatchDomOnEntryUpdatesPlugin, RenderDomHeadOptions, TriggerDomPatchingOnUpdatesPluginOptions, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead, setAttrs };
+export { DebouncedRenderDomHeadOptions, PatchDomOnEntryUpdatesPlugin, RenderDomHeadOptions, TriggerDomPatchingOnUpdatesPluginOptions, debouncedRenderDOMHead, domUpdatePromise, maybeGetSSRHash, renderDOMHead, setAttrs };

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { TagsWithInnerContent, HasElementTags, tagDedupeKey, hashCode, defineHeadPlugin } from '@unhead/shared';
+import { TagsWithInnerContent, computeHashes, hashTag, HasElementTags, tagDedupeKey, defineHeadPlugin } from '@unhead/shared';
 
-const setAttrs = (ctx, markSideEffect) => {
+const setAttrs = (ctx, newEntry = false, markSideEffect) => {
   const { tag, $el } = ctx;
   if (!$el)
     return;
@@ -21,86 +21,97 @@ const setAttrs = (ctx, markSideEffect) => {
     }
     if (markSideEffect && !k.startsWith("data-h-"))
       markSideEffect(ctx, attrSdeKey, () => $el.removeAttribute(k));
-    if ($el.getAttribute(k) !== value)
+    if (newEntry || $el.getAttribute(k) !== value)
       $el.setAttribute(k, value);
   });
-  if (TagsWithInnerContent.includes(tag.tag) && $el.innerHTML !== (tag.children || ""))
-    $el.innerHTML = tag.children || "";
+  if (TagsWithInnerContent.includes(tag.tag)) {
+    if (tag.textContent && tag.textContent !== $el.textContent)
+      $el.textContent = tag.textContent;
+    else if (tag.innerHTML && tag.innerHTML !== $el.innerHTML)
+      $el.innerHTML = tag.innerHTML;
+  }
 };
 
+let prevHash = false;
 async function renderDOMHead(head, options = {}) {
-  const ctx = { shouldRender: true };
-  await head.hooks.callHook("dom:beforeRender", ctx);
-  if (!ctx.shouldRender)
+  const beforeRenderCtx = { shouldRender: true };
+  await head.hooks.callHook("dom:beforeRender", beforeRenderCtx);
+  if (!beforeRenderCtx.shouldRender)
     return;
-  const dom = options.document || window.document;
+  const dom = options.document || head.resolvedOptions.document || window.document;
+  const tagContexts = (await head.resolveTags()).map(setupTagRenderCtx);
+  if (head.resolvedOptions.experimentalHashHydration) {
+    prevHash = prevHash || head._hash || false;
+    if (prevHash) {
+      const hash = computeHashes(tagContexts.map((ctx) => ctx.tag._h));
+      if (prevHash === hash)
+        return;
+      prevHash = hash;
+    }
+  }
   const staleSideEffects = head._popSideEffectQueue();
   head.headEntries().map((entry) => entry._sde).forEach((sde) => {
     Object.entries(sde).forEach(([key, fn]) => {
       staleSideEffects[key] = fn;
     });
   });
-  const setupTagRenderCtx = async (tag) => {
+  const markSideEffect = (ctx, key, fn) => {
+    key = `${ctx.renderId}:${key}`;
+    if (ctx.entry)
+      ctx.entry._sde[key] = fn;
+    delete staleSideEffects[key];
+  };
+  function setupTagRenderCtx(tag) {
     const entry = head.headEntries().find((e) => e._i === tag._e);
     const renderCtx = {
-      renderId: tag._d || hashCode(JSON.stringify({ ...tag, _e: void 0, _p: void 0 })),
+      renderId: tag._d || hashTag(tag),
       $el: null,
       shouldRender: true,
       tag,
       entry,
-      staleSideEffects
+      markSideEffect: (key, fn) => markSideEffect(renderCtx, key, fn)
     };
-    await head.hooks.callHook("dom:beforeRenderTag", renderCtx);
     return renderCtx;
-  };
+  }
   const renders = [];
   const pendingRenders = {
     body: [],
     head: []
   };
-  const markSideEffect = (ctx2, key, fn) => {
-    key = `${ctx2.renderId}:${key}`;
-    if (ctx2.entry)
-      ctx2.entry._sde[key] = fn;
-    delete staleSideEffects[key];
-  };
-  const markEl = (ctx2) => {
-    head._elMap[ctx2.renderId] = ctx2.$el;
-    renders.push(ctx2);
-    markSideEffect(ctx2, "el", () => {
-      ctx2.$el?.remove();
-      delete head._elMap[ctx2.renderId];
+  const markEl = (ctx) => {
+    head._elMap[ctx.renderId] = ctx.$el;
+    renders.push(ctx);
+    markSideEffect(ctx, "el", () => {
+      ctx.$el?.remove();
+      delete head._elMap[ctx.renderId];
     });
   };
-  for (const t of await head.resolveTags()) {
-    const ctx2 = await setupTagRenderCtx(t);
-    if (!ctx2.shouldRender)
+  for (const ctx of tagContexts) {
+    await head.hooks.callHook("dom:beforeRenderTag", ctx);
+    if (!ctx.shouldRender)
       continue;
-    const { tag } = ctx2;
+    const { tag } = ctx;
     if (tag.tag === "title") {
-      dom.title = tag.children || "";
-      renders.push(ctx2);
+      dom.title = tag.textContent || "";
+      renders.push(ctx);
       continue;
     }
     if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
-      ctx2.$el = dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"];
-      setAttrs(ctx2, markSideEffect);
-      renders.push(ctx2);
+      ctx.$el = dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"];
+      setAttrs(ctx, false, markSideEffect);
+      renders.push(ctx);
       continue;
     }
-    ctx2.$el = head._elMap[ctx2.renderId];
-    if (!ctx2.$el && tag._hash) {
-      ctx2.$el = dom.querySelector(`${tag.tagPosition?.startsWith("body") ? "body" : "head"} > ${tag.tag}[data-h-${tag._hash}]`);
-    }
-    if (ctx2.$el) {
-      if (ctx2.tag._d)
-        setAttrs(ctx2);
-      markEl(ctx2);
+    ctx.$el = head._elMap[ctx.renderId];
+    if (!ctx.$el && tag.key)
+      ctx.$el = dom.querySelector(`${tag.tagPosition?.startsWith("body") ? "body" : "head"} > ${tag.tag}[data-h-${tag._h}]`);
+    if (ctx.$el) {
+      if (ctx.tag._d)
+        setAttrs(ctx);
+      markEl(ctx);
       continue;
     }
-    ctx2.$el = dom.createElement(tag.tag);
-    setAttrs(ctx2);
-    pendingRenders[tag.tagPosition?.startsWith("body") ? "body" : "head"].push(ctx2);
+    pendingRenders[tag.tagPosition?.startsWith("body") ? "body" : "head"].push(ctx);
   }
   const fragments = {
     bodyClose: void 0,
@@ -117,25 +128,33 @@ async function renderDOMHead(head, options = {}) {
       const elTag = $el.tagName.toLowerCase();
       if (!HasElementTags.includes(elTag))
         continue;
-      const dedupeKey = tagDedupeKey({
-        tag: elTag,
-        // convert attributes to object
-        props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
-      });
-      const matchIdx = queue.findIndex((ctx2) => ctx2 && (ctx2.tag._d === dedupeKey || $el.isEqualNode?.(ctx2.$el)));
+      const props = $el.getAttributeNames().reduce((props2, name) => ({ ...props2, [name]: $el.getAttribute(name) }), {});
+      const tmpTag = { tag: elTag, props };
+      if ($el.innerHTML)
+        tmpTag.innerHTML = $el.innerHTML;
+      const tmpRenderId = hashTag(tmpTag);
+      let matchIdx = queue.findIndex((ctx) => ctx?.renderId === tmpRenderId);
+      if (matchIdx === -1) {
+        const tmpDedupeKey = tagDedupeKey(tmpTag);
+        matchIdx = queue.findIndex((ctx) => ctx?.tag._d && ctx.tag._d === tmpDedupeKey);
+      }
       if (matchIdx !== -1) {
-        const ctx2 = queue[matchIdx];
-        ctx2.$el = $el;
-        setAttrs(ctx2);
-        markEl(ctx2);
+        const ctx = queue[matchIdx];
+        ctx.$el = $el;
+        setAttrs(ctx);
+        markEl(ctx);
         delete queue[matchIdx];
       }
     }
-    queue.forEach((ctx2) => {
-      const pos2 = ctx2.tag.tagPosition || "head";
+    queue.forEach((ctx) => {
+      const pos2 = ctx.tag.tagPosition || "head";
       fragments[pos2] = fragments[pos2] || dom.createDocumentFragment();
-      fragments[pos2].appendChild(ctx2.$el);
-      markEl(ctx2);
+      if (!ctx.$el) {
+        ctx.$el = dom.createElement(ctx.tag.tag);
+        setAttrs(ctx, true);
+      }
+      fragments[pos2].appendChild(ctx.$el);
+      markEl(ctx);
     });
   });
   if (fragments.head)
@@ -144,8 +163,8 @@ async function renderDOMHead(head, options = {}) {
     dom.body.insertBefore(fragments.bodyOpen, dom.body.firstChild);
   if (fragments.bodyClose)
     dom.body.appendChild(fragments.bodyClose);
-  for (const ctx2 of renders)
-    await head.hooks.callHook("dom:renderTag", ctx2);
+  for (const ctx of renders)
+    await head.hooks.callHook("dom:renderTag", ctx);
   Object.values(staleSideEffects).forEach((fn) => fn());
 }
 let domUpdatePromise = null;
@@ -173,4 +192,8 @@ const PatchDomOnEntryUpdatesPlugin = (options) => {
   });
 };
 
-export { PatchDomOnEntryUpdatesPlugin, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead, setAttrs };
+function maybeGetSSRHash(document) {
+  return document?.head.querySelector('meta[name="unhead:ssr"]')?.getAttribute("content") || false;
+}
+
+export { PatchDomOnEntryUpdatesPlugin, debouncedRenderDOMHead, domUpdatePromise, maybeGetSSRHash, renderDOMHead, setAttrs };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@unhead/dom",
   "type": "module",
-  "version": "1.0.22",
-  "packageManager": "pnpm@7.26.3",
+  "version": "1.1.0",
+  "packageManager": "pnpm@7.27.1",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -30,8 +30,8 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/schema": "1.0.22",
-    "@unhead/shared": "1.0.22"
+    "@unhead/schema": "1.1.0",
+    "@unhead/shared": "1.1.0"
   },
   "scripts": {
     "build": "unbuild .",