@unhead/vue 1.8.0-beta.0 → 1.8.0-beta.10

package/dist/index.cjs

@@ -59,17 +59,24 @@ function useHeadSafe(input, options = {}) {
 }
 
 function useSeoMeta(input, options) {
-  const headInput = vue.ref({});
-  vue.watchEffect(() => {
-    const resolvedMeta = injectHead.resolveUnrefHeadInput(input);
-    const { title, titleTemplate, ...meta } = resolvedMeta;
-    headInput.value = {
-      title,
-      titleTemplate,
-      meta: shared.unpackMeta(meta)
-    };
+  const { title, titleTemplate, ...meta } = input;
+  return useHead.useHead({
+    title,
+    titleTemplate,
+    // @ts-expect-error runtime type
+    _flatMeta: meta
+  }, {
+    ...options,
+    transform(t) {
+      const meta2 = shared.unpackMeta({ ...t._flatMeta });
+      delete t._flatMeta;
+      return {
+        // @ts-expect-error runtime type
+        ...t,
+        meta: meta2
+      };
+    }
   });
-  return useHead.useHead(headInput, options);
 }
 
 function useServerHead(input, options = {}) {
@@ -87,6 +94,40 @@ function useServerSeoMeta(input, options) {
   return useSeoMeta(input, { ...options || {}, mode: "server" });
 }
 
+function useScript(_input, _options) {
+  const head = injectHead.injectHead();
+  const ctx = vue.getCurrentInstance();
+  const input = injectHead.resolveUnrefHeadInput(_input) || {};
+  const options = _options || {};
+  options.head = head;
+  const status = vue.ref("awaitingLoad");
+  shared.NetworkEvents.forEach((fn) => {
+    const _fn = typeof input[fn] === "function" ? input[fn].bind(ctx) : null;
+    if (_fn) {
+      input[fn] = (e) => _fn(e);
+    }
+  });
+  options.stub = ({ script, fn }) => {
+    if (fn === "$script") {
+      return {
+        ...script,
+        status,
+        loaded: vue.computed(() => status.value === "loaded")
+      };
+    }
+  };
+  const instance = unhead.useScript(input, options);
+  function syncStatus({ script }) {
+    if (script.id === instance.$script.id) {
+      status.value = script.status;
+      if (script.status === "removed")
+        head.hooks.removeHook(`script:updated`, syncStatus);
+    }
+  }
+  head.hooks.hook(`script:updated`, syncStatus);
+  return instance;
+}
+
 exports.CapoPlugin = unhead.CapoPlugin;
 exports.HashHydrationPlugin = unhead.HashHydrationPlugin;
 exports.createHeadCore = unhead.createHeadCore;
@@ -100,6 +141,7 @@ exports.Vue2ProvideUnheadPlugin = Vue2ProvideUnheadPlugin;
 exports.VueHeadMixin = VueHeadMixin;
 exports.unheadVueComposablesImports = unheadVueComposablesImports;
 exports.useHeadSafe = useHeadSafe;
+exports.useScript = useScript;
 exports.useSeoMeta = useSeoMeta;
 exports.useServerHead = useServerHead;
 exports.useServerHeadSafe = useServerHeadSafe;

package/dist/index.d.cts

@@ -1,10 +1,10 @@
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
 import * as _unhead_schema from '@unhead/schema';
-import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry } from '@unhead/schema';
+import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry, ScriptInstance, UseScriptStatus, UseScriptInput, UseScriptOptions } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
-import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions, c as UseSeoMetaInput } from './shared/vue.8eef6ffc.cjs';
-export { e as Base, B as BodyAttr, i as BodyAttributes, H as HtmlAttr, h as HtmlAttributes, L as Link, k as MaybeComputedRefOrPromise, j as MaybeReadonlyRef, f as Meta, N as Noscript, g as Script, S as Style, T as Title, d as TitleTemplate } from './shared/vue.8eef6ffc.cjs';
-import { Plugin } from 'vue';
+import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions, c as UseSeoMetaInput } from './shared/vue.44f175ba.cjs';
+export { e as Base, B as BodyAttr, i as BodyAttributes, H as HtmlAttr, h as HtmlAttributes, L as Link, k as MaybeComputedRefOrPromise, j as MaybeReadonlyRef, f as Meta, N as Noscript, g as Script, S as Style, T as Title, d as TitleTemplate } from './shared/vue.44f175ba.cjs';
+import { Plugin, ComputedRef, Ref } from 'vue';
 
 interface HeadSafe extends Pick<ReactiveHead, 'title' | 'titleTemplate' | 'templateParams'> {
     meta?: MaybeComputedRefEntries<SafeMeta>[];
@@ -52,4 +52,12 @@ declare function useServerHeadSafe(input: UseHeadSafeInput, options?: UseHeadOpt
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> | void;
 
-export { type HeadSafe, MaybeComputedRef, MaybeComputedRefEntries, ReactiveHead, UseHeadInput, UseHeadOptions, type UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, createHead, createServerHead, injectHead, resolveUnrefHeadInput, setHeadInjectionHandler, unheadVueComposablesImports, useHead, useHeadSafe, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };
+interface VueScriptInstance<T> extends Omit<ScriptInstance<T>, 'loaded' | 'status'> {
+    loaded: ComputedRef<boolean>;
+    status: Ref<UseScriptStatus>;
+}
+declare function useScript<T>(_input: MaybeComputedRefEntries<UseScriptInput>, _options?: UseScriptOptions<T>): T & {
+    $script: VueScriptInstance<T>;
+};
+
+export { type HeadSafe, MaybeComputedRef, MaybeComputedRefEntries, ReactiveHead, UseHeadInput, UseHeadOptions, type UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, type VueScriptInstance, createHead, createServerHead, injectHead, resolveUnrefHeadInput, setHeadInjectionHandler, unheadVueComposablesImports, useHead, useHeadSafe, useScript, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };

package/dist/index.d.mts

@@ -1,10 +1,10 @@
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
 import * as _unhead_schema from '@unhead/schema';
-import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry } from '@unhead/schema';
+import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry, ScriptInstance, UseScriptStatus, UseScriptInput, UseScriptOptions } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
-import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions, c as UseSeoMetaInput } from './shared/vue.8eef6ffc.mjs';
-export { e as Base, B as BodyAttr, i as BodyAttributes, H as HtmlAttr, h as HtmlAttributes, L as Link, k as MaybeComputedRefOrPromise, j as MaybeReadonlyRef, f as Meta, N as Noscript, g as Script, S as Style, T as Title, d as TitleTemplate } from './shared/vue.8eef6ffc.mjs';
-import { Plugin } from 'vue';
+import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions, c as UseSeoMetaInput } from './shared/vue.44f175ba.mjs';
+export { e as Base, B as BodyAttr, i as BodyAttributes, H as HtmlAttr, h as HtmlAttributes, L as Link, k as MaybeComputedRefOrPromise, j as MaybeReadonlyRef, f as Meta, N as Noscript, g as Script, S as Style, T as Title, d as TitleTemplate } from './shared/vue.44f175ba.mjs';
+import { Plugin, ComputedRef, Ref } from 'vue';
 
 interface HeadSafe extends Pick<ReactiveHead, 'title' | 'titleTemplate' | 'templateParams'> {
     meta?: MaybeComputedRefEntries<SafeMeta>[];
@@ -52,4 +52,12 @@ declare function useServerHeadSafe(input: UseHeadSafeInput, options?: UseHeadOpt
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> | void;
 
-export { type HeadSafe, MaybeComputedRef, MaybeComputedRefEntries, ReactiveHead, UseHeadInput, UseHeadOptions, type UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, createHead, createServerHead, injectHead, resolveUnrefHeadInput, setHeadInjectionHandler, unheadVueComposablesImports, useHead, useHeadSafe, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };
+interface VueScriptInstance<T> extends Omit<ScriptInstance<T>, 'loaded' | 'status'> {
+    loaded: ComputedRef<boolean>;
+    status: Ref<UseScriptStatus>;
+}
+declare function useScript<T>(_input: MaybeComputedRefEntries<UseScriptInput>, _options?: UseScriptOptions<T>): T & {
+    $script: VueScriptInstance<T>;
+};
+
+export { type HeadSafe, MaybeComputedRef, MaybeComputedRefEntries, ReactiveHead, UseHeadInput, UseHeadOptions, type UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, type VueScriptInstance, createHead, createServerHead, injectHead, resolveUnrefHeadInput, setHeadInjectionHandler, unheadVueComposablesImports, useHead, useHeadSafe, useScript, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
 import * as _unhead_schema from '@unhead/schema';
-import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry } from '@unhead/schema';
+import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry, ScriptInstance, UseScriptStatus, UseScriptInput, UseScriptOptions } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
-import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions, c as UseSeoMetaInput } from './shared/vue.8eef6ffc.js';
-export { e as Base, B as BodyAttr, i as BodyAttributes, H as HtmlAttr, h as HtmlAttributes, L as Link, k as MaybeComputedRefOrPromise, j as MaybeReadonlyRef, f as Meta, N as Noscript, g as Script, S as Style, T as Title, d as TitleTemplate } from './shared/vue.8eef6ffc.js';
-import { Plugin } from 'vue';
+import { R as ReactiveHead, M as MaybeComputedRefEntries, a as MaybeComputedRef, V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions, c as UseSeoMetaInput } from './shared/vue.44f175ba.js';
+export { e as Base, B as BodyAttr, i as BodyAttributes, H as HtmlAttr, h as HtmlAttributes, L as Link, k as MaybeComputedRefOrPromise, j as MaybeReadonlyRef, f as Meta, N as Noscript, g as Script, S as Style, T as Title, d as TitleTemplate } from './shared/vue.44f175ba.js';
+import { Plugin, ComputedRef, Ref } from 'vue';
 
 interface HeadSafe extends Pick<ReactiveHead, 'title' | 'titleTemplate' | 'templateParams'> {
     meta?: MaybeComputedRefEntries<SafeMeta>[];
@@ -52,4 +52,12 @@ declare function useServerHeadSafe(input: UseHeadSafeInput, options?: UseHeadOpt
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> | void;
 
-export { type HeadSafe, MaybeComputedRef, MaybeComputedRefEntries, ReactiveHead, UseHeadInput, UseHeadOptions, type UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, createHead, createServerHead, injectHead, resolveUnrefHeadInput, setHeadInjectionHandler, unheadVueComposablesImports, useHead, useHeadSafe, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };
+interface VueScriptInstance<T> extends Omit<ScriptInstance<T>, 'loaded' | 'status'> {
+    loaded: ComputedRef<boolean>;
+    status: Ref<UseScriptStatus>;
+}
+declare function useScript<T>(_input: MaybeComputedRefEntries<UseScriptInput>, _options?: UseScriptOptions<T>): T & {
+    $script: VueScriptInstance<T>;
+};
+
+export { type HeadSafe, MaybeComputedRef, MaybeComputedRefEntries, ReactiveHead, UseHeadInput, UseHeadOptions, type UseHeadSafeInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, type VueScriptInstance, createHead, createServerHead, injectHead, resolveUnrefHeadInput, setHeadInjectionHandler, unheadVueComposablesImports, useHead, useHeadSafe, useScript, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };

package/dist/index.mjs

@@ -1,9 +1,10 @@
+import { useScript as useScript$1 } from 'unhead';
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
-import { V as Vue3, h as headSymbol, r as resolveUnrefHeadInput, i as injectHead } from './shared/vue.cf295fb1.mjs';
+import { V as Vue3, h as headSymbol, i as injectHead, r as resolveUnrefHeadInput } from './shared/vue.cf295fb1.mjs';
 export { c as createHead, a as createServerHead, s as setHeadInjectionHandler } from './shared/vue.cf295fb1.mjs';
-import { getCurrentInstance, ref, watchEffect } from 'vue';
+import { getCurrentInstance, ref, computed } from 'vue';
 import { u as useHead } from './shared/vue.f36acd1f.mjs';
-import { composableNames, whitelistSafeInput, unpackMeta } from '@unhead/shared';
+import { composableNames, whitelistSafeInput, unpackMeta, NetworkEvents } from '@unhead/shared';
 
 const VueHeadMixin = {
   created() {
@@ -58,17 +59,24 @@ function useHeadSafe(input, options = {}) {
 }
 
 function useSeoMeta(input, options) {
-  const headInput = ref({});
-  watchEffect(() => {
-    const resolvedMeta = resolveUnrefHeadInput(input);
-    const { title, titleTemplate, ...meta } = resolvedMeta;
-    headInput.value = {
-      title,
-      titleTemplate,
-      meta: unpackMeta(meta)
-    };
+  const { title, titleTemplate, ...meta } = input;
+  return useHead({
+    title,
+    titleTemplate,
+    // @ts-expect-error runtime type
+    _flatMeta: meta
+  }, {
+    ...options,
+    transform(t) {
+      const meta2 = unpackMeta({ ...t._flatMeta });
+      delete t._flatMeta;
+      return {
+        // @ts-expect-error runtime type
+        ...t,
+        meta: meta2
+      };
+    }
   });
-  return useHead(headInput, options);
 }
 
 function useServerHead(input, options = {}) {
@@ -86,4 +94,38 @@ function useServerSeoMeta(input, options) {
   return useSeoMeta(input, { ...options || {}, mode: "server" });
 }
 
-export { Vue2ProvideUnheadPlugin, VueHeadMixin, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useHead, useHeadSafe, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };
+function useScript(_input, _options) {
+  const head = injectHead();
+  const ctx = getCurrentInstance();
+  const input = resolveUnrefHeadInput(_input) || {};
+  const options = _options || {};
+  options.head = head;
+  const status = ref("awaitingLoad");
+  NetworkEvents.forEach((fn) => {
+    const _fn = typeof input[fn] === "function" ? input[fn].bind(ctx) : null;
+    if (_fn) {
+      input[fn] = (e) => _fn(e);
+    }
+  });
+  options.stub = ({ script, fn }) => {
+    if (fn === "$script") {
+      return {
+        ...script,
+        status,
+        loaded: computed(() => status.value === "loaded")
+      };
+    }
+  };
+  const instance = useScript$1(input, options);
+  function syncStatus({ script }) {
+    if (script.id === instance.$script.id) {
+      status.value = script.status;
+      if (script.status === "removed")
+        head.hooks.removeHook(`script:updated`, syncStatus);
+    }
+  }
+  head.hooks.hook(`script:updated`, syncStatus);
+  return instance;
+}
+
+export { Vue2ProvideUnheadPlugin, VueHeadMixin, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useHead, useHeadSafe, useScript, useSeoMeta, useServerHead, useServerHeadSafe, useServerSeoMeta };

package/dist/polyfill.d.cts

@@ -1,5 +1,5 @@
 import { MergeHead } from '@unhead/schema';
-import { V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions } from './shared/vue.8eef6ffc.cjs';
+import { V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions } from './shared/vue.44f175ba.cjs';
 import 'vue';
 
 type VueHeadClientPollyFill<T extends MergeHead> = VueHeadClient<T> & {

package/dist/polyfill.d.mts

@@ -1,5 +1,5 @@
 import { MergeHead } from '@unhead/schema';
-import { V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions } from './shared/vue.8eef6ffc.mjs';
+import { V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions } from './shared/vue.44f175ba.mjs';
 import 'vue';
 
 type VueHeadClientPollyFill<T extends MergeHead> = VueHeadClient<T> & {

package/dist/polyfill.d.ts

@@ -1,5 +1,5 @@
 import { MergeHead } from '@unhead/schema';
-import { V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions } from './shared/vue.8eef6ffc.js';
+import { V as VueHeadClient, U as UseHeadInput, b as UseHeadOptions } from './shared/vue.44f175ba.js';
 import 'vue';
 
 type VueHeadClientPollyFill<T extends MergeHead> = VueHeadClient<T> & {

package/dist/shared/{vue.8eef6ffc.d.cts → vue.44f175ba.d.cts}

@@ -49,7 +49,9 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
     /**
      * Variables used to substitute in the title and meta content.
      */
-    templateParams?: MaybeComputedRefEntries<Record<string, null | string | MaybeComputedRefEntries<Record<string, null | string>>>>;
+    templateParams?: MaybeComputedRefEntries<{
+        separator?: '|' | '-' | '·' | string;
+    } & Record<string, null | string | MaybeComputedRefEntries<Record<string, null | string>>>>;
     /**
      * The `<base>` HTML element specifies the base URL to use for all relative URLs in a document.
      * There can be only one <base> element in a document.

package/dist/shared/{vue.8eef6ffc.d.mts → vue.44f175ba.d.mts}

@@ -49,7 +49,9 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
     /**
      * Variables used to substitute in the title and meta content.
      */
-    templateParams?: MaybeComputedRefEntries<Record<string, null | string | MaybeComputedRefEntries<Record<string, null | string>>>>;
+    templateParams?: MaybeComputedRefEntries<{
+        separator?: '|' | '-' | '·' | string;
+    } & Record<string, null | string | MaybeComputedRefEntries<Record<string, null | string>>>>;
     /**
      * The `<base>` HTML element specifies the base URL to use for all relative URLs in a document.
      * There can be only one <base> element in a document.

package/dist/shared/{vue.8eef6ffc.d.ts → vue.44f175ba.d.ts}

@@ -49,7 +49,9 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
     /**
      * Variables used to substitute in the title and meta content.
      */
-    templateParams?: MaybeComputedRefEntries<Record<string, null | string | MaybeComputedRefEntries<Record<string, null | string>>>>;
+    templateParams?: MaybeComputedRefEntries<{
+        separator?: '|' | '-' | '·' | string;
+    } & Record<string, null | string | MaybeComputedRefEntries<Record<string, null | string>>>>;
     /**
      * The `<base>` HTML element specifies the base URL to use for all relative URLs in a document.
      * There can be only one <base> element in a document.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "1.8.0-beta.0",
+  "version": "1.8.0-beta.10",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "hookable": "^5.5.3",
-    "@unhead/schema": "1.8.0-beta.0",
-    "@unhead/shared": "1.8.0-beta.0",
-    "unhead": "1.8.0-beta.0"
+    "@unhead/schema": "1.8.0-beta.10",
+    "@unhead/shared": "1.8.0-beta.10",
+    "unhead": "1.8.0-beta.10"
   },
   "devDependencies": {
     "vue": "^3.3.4"