unhead 0.0.1 → 0.0.4

package/dist/client.d.ts

@@ -1,11 +1,24 @@
-import { a as HeadClient } from './types-e30878c0.js';
+import { a as HeadClient } from './types-b4318c02.js';
 import 'hookable';
 import '@unhead/schema';
 
 interface RenderDomHeadOptions {
+    /**
+     * Document to use for rendering. Allows stubbing for testing.
+     */
     document?: Document;
 }
-declare const renderDOMHead: <T extends HeadClient<any>>(head: T, options?: RenderDomHeadOptions) => Promise<void>;
-declare const debouncedUpdateDom: <T extends HeadClient<any>>(delayedFn: (fn: () => void) => void, head: T, options?: RenderDomHeadOptions) => Promise<void>;
+/**
+ * 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 { RenderDomHeadOptions, debouncedUpdateDom, renderDOMHead };
+export { RenderDomHeadOptions, debouncedRenderDOMHead, domUpdatePromise, renderDOMHead };

package/dist/client.mjs

@@ -1,53 +1,56 @@
-import { createElement } from 'zhead';
+import { createElement, TagsWithInnerContent } from 'zhead';
 
-const setAttributes = ($el, tag) => {
-  const sideEffects = {};
+function setAttributesWithSideEffects(head, $el, entry, tag) {
   const attrs = tag.props || {};
-  for (const k in attrs) {
+  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 attrs[k].split(" ")) {
+      for (const c of value.split(" ")) {
         if (!$el.classList.contains(c)) {
           $el.classList.add(c);
-          sideEffects[`${tag._p}:attr:class:remove:${c}`] = () => {
-            $el.classList.remove(c);
-          };
+          head._removeQueuedSideEffect(`${attrSdeKey}:${c}`);
+          entry._sde[`${attrSdeKey}:${c}`] = () => $el.classList.remove(c);
         }
       }
-      continue;
+      return;
     }
-    $el.setAttribute(k, String(attrs[k]));
-    if (!k.startsWith("data-h-")) {
-      sideEffects[`${tag._p}:attr:${k}:remove`] = () => {
-        $el.removeAttribute(k);
-      };
+    if ($el.getAttribute(k) !== value) {
+      $el.setAttribute(k, value);
+      if (!k.startsWith("data-h-"))
+        entry._sde[attrSdeKey] = () => $el.removeAttribute(k);
     }
-  }
-  return sideEffects;
-};
+  });
+}
 
-let domUpdatePromise = null;
-const renderDOMHead = async (head, options = {}) => {
+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 });
-  head._flushDomSideEffects();
-  const sideEffectMap = {};
   for (const tag of tags) {
-    sideEffectMap[tag._e] = sideEffectMap[tag._e] || {};
-    let $el = tag._s ? dom.querySelector(`[${tag._s}]`) : null;
-    const renderCtx = { tag, document: dom, $el, head };
+    const entry = head.headEntries().find((e) => e._i === Number(tag._e));
+    const sdeKey = `${tag._s || tag._p}:el`;
+    const $newEl = createElement(tag, dom);
+    const $el = tag._s ? dom.querySelector(`[${tag._s}]`) : null;
+    const renderCtx = { tag, document: dom, head };
     await head.hooks.callHook("dom:renderTag", renderCtx);
     if ($el) {
+      head._removeQueuedSideEffect(sdeKey);
+      if ($newEl.isEqualNode($el))
+        continue;
       if (Object.keys(tag.props).length === 0) {
         $el.remove();
         continue;
       }
-      sideEffectMap[tag._e] = {
-        ...sideEffectMap[tag._e],
-        ...setAttributes($el, tag)
-      };
-      $el.innerHTML = tag.children || "";
-      sideEffectMap[tag._e][`${tag._p}:el:remove`] = () => $el?.remove();
+      setAttributesWithSideEffects(head, $el, entry, tag);
+      if (TagsWithInnerContent.includes(tag.tag))
+        $el.innerHTML = tag.children || "";
+      entry._sde[sdeKey] = () => $el?.remove();
       continue;
     }
     if (tag.tag === "title" && tag.children) {
@@ -55,41 +58,32 @@ const renderDOMHead = async (head, options = {}) => {
       continue;
     }
     if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
-      sideEffectMap[tag._e] = {
-        ...sideEffectMap[tag._e],
-        ...setAttributes(dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"], tag)
-      };
+      setAttributesWithSideEffects(head, dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"], entry, tag);
       continue;
     }
-    $el = createElement(tag, dom);
     switch (tag.tagPosition) {
       case "bodyClose":
-        dom.body.appendChild($el);
+        dom.body.appendChild($newEl);
         break;
       case "bodyOpen":
-        dom.body.insertBefore($el, dom.body.firstChild);
+        dom.body.insertBefore($newEl, dom.body.firstChild);
         break;
       case "head":
       default:
-        dom.head.appendChild($el);
+        dom.head.appendChild($newEl);
         break;
     }
-    sideEffectMap[tag._e][`${tag._p}:el:remove`] = () => $el?.remove();
-  }
-  for (const k in sideEffectMap) {
-    const entry = head.headEntries().find((e) => e._i === Number(k));
-    entry._sde = {
-      ...entry._sde,
-      ...sideEffectMap[k]
-    };
+    entry._sde[sdeKey] = () => $newEl?.remove();
   }
-};
-const debouncedUpdateDom = async (delayedFn, head, options = {}) => {
+  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 { debouncedUpdateDom, renderDOMHead };
+export { debouncedRenderDOMHead, domUpdatePromise, renderDOMHead };

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 import * as _unhead_schema from '@unhead/schema';
 import { Head, Meta, Link, Script, Style, Base, HtmlAttributes, BodyAttributes, Noscript } from '@unhead/schema';
-import { H as HeadPlugin, C as CreateHeadOptions, a as HeadClient, b as HeadEntryOptions } from './types-e30878c0.js';
-export { A as ActiveHeadEntry, C as CreateHeadOptions, D as DomRenderTagContext, a as HeadClient, c as HeadEntry, b as HeadEntryOptions, e as HeadHooks, H as HeadPlugin, R as RuntimeMode, S as SideEffectsRecord, d as defineHeadPlugin } from './types-e30878c0.js';
+import { H as HeadPlugin, C as CreateHeadOptions, a as HeadClient, b as HeadEntryOptions } from './types-b4318c02.js';
+export { A as ActiveHeadEntry, C as CreateHeadOptions, D as DomRenderTagContext, E as EntryResolveCtx, a as HeadClient, c as HeadEntry, b as HeadEntryOptions, f as HeadHooks, H as HeadPlugin, e as HookResult, R as RuntimeMode, S as SideEffectsRecord, d as defineHeadPlugin } from './types-b4318c02.js';
 import 'hookable';
 
-declare const dedupePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+declare const DedupesTagsPlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
 
-declare const sortPlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+declare const SortTagsPlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
 
-declare const titleTemplatePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+declare const TitleTemplatePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
 
-declare const hydratesStatePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+declare const HydratesStatePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
 
 declare function createHead<T extends {} = Head>(options?: CreateHeadOptions<T>): HeadClient<T>;
 
@@ -32,6 +32,7 @@ declare const getActiveHead: <T>() => HeadClient<T>;
 
 declare type Arrayable<T> = T | Array<T>;
 declare function asArray<T>(value: Arrayable<T>): T[];
+declare const TagConfigKeys: string[];
 declare function hashCode(s: string): string;
 
-export { Arrayable, activeHead, asArray, createHead, dedupePlugin, getActiveHead, hashCode, hydratesStatePlugin, setActiveHead, sortPlugin, titleTemplatePlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useStyle, useTitle, useTitleTemplate };
+export { Arrayable, DedupesTagsPlugin, HydratesStatePlugin, SortTagsPlugin, TagConfigKeys, TitleTemplatePlugin, activeHead, asArray, createHead, getActiveHead, hashCode, setActiveHead, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useStyle, useTitle, useTitleTemplate };

package/dist/index.mjs

@@ -9,7 +9,7 @@ function defineHeadPlugin(plugin) {
   return plugin;
 }
 
-const dedupePlugin = defineHeadPlugin({
+const DedupesTagsPlugin = defineHeadPlugin({
   hooks: {
     "tag:normalise": function({ tag }) {
       ["hid", "vmid", "key"].forEach((key) => {
@@ -28,7 +28,10 @@ const dedupePlugin = defineHeadPlugin({
         let dedupeKey = tag._d || tag._p || i;
         const dupedTag = deduping[dedupeKey];
         if (dupedTag) {
-          if (tag?.tagDuplicateStrategy === "merge") {
+          let strategy = tag?.tagDuplicateStrategy;
+          if (!strategy && (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs"))
+            strategy = "merge";
+          if (strategy === "merge") {
             const oldProps = dupedTag.props;
             ["class", "style"].forEach((key) => {
               if (tag.props[key] && oldProps[key])
@@ -57,7 +60,7 @@ const dedupePlugin = defineHeadPlugin({
   }
 });
 
-const sortPlugin = defineHeadPlugin({
+const SortTagsPlugin = defineHeadPlugin({
   hooks: {
     "tags:resolve": (ctx) => {
       const tagIndexForKey = (key) => ctx.tags.find((tag) => tag._d === key)?._p;
@@ -83,7 +86,7 @@ const sortPlugin = defineHeadPlugin({
   }
 });
 
-const titleTemplatePlugin = defineHeadPlugin({
+const TitleTemplatePlugin = defineHeadPlugin({
   hooks: {
     "tags:resolve": (ctx) => {
       ctx.tags = resolveTitleTemplateFromTags(ctx.tags);
@@ -94,6 +97,7 @@ const titleTemplatePlugin = defineHeadPlugin({
 function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
+const TagConfigKeys = ["tagPosition", "tagPriority", "tagDuplicateStrategy"];
 function hashCode(s) {
   let h = 9;
   for (let i = 0; i < s.length; )
@@ -101,15 +105,16 @@ function hashCode(s) {
   return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 7).toLowerCase();
 }
 
-const hydratesStatePlugin = defineHeadPlugin({
+const HydratesStatePlugin = defineHeadPlugin({
   hooks: {
     "tag:normalise": (ctx) => {
       const { tag, entry } = ctx;
       if (!HasElementTags.includes(tag.tag))
         return;
-      if (typeof tag._d === "undefined" && entry.mode === "server")
+      if (typeof tag._d === "undefined" && entry._m === "server")
         return;
-      tag._s = `data-h-${hashCode(tag._d || tag.tag + JSON.stringify(tag.props))}`;
+      const hasChildren = tag.children && tag.children.length > 0;
+      tag._s = `data-h-${hashCode(tag._d || tag.tag + (hasChildren ? tag.children : JSON.stringify(tag.props)))}`;
       tag.props[tag._s] = "";
     }
   }
@@ -118,14 +123,20 @@ const hydratesStatePlugin = defineHeadPlugin({
 function normaliseTag(tagName, input, entry) {
   const tag = normaliseTag$1(tagName, input, { childrenKeys: ["innerHTML", "textContent"] });
   tag._e = entry._i;
-  Object.keys(tag.props).filter((k) => k.startsWith("tag")).forEach((k) => {
+  Object.keys(tag.props).filter((k) => TagConfigKeys.includes(k)).forEach((k) => {
     tag[k] = tag.props[k];
     delete tag.props[k];
   });
+  if (typeof tag.props.class === "object" && !Array.isArray(tag.props.class)) {
+    tag.props.class = Object.keys(tag.props.class).filter((k) => tag.props.class[k]);
+  }
+  if (Array.isArray(tag.props.class))
+    tag.props.class = tag.props.class.join(" ");
   if (tag.props.content && Array.isArray(tag.props.content)) {
-    return tag.props.content.map((v) => {
+    return tag.props.content.map((v, i) => {
       const newTag = { ...tag, props: { ...tag.props } };
       newTag.props.content = v;
+      newTag.key = `${tag.props.name || tag.props.property}:${i}`;
       return newTag;
     });
   }
@@ -148,15 +159,17 @@ function createHead(options = {}) {
   if (options.hooks)
     hooks.addHooks(options.hooks);
   const plugins = [
-    dedupePlugin,
-    sortPlugin,
-    titleTemplatePlugin
+    DedupesTagsPlugin,
+    SortTagsPlugin,
+    TitleTemplatePlugin
   ];
   plugins.push(...options.plugins || []);
   plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
   const head = {
-    entries,
-    _flushDomSideEffects() {
+    _removeQueuedSideEffect(key) {
+      delete _sde[key];
+    },
+    _flushQueuedSideEffects() {
       Object.values(_sde).forEach((fn) => fn());
       _sde = {};
     },
@@ -179,33 +192,35 @@ function createHead(options = {}) {
           entries = entries.filter((e) => {
             if (e._i !== _i)
               return true;
-            _sde = {
-              ..._sde,
-              ...e._sde || {}
-            };
+            _sde = { ..._sde, ...e._sde || {} };
+            e._sde = {};
             return false;
           });
         },
         patch(input2) {
           entries = entries.map((e) => {
-            e.input = e._i === _i ? input2 : e.input;
+            if (e._i === _i) {
+              _sde = { ..._sde, ...e._sde || {} };
+              e._sde = {};
+              e.input = e._i === _i ? input2 : e.input;
+            }
             return e;
           });
         }
       };
     },
     async resolveTags() {
-      await hooks.callHook("entries:resolve", head);
-      const tags = entries.map((entry) => normaliseEntryTags(entry)).flat();
-      for (const k in tags) {
-        const tagCtx = { tag: tags[k], entry: entries.find((e) => e._i === tags[k]._e) };
-        await hooks.callHook("tag:normalise", tagCtx);
-        tags[k] = tagCtx.tag;
+      const resolveCtx = { tags: [], entries: [...entries] };
+      await hooks.callHook("entries:resolve", resolveCtx);
+      for (const entry of resolveCtx.entries) {
+        for (const tag of normaliseEntryTags(entry)) {
+          const tagCtx = { tag, entry };
+          await hooks.callHook("tag:normalise", tagCtx);
+          resolveCtx.tags.push(tagCtx.tag);
+        }
       }
-      const ctx = { tags };
-      await hooks.callHook("tags:beforeResolve", ctx);
-      await hooks.callHook("tags:resolve", ctx);
-      return ctx.tags;
+      await hooks.callHook("tags:resolve", resolveCtx);
+      return resolveCtx.tags;
     }
   };
   setActiveHead(head);
@@ -247,4 +262,4 @@ const useNoscript = (noscript) => {
   useHead({ noscript: [noscript] });
 };
 
-export { activeHead, asArray, createHead, dedupePlugin, defineHeadPlugin, getActiveHead, hashCode, hydratesStatePlugin, setActiveHead, sortPlugin, titleTemplatePlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useStyle, useTitle, useTitleTemplate };
+export { DedupesTagsPlugin, HydratesStatePlugin, SortTagsPlugin, TagConfigKeys, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, hashCode, setActiveHead, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useStyle, useTitle, useTitleTemplate };

package/dist/server.d.ts

@@ -1,3 +1,3 @@
-export { f as SSRHeadPayload, r as renderSSRHead } from './types-e30878c0.js';
+export { g as SSRHeadPayload, r as renderSSRHead } from './types-b4318c02.js';
 import 'hookable';
 import '@unhead/schema';

package/dist/server.mjs

@@ -1,6 +1,6 @@
 import { ssrRenderTags } from 'zhead';
 
-const renderSSRHead = async (ctx) => {
+async function renderSSRHead(ctx) {
   const tags = await ctx.resolveTags();
   const beforeRenderCtx = { tags };
   await ctx.hooks.callHook("ssr:beforeRender", beforeRenderCtx);
@@ -8,6 +8,6 @@ const renderSSRHead = async (ctx) => {
   const renderCXx = { tags, html };
   await ctx.hooks.callHook("ssr:render", renderCXx);
   return renderCXx.html;
-};
+}
 
 export { renderSSRHead };

package/dist/{types-e30878c0.d.ts → types-b4318c02.d.ts}

@@ -11,17 +11,43 @@ interface SSRHeadPayload {
     htmlAttrs: string;
     bodyAttrs: string;
 }
-declare const renderSSRHead: <T extends HeadClient<any>>(ctx: T) => Promise<SSRHeadPayload>;
+declare function renderSSRHead<T extends HeadClient<any>>(ctx: T): Promise<SSRHeadPayload>;
 
+/**
+ * An active head entry provides an API to manipulate it.
+ */
 interface ActiveHeadEntry<T> {
+    /**
+     * Updates the entry with new input.
+     *
+     * Will first clear any side effects for previous input.
+     */
     patch: (resolvedInput: T) => void;
+    /**
+     * Dispose the entry, removing it from the active head.
+     *
+     * Will queue side effects for removal.
+     */
     dispose: () => void;
 }
