@unhead/vue 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -0,0 +1,199 @@
+'use strict';
+
+const shared = require('@vueuse/shared');
+const vue = require('vue');
+const unhead = require('unhead');
+const dom = require('@unhead/dom');
+
+function resolveUnrefHeadInput(ref) {
+  const root = shared.resolveUnref(ref);
+  if (!ref || !root)
+    return root;
+  if (Array.isArray(root))
+    return root.map(resolveUnrefHeadInput);
+  if (typeof root === "object") {
+    return Object.fromEntries(
+      Object.entries(root).map(([key, value]) => {
+        if (key === "titleTemplate")
+          return [key, vue.unref(value)];
+        return [key, resolveUnrefHeadInput(value)];
+      })
+    );
+  }
+  return root;
+}
+function asArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
+const VueTriggerDomPatchingOnUpdatesPlugin = () => {
+  return unhead.defineHeadPlugin({
+    hooks: {
+      "entries:updated": function(head) {
+        dom.debouncedRenderDOMHead(vue.nextTick, head);
+      }
+    }
+  });
+};
+
+const vueTriggerDomPatchingOnUpdatesPlugin = {
+  __proto__: null,
+  VueTriggerDomPatchingOnUpdatesPlugin: VueTriggerDomPatchingOnUpdatesPlugin
+};
+
+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 useHead$2(input, options = {}) {
+  const head = injectHead();
+  head.push(input, options);
+}
+
+function useServerHead$1(input, options = {}) {
+  useHead$2(input, { ...options, mode: "server" });
+}
+
+function useHead$1(input, options = {}) {
+  const head = injectHead();
+  const vm = vue.getCurrentInstance();
+  if (!vm) {
+    head.push(input, options);
+    return;
+  }
+  const resolvedInput = vue.ref({});
+  vue.watchEffect(() => {
+    resolvedInput.value = resolveUnrefHeadInput(input);
+  });
+  let entry;
+  vue.watch(resolvedInput, (e) => {
+    if (!entry)
+      entry = head.push(e, options);
+    else
+      entry.patch(e);
+  }, { immediate: true });
+  vue.onBeforeUnmount(() => {
+    entry?.dispose();
+  });
+}
+
+function useServerHead(input, options = {}) {
+  if (!IsBrowser)
+    useServerHead$1(input, options);
+}
+function useHead(input, options = {}) {
+  if (options.mode === "server" && IsBrowser || options.mode === "client" && !IsBrowser)
+    return;
+  IsBrowser ? useHead$1(input, options) : useHead$2(input, options);
+}
+const useTitle = (title) => useHead({ title });
+const useTitleTemplate = (titleTemplate) => useHead({ titleTemplate });
+const useMeta = (meta) => useHead({ meta: asArray(meta) });
+const useLink = (link) => useHead({ link: asArray(link) });
+const useScript = (script) => useHead({ script: asArray(script) });
+const useStyle = (style) => useHead({ style: asArray(style) });
+const useNoscript = (noscript) => useHead({ noscript: asArray(noscript) });
+const useBase = (base) => useHead({ base });
+const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
+const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
+
+const headSymbol = Symbol("unhead");
+function injectHead() {
+  return vue.getCurrentInstance() && vue.inject(headSymbol) || unhead.getActiveHead();
+}
+async function createHead(options = {}) {
+  const plugins = [
+    unhead.HydratesStatePlugin(),
+    VueReactiveInputPlugin(),
+    ...options?.plugins || []
+  ];
+  if (IsBrowser) {
+    const { VueTriggerDomPatchingOnUpdatesPlugin } = await Promise.resolve().then(function () { return vueTriggerDomPatchingOnUpdatesPlugin; });
+    plugins.push(VueTriggerDomPatchingOnUpdatesPlugin());
+  }
+  const head = await unhead.createHead({
+    ...options,
+    plugins
+  });
+  const vuePlugin = {
+    install(app) {
+      if (Vue3)
+        app.config.globalProperties.$head = 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);
+        }
+      });
+    }
+  };
+  return { ...vuePlugin, ...head };
+}
+
+const HeadVuePlugin = function(_Vue) {
+  _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
+          };
+        };
+        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.VueTriggerDomPatchingOnUpdatesPlugin = VueTriggerDomPatchingOnUpdatesPlugin;
+exports.asArray = asArray;
+exports.createHead = createHead;
+exports.headSymbol = headSymbol;
+exports.injectHead = injectHead;
+exports.resolveUnrefHeadInput = resolveUnrefHeadInput;
+exports.useBase = useBase;
+exports.useBodyAttrs = useBodyAttrs;
+exports.useHead = useHead;
+exports.useHtmlAttrs = useHtmlAttrs;
+exports.useLink = useLink;
+exports.useMeta = useMeta;
+exports.useNoscript = useNoscript;
+exports.useScript = useScript;
+exports.useServerHead = useServerHead;
+exports.useStyle = useStyle;
+exports.useTitle = useTitle;
+exports.useTitleTemplate = useTitleTemplate;
+for (const k in dom) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = dom[k];
+}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 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, HeadClient, CreateHeadOptions } from '@unhead/schema';
-export { HeadTag, MergeHead } from '@unhead/schema';
-import { Plugin, InjectionKey } from 'vue';
+export { ActiveHeadEntry, Head, HeadClient, HeadEntryOptions, HeadTag, MergeHead } from '@unhead/schema';
+import { Plugin } from 'vue';
 export * from '@unhead/dom';
 
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
@@ -107,6 +108,8 @@ declare type UseHeadInput = MaybeComputedRef<ReactiveHead>;
 declare function resolveUnrefHeadInput(ref: any): any;
 declare function asArray<T>(value: Arrayable<T>): T[];
 
