@unhead/dom 1.0.21 → 1.0.22

package/dist/index.cjs

@@ -1,37 +1,6 @@
 'use strict';
 
-const TagsWithInnerContent = ["script", "style", "noscript"];
-const HasElementTags = [
-  "base",
-  "meta",
-  "link",
-  "style",
-  "script",
-  "noscript"
-];
-
-const UniqueTags = ["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"];
-function tagDedupeKey(tag, fn) {
-  const { props, tag: tagName } = tag;
-  if (UniqueTags.includes(tagName))
-    return tagName;
-  if (tagName === "link" && props.rel === "canonical")
-    return "canonical";
-  if (props.charset)
-    return "charset";
-  const name = ["id"];
-  if (tagName === "meta")
-    name.push(...["name", "property", "http-equiv"]);
-  for (const n of name) {
-    if (typeof props[n] !== "undefined") {
-      const val = String(props[n]);
-      if (fn && !fn(val))
-        return false;
-      return `${tagName}:${n}:${val}`;
-    }
-  }
-  return false;
-}
+const shared = require('@unhead/shared');
 
 const setAttrs = (ctx, markSideEffect) => {
   const { tag, $el } = ctx;
@@ -57,17 +26,10 @@ const setAttrs = (ctx, markSideEffect) => {
     if ($el.getAttribute(k) !== value)
       $el.setAttribute(k, value);
   });
-  if (TagsWithInnerContent.includes(tag.tag) && $el.innerHTML !== (tag.children || ""))
+  if (shared.TagsWithInnerContent.includes(tag.tag) && $el.innerHTML !== (tag.children || ""))
     $el.innerHTML = tag.children || "";
 };
 
-function hashCode(s) {
-  let h = 9;
-  for (let i = 0; i < s.length; )
-    h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
-  return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 8).toLowerCase();
-}
-
 async function renderDOMHead(head, options = {}) {
   const ctx = { shouldRender: true };
   await head.hooks.callHook("dom:beforeRender", ctx);
@@ -80,10 +42,10 @@ async function renderDOMHead(head, options = {}) {
       staleSideEffects[key] = fn;
     });
   });
