@unhead/vue 0.1.4 → 0.2.3

package/dist/index.cjs

@@ -26,21 +26,16 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
-const VueTriggerDomPatchingOnUpdatesPlugin = () => {
+const VueTriggerDomPatchingOnUpdatesPlugin = (options) => {
   return unhead.defineHeadPlugin({
     hooks: {
       "entries:updated": function(head) {
-        dom.debouncedRenderDOMHead(vue.nextTick, head);
+        dom.debouncedRenderDOMHead(vue.nextTick, head, { document: options?.document });
       }
     }
   });
 };
 
-const vueTriggerDomPatchingOnUpdatesPlugin = {
-  __proto__: null,
-  VueTriggerDomPatchingOnUpdatesPlugin: VueTriggerDomPatchingOnUpdatesPlugin
-};
-
 const VueReactiveInputPlugin = () => {
   return unhead.defineHeadPlugin({
     hooks: {
@@ -52,20 +47,151 @@ const VueReactiveInputPlugin = () => {
   });
 };
 
-const Vue3 = vue.version.startsWith("3");
-vue.version.startsWith("2.");
-const IsBrowser = typeof window !== "undefined";
+function unpackToArray(input, options) {
+  const unpacked = [];
+  const kFn = options.resolveKeyData || ((ctx) => ctx.key);
+  const vFn = options.resolveValueData || ((ctx) => ctx.value);
+  for (const [k, v] of Object.entries(input)) {
+    unpacked.push(...(Array.isArray(v) ? v : [v]).map((i) => {
+      const ctx = { key: k, value: i };
+      const val = vFn(ctx);
+      if (typeof val === "object")
+        return unpackToArray(val, options);
+      if (Array.isArray(val))
+        return val;
+      return {
+        [typeof options.key === "function" ? options.key(ctx) : options.key]: kFn(ctx),
+        [typeof options.value === "function" ? options.value(ctx) : options.value]: val
+      };
+    }).flat());
+  }
+  return unpacked;
+}
 
-function useHead$2(input, options = {}) {
-  const head = injectHead();
-  head.push(input, options);
+function unpackToString(value, options) {
+  return Object.entries(value).map(([key, value2]) => {
+    if (typeof value2 === "object")
+      value2 = unpackToString(value2, options);
+    if (options.resolve) {
+      const resolved = options.resolve({ key, value: value2 });
+      if (resolved)
+        return resolved;
+    }
+    if (typeof value2 === "number")
+      value2 = value2.toString();
+    if (typeof value2 === "string" && options.wrapValue) {
+      value2 = value2.replace(new RegExp(options.wrapValue, "g"), `\\${options.wrapValue}`);
+      value2 = `${options.wrapValue}${value2}${options.wrapValue}`;
+    }
+    return `${key}${options.keyValueSeparator || ""}${value2}`;
+  }).join(options.entrySeparator || "");
 }
 
-function useServerHead$1(input, options = {}) {
-  useHead$2(input, { ...options, mode: "server" });
+const MetaPackingSchema = {
+  robots: {
+    unpack: {
+      keyValueSeparator: ":"
+    }
+  },
+  contentSecurityPolicy: {
+    unpack: {
+      keyValueSeparator: " ",
+      entrySeparator: "; "
+    },
+    metaKey: "http-equiv"
+  },
+  fbAppId: {
+    keyValue: "fb:app_id",
+    metaKey: "property"
+  },
+  msapplicationTileImage: {
+    keyValue: "msapplication-TileImage"
+  },
+  msapplicationTileColor: {
+    keyValue: "msapplication-TileColor"
+  },
+  msapplicationConfig: {
+    keyValue: "msapplication-Config"
+  },
+  charset: {
+    metaKey: "charset"
+  },
+  contentType: {
+    metaKey: "http-equiv"
+  },
+  defaultStyle: {
+    metaKey: "http-equiv"
+  },
+  xUaCompatible: {
+    metaKey: "http-equiv"
+  },
+  refresh: {
+    metaKey: "http-equiv"
+  }
+};
+function resolveMetaKeyType(key) {
+  return PropertyPrefixKeys.test(key) ? "property" : MetaPackingSchema[key]?.metaKey || "name";
+}
+
+function unpackMeta(input) {
+  return unpackToArray(input, {
+    key({ key }) {
+      return resolveMetaKeyType(key);
+    },
+    value({ key }) {
+      return key === "charset" ? "charset" : "content";
+    },
+    resolveKeyData({ key }) {
+      return MetaPackingSchema[key]?.keyValue || fixKeyCase(key);
+    },
+    resolveValueData({ value, key }) {
+      if (typeof value === "object") {
+        const definition = MetaPackingSchema[key];
+        if (key === "refresh")
+          return `${value.seconds};url=${value.url}`;
+        return unpackToString(
+          changeKeyCasingDeep(value),
+          {
+            entrySeparator: ", ",
+            keyValueSeparator: "=",
+            resolve({ value: value2, key: key2 }) {
+              if (typeof value2 === "boolean")
+                return `${key2}`;
+            },
+            ...definition?.unpack
+          }
+        );
+      }
+      return typeof value === "number" ? value.toString() : value;
+    }
+  });
+}
+
+const PropertyPrefixKeys = /^(og|twitter|fb)/;
+function fixKeyCase(key) {
+  key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  if (PropertyPrefixKeys.test(key)) {
+    key = key.replace("secure-url", "secure_url").replace(/-/g, ":");
+  }
+  return key;
 }
+function changeKeyCasingDeep(input) {
+  if (Array.isArray(input)) {
+    return input.map((entry) => changeKeyCasingDeep(entry));
+  }
+  if (typeof input !== "object" || Array.isArray(input))
+    return input;
+  const output = {};
+  for (const [key, value] of Object.entries(input))
+    output[fixKeyCase(key)] = changeKeyCasingDeep(value);
+  return output;
+}
+
+const Vue3 = vue.version.startsWith("3");
+vue.version.startsWith("2.");
+const IsBrowser = typeof window !== "undefined";
 
-function useHead$1(input, options = {}) {
+function clientUseHead(input, options = {}) {
   const head = injectHead();
   const vm = vue.getCurrentInstance();
   if (!vm) {
@@ -88,41 +214,66 @@ function useHead$1(input, options = {}) {
   });
 }
 
+function serverUseHead(input, options = {}) {
+  const head = injectHead();
+  head.push(input, options);
+}
+
 function useServerHead(input, options = {}) {
-  if (!IsBrowser)
-    useServerHead$1(input, options);
+  useHead(input, { ...options, mode: "server" });
 }
+const useServerTagTitle = (title) => useServerHead({ title });
+const useServerTitleTemplate = (titleTemplate) => useServerHead({ titleTemplate });
+const useServerTagMeta = (meta) => useServerHead({ meta: asArray(meta) });
+const useServerTagMetaFlat = (meta) => {
+  const input = vue.ref({});
+  vue.watchEffect(() => {
+    input.value = unpackMeta(resolveUnrefHeadInput(meta));
+  });
+  return useServerHead({ meta: input });
+};
+const useServerTagLink = (link) => useServerHead({ link: asArray(link) });
+const useServerTagScript = (script) => useServerHead({ script: asArray(script) });
+const useServerTagStyle = (style) => useServerHead({ style: asArray(style) });
+const useServerTagNoscript = (noscript) => useServerHead({ noscript: asArray(noscript) });
+const useServerTagBase = (base) => useServerHead({ base });
+const useServerHtmlAttrs = (attrs) => useServerHead({ htmlAttrs: attrs });
+const useServerBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
+
 function useHead(input, options = {}) {
   if (options.mode === "server" && IsBrowser || options.mode === "client" && !IsBrowser)
     return;
-  IsBrowser ? useHead$1(input, options) : useHead$2(input, options);
+  IsBrowser ? clientUseHead(input, options) : serverUseHead(input, options);
 }
-const useTitle = (title) => useHead({ title });
+const useTagTitle = (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 useTagMeta = (meta) => useHead({ meta: asArray(meta) });
+const useTagMetaFlat = (meta) => {
+  const input = vue.ref({});
+  vue.watchEffect(() => {
+    input.value = unpackMeta(resolveUnrefHeadInput(meta));
+  });
+  return useHead({ meta: input });
+};
+const useTagLink = (link) => useHead({ link: asArray(link) });
+const useTagScript = (script) => useHead({ script: asArray(script) });
+const useTagStyle = (style) => useHead({ style: asArray(style) });
+const useTagNoscript = (noscript) => useHead({ noscript: asArray(noscript) });
+const useTagBase = (base) => useHead({ base });
 const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
 const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
-const headSymbol = Symbol("unhead");
+const headSymbol = "usehead";
 function injectHead() {
   return vue.getCurrentInstance() && vue.inject(headSymbol) || unhead.getActiveHead();
 }
-async function createHead(options = {}) {
+function createHead(options = {}) {
   const plugins = [
     unhead.HydratesStatePlugin(),
     VueReactiveInputPlugin(),
     ...options?.plugins || []
   ];
-  if (IsBrowser) {
-    const { VueTriggerDomPatchingOnUpdatesPlugin } = await Promise.resolve().then(function () { return vueTriggerDomPatchingOnUpdatesPlugin; });
-    plugins.push(VueTriggerDomPatchingOnUpdatesPlugin());
-  }
-  const head = await unhead.createHead({
+  const head = unhead.createHead({
     ...options,
     plugins
   });
@@ -148,6 +299,16 @@ async function createHead(options = {}) {
   return { ...vuePlugin, ...head };
 }
 
+function createDomHead(options = {}) {
+  return createHead({
+    ...options,
+    plugins: [
+      VueTriggerDomPatchingOnUpdatesPlugin({ document: options?.document }),
+      ...options.plugins || []
+    ]
+  });
+}
+
 const HeadVuePlugin = function(_Vue) {
   _Vue.mixin({
     beforeCreate() {
@@ -178,21 +339,34 @@ exports.HeadVuePlugin = HeadVuePlugin;
 exports.VueReactiveInputPlugin = VueReactiveInputPlugin;
 exports.VueTriggerDomPatchingOnUpdatesPlugin = VueTriggerDomPatchingOnUpdatesPlugin;
 exports.asArray = asArray;
+exports.createDomHead = createDomHead;
 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.useServerBodyAttrs = useServerBodyAttrs;
 exports.useServerHead = useServerHead;
-exports.useStyle = useStyle;
-exports.useTitle = useTitle;
+exports.useServerHtmlAttrs = useServerHtmlAttrs;
+exports.useServerTagBase = useServerTagBase;
+exports.useServerTagLink = useServerTagLink;
+exports.useServerTagMeta = useServerTagMeta;
+exports.useServerTagMetaFlat = useServerTagMetaFlat;
+exports.useServerTagNoscript = useServerTagNoscript;
+exports.useServerTagScript = useServerTagScript;
+exports.useServerTagStyle = useServerTagStyle;
+exports.useServerTagTitle = useServerTagTitle;
+exports.useServerTitleTemplate = useServerTitleTemplate;
+exports.useTagBase = useTagBase;
+exports.useTagLink = useTagLink;
+exports.useTagMeta = useTagMeta;
+exports.useTagMetaFlat = useTagMetaFlat;
+exports.useTagNoscript = useTagNoscript;
+exports.useTagScript = useTagScript;
+exports.useTagStyle = useTagStyle;
+exports.useTagTitle = useTagTitle;
 exports.useTitleTemplate = useTitleTemplate;
 for (const k in dom) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = dom[k];

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import { MaybeComputedRef, MaybeRef } from '@vueuse/shared';
 export { MaybeComputedRef } from '@vueuse/shared';
 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';
+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, MetaFlatInput, HeadClient, CreateHeadOptions } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadClient, HeadEntryOptions, HeadTag, MergeHead } from '@unhead/schema';
-import { Plugin } from 'vue';
+import { RenderDomHeadOptions } from '@unhead/dom';
 export * from '@unhead/dom';
+import { Plugin } from 'vue';
 
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
     [key in keyof T]?: MaybeComputedRef<T[key]>;
@@ -103,33 +104,50 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
      */
     bodyAttrs?: BodyAttributes<E['bodyAttrs']>;
 }
-declare type UseHeadInput = MaybeComputedRef<ReactiveHead>;
+declare type UseHeadInput<T extends MergeHead = {}> = MaybeComputedRef<ReactiveHead<T>>;
 
 declare function resolveUnrefHeadInput(ref: any): any;
 declare function asArray<T>(value: Arrayable<T>): T[];
 
-declare const VueTriggerDomPatchingOnUpdatesPlugin: () => _unhead_schema.HeadPlugin;
+declare const VueTriggerDomPatchingOnUpdatesPlugin: (options?: RenderDomHeadOptions) => _unhead_schema.HeadPlugin;
 
 declare const VueReactiveInputPlugin: () => _unhead_schema.HeadPlugin;
 
-declare function useServerHead(input: ReactiveHead, options?: HeadEntryOptions): void;
-declare function useHead(input: UseHeadInput, options?: HeadEntryOptions): void;
-declare const useTitle: (title: ReactiveHead['title']) => void;
+declare function useServerHead<T extends MergeHead>(input: UseHeadInput<T>, options?: HeadEntryOptions): void;
+declare const useServerTagTitle: (title: ReactiveHead['title']) => void;
+declare const useServerTitleTemplate: (titleTemplate: ReactiveHead['titleTemplate']) => void;
+declare const useServerTagMeta: (meta: Arrayable<Meta>) => void;
+declare const useServerTagMetaFlat: (meta: MaybeComputedRefEntries<MetaFlatInput>) => void;
+declare const useServerTagLink: (link: Arrayable<Link>) => void;
+declare const useServerTagScript: (script: Arrayable<Script>) => void;
+declare const useServerTagStyle: (style: Arrayable<Style>) => void;
+declare const useServerTagNoscript: (noscript: Arrayable<Noscript>) => void;
+declare const useServerTagBase: (base: ReactiveHead['base']) => void;
+declare const useServerHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
+declare const useServerBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
+
+declare function useHead<T extends MergeHead>(input: UseHeadInput<T>, options?: HeadEntryOptions): void;
+declare const useTagTitle: (title: ReactiveHead['title']) => void;
 declare const useTitleTemplate: (titleTemplate: ReactiveHead['titleTemplate']) => void;
-declare const useMeta: (meta: Arrayable<Meta>) => void;
-declare const useLink: (link: Arrayable<Link>) => void;
-declare const useScript: (script: Arrayable<Script>) => void;
-declare const useStyle: (style: Arrayable<Style>) => void;
-declare const useNoscript: (noscript: Arrayable<Noscript>) => void;
-declare const useBase: (base: ReactiveHead['base']) => void;
+declare const useTagMeta: (meta: Arrayable<Meta>) => void;
+declare const useTagMetaFlat: (meta: MaybeComputedRefEntries<MetaFlatInput>) => void;
+declare const useTagLink: (link: Arrayable<Link>) => void;
+declare const useTagScript: (script: Arrayable<Script>) => void;
+declare const useTagStyle: (style: Arrayable<Style>) => void;
+declare const useTagNoscript: (noscript: Arrayable<Noscript>) => void;
+declare const useTagBase: (base: ReactiveHead['base']) => void;
 declare const useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
 declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
 
 declare type VueHeadClient<T extends MergeHead> = HeadClient<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
-declare const headSymbol: unique symbol;
+declare const headSymbol = "usehead";
 declare function injectHead<T extends MergeHead>(): VueHeadClient<T>;
-declare function createHead<T extends MergeHead>(options?: CreateHeadOptions): Promise<VueHeadClient<T>>;
+declare function createHead<T extends MergeHead>(options?: CreateHeadOptions): VueHeadClient<T>;
+
+declare function createDomHead<T extends MergeHead>(options?: CreateHeadOptions & {
+    document?: Document;
+}): VueHeadClient<T>;
 
 declare const HeadVuePlugin: Plugin;
 
-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 };
+export { Arrayable, Base, BodyAttributes, HeadVuePlugin, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, VueHeadClient, VueReactiveInputPlugin, VueTriggerDomPatchingOnUpdatesPlugin, asArray, createDomHead, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBodyAttrs, useHead, useHtmlAttrs, 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

@@ -25,21 +25,16 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
-const VueTriggerDomPatchingOnUpdatesPlugin = () => {
+const VueTriggerDomPatchingOnUpdatesPlugin = (options) => {
   return defineHeadPlugin({
     hooks: {
       "entries:updated": function(head) {
-        debouncedRenderDOMHead(nextTick, head);
+        debouncedRenderDOMHead(nextTick, head, { document: options?.document });
       }
     }
   });
 };
 
-const vueTriggerDomPatchingOnUpdatesPlugin = {
-  __proto__: null,
-  VueTriggerDomPatchingOnUpdatesPlugin: VueTriggerDomPatchingOnUpdatesPlugin
-};
-
 const VueReactiveInputPlugin = () => {
   return defineHeadPlugin({
     hooks: {
@@ -51,20 +46,151 @@ const VueReactiveInputPlugin = () => {
   });
 };
 
-const Vue3 = version.startsWith("3");
-version.startsWith("2.");
-const IsBrowser = typeof window !== "undefined";
+function unpackToArray(input, options) {
+  const unpacked = [];
+  const kFn = options.resolveKeyData || ((ctx) => ctx.key);
+  const vFn = options.resolveValueData || ((ctx) => ctx.value);
+  for (const [k, v] of Object.entries(input)) {
+    unpacked.push(...(Array.isArray(v) ? v : [v]).map((i) => {
+      const ctx = { key: k, value: i };
+      const val = vFn(ctx);
+      if (typeof val === "object")
+        return unpackToArray(val, options);
+      if (Array.isArray(val))
+        return val;
+      return {
+        [typeof options.key === "function" ? options.key(ctx) : options.key]: kFn(ctx),
+        [typeof options.value === "function" ? options.value(ctx) : options.value]: val
+      };
+    }).flat());
+  }
+  return unpacked;
+}
 
-function useHead$2(input, options = {}) {
-  const head = injectHead();
-  head.push(input, options);
+function unpackToString(value, options) {
+  return Object.entries(value).map(([key, value2]) => {
+    if (typeof value2 === "object")
+      value2 = unpackToString(value2, options);
+    if (options.resolve) {
+      const resolved = options.resolve({ key, value: value2 });
+      if (resolved)
+        return resolved;
+    }
+    if (typeof value2 === "number")
+      value2 = value2.toString();
+    if (typeof value2 === "string" && options.wrapValue) {
+      value2 = value2.replace(new RegExp(options.wrapValue, "g"), `\\${options.wrapValue}`);
+      value2 = `${options.wrapValue}${value2}${options.wrapValue}`;
+    }
+    return `${key}${options.keyValueSeparator || ""}${value2}`;
+  }).join(options.entrySeparator || "");
 }
 
-function useServerHead$1(input, options = {}) {
-  useHead$2(input, { ...options, mode: "server" });
+const MetaPackingSchema = {
+  robots: {
+    unpack: {
+      keyValueSeparator: ":"
+    }
+  },
+  contentSecurityPolicy: {
+    unpack: {
+      keyValueSeparator: " ",
+      entrySeparator: "; "
+    },
+    metaKey: "http-equiv"
+  },
+  fbAppId: {
+    keyValue: "fb:app_id",
+    metaKey: "property"
+  },
+  msapplicationTileImage: {
+    keyValue: "msapplication-TileImage"
+  },
+  msapplicationTileColor: {
+    keyValue: "msapplication-TileColor"
+  },
+  msapplicationConfig: {
+    keyValue: "msapplication-Config"
+  },
+  charset: {
+    metaKey: "charset"
+  },
+  contentType: {
+    metaKey: "http-equiv"
+  },
+  defaultStyle: {
+    metaKey: "http-equiv"
+  },
+  xUaCompatible: {
+    metaKey: "http-equiv"
+  },
+  refresh: {
+    metaKey: "http-equiv"
+  }
+};
+function resolveMetaKeyType(key) {
+  return PropertyPrefixKeys.test(key) ? "property" : MetaPackingSchema[key]?.metaKey || "name";
+}
+
+function unpackMeta(input) {
+  return unpackToArray(input, {
+    key({ key }) {
+      return resolveMetaKeyType(key);
+    },
+    value({ key }) {
+      return key === "charset" ? "charset" : "content";
+    },
+    resolveKeyData({ key }) {
+      return MetaPackingSchema[key]?.keyValue || fixKeyCase(key);
+    },
+    resolveValueData({ value, key }) {
+      if (typeof value === "object") {
+        const definition = MetaPackingSchema[key];
+        if (key === "refresh")
+          return `${value.seconds};url=${value.url}`;
+        return unpackToString(
+          changeKeyCasingDeep(value),
+          {
+            entrySeparator: ", ",
+            keyValueSeparator: "=",
+            resolve({ value: value2, key: key2 }) {
+              if (typeof value2 === "boolean")
+                return `${key2}`;
+            },
+            ...definition?.unpack
+          }
+        );
+      }
+      return typeof value === "number" ? value.toString() : value;
+    }
+  });
+}
+
+const PropertyPrefixKeys = /^(og|twitter|fb)/;
+function fixKeyCase(key) {
+  key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  if (PropertyPrefixKeys.test(key)) {
+    key = key.replace("secure-url", "secure_url").replace(/-/g, ":");
+  }
+  return key;
 }
+function changeKeyCasingDeep(input) {
+  if (Array.isArray(input)) {
+    return input.map((entry) => changeKeyCasingDeep(entry));
+  }
+  if (typeof input !== "object" || Array.isArray(input))
+    return input;
+  const output = {};
+  for (const [key, value] of Object.entries(input))
+    output[fixKeyCase(key)] = changeKeyCasingDeep(value);
+  return output;
+}
+
+const Vue3 = version.startsWith("3");
+version.startsWith("2.");
+const IsBrowser = typeof window !== "undefined";
 
-function useHead$1(input, options = {}) {
+function clientUseHead(input, options = {}) {
   const head = injectHead();
   const vm = getCurrentInstance();
   if (!vm) {
@@ -87,41 +213,66 @@ function useHead$1(input, options = {}) {
   });
 }
 
+function serverUseHead(input, options = {}) {
+  const head = injectHead();
+  head.push(input, options);
+}
+
 function useServerHead(input, options = {}) {
-  if (!IsBrowser)
-    useServerHead$1(input, options);
+  useHead(input, { ...options, mode: "server" });
 }
+const useServerTagTitle = (title) => useServerHead({ title });
+const useServerTitleTemplate = (titleTemplate) => useServerHead({ titleTemplate });
+const useServerTagMeta = (meta) => useServerHead({ meta: asArray(meta) });
+const useServerTagMetaFlat = (meta) => {
+  const input = ref({});
+  watchEffect(() => {
+    input.value = unpackMeta(resolveUnrefHeadInput(meta));
+  });
+  return useServerHead({ meta: input });
+};
+const useServerTagLink = (link) => useServerHead({ link: asArray(link) });
+const useServerTagScript = (script) => useServerHead({ script: asArray(script) });
+const useServerTagStyle = (style) => useServerHead({ style: asArray(style) });
+const useServerTagNoscript = (noscript) => useServerHead({ noscript: asArray(noscript) });
+const useServerTagBase = (base) => useServerHead({ base });
+const useServerHtmlAttrs = (attrs) => useServerHead({ htmlAttrs: attrs });
+const useServerBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
+
 function useHead(input, options = {}) {
   if (options.mode === "server" && IsBrowser || options.mode === "client" && !IsBrowser)
     return;
-  IsBrowser ? useHead$1(input, options) : useHead$2(input, options);
+  IsBrowser ? clientUseHead(input, options) : serverUseHead(input, options);
 }
-const useTitle = (title) => useHead({ title });
+const useTagTitle = (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 useTagMeta = (meta) => useHead({ meta: asArray(meta) });
+const useTagMetaFlat = (meta) => {
+  const input = ref({});
+  watchEffect(() => {
+    input.value = unpackMeta(resolveUnrefHeadInput(meta));
+  });
+  return useHead({ meta: input });
+};
+const useTagLink = (link) => useHead({ link: asArray(link) });
+const useTagScript = (script) => useHead({ script: asArray(script) });
+const useTagStyle = (style) => useHead({ style: asArray(style) });
+const useTagNoscript = (noscript) => useHead({ noscript: asArray(noscript) });
+const useTagBase = (base) => useHead({ base });
 const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
 const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
-const headSymbol = Symbol("unhead");
+const headSymbol = "usehead";
 function injectHead() {
   return getCurrentInstance() && inject(headSymbol) || getActiveHead();
 }
-async function createHead(options = {}) {
+function createHead(options = {}) {
   const plugins = [
     HydratesStatePlugin(),
     VueReactiveInputPlugin(),
     ...options?.plugins || []
   ];
-  if (IsBrowser) {
-    const { VueTriggerDomPatchingOnUpdatesPlugin } = await Promise.resolve().then(function () { return vueTriggerDomPatchingOnUpdatesPlugin; });
-    plugins.push(VueTriggerDomPatchingOnUpdatesPlugin());
-  }
-  const head = await createHead$1({
+  const head = createHead$1({
     ...options,
     plugins
   });
@@ -147,6 +298,16 @@ async function createHead(options = {}) {
   return { ...vuePlugin, ...head };
 }
 
+function createDomHead(options = {}) {
+  return createHead({
+    ...options,
+    plugins: [
+      VueTriggerDomPatchingOnUpdatesPlugin({ document: options?.document }),
+      ...options.plugins || []
+    ]
+  });
+}
+
 const HeadVuePlugin = function(_Vue) {
   _Vue.mixin({
     beforeCreate() {
@@ -173,4 +334,4 @@ const HeadVuePlugin = function(_Vue) {
   });
 };
 
-export { HeadVuePlugin, VueReactiveInputPlugin, VueTriggerDomPatchingOnUpdatesPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { HeadVuePlugin, VueReactiveInputPlugin, VueTriggerDomPatchingOnUpdatesPlugin, asArray, createDomHead, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.2.3",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/dom": "0.1.4",
-    "@unhead/schema": "0.1.4",
+    "@unhead/dom": "0.2.3",
+    "@unhead/schema": "0.2.3",
     "@vueuse/shared": "latest",
-    "unhead": "0.1.4"
+    "unhead": "0.2.3"
   },
   "devDependencies": {
     "vue": "latest"

package/dist/runtime/server/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useHead';
-export * from './useServerHead';

package/dist/runtime/server/index.mjs

@@ -1,2 +0,0 @@
-export * from "./useHead.mjs";
-export * from "./useServerHead.mjs";

package/dist/runtime/server/useHead.d.ts

@@ -1,3 +0,0 @@
-import type { HeadEntryOptions } from '@unhead/schema';
-import type { UseHeadInput } from '../..';
-export declare function useHead(input: UseHeadInput, options?: HeadEntryOptions): void;

package/dist/runtime/server/useHead.mjs

@@ -1,5 +0,0 @@
-import { injectHead } from "../..";
-export function useHead(input, options = {}) {
-  const head = injectHead();
-  head.push(input, options);
-}

package/dist/runtime/server/useServerHead.d.ts

@@ -1,3 +0,0 @@
-import type { HeadEntryOptions } from '@unhead/schema';
-import type { UseHeadInput } from '../../types';
-export declare function useServerHead(input: UseHeadInput, options?: HeadEntryOptions): void;

package/dist/runtime/server/useServerHead.mjs

@@ -1,4 +0,0 @@
-import { useHead } from "./index.mjs";
-export function useServerHead(input, options = {}) {
-  useHead(input, { ...options, mode: "server" });
-}

package/dist/runtimes/client/index.d.ts

@@ -1,2 +0,0 @@
-export * from './useHead';
-export * from './useServerHead';

package/dist/runtimes/client/index.mjs

@@ -1,2 +0,0 @@
-export * from "./useHead.mjs";
-export * from "./useServerHead.mjs";

package/dist/runtimes/client/useHead.d.ts

@@ -1,3 +0,0 @@
-import type { HeadEntryOptions } from '@unhead/schema';
-import type { UseHeadInput } from '../../index';
-export declare function useHead(input: UseHeadInput, options?: HeadEntryOptions): void;

package/dist/runtimes/client/useHead.mjs

@@ -1,24 +0,0 @@
-import { getCurrentInstance, onBeforeUnmount, ref, watch, watchEffect } from "vue";
-import { injectHead, resolveUnrefHeadInput } from "../../index";
-export function useHead(input, options = {}) {
-  const head = injectHead();
-  const vm = getCurrentInstance();
-  if (!vm) {
-    head.push(input, options);
-    return;
-  }
-  const resolvedInput = ref({});
-  watchEffect(() => {
-    resolvedInput.value = resolveUnrefHeadInput(input);
-  });
-  let entry;
-  watch(resolvedInput, (e) => {
-    if (!entry)
-      entry = head.push(e, options);
-    else
-      entry.patch(e);
-  }, { immediate: true });
-  onBeforeUnmount(() => {
-    entry?.dispose();
-  });
-}

package/dist/runtimes/client/useServerHead.d.ts

@@ -1,3 +0,0 @@
-import type { HeadEntryOptions } from '@unhead/schema';
-import type { UseHeadInput } from '../../types';
-export declare function useServerHead(input: UseHeadInput, options?: HeadEntryOptions): void;

package/dist/runtimes/client/useServerHead.mjs

@@ -1,2 +0,0 @@
-export function useServerHead(input, options = {}) {
-}