@unhead/vue 1.0.17 → 1.0.20

package/dist/index.cjs

@@ -160,7 +160,7 @@ async function renderDOMHead(head, options = {}) {
         // convert attributes to object
         props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
       });
-      const matchIdx = queue.findIndex((ctx2) => ctx2 && (ctx2.tag._d === dedupeKey || $el.isEqualNode(ctx2.$el)));
+      const matchIdx = queue.findIndex((ctx2) => ctx2 && (ctx2.tag._d === dedupeKey || $el.isEqualNode?.(ctx2.$el)));
       if (matchIdx !== -1) {
         const ctx2 = queue[matchIdx];
         ctx2.$el = $el;
@@ -887,6 +887,7 @@ const MetaPackingSchema = {
       keyValueSeparator: ":"
     }
   },
+  // Pragma directives
   contentSecurityPolicy: {
     unpack: {
       keyValueSeparator: " ",
@@ -901,9 +902,15 @@ const MetaPackingSchema = {
   msapplicationTileImage: {
     keyValue: "msapplication-TileImage"
   },
+  /**
+   * Tile colour for windows
+   */
   msapplicationTileColor: {
     keyValue: "msapplication-TileColor"
   },
+  /**
+   * URL of a config for windows tile.
+   */
   msapplicationConfig: {
     keyValue: "msapplication-Config"
   },
@@ -927,7 +934,34 @@ function resolveMetaKeyType(key) {
   return PropertyPrefixKeys.test(key) ? "property" : MetaPackingSchema[key]?.metaKey || "name";
 }
 
+const ArrayableInputs = ["Image", "Video", "Audio"];
 function unpackMeta(input) {
+  const extras = [];
+  ArrayableInputs.forEach((key) => {
+    const ogKey = `og:${key.toLowerCase()}`;
+    const inputKey = `og${key}`;
+    const val = input[inputKey];
+    if (typeof val === "object") {
+      (Array.isArray(val) ? val : [val]).forEach((entry) => {
+        if (!entry)
+          return;
+        const unpackedEntry = unpackToArray(entry, {
+          key: "property",
+          value: "content",
+          resolveKeyData({ key: key2 }) {
+            return fixKeyCase(`${ogKey}${key2 !== "url" ? `:${key2}` : ""}`);
+          },
+          resolveValueData({ value }) {
+            return typeof value === "number" ? value.toString() : value;
+          }
+        });
+        extras.push(
+          ...unpackedEntry.sort((a, b) => a.property === ogKey ? -1 : b.property === ogKey ? 1 : 0)
+        );
+      });
+      delete input[inputKey];
+    }
+  });
   const meta = unpackToArray(input, {
     key({ key }) {
       return resolveMetaKeyType(key);
@@ -963,13 +997,14 @@ function unpackMeta(input) {
       return typeof value === "number" ? value.toString() : value;
     }
   });
-  return meta.filter((v) => typeof v.content === "undefined" || v.content !== "_null");
+  return [...extras, ...meta].filter((v) => typeof v.content === "undefined" || v.content !== "_null");
 }
 
-const PropertyPrefixKeys = /^(og|twitter|fb)/;
+const PropertyPrefixKeys = /^(og|fb)/;
+const ColonPrefixKeys = /^(og|twitter|fb)/;
 function fixKeyCase(key) {
   key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-  if (PropertyPrefixKeys.test(key)) {
+  if (ColonPrefixKeys.test(key)) {
     key = key.replace("secure-url", "secure_url").replace(/-/g, ":");
   }
   return key;
@@ -1029,6 +1064,20 @@ const useServerTagBase = (base) => useServerHead({ base });
 const useServerHtmlAttrs = (attrs) => useServerHead({ htmlAttrs: attrs });
 const useServerBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
+const useSeoMeta = (input) => {
+  const headInput = vue.ref({});
+  vue.watchEffect(() => {
+    const resolvedMeta = resolveUnrefHeadInput(input);
+    const { title, titleTemplate, ...meta } = resolvedMeta;
+    headInput.value = {
+      title,
+      titleTemplate,
+      meta: unpackMeta(meta)
+    };
+  });
+  return useHead(headInput);
+};
+
 function useHead(input, options = {}) {
   const head = injectHead();
   if (head) {
@@ -1048,7 +1097,6 @@ const useTagMetaFlat = (meta) => {
   });
   return useHead({ meta: input });
 };
-const useSeoMeta = useTagMetaFlat;
 const useTagLink = (link) => useHead({ link: asArray(link) });
 const useTagScript = (script) => useHead({ script: asArray(script) });
 const useTagStyle = (style) => useHead({ style: asArray(style) });

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _unhead_schema from '@unhead/schema';
-import { Head, CreateHeadOptions, Unhead, 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, ActiveHeadEntry } from '@unhead/schema';
+import { Head, CreateHeadOptions, Unhead, 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, MaybeFunctionEntries, BodyEvents, MergeHead, BaseHtmlAttr, MaybeArray, BaseBodyAttr, HeadEntryOptions, MetaFlatInput, ActiveHeadEntry } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
 import { ComputedRef, Ref, Plugin } from 'vue';
 
@@ -44,7 +44,7 @@ type Style<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Style$1<E
 type Script<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Script$1<E>>;
 type Noscript<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Noscript$1<E>>;
 type HtmlAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<HtmlAttr & DataKeys & SchemaAugmentations['htmlAttrs'] & DefinedValueOrEmptyObject<E>>>;
-type BodyAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<BodyAttr & DataKeys & SchemaAugmentations['bodyAttrs'] & DefinedValueOrEmptyObject<E>>>;
+type BodyAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<BodyAttr & DataKeys & SchemaAugmentations['bodyAttrs'] & DefinedValueOrEmptyObject<E>> & MaybeFunctionEntries<BodyEvents>>;
 interface ReactiveHead<E extends MergeHead = MergeHead> {
     /**
      * The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.
@@ -142,12 +142,17 @@ declare const useServerTagBase: (base: ReactiveHead['base']) => void | _unhead_s
 declare const useServerHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void | _unhead_schema.ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useServerBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void | _unhead_schema.ActiveHeadEntry<UseHeadInput<MergeHead>>;
 
+type UseSeoMetaInput = MaybeComputedRefEntries<MetaFlatInput> & {
+    title?: ReactiveHead['title'];
+    titleTemplate?: ReactiveHead['titleTemplate'];
+};
+declare const useSeoMeta: (input: UseSeoMetaInput) => ActiveHeadEntry<any> | void;
+
 declare function useHead<T extends MergeHead>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void;
 declare const useTagTitle: (title: ReactiveHead['title']) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTitleTemplate: (titleTemplate: ReactiveHead['titleTemplate']) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagMeta: (meta: Arrayable<Meta>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagMetaFlat: (meta: MaybeComputedRefEntries<MetaFlatInput>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
-declare const useSeoMeta: (meta: MaybeComputedRefEntries<MetaFlatInput>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagLink: (link: Arrayable<Link>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagScript: (script: Arrayable<Script>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
 declare const useTagStyle: (style: Arrayable<Style>) => void | ActiveHeadEntry<UseHeadInput<MergeHead>>;
@@ -160,4 +165,4 @@ declare const unheadVueComposablesImports: {
     '@unhead/vue': string[];
 };
 
-export { Arrayable, Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRef, MaybeComputedRefEntries, MaybeComputedRefOrPromise, MaybeReadonlyRef, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, createHeadCore, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useSeoMeta, 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, MaybeComputedRef, MaybeComputedRefEntries, MaybeComputedRefOrPromise, MaybeReadonlyRef, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, UseSeoMetaInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, createHeadCore, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useSeoMeta, 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

@@ -158,7 +158,7 @@ async function renderDOMHead(head, options = {}) {
         // convert attributes to object
         props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
       });
-      const matchIdx = queue.findIndex((ctx2) => ctx2 && (ctx2.tag._d === dedupeKey || $el.isEqualNode(ctx2.$el)));
+      const matchIdx = queue.findIndex((ctx2) => ctx2 && (ctx2.tag._d === dedupeKey || $el.isEqualNode?.(ctx2.$el)));
       if (matchIdx !== -1) {
         const ctx2 = queue[matchIdx];
         ctx2.$el = $el;
@@ -885,6 +885,7 @@ const MetaPackingSchema = {
       keyValueSeparator: ":"
     }
   },
+  // Pragma directives
   contentSecurityPolicy: {
     unpack: {
       keyValueSeparator: " ",
@@ -899,9 +900,15 @@ const MetaPackingSchema = {
   msapplicationTileImage: {
     keyValue: "msapplication-TileImage"
   },
+  /**
+   * Tile colour for windows
+   */
   msapplicationTileColor: {
     keyValue: "msapplication-TileColor"
   },
+  /**
+   * URL of a config for windows tile.
+   */
   msapplicationConfig: {
     keyValue: "msapplication-Config"
   },
@@ -925,7 +932,34 @@ function resolveMetaKeyType(key) {
   return PropertyPrefixKeys.test(key) ? "property" : MetaPackingSchema[key]?.metaKey || "name";
 }
 
+const ArrayableInputs = ["Image", "Video", "Audio"];
 function unpackMeta(input) {
+  const extras = [];
+  ArrayableInputs.forEach((key) => {
+    const ogKey = `og:${key.toLowerCase()}`;
+    const inputKey = `og${key}`;
+    const val = input[inputKey];
+    if (typeof val === "object") {
+      (Array.isArray(val) ? val : [val]).forEach((entry) => {
+        if (!entry)
+          return;
+        const unpackedEntry = unpackToArray(entry, {
+          key: "property",
+          value: "content",
+          resolveKeyData({ key: key2 }) {
+            return fixKeyCase(`${ogKey}${key2 !== "url" ? `:${key2}` : ""}`);
+          },
+          resolveValueData({ value }) {
+            return typeof value === "number" ? value.toString() : value;
+          }
+        });
+        extras.push(
+          ...unpackedEntry.sort((a, b) => a.property === ogKey ? -1 : b.property === ogKey ? 1 : 0)
+        );
+      });
+      delete input[inputKey];
+    }
+  });
   const meta = unpackToArray(input, {
     key({ key }) {
       return resolveMetaKeyType(key);
@@ -961,13 +995,14 @@ function unpackMeta(input) {
       return typeof value === "number" ? value.toString() : value;
     }
   });
-  return meta.filter((v) => typeof v.content === "undefined" || v.content !== "_null");
+  return [...extras, ...meta].filter((v) => typeof v.content === "undefined" || v.content !== "_null");
 }
 
-const PropertyPrefixKeys = /^(og|twitter|fb)/;
+const PropertyPrefixKeys = /^(og|fb)/;
+const ColonPrefixKeys = /^(og|twitter|fb)/;
 function fixKeyCase(key) {
   key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-  if (PropertyPrefixKeys.test(key)) {
+  if (ColonPrefixKeys.test(key)) {
     key = key.replace("secure-url", "secure_url").replace(/-/g, ":");
   }
   return key;
@@ -1027,6 +1062,20 @@ const useServerTagBase = (base) => useServerHead({ base });
 const useServerHtmlAttrs = (attrs) => useServerHead({ htmlAttrs: attrs });
 const useServerBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
+const useSeoMeta = (input) => {
+  const headInput = ref({});
+  watchEffect(() => {
+    const resolvedMeta = resolveUnrefHeadInput(input);
+    const { title, titleTemplate, ...meta } = resolvedMeta;
+    headInput.value = {
+      title,
+      titleTemplate,
+      meta: unpackMeta(meta)
+    };
+  });
+  return useHead(headInput);
+};
+
 function useHead(input, options = {}) {
   const head = injectHead();
   if (head) {
@@ -1046,7 +1095,6 @@ const useTagMetaFlat = (meta) => {
   });
   return useHead({ meta: input });
 };
-const useSeoMeta = useTagMetaFlat;
 const useTagLink = (link) => useHead({ link: asArray(link) });
 const useTagScript = (script) => useHead({ script: asArray(script) });
 const useTagStyle = (style) => useHead({ style: asArray(style) });

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "1.0.17",
-  "packageManager": "pnpm@7.25.0",
+  "version": "1.0.20",
+  "packageManager": "pnpm@7.25.1",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -34,11 +34,11 @@
   },
   "dependencies": {
     "hookable": "^5.4.2",
-    "@unhead/schema": "1.0.17"
+    "@unhead/schema": "1.0.20"
   },
   "devDependencies": {
     "vue": "^3.2.45",
-    "unhead": "1.0.17"
+    "unhead": "1.0.20"
   },
   "scripts": {
     "build": "unbuild .",