+declare const VueTriggerDomPatchingOnUpdatesPlugin: () => _unhead_schema.HeadPlugin;
+
 declare const VueReactiveInputPlugin: () => _unhead_schema.HeadPlugin;
 
 declare function useServerHead(input: ReactiveHead, options?: HeadEntryOptions): void;
@@ -122,11 +125,11 @@ declare const useBase: (base: ReactiveHead['base']) => void;
 declare const useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
 declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
 
-declare type VueHeadClient = HeadClient<UseHeadInput> & Plugin;
-declare const headSymbol: InjectionKey<VueHeadClient>;
-declare function injectHead(): VueHeadClient;
-declare function createHead(options?: CreateHeadOptions): VueHeadClient;
+declare type VueHeadClient<T extends MergeHead> = HeadClient<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
+declare const headSymbol: unique symbol;
+declare function injectHead<T extends MergeHead>(): VueHeadClient<T>;
+declare function createHead<T extends MergeHead>(options?: CreateHeadOptions): Promise<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, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { Arrayable, Base, BodyAttributes, HeadVuePlugin, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, VueHeadClient, VueReactiveInputPlugin, VueTriggerDomPatchingOnUpdatesPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { resolveUnref } from '@vueuse/shared';
-import { unref, version, getCurrentInstance, ref, watchEffect, watch, nextTick, onBeforeUnmount, inject } from 'vue';
-import { defineHeadPlugin, getActiveHead, createHead as createHead$1, HydratesStatePlugin } from 'unhead';
+import { unref, nextTick, version, getCurrentInstance, ref, watchEffect, watch, onBeforeUnmount, inject } from 'vue';
+import { defineHeadPlugin, getActiveHead, HydratesStatePlugin, createHead as createHead$1 } from 'unhead';
 import { debouncedRenderDOMHead } from '@unhead/dom';
 export * from '@unhead/dom';
 
@@ -25,6 +25,21 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
+const VueTriggerDomPatchingOnUpdatesPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "entries:updated": function(head) {
+        debouncedRenderDOMHead(nextTick, head);
+      }
+    }
+  });
+};
+
+const vueTriggerDomPatchingOnUpdatesPlugin = {
+  __proto__: null,
+  VueTriggerDomPatchingOnUpdatesPlugin: VueTriggerDomPatchingOnUpdatesPlugin
+};
+
 const VueReactiveInputPlugin = () => {
   return defineHeadPlugin({
     hooks: {
@@ -38,7 +53,7 @@ const VueReactiveInputPlugin = () => {
 
 const Vue3 = version.startsWith("3");
 version.startsWith("2.");
-const IsClient = typeof window !== "undefined";
+const IsBrowser = typeof window !== "undefined";
 
 function useHead$2(input, options = {}) {
   const head = injectHead();
@@ -66,22 +81,20 @@ function useHead$1(input, options = {}) {
       entry = head.push(e, options);
     else
       entry.patch(e);
-    debouncedRenderDOMHead(nextTick, head);
   }, { immediate: true });
   onBeforeUnmount(() => {
     entry?.dispose();
-    debouncedRenderDOMHead(nextTick, head);
   });
 }
 
 function useServerHead(input, options = {}) {
-  if (!IsClient)
+  if (!IsBrowser)
     useServerHead$1(input, options);
 }
 function useHead(input, options = {}) {
-  if (options.mode === "server" && IsClient || options.mode === "client" && !IsClient)
+  if (options.mode === "server" && IsBrowser || options.mode === "client" && !IsBrowser)
     return;
-  return IsClient ? useHead$1(input, options) : useHead$2(input, options);
+  IsBrowser ? useHead$1(input, options) : useHead$2(input, options);
 }
 const useTitle = (title) => useHead({ title });
 const useTitleTemplate = (titleTemplate) => useHead({ titleTemplate });
@@ -94,18 +107,23 @@ const useBase = (base) => useHead({ base });
 const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
 const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
-const headSymbol = Symbol("head");
+const headSymbol = Symbol("unhead");
 function injectHead() {
   return getCurrentInstance() && inject(headSymbol) || getActiveHead();
 }
-function createHead(options = {}) {
-  const head = createHead$1({
+async function createHead(options = {}) {
+  const plugins = [
+    HydratesStatePlugin(),
+    VueReactiveInputPlugin(),
+    ...options?.plugins || []
+  ];
+  if (IsBrowser) {
+    const { VueTriggerDomPatchingOnUpdatesPlugin } = await Promise.resolve().then(function () { return vueTriggerDomPatchingOnUpdatesPlugin; });
+    plugins.push(VueTriggerDomPatchingOnUpdatesPlugin());
+  }
+  const head = await createHead$1({
     ...options,
-    plugins: [
-      HydratesStatePlugin(),
-      VueReactiveInputPlugin(),
-      ...options?.plugins || []
-    ]
+    plugins
   });
   const vuePlugin = {
     install(app) {
@@ -121,7 +139,7 @@ function createHead(options = {}) {
           if (!options2 || !("head" in options2))
             return;
           const source = typeof options2.head === "function" ? () => options2.head() : options2.head;
-          head.push(source);
+          useHead(source);
         }
       });
     }
@@ -155,4 +173,4 @@ const HeadVuePlugin = function(_Vue) {
   });
 };
 
-export { HeadVuePlugin, VueReactiveInputPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { HeadVuePlugin, VueReactiveInputPlugin, VueTriggerDomPatchingOnUpdatesPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

package/dist/runtimes/client/useHead.mjs

@@ -1,5 +1,4 @@
-import { getCurrentInstance, nextTick, onBeforeUnmount, ref, watch, watchEffect } from "vue";
-import { debouncedRenderDOMHead } from "@unhead/dom";
+import { getCurrentInstance, onBeforeUnmount, ref, watch, watchEffect } from "vue";
 import { injectHead, resolveUnrefHeadInput } from "../../index";
 export function useHead(input, options = {}) {
   const head = injectHead();
@@ -18,10 +17,8 @@ export function useHead(input, options = {}) {
       entry = head.push(e, options);
     else
       entry.patch(e);
-    debouncedRenderDOMHead(nextTick, head);
   }, { immediate: true });
   onBeforeUnmount(() => {
     entry?.dispose();
-    debouncedRenderDOMHead(nextTick, head);
   });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -19,9 +19,11 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     }
   },
+  "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
@@ -31,10 +33,10 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/dom": "0.1.1",
-    "@unhead/schema": "0.1.1",
+    "@unhead/dom": "0.1.3",
+    "@unhead/schema": "0.1.3",
     "@vueuse/shared": "latest",
-    "unhead": "0.1.1"
+    "unhead": "0.1.3"
   },
   "devDependencies": {
     "vue": "latest"