@unhead/vue 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,10 +1,14 @@
 import { MaybeComputedRef, MaybeRef } 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, SchemaAugmentations, MergeHead, BaseHtmlAttr, MaybeArray, BaseBodyAttr } from '@unhead/schema';
+export { HeadTag, MergeHead } from '@unhead/schema';
 import { DataKeys, DefinedValueOrEmptyObject } from '@zhead/schema';
 import * as unhead from 'unhead';
-import { HeadEntryOptions, Arrayable, HeadClient } from 'unhead';
-import { InjectionKey, Plugin } from 'vue';
+import { HeadEntryOptions, Arrayable, HeadClient, CreateHeadOptions } from 'unhead';
+import * as vue from 'vue';
+import { Plugin, InjectionKey } from 'vue';
+export { debouncedRenderDOMHead, renderDOMHead } from 'unhead/client';
+export { renderSSRHead } from 'unhead/server';
 
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
     [key in keyof T]?: MaybeComputedRef<T[key]>;
@@ -102,13 +106,14 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
      */
     bodyAttrs?: BodyAttributes<E['bodyAttrs']>;
 }
+declare type UseHeadInput = MaybeComputedRef<ReactiveHead>;
 
 declare function resolveUnrefHeadInput(ref: any): any;
 
 declare const VueReactiveInputPlugin: unhead.HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
 
 declare function useServerHead(input: ReactiveHead, options?: HeadEntryOptions): void;
-declare function useHead(input: ReactiveHead, options?: HeadEntryOptions): void;
+declare function useHead(input: UseHeadInput, options?: HeadEntryOptions): void;
 declare const useTitle: (title: ReactiveHead['title']) => void;
 declare const useTitleTemplate: (titleTemplate: ReactiveHead['titleTemplate']) => void;
 declare const useMeta: (meta: Arrayable<Meta>) => void;
@@ -120,10 +125,14 @@ declare const useBase: (base: ReactiveHead['base']) => void;
 declare const useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
 declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
 
-declare const Vue3: boolean;
-declare type VueHeadClient = HeadClient<ReactiveHead>;
+declare type Props = Readonly<Record<string, any>>;
+declare const Head: vue.DefineComponent<{}, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
+declare type VueHeadClient = HeadClient<UseHeadInput> & Plugin;
 declare const headSymbol: InjectionKey<VueHeadClient>;
 declare function injectHead(): VueHeadClient;
-declare function createHead(): HeadClient<ReactiveHead> & Plugin;
+declare function createHead<T>(options?: CreateHeadOptions<T>): VueHeadClient;
+
+declare const HeadVuePlugin: Plugin;
 
