@unhead/vue 0.6.3 → 0.6.5

package/dist/index.mjs

@@ -1,8 +1,522 @@
-import { resolveUnref } from '@vueuse/shared';
-import { unref, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount } from 'vue';
-import { HasElementTags, getActiveHead, createHead as createHead$1, defineHeadPlugin, composableNames } from 'unhead';
-export * from '@unhead/dom';
+import { unref, isRef, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount } from 'vue';
+import { createHooks } from 'hookable';
 
+const ValidHeadTags = [
+  "title",
+  "titleTemplate",
+  "base",
+  "htmlAttrs",
+  "bodyAttrs",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript"
+];
+const TagConfigKeys = ["tagPosition", "tagPriority", "tagDuplicateStrategy"];
+
+function normaliseTag(tagName, input) {
+  const tag = { tag: tagName, props: {} };
+  if (tagName === "title" || tagName === "titleTemplate") {
+    tag.children = input;
+    return tag;
+  }
+  tag.props = normaliseProps({ ...input });
+  ["children", "innerHtml", "innerHTML"].forEach((key) => {
+    if (typeof tag.props[key] !== "undefined") {
+      tag.children = tag.props[key];
+      delete tag.props[key];
+    }
+  });
+  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, i) => {
+      const newTag = { ...tag, props: { ...tag.props } };
+      newTag.props.content = v;
+      newTag.key = `${tag.props.name || tag.props.property}:${i}`;
+      return newTag;
+    });
+  }
+  return tag;
+}
+function normaliseProps(props) {
+  for (const k in props) {
+    if (String(props[k]) === "true") {
+      props[k] = "";
+    } else if (String(props[k]) === "false") {
+      delete props[k];
+    }
+  }
+  return props;
+}
+
+const tagWeight = (tag) => {
+  if (typeof tag.tagPriority === "number")
+    return tag.tagPriority;
+  switch (tag.tag) {
+    case "base":
+      return -1;
+    case "title":
+      return 1;
+    case "meta":
+      if (tag.props.charset)
+        return -2;
+      if (tag.props["http-equiv"] === "content-security-policy")
+        return 0;
+      return 10;
+    default:
+      return 10;
+  }
+};
+const sortTags = (aTag, bTag) => {
+  return tagWeight(aTag) - tagWeight(bTag);
+};
+
+const UniqueTags = ["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"];
+const ArrayMetaProperties = [
+  "og:image",
+  "og:video",
+  "og:audio",
+  "og:locale:alternate",
+  "video:actor",
+  "video:director",
+  "video:writer",
+  "video:tag",
+  "article:author",
+  "article:tag",
+  "book:tag",
+  "book:author",
+  "music:album",
+  "music:musician"
+];
+function tagDedupeKey(tag) {
+  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 (ArrayMetaProperties.findIndex((p) => val.startsWith(p)) !== -1)
+        return false;
+      return `${tagName}:${n}:${val}`;
+    }
+  }
+  return false;
+}
+
+const renderTitleTemplate = (template, title) => {
+  if (template == null)
+    return title || null;
+  if (typeof template === "function")
+    return template(title);
+  return template.replace("%s", title ?? "");
+};
+function resolveTitleTemplateFromTags(tags) {
+  const titleTemplateIdx = tags.findIndex((i) => i.tag === "titleTemplate");
+  const titleIdx = tags.findIndex((i) => i.tag === "title");
+  if (titleIdx !== -1 && titleTemplateIdx !== -1) {
+    const newTitle = renderTitleTemplate(
+      tags[titleTemplateIdx].children,
+      tags[titleIdx].children
+    );
+    if (newTitle !== null) {
+      tags[titleIdx].children = newTitle || tags[titleIdx].children;
+    } else {
+      delete tags[titleIdx];
+    }
+  } else if (titleTemplateIdx !== -1) {
+    const newTitle = renderTitleTemplate(
+      tags[titleTemplateIdx].children
+    );
+    if (newTitle !== null) {
+      tags[titleTemplateIdx].children = newTitle;
+      tags[titleTemplateIdx].tag = "title";
+    }
+  }
+  if (titleTemplateIdx !== -1) {
+    delete tags[titleTemplateIdx];
+  }
+  return tags.filter(Boolean);
+}
+
+const DedupesTagsPlugin = (options) => {
+  options = options || {};
+  const dedupeKeys = options.dedupeKeys || ["hid", "vmid", "key"];
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": function({ tag }) {
+        dedupeKeys.forEach((key) => {
+          if (tag.props[key]) {
+            tag.key = tag.props[key];
+            delete tag.props[key];
+          }
+        });
+        const dedupe = tag.key ? `${tag.tag}:${tag.key}` : tagDedupeKey(tag);
+        if (dedupe)
+          tag._d = dedupe;
+      },
+      "tags:resolve": function(ctx) {
+        const deduping = {};
+        ctx.tags.forEach((tag) => {
+          let dedupeKey = tag._d || tag._p;
+          const dupedTag = deduping[dedupeKey];
+          if (dupedTag) {
+            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]) {
+                  if (key === "style" && !oldProps[key].endsWith(";"))
+                    oldProps[key] += ";";
+                  tag.props[key] = `${oldProps[key]} ${tag.props[key]}`;
+                }
+              });
+              deduping[dedupeKey].props = {
+                ...oldProps,
+                ...tag.props
+              };
+              return;
+            } else if (tag._e === dupedTag._e) {
+              dedupeKey = tag._d = `${dedupeKey}:${tag._p}`;
+            }
+            const propCount = Object.keys(tag.props).length;
+            if ((propCount === 0 || propCount === 1 && typeof tag.props["data-h-key"] !== "undefined") && !tag.children) {
+              delete deduping[dedupeKey];
+              return;
+            }
+          }
+          deduping[dedupeKey] = tag;
+        });
+        ctx.tags = Object.values(deduping);
+      }
+    }
+  });
+};
+
+const SortTagsPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tags:resolve": (ctx) => {
+        const tagIndexForKey = (key) => ctx.tags.find((tag) => tag._d === key)?._p;
+        for (const tag of ctx.tags) {
+          if (!tag.tagPriority || typeof tag.tagPriority === "number")
+            continue;
+          const modifiers = [{ prefix: "before:", offset: -1 }, { prefix: "after:", offset: 1 }];
+          for (const { prefix, offset } of modifiers) {
+            if (tag.tagPriority.startsWith(prefix)) {
+              const key = tag.tagPriority.replace(prefix, "");
+              const index = tagIndexForKey(key);
+              if (typeof index !== "undefined")
+                tag._p = index + offset;
+            }
+          }
+        }
+        ctx.tags.sort((a, b) => a._p - b._p).sort(sortTags);
+      }
+    }
+  });
+};
+
+const TitleTemplatePlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tags:resolve": (ctx) => {
+        ctx.tags = resolveTitleTemplateFromTags(ctx.tags);
+      }
+    }
+  });
+};
+
+const DeprecatedTagAttrPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": function({ tag }) {
+        if (typeof tag.props.body !== "undefined") {
+          tag.tagPosition = "bodyClose";
+          delete tag.props.body;
+        }
+      }
+    }
+  });
+};
+
+const IsBrowser$1 = typeof window !== "undefined";
+
+const ProvideTagHashPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": (ctx) => {
+        const { tag, entry } = ctx;
+        const isDynamic = typeof tag.props._dynamic !== "undefined";
+        if (!HasElementTags.includes(tag.tag) || !tag.key)
+          return;
+        tag._hash = hashCode(JSON.stringify({ tag: tag.tag, key: tag.key }));
+        if (IsBrowser$1 || getActiveHead()?.resolvedOptions?.document)
+          return;
+        if (entry._m === "server" || isDynamic) {
+          tag.props[`data-h-${tag._hash}`] = "";
+        }
+      },
+      "tags:resolve": (ctx) => {
+        ctx.tags = ctx.tags.map((t) => {
+          delete t.props._dynamic;
+          return t;
+        });
+      }
+    }
+  });
+};
+
+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;
+        import('./chunks/index.mjs').then(({ debouncedRenderDOMHead }) => {
+          debouncedRenderDOMHead(head, { document: options?.document || window.document, delayFn });
+        });
+      }
+    }
+  });
+};
+
+const EventHandlersPlugin = () => {
+  const stripEventHandlers = (mode, tag) => {
+    const props = {};
+    const eventHandlers = {};
+    Object.entries(tag.props).forEach(([key, value]) => {
+      if (key.startsWith("on") && typeof value === "function")
+        eventHandlers[key] = value;
+      else
+        props[key] = value;
+    });
+    let delayedSrc;
+    if (mode === "dom" && tag.tag === "script" && typeof props.src === "string" && typeof eventHandlers.onload !== "undefined") {
+      delayedSrc = props.src;
+      delete props.src;
+    }
+    return { props, eventHandlers, delayedSrc };
+  };
+  return defineHeadPlugin({
+    hooks: {
+      "ssr:render": function(ctx) {
+        ctx.tags = ctx.tags.map((tag) => {
+          tag.props = stripEventHandlers("ssr", tag).props;
+          return tag;
+        });
+      },
+      "dom:beforeRenderTag": function(ctx) {
+        const { props, eventHandlers, delayedSrc } = stripEventHandlers("dom", ctx.tag);
+        if (!Object.keys(eventHandlers).length)
+          return;
+        ctx.tag.props = props;
+        ctx.tag._eventHandlers = eventHandlers;
+        ctx.tag._delayedSrc = delayedSrc;
+      },
+      "dom:renderTag": function(ctx) {
+        const $el = ctx.$el;
+        if (!ctx.tag._eventHandlers || !$el)
+          return;
+        const $eventListenerTarget = ctx.tag.tag === "bodyAttrs" && typeof window !== "undefined" ? window : $el;
+        Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
+          const sdeKey = `${ctx.tag._d || ctx.tag._p}:${k}`;
+          const eventName = k.slice(2).toLowerCase();
+          const eventDedupeKey = `data-h-${eventName}`;
+          delete ctx.queuedSideEffects[sdeKey];
+          if ($el.hasAttribute(eventDedupeKey))
+            return;
+          const handler = value;
+          $el.setAttribute(eventDedupeKey, "");
+          $eventListenerTarget.addEventListener(eventName, handler);
+          ctx.entry._sde[sdeKey] = () => {
+            $eventListenerTarget.removeEventListener(eventName, handler);
+            $el.removeAttribute(eventDedupeKey);
+          };
+        });
+        if (ctx.tag._delayedSrc) {
+          $el.setAttribute("src", ctx.tag._delayedSrc);
+        }
+      }
+    }
+  });
+};
+
+function asArray$1(value) {
+  return Array.isArray(value) ? value : [value];
+}
+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();
+}
+const HasElementTags = [
+  "base",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript"
+];
+
+let activeHead;
+const setActiveHead = (head) => activeHead = head;
+const getActiveHead = () => activeHead;
+
+const TagEntityBits = 10;
+
+function normaliseEntryTags(e) {
+  return Object.entries(e.input).filter(([k, v]) => typeof v !== "undefined" && ValidHeadTags.includes(k)).map(
+    ([k, value]) => asArray$1(value).map((props) => asArray$1(normaliseTag(k, props)))
+  ).flat(3).map((t, i) => {
+    t._e = e._i;
+    t._p = (e._i << TagEntityBits) + i;
+    return t;
+  });
+}
+
+function createHead$1(options = {}) {
+  let entries = [];
+  let _sde = {};
+  let _eid = 0;
+  const hooks = createHooks();
+  if (options?.hooks)
+    hooks.addHooks(options.hooks);
+  options.plugins = [
+    DeprecatedTagAttrPlugin(),
+    DedupesTagsPlugin(),
+    SortTagsPlugin(),
+    TitleTemplatePlugin(),
+    EventHandlersPlugin(),
+    ProvideTagHashPlugin(),
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    ...options?.plugins || []
+  ];
+  options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
+  const triggerUpdateHook = () => hooks.callHook("entries:updated", head);
+  const head = {
+    resolvedOptions: options,
+    headEntries() {
+      return entries;
+    },
+    get hooks() {
+      return hooks;
+    },
+    push(input, options2) {
+      const activeEntry = {
+        _i: _eid++,
+        input,
+        _sde: {}
+      };
+      if (options2?.mode)
+        activeEntry._m = options2?.mode;
+      entries.push(activeEntry);
+      triggerUpdateHook();
+      const queueSideEffects = (e) => {
+        _sde = { ..._sde, ...e._sde || {} };
+        e._sde = {};
+        triggerUpdateHook();
+      };
+      return {
+        dispose() {
+          entries = entries.filter((e) => {
+            if (e._i !== activeEntry._i)
+              return true;
+            queueSideEffects(e);
+            return false;
+          });
+        },
+        patch(input2) {
+          entries = entries.map((e) => {
+            if (e._i === activeEntry._i) {
+              queueSideEffects(e);
+              activeEntry.input = e.input = input2;
+              activeEntry._i = e._i = _eid++;
+            }
+            return e;
+          });
+        }
+      };
+    },
+    async resolveTags() {
+      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);
+        }
+      }
+      await hooks.callHook("tags:resolve", resolveCtx);
+      return resolveCtx.tags;
+    },
+    _elMap: {},
+    _popSideEffectQueue() {
+      const sde = { ..._sde };
+      _sde = {};
+      return sde;
+    }
+  };
+  head.hooks.callHook("init", head);
+  setActiveHead(head);
+  return head;
+}
+
+function defineHeadPlugin(plugin) {
+  return plugin;
+}
+const composableNames = [
+  "useHead",
+  "useTagTitle",
+  "useTagBase",
+  "useTagMeta",
+  "useTagMetaFlat",
+  "useTagLink",
+  "useTagScript",
+  "useTagStyle",
+  "useTagNoscript",
+  "useHtmlAttrs",
+  "useBodyAttrs",
+  "useTitleTemplate",
+  "useServerHead",
+  "useServerTagTitle",
+  "useServerTagBase",
+  "useServerTagMeta",
+  "useServerTagMetaFlat",
+  "useServerTagLink",
+  "useServerTagScript",
+  "useServerTagStyle",
+  "useServerTagNoscript",
+  "useServerHtmlAttrs",
+  "useServerBodyAttrs",
+  "useServerTitleTemplate"
+];
+
+function resolveUnref(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
 function resolveUnrefHeadInput(ref, lastKey = "") {
   const root = resolveUnref(ref);
   if (!ref || !root)
@@ -10,14 +524,17 @@ function resolveUnrefHeadInput(ref, lastKey = "") {
   if (Array.isArray(root))
     return root.map((r) => resolveUnrefHeadInput(r, lastKey));
   if (typeof root === "object") {
+    let dynamic = false;
     const unrefdObj = Object.fromEntries(
-      Object.entries(root).map(([key, value]) => {
-        if (key === "titleTemplate" || key.startsWith("on"))
-          return [key, unref(value)];
-        return [key, resolveUnrefHeadInput(value, key)];
+      Object.entries(root).map(([k, v]) => {
+        if (k === "titleTemplate" || k.startsWith("on"))
+          return [k, unref(v)];
+        if (typeof v === "function" || isRef(v))
+          dynamic = true;
+        return [k, resolveUnrefHeadInput(v, k)];
       })
     );
-    if (HasElementTags.includes(String(lastKey)) && JSON.stringify(unrefdObj) !== JSON.stringify(root))
+    if (dynamic && HasElementTags.includes(String(lastKey)))
       unrefdObj._dynamic = true;
     return unrefdObj;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -33,12 +33,11 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/dom": "0.6.3",
-    "@unhead/schema": "0.6.3",
-    "@vueuse/shared": "latest",
-    "unhead": "0.6.3"
+    "@unhead/schema": "0.6.5",
+    "hookable": "^5.4.1"
   },
   "devDependencies": {
+    "unhead": "0.6.5",
     "vue": "^3.2.45"
   },
   "scripts": {