@unhead/vue 0.0.7 → 0.1.1

package/dist/index.d.ts

@@ -1,18 +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';
+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';
 export { HeadTag, MergeHead } from '@unhead/schema';
-import { DataKeys, DefinedValueOrEmptyObject } from '@zhead/schema';
-import * as unhead from 'unhead';
-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';
+export * from '@unhead/dom';
 
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
     [key in keyof T]?: MaybeComputedRef<T[key]>;
 };
+declare type Arrayable<T> = T | Array<T>;
 
 interface HtmlAttr extends Omit<BaseHtmlAttr, 'class'> {
     /**
@@ -109,8 +105,9 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
 declare type UseHeadInput = MaybeComputedRef<ReactiveHead>;
 
 declare function resolveUnrefHeadInput(ref: any): any;
+declare function asArray<T>(value: Arrayable<T>): T[];
 
-declare const VueReactiveInputPlugin: unhead.HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+declare const VueReactiveInputPlugin: () => _unhead_schema.HeadPlugin;
 
 declare function useServerHead(input: ReactiveHead, options?: HeadEntryOptions): void;
 declare function useHead(input: UseHeadInput, options?: HeadEntryOptions): void;
@@ -125,14 +122,11 @@ declare const useBase: (base: ReactiveHead['base']) => void;
 declare const useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
 declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
 
-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<T>(options?: CreateHeadOptions<T>): VueHeadClient;
+declare function createHead(options?: CreateHeadOptions): VueHeadClient;
 
 declare const HeadVuePlugin: Plugin;
 
-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 };
+export { Arrayable, Base, BodyAttributes, HeadVuePlugin, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, VueHeadClient, VueReactiveInputPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

package/dist/index.mjs

@@ -1,10 +1,8 @@
 import { resolveUnref } from '@vueuse/shared';
-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';
+import { unref, version, getCurrentInstance, ref, watchEffect, watch, nextTick, onBeforeUnmount, inject } from 'vue';
+import { defineHeadPlugin, getActiveHead, createHead as createHead$1, HydratesStatePlugin } from 'unhead';
+import { debouncedRenderDOMHead } from '@unhead/dom';
+export * from '@unhead/dom';
 
 function resolveUnrefHeadInput(ref) {
   const root = resolveUnref(ref);
@@ -23,18 +21,23 @@ function resolveUnrefHeadInput(ref) {
   }
   return root;
 }
+function asArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
 
-const VueReactiveInputPlugin = defineHeadPlugin({
-  hooks: {
-    "entries:resolve": function(ctx) {
-      for (const entry of ctx.entries)
-        entry.input = resolveUnrefHeadInput(entry.input);
+const VueReactiveInputPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "entries:resolve": function(ctx) {
+        for (const entry of ctx.entries)
+          entry.input = resolveUnrefHeadInput(entry.input);
+      }
     }
-  }
-});
+  });
+};
 
 const Vue3 = version.startsWith("3");
-const Vue2 = version.startsWith("2.");
+version.startsWith("2.");
 const IsClient = typeof window !== "undefined";
 
 function useHead$2(input, options = {}) {
@@ -91,63 +94,6 @@ const useBase = (base) => useHead({ base });
 const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
 const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
 
-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();
@@ -156,8 +102,8 @@ function createHead(options = {}) {
   const head = createHead$1({
     ...options,
     plugins: [
-      HydratesStatePlugin,
-      VueReactiveInputPlugin,
+      HydratesStatePlugin(),
+      VueReactiveInputPlugin(),
       ...options?.plugins || []
     ]
   });
@@ -209,4 +155,4 @@ const HeadVuePlugin = function(_Vue) {
   });
 };
 
-export { Head, HeadVuePlugin, VueReactiveInputPlugin, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { HeadVuePlugin, VueReactiveInputPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

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

@@ -1,3 +1,3 @@
-import type { HeadEntryOptions } from 'unhead';
+import type { HeadEntryOptions } from '@unhead/schema';
 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 { HeadEntryOptions } from '@unhead/schema';
 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 { 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,5 +1,5 @@
 import { getCurrentInstance, nextTick, onBeforeUnmount, ref, watch, watchEffect } from "vue";
-import { debouncedRenderDOMHead } from "unhead/client";
+import { debouncedRenderDOMHead } from "@unhead/dom";
 import { injectHead, resolveUnrefHeadInput } from "../../index";
 export function useHead(input, options = {}) {
   const head = injectHead();

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

@@ -1,3 +1,3 @@
-import type { HeadEntryOptions } from 'unhead';
+import type { HeadEntryOptions } from '@unhead/schema';
 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.7",
+  "version": "0.1.1",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -31,16 +31,17 @@
     "vue": ">=2.7 || >=3"
   },
   "dependencies": {
-    "@unhead/schema": "0.0.7",
+    "@unhead/dom": "0.1.1",
+    "@unhead/schema": "0.1.1",
     "@vueuse/shared": "latest",
-    "@zhead/schema": "^1.0.0-beta.4",
-    "unhead": "0.0.7"
+    "unhead": "0.1.1"
   },
   "devDependencies": {
     "vue": "latest"
   },
   "scripts": {
     "build": "unbuild .",
-    "stub": "unbuild . --stub"
+    "stub": "unbuild . --stub",
+    "export:sizes": "npx export-size . -r"
   }
 }

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

@@ -1,14 +0,0 @@
-import type { Arrayable, HeadEntryOptions } from 'unhead';
-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;
-export declare const useLink: (link: Arrayable<Link>) => any;
-export declare const useScript: (script: Arrayable<Script>) => any;
-export declare const useStyle: (style: Arrayable<Style>) => any;
-export declare const useNoscript: (noscript: Arrayable<Noscript>) => any;
-export declare const useBase: (base: ReactiveHead['base']) => any;
-export declare const useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => any;
-export declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => any;

package/dist/runtime/alias/composables.mjs

@@ -1,14 +0,0 @@
-import { asArray } from "unhead";
-import { useHead as _useHead, useServerHead as _useServerHead } from "#head-runtime";
-export const useServerHead = (input, options = {}) => _useServerHead(input, options);
-export const useHead = (input, options = {}) => _useHead(input, options);
-export const useTitle = (title) => useHead({ title });
-export const useTitleTemplate = (titleTemplate) => useHead({ titleTemplate });
-export const useMeta = (meta) => useHead({ meta: asArray(meta) });
-export const useLink = (link) => useHead({ link: asArray(link) });
-export const useScript = (script) => useHead({ script: asArray(script) });
-export const useStyle = (style) => useHead({ style: asArray(style) });
-export const useNoscript = (noscript) => useHead({ noscript: asArray(noscript) });
-export const useBase = (base) => useHead({ base });
-export const useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
-export const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });

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

@@ -1 +0,0 @@
-export * from './composables';

package/dist/runtime/alias/index.mjs

@@ -1 +0,0 @@
-export * from "./composables.mjs";