@unhead/dom 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import { HeadClient, HeadTag, HookResult } from '@unhead/schema';
+
+interface DomRenderTagContext {
+    head: HeadClient;
+    tag: HeadTag;
+    document: Document;
+}
+declare module '@unhead/schema' {
+    interface HeadHooks {
+        'dom:beforeRender': (ctx: {
+            head: HeadClient;
+            tags: HeadTag[];
+            document: Document;
+        }) => HookResult;
+        'dom:renderTag': (ctx: DomRenderTagContext) => HookResult;
+    }
+}
+
+interface RenderDomHeadOptions {
+    /**
+     * Document to use for rendering. Allows stubbing for testing.
+     */
+    document?: Document;
+}
+/**
+ * Render the head tags to the DOM.
+ */
+declare function renderDOMHead<T extends HeadClient<any>>(head: T, options?: RenderDomHeadOptions): Promise<void>;
+/**
+ * Global instance of the dom update promise. Used for debounding head updates.
+ */
+declare let domUpdatePromise: Promise<void> | null;
+/**
+ * Queue a debounced update of the DOM head.
+ */
+declare function debouncedRenderDOMHead<T extends HeadClient<any>>(delayedFn: (fn: () => void) => void, head: T, options?: RenderDomHeadOptions): Promise<void>;
+
+export { DomRenderTagContext, RenderDomHeadOptions, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead };

package/dist/index.mjs

@@ -0,0 +1,104 @@
+const TagsWithInnerContent = ["script", "style", "noscript"];
+
+const createElement = (tag, document) => {
+  const $el = document.createElement(tag.tag);
+  for (const k in tag.props)
+    $el.setAttribute(k, String(tag.props[k]));
+  if (tag.children)
+    $el.innerHTML = tag.children;
+  return $el;
+};
+
+function setAttributesWithSideEffects(head, $el, entry, tag) {
+  const attrs = tag.props || {};
+  const sdeKey = `${tag._p}:attr`;
+  Object.entries(entry._sde).filter(([key]) => key.startsWith(sdeKey)).forEach(([key, fn]) => {
+    delete entry._sde[key] && fn();
+  });
+  Object.entries(attrs).forEach(([k, value]) => {
+    value = String(value);
+    const attrSdeKey = `${sdeKey}:${k}`;
+    head._removeQueuedSideEffect(attrSdeKey);
+    if (k === "class") {
+      for (const c of value.split(" ")) {
+        if (!$el.classList.contains(c)) {
+          $el.classList.add(c);
+          head._removeQueuedSideEffect(`${attrSdeKey}:${c}`);
+          entry._sde[`${attrSdeKey}:${c}`] = () => $el.classList.remove(c);
+        }
+      }
+      return;
+    }
+    if ($el.getAttribute(k) !== value) {
+      $el.setAttribute(k, value);
+      if (!k.startsWith("data-h-"))
+        entry._sde[attrSdeKey] = () => $el.removeAttribute(k);
+    }
+  });
+}
+
+async function renderDOMHead(head, options = {}) {
+  const dom = options.document || window.document;
+  const tags = await head.resolveTags();
+  await head.hooks.callHook("dom:beforeRender", { head, tags, document: dom });
+  for (const tag of tags) {
+    const renderCtx = { tag, document: dom, head };
+    await head.hooks.callHook("dom:renderTag", renderCtx);
+    const entry = head.headEntries().find((e) => e._i === Number(tag._e));
+    if (tag.tag === "title" && tag.children) {
+      dom.title = tag.children;
+      continue;
+    }
+    if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
+      setAttributesWithSideEffects(head, dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"], entry, tag);
+      continue;
+    }
+    const sdeKey = `${tag._s || tag._p}:el`;
+    const $newEl = createElement(tag, dom);
+    let $previousEl = null;
+    for (const $el of dom[tag.tagPosition?.startsWith("body") ? "body" : "head"].children) {
+      if ($el.hasAttribute(`${tag._s}`)) {
+        $previousEl = $el;
+        break;
+      }
+    }
+    if ($previousEl) {
+      head._removeQueuedSideEffect(sdeKey);
+      if ($newEl.isEqualNode($previousEl))
+        continue;
+      if (Object.keys(tag.props).length === 0) {
+        $previousEl.remove();
+        continue;
+      }
+      setAttributesWithSideEffects(head, $previousEl, entry, tag);
+      if (TagsWithInnerContent.includes(tag.tag))
+        $previousEl.innerHTML = tag.children || "";
+      entry._sde[sdeKey] = () => $previousEl?.remove();
+      continue;
+    }
+    switch (tag.tagPosition) {
+      case "bodyClose":
+        dom.body.appendChild($newEl);
+        break;
+      case "bodyOpen":
+        dom.body.insertBefore($newEl, dom.body.firstChild);
+        break;
+      case "head":
+      default:
+        dom.head.appendChild($newEl);
+        break;
+    }
+    entry._sde[sdeKey] = () => $newEl?.remove();
+  }
+  head._flushQueuedSideEffects();
+}
+let domUpdatePromise = null;
+async function debouncedRenderDOMHead(delayedFn, head, options = {}) {
+  function doDomUpdate() {
+    domUpdatePromise = null;
+    return renderDOMHead(head, options);
+  }
+  return domUpdatePromise = domUpdatePromise || new Promise((resolve) => delayedFn(() => resolve(doDomUpdate())));
+}
+
+export { debouncedRenderDOMHead, domUpdatePromise, renderDOMHead };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@unhead/dom",
+  "type": "module",
+  "version": "0.1.0",
+  "packageManager": "pnpm@7.14.0",
+  "author": "Harlan Wilton <harlan@harlanzw.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/harlan-zw",
+  "homepage": "https://github.com/harlan-zw/unhead#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/harlan-zw/unhead.git",
+    "directory": "packages/dom"
+  },
+  "bugs": {
+    "url": "https://github.com/harlan-zw/unhead/issues"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@unhead/schema": "0.1.0"
+  },
+  "devDependencies": {
+    "zhead": "1.0.0-beta.4"
+  },
+  "scripts": {
+    "build": "unbuild .",
+    "stub": "unbuild . --stub",
+    "export:sizes": "npx export-size . -r"
+  }
+}