+/**
+ * Side effects are mapped with a key and their cleanup function.
+ *
+ * For example `meta:data-h-4h46h465`: () => { document.querySelector('meta[data-h-4h46h465]').remove() }
+ */
 declare type SideEffectsRecord = Record<string, () => void>;
 declare type RuntimeMode = 'server' | 'client' | 'all';
 interface HeadEntry<T> {
-    mode?: RuntimeMode;
+    /**
+     * User provided input for the entry.
+     */
     input: T;
+    /**
+     * The mode that the entry should be used in.
+     *
+     * @internal
+     */
+    _m?: RuntimeMode;
     /**
      * Head entry index
      *
@@ -33,34 +59,33 @@ interface HeadEntry<T> {
      *
      * @internal
      */
-    _sde?: SideEffectsRecord;
+    _sde: SideEffectsRecord;
 }
 declare type HookResult = Promise<void> | void;
 interface DomRenderTagContext {
     head: HeadClient;
     tag: HeadTag;
-    $el: Element | null;
     document: Document;
 }
+interface EntryResolveCtx<T> {
+    tags: HeadTag[];
+    entries: HeadEntry<T>[];
+}
 interface HeadHooks<T> {
-    'entries:resolve': (head: HeadClient<T>) => HookResult;
+    'entries:resolve': (ctx: EntryResolveCtx<T>) => HookResult;
     'tag:normalise': (ctx: {
         tag: HeadTag;
         entry: HeadEntry<T>;
     }) => HookResult;
-    'tags:beforeResolve': (ctx: {
-        tags: HeadTag[];
-    }) => HookResult;
     'tags:resolve': (ctx: {
         tags: HeadTag[];
     }) => HookResult;
-    'render': (ctx: any) => HookResult;
-    'dom:renderTag': (ctx: DomRenderTagContext) => HookResult;
     'dom:beforeRender': (ctx: {
         head: HeadClient;
         tags: HeadTag[];
         document: Document;
     }) => HookResult;
+    'dom:renderTag': (ctx: DomRenderTagContext) => HookResult;
     'ssr:beforeRender': (ctx: {
         tags: HeadTag[];
     }) => HookResult;
@@ -77,15 +102,30 @@ interface HeadEntryOptions {
     mode?: RuntimeMode;
 }
 interface HeadClient<T = Head> {
-    entries: HeadEntry<T>[];
-    hooks: Hookable<HeadHooks<T>>;
+    /**
+     * The active head entries.
+     */
     headEntries: () => HeadEntry<T>[];
+    /**
+     * Create a new head entry.
+     */
     push: (entry: T, options?: HeadEntryOptions) => ActiveHeadEntry<T>;
+    /**
+     * Resolve tags from head entries.
+     */
     resolveTags: () => Promise<HeadTag[]>;
+    /**
+     * Exposed hooks for easier extension.
+     */
+    hooks: Hookable<HeadHooks<T>>;
+    /**
+     * @internal
+     */
+    _removeQueuedSideEffect: (key: string) => void;
     /**
      * @internal
      */
-    _flushDomSideEffects: () => void;
+    _flushQueuedSideEffects: () => void;
 }
 
-export { ActiveHeadEntry as A, CreateHeadOptions as C, DomRenderTagContext as D, HeadPlugin as H, RuntimeMode as R, SideEffectsRecord as S, HeadClient as a, HeadEntryOptions as b, HeadEntry as c, defineHeadPlugin as d, HeadHooks as e, SSRHeadPayload as f, renderSSRHead as r };
+export { ActiveHeadEntry as A, CreateHeadOptions as C, DomRenderTagContext as D, EntryResolveCtx as E, HeadPlugin as H, RuntimeMode as R, SideEffectsRecord as S, HeadClient as a, HeadEntryOptions as b, HeadEntry as c, defineHeadPlugin as d, HookResult as e, HeadHooks as f, SSRHeadPayload as g, renderSSRHead as r };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unhead",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -36,9 +36,8 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/schema": "0.0.1",
+    "@unhead/schema": "0.0.4",
     "hookable": "^5.4.1",
-    "unctx": "^2.0.2",
     "zhead": "1.0.0-beta.4"
   },
   "scripts": {