@unhead/vue 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -0,0 +1,196 @@
+'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 IsClient = 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 (!IsClient)
+    useServerHead$1(input, options);
+}
+function useHead(input, options = {}) {
+  if (options.mode === "server" && IsClient || options.mode === "client" && !IsClient)
+    return;
+  IsClient ? 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("head");
+function injectHead() {
+  return vue.getCurrentInstance() && vue.inject(headSymbol) || unhead.getActiveHead();
+}
+async function createHead(options = {}) {
+  const plugins = [
+    unhead.HydratesStatePlugin(),
+    VueReactiveInputPlugin(),
+    ...options?.plugins || []
+  ];
+  if (IsClient) {
+    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;
+          head.push(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;

package/dist/index.d.ts

@@ -3,7 +3,6 @@ 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 * from '@unhead/dom';
 
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
     [key in keyof T]?: MaybeComputedRef<T[key]>;
@@ -107,6 +106,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;
@@ -125,8 +126,8 @@ 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 function createHead(options?: CreateHeadOptions): Promise<VueHeadClient>;
 
 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,8 +1,7 @@
 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';
 
 function resolveUnrefHeadInput(ref) {
   const root = resolveUnref(ref);
@@ -25,6 +24,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: {
@@ -66,11 +80,9 @@ 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);
   });
 }
 
@@ -81,7 +93,7 @@ function useServerHead(input, options = {}) {
 function useHead(input, options = {}) {
   if (options.mode === "server" && IsClient || options.mode === "client" && !IsClient)
     return;
-  return IsClient ? useHead$1(input, options) : useHead$2(input, options);
+  IsClient ? useHead$1(input, options) : useHead$2(input, options);
 }
 const useTitle = (title) => useHead({ title });
 const useTitleTemplate = (titleTemplate) => useHead({ titleTemplate });
@@ -98,14 +110,19 @@ const headSymbol = Symbol("head");
 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 (IsClient) {
+    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) {
@@ -155,4 +172,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.0",
+  "version": "0.1.2",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -31,10 +31,10 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/dom": "0.1.0",
-    "@unhead/schema": "0.1.0",
+    "@unhead/dom": "0.1.2",
+    "@unhead/schema": "0.1.2",
     "@vueuse/shared": "latest",
-    "unhead": "0.1.0"
+    "unhead": "0.1.2"
   },
   "devDependencies": {
     "vue": "latest"