@unhead/vue 1.0.18 → 1.0.21

package/dist/index.cjs

@@ -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;
@@ -988,17 +1023,27 @@ function changeKeyCasingDeep(input) {
 
 function clientUseHead(input, options = {}) {
   const head = injectHead();
+  const deactivated = vue.ref(false);
   const resolvedInput = vue.ref({});
   vue.watchEffect(() => {
     resolvedInput.value = resolveUnrefHeadInput(input);
   });
   const entry = head.push(resolvedInput.value, options);
-  vue.watch(resolvedInput, (e) => entry.patch(e));
+  vue.watch([resolvedInput, deactivated], ([e, disable]) => {
+    if (!disable)
+      entry.patch(e);
+  });
   const vm = vue.getCurrentInstance();
   if (vm) {
     vue.onBeforeUnmount(() => {
       entry.dispose();
     });
+    vue.onDeactivated(() => {
+      deactivated.value = true;
+    });
+    vue.onActivated(() => {
+      deactivated.value = false;
+    });
   }
   return entry;
 }

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.

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createHooks } from 'hookable';
-import { unref, isRef, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount } from 'vue';
+import { unref, isRef, version, getCurrentInstance, inject, nextTick, ref, watchEffect, watch, onBeforeUnmount, onDeactivated, onActivated } from 'vue';
 
 const TagsWithInnerContent = ["script", "style", "noscript"];
 const HasElementTags$1 = [
@@ -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;
@@ -986,17 +1021,27 @@ function changeKeyCasingDeep(input) {
 
 function clientUseHead(input, options = {}) {
   const head = injectHead();
+  const deactivated = ref(false);
   const resolvedInput = ref({});
   watchEffect(() => {
     resolvedInput.value = resolveUnrefHeadInput(input);
   });
   const entry = head.push(resolvedInput.value, options);
-  watch(resolvedInput, (e) => entry.patch(e));
+  watch([resolvedInput, deactivated], ([e, disable]) => {
+    if (!disable)
+      entry.patch(e);
+  });
   const vm = getCurrentInstance();
   if (vm) {
     onBeforeUnmount(() => {
       entry.dispose();
     });
+    onDeactivated(() => {
+      deactivated.value = true;
+    });
+    onActivated(() => {
+      deactivated.value = false;
+    });
   }
   return entry;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "1.0.18",
+  "version": "1.0.21",
   "packageManager": "pnpm@7.25.1",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -34,11 +34,11 @@
   },
   "dependencies": {
     "hookable": "^5.4.2",
-    "@unhead/schema": "1.0.18"
+    "@unhead/schema": "1.0.21"
   },
   "devDependencies": {
     "vue": "^3.2.45",
-    "unhead": "1.0.18"
+    "unhead": "1.0.21"
   },
   "scripts": {
     "build": "unbuild .",