@unhead/vue 0.2.7 → 0.4.1

package/dist/index.cjs

@@ -14,7 +14,7 @@ function resolveUnrefHeadInput(ref) {
   if (typeof root === "object") {
     return Object.fromEntries(
       Object.entries(root).map(([key, value]) => {
-        if (key === "titleTemplate")
+        if (key === "titleTemplate" || key.startsWith("on"))
           return [key, vue.unref(value)];
         return [key, resolveUnrefHeadInput(value)];
       })
@@ -26,16 +26,9 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
-const VueReactiveInputPlugin = () => {
-  return unhead.defineHeadPlugin({
-    hooks: {
-      "entries:resolve": function(ctx) {
-        for (const entry of ctx.entries)
-          entry.input = resolveUnrefHeadInput(entry.input);
-      }
-    }
-  });
-};
+const Vue3 = vue.version.startsWith("3");
+vue.version.startsWith("2.");
+const IsBrowser = typeof window !== "undefined";
 
 function unpackToArray(input, options) {
   const unpacked = [];
@@ -177,10 +170,6 @@ function changeKeyCasingDeep(input) {
   return output;
 }
 
-const Vue3 = vue.version.startsWith("3");
-vue.version.startsWith("2.");
-const IsBrowser = typeof window !== "undefined";
-
 function clientUseHead(input, options = {}) {
   const head = injectHead();
   const vm = vue.getCurrentInstance();
@@ -260,64 +249,70 @@ function injectHead() {
 function createHead(options = {}) {
   const plugins = [
     unhead.HydratesStatePlugin(),
-    VueReactiveInputPlugin(),
+    VueReactiveUseHeadPlugin(),
     ...options?.plugins || []
   ];
   const head = unhead.createHead({
     ...options,
-    domDelayFn: vue.nextTick,
+    domDelayFn: (fn) => setTimeout(() => vue.nextTick(() => fn()), 10),
     plugins
   });
-  const vuePlugin = {
-    install(app) {
-      if (Vue3)
-        app.config.globalProperties.$head = head;
+  head.install = (app) => {
+    if (Vue3) {
+      app.config.globalProperties.$unhead = head;
       app.provide(headSymbol, head);
-      app.mixin({
-        created() {
-          const instance = vue.getCurrentInstance();
-          if (!instance)
-            return;
-          const options2 = instance.type;
-          if (!options2 || !("head" in options2))
-            return;
-          const source = typeof options2.head === "function" ? () => options2.head() : options2.head;
-          useHead(source);
-        }
-      });
+    } else {
+      app.options.$unhead = head;
     }
+    app.mixin({
+      created() {
+        const instance = vue.getCurrentInstance();
+        if (!instance)
+          return;
+        const options2 = Vue3 ? instance.type : instance.proxy.$options;
+        if (!options2 || !("head" in options2))
+          return;
+        const source = typeof options2.head === "function" ? () => options2.head() : options2.head;
+        useHead(source);
+      }
+    });
   };
-  return { ...vuePlugin, ...head };
+  return head;
 }
 
-const HeadVuePlugin = function(_Vue) {
+const VueReactiveUseHeadPlugin = () => {
+  return unhead.defineHeadPlugin({
+    hooks: {
+      "entries:resolve": function(ctx) {
+        for (const entry of ctx.entries)
+          entry.input = resolveUnrefHeadInput(entry.input);
+      }
+    }
+  });
+};
+
+const Vue2ProvideUnheadPlugin = function(_Vue, head) {
   _Vue.mixin({
     beforeCreate() {
       const options = this.$options;
-      if (options.head) {
-        const origProvide = options.provide;
-        options.provide = function() {
-          let origProvideResult;
-          if (typeof origProvide === "function")
-            origProvideResult = origProvide.call(this);
-          else
-            origProvideResult = origProvide || {};
-          return {
-            ...origProvideResult,
-            [headSymbol]: options.head
-          };
+      const origProvide = options.provide;
+      options.provide = function() {
+        let origProvideResult;
+        if (typeof origProvide === "function")
+          origProvideResult = origProvide.call(this);
+        else
+          origProvideResult = origProvide || {};
+        return {
+          ...origProvideResult,
+          [headSymbol]: head
         };
-        if (!this.$head)
-          this.$head = options.head;
-      } else if (!this.$head && options.parent && options.parent.$head) {
-        this.$head = options.parent.$head;
-      }
+      };
     }
   });
 };
 
-exports.HeadVuePlugin = HeadVuePlugin;
-exports.VueReactiveInputPlugin = VueReactiveInputPlugin;
+exports.Vue2ProvideUnheadPlugin = Vue2ProvideUnheadPlugin;
+exports.VueReactiveUseHeadPlugin = VueReactiveUseHeadPlugin;
 exports.asArray = asArray;
 exports.createHead = createHead;
 exports.headSymbol = headSymbol;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { MaybeComputedRef, MaybeRef } from '@vueuse/shared';
 export { MaybeComputedRef } from '@vueuse/shared';
 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, HeadEntryOptions, MetaFlatInput, Unhead, CreateHeadOptions } 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 } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
 import { Plugin } from 'vue';
 export * from '@unhead/dom';
@@ -108,7 +108,14 @@ declare type UseHeadInput<T extends MergeHead = {}> = MaybeComputedRef<ReactiveH
 declare function resolveUnrefHeadInput(ref: any): any;
 declare function asArray<T>(value: Arrayable<T>): T[];
 
-declare const VueReactiveInputPlugin: () => _unhead_schema.HeadPlugin;
+declare type VueHeadClient<T extends MergeHead> = Unhead<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
+declare const headSymbol = "usehead";
+declare function injectHead<T extends MergeHead>(): VueHeadClient<T>;
+declare function createHead<T extends MergeHead>(options?: Omit<CreateHeadOptions, 'domDelayFn'>): VueHeadClient<T>;
+
+declare const VueReactiveUseHeadPlugin: () => _unhead_schema.HeadPlugin;
+
+declare const Vue2ProvideUnheadPlugin: Plugin;
 
 declare function useServerHead<T extends MergeHead>(input: UseHeadInput<T>, options?: HeadEntryOptions): void;
 declare const useServerTagTitle: (title: ReactiveHead['title']) => void;
@@ -136,11 +143,4 @@ declare const useTagBase: (base: ReactiveHead['base']) => void;
 declare const useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
 declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
 
-declare type VueHeadClient<T extends MergeHead> = Unhead<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
-declare const headSymbol = "usehead";
-declare function injectHead<T extends MergeHead>(): VueHeadClient<T>;
-declare function createHead<T extends MergeHead>(options?: Omit<CreateHeadOptions, 'domDelayFn'>): VueHeadClient<T>;
-
-declare const HeadVuePlugin: Plugin;
-
-export { Arrayable, Base, BodyAttributes, HeadVuePlugin, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, VueHeadClient, VueReactiveInputPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, 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, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueReactiveUseHeadPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBodyAttrs, useHead, useHtmlAttrs, 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,6 +1,6 @@
 import { resolveUnref } from '@vueuse/shared';
 import { unref, version, getCurrentInstance, ref, watchEffect, watch, onBeforeUnmount, inject, nextTick } from 'vue';
-import { defineHeadPlugin, getActiveHead, HydratesStatePlugin, createHead as createHead$1 } from 'unhead';
+import { getActiveHead, HydratesStatePlugin, createHead as createHead$1, defineHeadPlugin } from 'unhead';
 export * from '@unhead/dom';
 
 function resolveUnrefHeadInput(ref) {
@@ -12,7 +12,7 @@ function resolveUnrefHeadInput(ref) {
   if (typeof root === "object") {
     return Object.fromEntries(
       Object.entries(root).map(([key, value]) => {
-        if (key === "titleTemplate")
+        if (key === "titleTemplate" || key.startsWith("on"))
           return [key, unref(value)];
         return [key, resolveUnrefHeadInput(value)];
       })
@@ -24,16 +24,9 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
-const VueReactiveInputPlugin = () => {
-  return defineHeadPlugin({
-    hooks: {
-      "entries:resolve": function(ctx) {
-        for (const entry of ctx.entries)
-          entry.input = resolveUnrefHeadInput(entry.input);
-      }
-    }
-  });
-};
+const Vue3 = version.startsWith("3");
+version.startsWith("2.");
+const IsBrowser = typeof window !== "undefined";
 
 function unpackToArray(input, options) {
   const unpacked = [];
@@ -175,10 +168,6 @@ function changeKeyCasingDeep(input) {
   return output;
 }
 
-const Vue3 = version.startsWith("3");
-version.startsWith("2.");
-const IsBrowser = typeof window !== "undefined";
-
 function clientUseHead(input, options = {}) {
   const head = injectHead();
   const vm = getCurrentInstance();
@@ -258,60 +247,66 @@ function injectHead() {
 function createHead(options = {}) {
   const plugins = [
     HydratesStatePlugin(),
-    VueReactiveInputPlugin(),
+    VueReactiveUseHeadPlugin(),
     ...options?.plugins || []
   ];
   const head = createHead$1({
     ...options,
-    domDelayFn: nextTick,
+    domDelayFn: (fn) => setTimeout(() => nextTick(() => fn()), 10),
     plugins
   });
-  const vuePlugin = {
-    install(app) {
-      if (Vue3)
-        app.config.globalProperties.$head = head;
+  head.install = (app) => {
+    if (Vue3) {
+      app.config.globalProperties.$unhead = head;
       app.provide(headSymbol, head);
-      app.mixin({
-        created() {
-          const instance = getCurrentInstance();
-          if (!instance)
-            return;
-          const options2 = instance.type;
-          if (!options2 || !("head" in options2))
-            return;
-          const source = typeof options2.head === "function" ? () => options2.head() : options2.head;
-          useHead(source);
-        }
-      });
+    } else {
+      app.options.$unhead = head;
     }
+    app.mixin({
+      created() {
+        const instance = getCurrentInstance();
+        if (!instance)
+          return;
+        const options2 = Vue3 ? instance.type : instance.proxy.$options;
+        if (!options2 || !("head" in options2))
+          return;
+        const source = typeof options2.head === "function" ? () => options2.head() : options2.head;
+        useHead(source);
+      }
+    });
   };
-  return { ...vuePlugin, ...head };
+  return head;
 }
 
-const HeadVuePlugin = function(_Vue) {
+const VueReactiveUseHeadPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "entries:resolve": function(ctx) {
+        for (const entry of ctx.entries)
+          entry.input = resolveUnrefHeadInput(entry.input);
+      }
+    }
+  });
+};
+
+const Vue2ProvideUnheadPlugin = function(_Vue, head) {
   _Vue.mixin({
     beforeCreate() {
       const options = this.$options;
-      if (options.head) {
-        const origProvide = options.provide;
-        options.provide = function() {
-          let origProvideResult;
-          if (typeof origProvide === "function")
-            origProvideResult = origProvide.call(this);
-          else
-            origProvideResult = origProvide || {};
-          return {
-            ...origProvideResult,
-            [headSymbol]: options.head
-          };
+      const origProvide = options.provide;
+      options.provide = function() {
+        let origProvideResult;
+        if (typeof origProvide === "function")
+          origProvideResult = origProvide.call(this);
+        else
+          origProvideResult = origProvide || {};
+        return {
+          ...origProvideResult,
+          [headSymbol]: head
         };
-        if (!this.$head)
-          this.$head = options.head;
-      } else if (!this.$head && options.parent && options.parent.$head) {
-        this.$head = options.parent.$head;
-      }
+      };
     }
   });
 };
 
-export { HeadVuePlugin, VueReactiveInputPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, 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, VueReactiveUseHeadPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBodyAttrs, useHead, useHtmlAttrs, 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.2.7",
+  "version": "0.4.1",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/dom": "0.2.7",
-    "@unhead/schema": "0.2.7",
+    "@unhead/dom": "0.4.1",
+    "@unhead/schema": "0.4.1",
     "@vueuse/shared": "latest",
-    "unhead": "0.2.7"
+    "unhead": "0.4.1"
   },
   "devDependencies": {
     "vue": "^3.2.42"