-  const preRenderTag = async (tag) => {
+  const setupTagRenderCtx = async (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 || shared.hashCode(JSON.stringify({ ...tag, _e: void 0, _p: void 0 })),
       $el: null,
       shouldRender: true,
       tag,
@@ -113,7 +75,7 @@ async function renderDOMHead(head, options = {}) {
     });
   };
   for (const t of await head.resolveTags()) {
-    const ctx2 = await preRenderTag(t);
+    const ctx2 = await setupTagRenderCtx(t);
     if (!ctx2.shouldRender)
       continue;
     const { tag } = ctx2;
@@ -142,6 +104,11 @@ async function renderDOMHead(head, options = {}) {
     setAttrs(ctx2);
     pendingRenders[tag.tagPosition?.startsWith("body") ? "body" : "head"].push(ctx2);
   }
+  const fragments = {
+    bodyClose: void 0,
+    bodyOpen: void 0,
+    head: void 0
+  };
   Object.entries(pendingRenders).forEach(([pos, queue]) => {
     if (!queue.length)
       return;
@@ -150,9 +117,9 @@ async function renderDOMHead(head, options = {}) {
       return;
     for (const $el of [...children].reverse()) {
       const elTag = $el.tagName.toLowerCase();
-      if (!HasElementTags.includes(elTag))
+      if (!shared.HasElementTags.includes(elTag))
         continue;
-      const dedupeKey = tagDedupeKey({
+      const dedupeKey = shared.tagDedupeKey({
         tag: elTag,
         // convert attributes to object
         props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
@@ -167,23 +134,18 @@ async function renderDOMHead(head, options = {}) {
       }
     }
     queue.forEach((ctx2) => {
-      if (!ctx2.$el)
-        return;
-      switch (ctx2.tag.tagPosition) {
-        case "bodyClose":
-          dom.body.appendChild(ctx2.$el);
-          break;
-        case "bodyOpen":
-          dom.body.insertBefore(ctx2.$el, dom.body.firstChild);
-          break;
-        case "head":
-        default:
-          dom.head.appendChild(ctx2.$el);
-          break;
-      }
+      const pos2 = ctx2.tag.tagPosition || "head";
+      fragments[pos2] = fragments[pos2] || dom.createDocumentFragment();
+      fragments[pos2].appendChild(ctx2.$el);
       markEl(ctx2);
     });
   });
+  if (fragments.head)
+    dom.head.appendChild(fragments.head);
+  if (fragments.bodyOpen)
+    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);
   Object.values(staleSideEffects).forEach((fn) => fn());
@@ -198,6 +160,22 @@ async function debouncedRenderDOMHead(head, options = {}) {
   return exports.domUpdatePromise = exports.domUpdatePromise || new Promise((resolve) => delayFn(() => resolve(doDomUpdate())));
 }
 
+const PatchDomOnEntryUpdatesPlugin = (options) => {
+  return shared.defineHeadPlugin({
+    hooks: {
+      "entries:updated": function(head) {
+        if (typeof options?.document === "undefined" && typeof window === "undefined")
+          return;
+        let delayFn = options?.delayFn;
+        if (!delayFn && typeof requestAnimationFrame !== "undefined")
+          delayFn = requestAnimationFrame;
+        debouncedRenderDOMHead(head, { document: options?.document || window.document, delayFn });
+      }
+    }
+  });
+};
+
+exports.PatchDomOnEntryUpdatesPlugin = PatchDomOnEntryUpdatesPlugin;
 exports.debouncedRenderDOMHead = debouncedRenderDOMHead;
-exports.hashCode = hashCode;
 exports.renderDOMHead = renderDOMHead;
+exports.setAttrs = setAttrs;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { Unhead } from '@unhead/schema';
+import * as _unhead_schema from '@unhead/schema';
+import { Unhead, DomRenderTagContext } from '@unhead/schema';
 
 interface RenderDomHeadOptions {
     /**
@@ -21,6 +22,14 @@ declare function debouncedRenderDOMHead<T extends Unhead<any>>(head: T, options?
     delayFn?: (fn: () => void) => void;
 }): Promise<void>;
 
-declare function hashCode(s: string): string;
+interface TriggerDomPatchingOnUpdatesPluginOptions extends RenderDomHeadOptions {
+    delayFn?: (fn: () => void) => void;
+}
+declare const PatchDomOnEntryUpdatesPlugin: (options?: TriggerDomPatchingOnUpdatesPluginOptions) => _unhead_schema.HeadPlugin;
+
+/**
+ * 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;
 
-export { RenderDomHeadOptions, debouncedRenderDOMHead, domUpdatePromise, hashCode, renderDOMHead };
+export { PatchDomOnEntryUpdatesPlugin, RenderDomHeadOptions, TriggerDomPatchingOnUpdatesPluginOptions, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead, setAttrs };

package/dist/index.mjs

@@ -1,35 +1,4 @@
-const TagsWithInnerContent = ["script", "style", "noscript"];
-const HasElementTags = [
-  "base",
-  "meta",
-  "link",
-  "style",
-  "script",
-  "noscript"
-];
-
-const UniqueTags = ["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"];
-function tagDedupeKey(tag, fn) {
-  const { props, tag: tagName } = tag;
-  if (UniqueTags.includes(tagName))
-    return tagName;
-  if (tagName === "link" && props.rel === "canonical")
-    return "canonical";
-  if (props.charset)
-    return "charset";
-  const name = ["id"];
-  if (tagName === "meta")
-    name.push(...["name", "property", "http-equiv"]);
-  for (const n of name) {
-    if (typeof props[n] !== "undefined") {
-      const val = String(props[n]);
-      if (fn && !fn(val))
-        return false;
-      return `${tagName}:${n}:${val}`;
-    }
-  }
-  return false;
-}
+import { TagsWithInnerContent, HasElementTags, tagDedupeKey, hashCode, defineHeadPlugin } from '@unhead/shared';
 
 const setAttrs = (ctx, markSideEffect) => {
   const { tag, $el } = ctx;
@@ -59,13 +28,6 @@ const setAttrs = (ctx, markSideEffect) => {
     $el.innerHTML = tag.children || "";
 };
 
-function hashCode(s) {
-  let h = 9;
-  for (let i = 0; i < s.length; )
-    h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
-  return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 8).toLowerCase();
-}
-
 async function renderDOMHead(head, options = {}) {
   const ctx = { shouldRender: true };
   await head.hooks.callHook("dom:beforeRender", ctx);
@@ -78,7 +40,7 @@ async function renderDOMHead(head, options = {}) {
       staleSideEffects[key] = fn;
     });
   });
-  const preRenderTag = async (tag) => {
+  const setupTagRenderCtx = async (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 })),
@@ -111,7 +73,7 @@ async function renderDOMHead(head, options = {}) {
     });
   };
   for (const t of await head.resolveTags()) {
-    const ctx2 = await preRenderTag(t);
+    const ctx2 = await setupTagRenderCtx(t);
     if (!ctx2.shouldRender)
       continue;
     const { tag } = ctx2;
@@ -140,6 +102,11 @@ async function renderDOMHead(head, options = {}) {
     setAttrs(ctx2);
     pendingRenders[tag.tagPosition?.startsWith("body") ? "body" : "head"].push(ctx2);
   }
+  const fragments = {
+    bodyClose: void 0,
+    bodyOpen: void 0,
+    head: void 0
+  };
   Object.entries(pendingRenders).forEach(([pos, queue]) => {
     if (!queue.length)
       return;
@@ -165,23 +132,18 @@ async function renderDOMHead(head, options = {}) {
       }
     }
     queue.forEach((ctx2) => {
-      if (!ctx2.$el)
-        return;
-      switch (ctx2.tag.tagPosition) {
-        case "bodyClose":
-          dom.body.appendChild(ctx2.$el);
-          break;
-        case "bodyOpen":
-          dom.body.insertBefore(ctx2.$el, dom.body.firstChild);
-          break;
-        case "head":
-        default:
-          dom.head.appendChild(ctx2.$el);
-          break;
-      }
+      const pos2 = ctx2.tag.tagPosition || "head";
+      fragments[pos2] = fragments[pos2] || dom.createDocumentFragment();
+      fragments[pos2].appendChild(ctx2.$el);
       markEl(ctx2);
     });
   });
+  if (fragments.head)
+    dom.head.appendChild(fragments.head);
+  if (fragments.bodyOpen)
+    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);
   Object.values(staleSideEffects).forEach((fn) => fn());
@@ -196,4 +158,19 @@ async function debouncedRenderDOMHead(head, options = {}) {
   return domUpdatePromise = domUpdatePromise || new Promise((resolve) => delayFn(() => resolve(doDomUpdate())));
 }
 
-export { debouncedRenderDOMHead, domUpdatePromise, hashCode, renderDOMHead };
+const PatchDomOnEntryUpdatesPlugin = (options) => {
+  return defineHeadPlugin({
+    hooks: {
+      "entries:updated": function(head) {
+        if (typeof options?.document === "undefined" && typeof window === "undefined")
+          return;
+        let delayFn = options?.delayFn;
+        if (!delayFn && typeof requestAnimationFrame !== "undefined")
+          delayFn = requestAnimationFrame;
+        debouncedRenderDOMHead(head, { document: options?.document || window.document, delayFn });
+      }
+    }
+  });
+};
+
+export { PatchDomOnEntryUpdatesPlugin, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead, setAttrs };

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@unhead/dom",
   "type": "module",
-  "version": "1.0.21",
-  "packageManager": "pnpm@7.25.1",
+  "version": "1.0.22",
+  "packageManager": "pnpm@7.26.3",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
-  "homepage": "https://github.com/harlan-zw/unhead#readme",
+  "homepage": "https://unhead.harlanzw.com",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/harlan-zw/unhead.git",
+    "url": "git+https://github.com/unjs/unhead.git",
     "directory": "packages/dom"
   },
   "bugs": {
-    "url": "https://github.com/harlan-zw/unhead/issues"
+    "url": "https://github.com/unjs/unhead/issues"
   },
   "sideEffects": false,
   "exports": {
@@ -30,10 +30,8 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/schema": "1.0.21"
-  },
-  "devDependencies": {
-    "zhead": "^1.1.0"
+    "@unhead/schema": "1.0.22",
+    "@unhead/shared": "1.0.22"
   },
   "scripts": {
     "build": "unbuild .",