@unhead/dom 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+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();
+}
+exports.domUpdatePromise = null;
+async function debouncedRenderDOMHead(delayedFn, head, options = {}) {
+  function doDomUpdate() {
+    exports.domUpdatePromise = null;
+    return renderDOMHead(head, options);
+  }
+  return exports.domUpdatePromise = exports.domUpdatePromise || new Promise((resolve) => delayedFn(() => resolve(doDomUpdate())));
+}
+
+exports.debouncedRenderDOMHead = debouncedRenderDOMHead;
+exports.renderDOMHead = renderDOMHead;

package/dist/index.d.ts

@@ -1,20 +1,4 @@
-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;
-    }
-}
+import { HeadClient } from '@unhead/schema';
 
 interface RenderDomHeadOptions {
     /**
@@ -35,4 +19,4 @@ declare let domUpdatePromise: Promise<void> | null;
  */
 declare function debouncedRenderDOMHead<T extends HeadClient<any>>(delayedFn: (fn: () => void) => void, head: T, options?: RenderDomHeadOptions): Promise<void>;
 
-export { DomRenderTagContext, RenderDomHeadOptions, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead };
+export { RenderDomHeadOptions, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/dom",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/schema": "0.1.1"
+    "@unhead/schema": "0.1.2"
   },
   "devDependencies": {
     "zhead": "1.0.0-beta.4"