@unhead/vue 0.6.4 → 0.6.6

package/dist/chunks/index.cjs

@@ -61,7 +61,8 @@ async function renderDOMHead(head, options = {}) {
     const tagRenderId = tag._d || tag._p;
     const markSideEffect = (key, fn) => {
       key = `${tagRenderId}:${key}`;
-      entry._sde[key] = fn;
+      if (entry)
+        entry._sde[key] = fn;
       delete staleSideEffects[key];
     };
     const setAttrs = ($el, sideEffects = true) => {
@@ -140,7 +141,7 @@ async function renderDOMHead(head, options = {}) {
     return $newEl;
   };
   for (const tag of await head.resolveTags()) {
-    const entry = head.headEntries().find((e) => e._i === Number(tag._e));
+    const entry = head.headEntries().find((e) => e._i === tag._e);
     const renderCtx = { $el: null, shouldRender: true, tag, entry, queuedSideEffects: staleSideEffects };
     await head.hooks.callHook("dom:beforeRenderTag", renderCtx);
     if (!renderCtx.shouldRender)

package/dist/chunks/index.mjs

@@ -59,7 +59,8 @@ async function renderDOMHead(head, options = {}) {
     const tagRenderId = tag._d || tag._p;
     const markSideEffect = (key, fn) => {
       key = `${tagRenderId}:${key}`;
-      entry._sde[key] = fn;
+      if (entry)
+        entry._sde[key] = fn;
       delete staleSideEffects[key];
     };
     const setAttrs = ($el, sideEffects = true) => {
@@ -138,7 +139,7 @@ async function renderDOMHead(head, options = {}) {
     return $newEl;
   };
   for (const tag of await head.resolveTags()) {
-    const entry = head.headEntries().find((e) => e._i === Number(tag._e));
+    const entry = head.headEntries().find((e) => e._i === tag._e);
     const renderCtx = { $el: null, shouldRender: true, tag, entry, queuedSideEffects: staleSideEffects };
     await head.hooks.callHook("dom:beforeRenderTag", renderCtx);
     if (!renderCtx.shouldRender)

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const vue = require('vue');
 const hookable = require('hookable');
+const vue = require('vue');
 
 const ValidHeadTags = [
   "title",
@@ -351,10 +351,12 @@ const EventHandlersPlugin = () => {
           const handler = value;
           $el.setAttribute(eventDedupeKey, "");
           $eventListenerTarget.addEventListener(eventName, handler);
-          ctx.entry._sde[sdeKey] = () => {
-            $eventListenerTarget.removeEventListener(eventName, handler);
-            $el.removeAttribute(eventDedupeKey);
-          };
+          if (ctx.entry) {
+            ctx.entry._sde[sdeKey] = () => {
+              $eventListenerTarget.removeEventListener(eventName, handler);
+              $el.removeAttribute(eventDedupeKey);
+            };
+          }
         });
         if (ctx.tag._delayedSrc) {
           $el.setAttribute("src", ctx.tag._delayedSrc);
@@ -398,7 +400,26 @@ function normaliseEntryTags(e) {
   });
 }
 
+const CorePlugins = () => [
+  DedupesTagsPlugin(),
+  SortTagsPlugin(),
+  TitleTemplatePlugin(),
+  ProvideTagHashPlugin(),
+  EventHandlersPlugin(),
+  DeprecatedTagAttrPlugin()
+];
+const DOMPlugins = (options = {}) => [
+  PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn })
+];
 function createHead$1(options = {}) {
+  const head = createHeadCore({
+    ...options,
+    plugins: [...DOMPlugins(options), ...options?.plugins || []]
+  });
+  setActiveHead(head);
+  return head;
+}
+function createHeadCore(options = {}) {
   let entries = [];
   let _sde = {};
   let _eid = 0;
@@ -406,13 +427,7 @@ function createHead$1(options = {}) {
   if (options?.hooks)
     hooks.addHooks(options.hooks);
   options.plugins = [
-    DeprecatedTagAttrPlugin(),
-    DedupesTagsPlugin(),
-    SortTagsPlugin(),
-    TitleTemplatePlugin(),
-    EventHandlersPlugin(),
-    ProvideTagHashPlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    ...CorePlugins(),
     ...options?.plugins || []
   ];
   options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
@@ -482,7 +497,6 @@ function createHead$1(options = {}) {
     }
   };
   head.hooks.callHook("init", head);
-  setActiveHead(head);
   return head;
 }
 
@@ -495,6 +509,7 @@ const composableNames = [
   "useTagBase",
   "useTagMeta",
   "useTagMetaFlat",
+  "useSeoMeta",
   "useTagLink",
   "useTagScript",
   "useTagStyle",
@@ -526,14 +541,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, vue.unref(value)];
-        return [key, resolveUnrefHeadInput(value, key)];
+      Object.entries(root).map(([k, v]) => {
+        if (k === "titleTemplate" || k.startsWith("on"))
+          return [k, vue.unref(v)];
+        if (typeof v === "function" || vue.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;
   }
@@ -551,14 +569,13 @@ function injectHead() {
   return vue.getCurrentInstance() && vue.inject(headSymbol) || getActiveHead();
 }
 function createHead(options = {}) {
-  const plugins = [
-    VueReactiveUseHeadPlugin(),
-    ...options?.plugins || []
-  ];
   const head = createHead$1({
     ...options,
     domDelayFn: (fn) => setTimeout(() => vue.nextTick(() => fn()), 10),
-    plugins
+    plugins: [
+      VueReactiveUseHeadPlugin(),
+      ...options?.plugins || []
+    ]
   });
   const vuePlugin = {
     install(app) {
@@ -816,6 +833,7 @@ const useTagMetaFlat = (meta) => {
   });
   return useHead({ meta: input });
 };
+const useSeoMeta = useTagMetaFlat;
 const useTagLink = (link) => useHead({ link: asArray(link) });
 const useTagScript = (script) => useHead({ script: asArray(script) });
 const useTagStyle = (style) => useHead({ style: asArray(style) });
@@ -839,6 +857,7 @@ exports.VueHeadMixin = VueHeadMixin;
 exports.VueReactiveUseHeadPlugin = VueReactiveUseHeadPlugin;
 exports.asArray = asArray;
 exports.createHead = createHead;
+exports.createHeadCore = createHeadCore;
 exports.headSymbol = headSymbol;
 exports.injectHead = injectHead;
 exports.resolveUnrefHeadInput = resolveUnrefHeadInput;
@@ -846,6 +865,7 @@ exports.unheadVueComposablesImports = unheadVueComposablesImports;
 exports.useBodyAttrs = useBodyAttrs;
 exports.useHead = useHead;
 exports.useHtmlAttrs = useHtmlAttrs;
+exports.useSeoMeta = useSeoMeta;
 exports.useServerBodyAttrs = useServerBodyAttrs;
 exports.useServerHead = useServerHead;
 exports.useServerHtmlAttrs = useServerHtmlAttrs;

package/dist/index.d.ts

@@ -1,8 +1,16 @@
 import * as _unhead_schema from '@unhead/schema';
-import { Title as Title$1, TitleTemplate as TitleTemplate$1, EntryAugmentation, Base as Base$1, Link as Link$1, Meta as Meta$1, Style as Style$1, Script as Script$1, Noscript as Noscript$1, DataKeys, SchemaAugmentations, DefinedValueOrEmptyObject, MergeHead, BaseHtmlAttr, MaybeArray, BaseBodyAttr, Unhead, CreateHeadOptions, HeadEntryOptions, MetaFlatInput, ActiveHeadEntry } from '@unhead/schema';
+import { Head, CreateHeadOptions, Unhead, Title as Title$1, TitleTemplate as TitleTemplate$1, EntryAugmentation, Base as Base$1, Link as Link$1, Meta as Meta$1, Style as Style$1, Script as Script$1, Noscript as Noscript$1, DataKeys, SchemaAugmentations, DefinedValueOrEmptyObject, MergeHead, BaseHtmlAttr, MaybeArray, BaseBodyAttr, HeadEntryOptions, MetaFlatInput, ActiveHeadEntry } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
 import { ComputedRef, Ref, Plugin } from 'vue';
 
+/**
+ * Creates a core instance of unhead. Does not provide a global ctx for composables to work
+ * and does not register DOM plugins.
+ *
+ * @param options
+ */
+declare function createHeadCore<T extends {} = Head>(options?: CreateHeadOptions): Unhead<T>;
+
 declare type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
 declare type MaybeComputedRef<T> = T | MaybeReadonlyRef<T> | Ref<T>;
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
@@ -138,6 +146,7 @@ declare const useTagTitle: (title: ReactiveHead['title']) => void | ActiveHeadEn
 declare const useTitleTemplate: (titleTemplate: ReactiveHead['titleTemplate']) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagMeta: (meta: Arrayable<Meta>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagMetaFlat: (meta: MaybeComputedRefEntries<MetaFlatInput>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
+declare const useSeoMeta: (meta: MaybeComputedRefEntries<MetaFlatInput>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagLink: (link: Arrayable<Link>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagScript: (script: Arrayable<Script>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagStyle: (style: Arrayable<Style>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
@@ -151,4 +160,4 @@ declare const unheadVueComposablesImports: {
     imports: string[];
 }[];
 
-export { Arrayable, Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRef, MaybeComputedRefEntries, MaybeReadonlyRef, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };
+export { Arrayable, Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRef, MaybeComputedRefEntries, MaybeReadonlyRef, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, createHeadCore, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useSeoMeta, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { unref, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount } from 'vue';
 import { createHooks } from 'hookable';
+import { unref, isRef, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount } from 'vue';
 
 const ValidHeadTags = [
   "title",
@@ -349,10 +349,12 @@ const EventHandlersPlugin = () => {
           const handler = value;
           $el.setAttribute(eventDedupeKey, "");
           $eventListenerTarget.addEventListener(eventName, handler);
-          ctx.entry._sde[sdeKey] = () => {
-            $eventListenerTarget.removeEventListener(eventName, handler);
-            $el.removeAttribute(eventDedupeKey);
-          };
+          if (ctx.entry) {
+            ctx.entry._sde[sdeKey] = () => {
+              $eventListenerTarget.removeEventListener(eventName, handler);
+              $el.removeAttribute(eventDedupeKey);
+            };
+          }
         });
         if (ctx.tag._delayedSrc) {
           $el.setAttribute("src", ctx.tag._delayedSrc);
@@ -396,7 +398,26 @@ function normaliseEntryTags(e) {
   });
 }
 
+const CorePlugins = () => [
+  DedupesTagsPlugin(),
+  SortTagsPlugin(),
+  TitleTemplatePlugin(),
+  ProvideTagHashPlugin(),
+  EventHandlersPlugin(),
+  DeprecatedTagAttrPlugin()
+];
+const DOMPlugins = (options = {}) => [
+  PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn })
+];
 function createHead$1(options = {}) {
+  const head = createHeadCore({
+    ...options,
+    plugins: [...DOMPlugins(options), ...options?.plugins || []]
+  });
+  setActiveHead(head);
+  return head;
+}
+function createHeadCore(options = {}) {
   let entries = [];
   let _sde = {};
   let _eid = 0;
@@ -404,13 +425,7 @@ function createHead$1(options = {}) {
   if (options?.hooks)
     hooks.addHooks(options.hooks);
   options.plugins = [
-    DeprecatedTagAttrPlugin(),
-    DedupesTagsPlugin(),
-    SortTagsPlugin(),
-    TitleTemplatePlugin(),
-    EventHandlersPlugin(),
-    ProvideTagHashPlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    ...CorePlugins(),
     ...options?.plugins || []
   ];
   options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
@@ -480,7 +495,6 @@ function createHead$1(options = {}) {
     }
   };
   head.hooks.callHook("init", head);
-  setActiveHead(head);
   return head;
 }
 
@@ -493,6 +507,7 @@ const composableNames = [
   "useTagBase",
   "useTagMeta",
   "useTagMetaFlat",
+  "useSeoMeta",
   "useTagLink",
   "useTagScript",
   "useTagStyle",
@@ -524,14 +539,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;
   }
@@ -549,14 +567,13 @@ function injectHead() {
   return getCurrentInstance() && inject(headSymbol) || getActiveHead();
 }
 function createHead(options = {}) {
-  const plugins = [
-    VueReactiveUseHeadPlugin(),
-    ...options?.plugins || []
-  ];
   const head = createHead$1({
     ...options,
     domDelayFn: (fn) => setTimeout(() => nextTick(() => fn()), 10),
-    plugins
+    plugins: [
+      VueReactiveUseHeadPlugin(),
+      ...options?.plugins || []
+    ]
   });
   const vuePlugin = {
     install(app) {
@@ -814,6 +831,7 @@ const useTagMetaFlat = (meta) => {
   });
   return useHead({ meta: input });
 };
+const useSeoMeta = useTagMetaFlat;
 const useTagLink = (link) => useHead({ link: asArray(link) });
 const useTagScript = (script) => useHead({ script: asArray(script) });
 const useTagStyle = (style) => useHead({ style: asArray(style) });
@@ -832,4 +850,4 @@ const unheadVueComposablesImports = [
   }
 ];
 
-export { Vue2ProvideUnheadPlugin, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };
+export { Vue2ProvideUnheadPlugin, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, createHeadCore, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useSeoMeta, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };

package/package.json

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