-export { Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, Vue3, VueHeadClient, VueReactiveInputPlugin, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { Base, BodyAttributes, Head, HeadVuePlugin, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, Props, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, VueHeadClient, VueReactiveInputPlugin, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

package/dist/index.mjs

@@ -1,7 +1,10 @@
 import { resolveUnref } from '@vueuse/shared';
-import { unref, getCurrentInstance, ref, watchEffect, watch, nextTick, onBeforeUnmount, version, inject } from 'vue';
+import { unref, version, getCurrentInstance, ref, watchEffect, watch, nextTick, onBeforeUnmount, defineComponent, inject } from 'vue';
 import { defineHeadPlugin, asArray, getActiveHead, createHead as createHead$1, HydratesStatePlugin } from 'unhead';
 import { debouncedRenderDOMHead } from 'unhead/client';
+export { debouncedRenderDOMHead, renderDOMHead } from 'unhead/client';
+export { renderSSRHead } from 'unhead/server';
+export { HeadTag, MergeHead } from '@unhead/schema';
 
 function resolveUnrefHeadInput(ref) {
   const root = resolveUnref(ref);
@@ -30,7 +33,9 @@ const VueReactiveInputPlugin = defineHeadPlugin({
   }
 });
 
-const IS_CLIENT = typeof window !== "undefined";
+const Vue3 = version.startsWith("3");
+const Vue2 = version.startsWith("2.");
+const IsClient = typeof window !== "undefined";
 
 function useHead$2(input, options = {}) {
   const head = injectHead();
@@ -67,13 +72,13 @@ function useHead$1(input, options = {}) {
 }
 
 function useServerHead(input, options = {}) {
-  if (!IS_CLIENT)
+  if (!IsClient)
     useServerHead$1(input, options);
 }
 function useHead(input, options = {}) {
-  if (options.mode === "server" && IS_CLIENT || options.mode === "client" && !IS_CLIENT)
+  if (options.mode === "server" && IsClient || options.mode === "client" && !IsClient)
     return;
-  return IS_CLIENT ? useHead$1(input, options) : useHead$2(input, options);
+  return IsClient ? useHead$1(input, options) : useHead$2(input, options);
 }
 const useTitle = (title) => useHead({ title });
 const useTitleTemplate = (titleTemplate) => useHead({ titleTemplate });
@@ -86,16 +91,74 @@ const useBase = (base) => useHead({ base });
 const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
 const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
-const Vue3 = version.startsWith("3");
+const addVNodeToHeadObj = (node, obj) => {
+  const nodeType = Vue2 ? node.tag : node.type;
+  const type = nodeType === "html" ? "htmlAttrs" : nodeType === "body" ? "bodyAttrs" : nodeType;
+  if (typeof type !== "string" || !(type in obj))
+    return;
+  const nodeData = Vue2 ? node.data : node;
+  const props = (Vue2 ? nodeData.attrs : node.props) || {};
+  if (Vue2) {
+    if (nodeData.staticClass)
+      props.class = nodeData.staticClass;
+    if (nodeData.staticStyle)
+      props.style = Object.entries(nodeData.staticStyle).map(([key, value]) => `${key}:${value}`).join(";");
+  }
+  if (node.children) {
+    const childrenAttr = Vue2 ? "text" : "children";
+    props.children = Array.isArray(node.children) ? node.children[0][childrenAttr] : node[childrenAttr];
+  }
+  if (Array.isArray(obj[type])) {
+    obj[type].push(props);
+  } else if (type === "title") {
+    obj.title = props.children;
+  } else {
+    obj[type] = props;
+  }
+};
+const vnodesToHeadObj = (nodes) => {
+  const obj = {
+    title: void 0,
+    htmlAttrs: void 0,
+    bodyAttrs: void 0,
+    base: void 0,
+    meta: [],
+    link: [],
+    style: [],
+    script: [],
+    noscript: []
+  };
+  for (const node of nodes) {
+    if (typeof node.type === "symbol" && Array.isArray(node.children)) {
+      for (const childNode of node.children)
+        addVNodeToHeadObj(childNode, obj);
+    } else {
+      addVNodeToHeadObj(node, obj);
+    }
+  }
+  return obj;
+};
+const Head = /* @__PURE__ */ defineComponent({
+  name: "Head",
+  setup(_, { slots }) {
+    return () => {
+      useHead(() => vnodesToHeadObj(slots.default()));
+      return null;
+    };
+  }
+});
+
 const headSymbol = Symbol("head");
 function injectHead() {
   return getCurrentInstance() && inject(headSymbol) || getActiveHead();
 }
-function createHead() {
+function createHead(options = {}) {
   const head = createHead$1({
+    ...options,
     plugins: [
       HydratesStatePlugin,
-      VueReactiveInputPlugin
+      VueReactiveInputPlugin,
+      ...options?.plugins || []
     ]
   });
   const vuePlugin = {
@@ -108,10 +171,10 @@ function createHead() {
           const instance = getCurrentInstance();
           if (!instance)
             return;
-          const options = instance.type;
-          if (!options || !("head" in options))
+          const options2 = instance.type;
+          if (!options2 || !("head" in options2))
             return;
-          const source = typeof options.head === "function" ? () => options.head() : options.head;
+          const source = typeof options2.head === "function" ? () => options2.head() : options2.head;
           head.push(source);
         }
       });
@@ -120,4 +183,30 @@ function createHead() {
   return { ...vuePlugin, ...head };
 }
 
-export { Vue3, VueReactiveInputPlugin, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+const HeadVuePlugin = function(_Vue) {
+  _Vue.mixin({
+    beforeCreate() {
+      const options = this.$options;
+      if (options.head) {
+        const origProvide = options.provide;
+        options.provide = function() {
+          let origProvideResult;
+          if (typeof origProvide === "function")
+            origProvideResult = origProvide.call(this);
+          else
+            origProvideResult = origProvide || {};
+          return {
+            ...origProvideResult,
+            [headSymbol]: options.head
+          };
+        };
+        if (!this.$head)
+          this.$head = options.head;
+      } else if (!this.$head && options.parent && options.parent.$head) {
+        this.$head = options.parent.$head;
+      }
+    }
+  });
+};
+
+export { Head, HeadVuePlugin, VueReactiveInputPlugin, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

package/dist/runtime/alias/composables.d.ts

@@ -1,7 +1,7 @@
 import type { Arrayable, HeadEntryOptions } from 'unhead';
-import type { Link, Meta, Noscript, ReactiveHead, Script, Style } from '../../types';
-export declare const useServerHead: (input: ReactiveHead, options?: HeadEntryOptions) => any;
-export declare const useHead: (input: ReactiveHead, options?: HeadEntryOptions) => any;
+import type { Link, Meta, Noscript, ReactiveHead, Script, Style, UseHeadInput } from '../../types';
+export declare const useServerHead: (input: UseHeadInput, options?: HeadEntryOptions) => any;
+export declare const useHead: (input: UseHeadInput, options?: HeadEntryOptions) => any;
 export declare const useTitle: (title: ReactiveHead['title']) => any;
 export declare const useTitleTemplate: (titleTemplate: ReactiveHead['titleTemplate']) => any;
 export declare const useMeta: (meta: Arrayable<Meta>) => any;

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

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

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

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

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

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

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unhead/vue",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -31,10 +31,10 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/schema": "0.0.4",
+    "@unhead/schema": "0.0.6",
     "@vueuse/shared": "latest",
     "@zhead/schema": "^1.0.0-beta.4",
-    "unhead": "0.0.4"
+    "unhead": "0.0.6"
   },
   "devDependencies": {
     "vue": "latest"