@unhead/vue 1.8.0-beta.1 → 1.8.0-beta.11

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 = {}) {
@@ -96,10 +103,9 @@ function useScript(_input, _options) {
   const status = vue.ref("awaitingLoad");
   shared.NetworkEvents.forEach((fn) => {
     const _fn = typeof input[fn] === "function" ? input[fn].bind(ctx) : null;
-    input[fn] = (e) => {
-      status.value = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
-      _fn && _fn(e);
-    };
+    if (_fn) {
+      input[fn] = (e) => _fn(e);
+    }
   });
   options.stub = ({ script, fn }) => {
     if (fn === "$script") {
@@ -110,7 +116,16 @@ function useScript(_input, _options) {
       };
     }
   };
-  return unhead.useScript(input, options);
+  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;

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
 import * as _unhead_schema from '@unhead/schema';
-import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry, UseScriptStatus, UseScriptInput, UseScriptOptions } 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 { 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'> {
@@ -52,10 +52,9 @@ declare function useServerHeadSafe(input: UseHeadSafeInput, options?: UseHeadOpt
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> | void;
 
-interface VueScriptInstance<T> {
+interface VueScriptInstance<T> extends Omit<ScriptInstance<T>, 'loaded' | 'status'> {
     loaded: ComputedRef<boolean>;
     status: Ref<UseScriptStatus>;
-    waitForUse: () => Promise<T>;
 }
 declare function useScript<T>(_input: MaybeComputedRefEntries<UseScriptInput>, _options?: UseScriptOptions<T>): T & {
     $script: VueScriptInstance<T>;

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
 import * as _unhead_schema from '@unhead/schema';
-import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry, UseScriptStatus, UseScriptInput, UseScriptOptions } 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 { 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'> {
@@ -52,10 +52,9 @@ declare function useServerHeadSafe(input: UseHeadSafeInput, options?: UseHeadOpt
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> | void;
 
-interface VueScriptInstance<T> {
+interface VueScriptInstance<T> extends Omit<ScriptInstance<T>, 'loaded' | 'status'> {
     loaded: ComputedRef<boolean>;
     status: Ref<UseScriptStatus>;
-    waitForUse: () => Promise<T>;
 }
 declare function useScript<T>(_input: MaybeComputedRefEntries<UseScriptInput>, _options?: UseScriptOptions<T>): T & {
     $script: VueScriptInstance<T>;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export { CapoPlugin, HashHydrationPlugin, createHeadCore } from 'unhead';
 import * as _unhead_schema from '@unhead/schema';
-import { SafeMeta, SafeLink, SafeNoscript, SafeScript, SafeHtmlAttr, SafeBodyAttr, MergeHead, CreateHeadOptions, ActiveHeadEntry, UseScriptStatus, UseScriptInput, UseScriptOptions } 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 { 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'> {
@@ -52,10 +52,9 @@ declare function useServerHeadSafe(input: UseHeadSafeInput, options?: UseHeadOpt
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: UseHeadOptions): ActiveHeadEntry<any> | void;
 
-interface VueScriptInstance<T> {
+interface VueScriptInstance<T> extends Omit<ScriptInstance<T>, 'loaded' | 'status'> {
     loaded: ComputedRef<boolean>;
     status: Ref<UseScriptStatus>;
-    waitForUse: () => Promise<T>;
 }
 declare function useScript<T>(_input: MaybeComputedRefEntries<UseScriptInput>, _options?: UseScriptOptions<T>): T & {
     $script: VueScriptInstance<T>;

package/dist/index.mjs

@@ -1,8 +1,8 @@
 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, computed } from 'vue';
+import { getCurrentInstance, ref, computed } from 'vue';
 import { u as useHead } from './shared/vue.f36acd1f.mjs';
 import { composableNames, whitelistSafeInput, unpackMeta, NetworkEvents } from '@unhead/shared';
 
@@ -59,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 = {}) {
@@ -96,10 +103,9 @@ function useScript(_input, _options) {
   const status = ref("awaitingLoad");
   NetworkEvents.forEach((fn) => {
     const _fn = typeof input[fn] === "function" ? input[fn].bind(ctx) : null;
-    input[fn] = (e) => {
-      status.value = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
-      _fn && _fn(e);
-    };
+    if (_fn) {
+      input[fn] = (e) => _fn(e);
+    }
   });
   options.stub = ({ script, fn }) => {
     if (fn === "$script") {
@@ -110,7 +116,16 @@ function useScript(_input, _options) {
       };
     }
   };
-  return useScript$1(input, options);
+  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.1",
+  "version": "1.8.0-beta.11",
   "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.1",
-    "@unhead/shared": "1.8.0-beta.1",
-    "unhead": "1.8.0-beta.1"
+    "@unhead/schema": "1.8.0-beta.11",
+    "@unhead/shared": "1.8.0-beta.11",
+    "unhead": "1.8.0-beta.11"
   },
   "devDependencies": {
     "vue": "^3.3.4"