@unhead/vue 0.0.1 → 0.0.4

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 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, HtmlAttributes as HtmlAttributes$1, BodyAttributes as BodyAttributes$1, MergeHead } 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 { DataKeys, DefinedValueOrEmptyObject } from '@zhead/schema';
 import * as unhead from 'unhead';
 import { HeadEntryOptions, Arrayable, HeadClient } from 'unhead';
 import { InjectionKey, Plugin } from 'vue';
@@ -9,6 +10,22 @@ declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
     [key in keyof T]?: MaybeComputedRef<T[key]>;
 };
 
+interface HtmlAttr extends Omit<BaseHtmlAttr, 'class'> {
+    /**
+     * The class global attribute is a space-separated list of the case-sensitive classes of the element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
+     */
+    class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
+}
+interface BodyAttr extends Omit<BaseBodyAttr, 'class'> {
+    /**
+     * The class global attribute is a space-separated list of the case-sensitive classes of the element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
+     */
+    class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
+}
 declare type Title = MaybeComputedRef<Title$1>;
 declare type TitleTemplate = MaybeRef<TitleTemplate$1> | ((title?: string) => TitleTemplate$1);
 declare type Base<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<Base$1<E>>>;
@@ -17,8 +34,8 @@ declare type Meta<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Me
 declare type Style<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Style$1<E>>;
 declare type Script<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Script$1<E>>;
 declare type Noscript<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Noscript$1<E>>;
-declare type HtmlAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<HtmlAttributes$1<E>>>;
-declare type BodyAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<BodyAttributes$1<E>>>;
+declare type HtmlAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<HtmlAttr & DataKeys & SchemaAugmentations['htmlAttrs'] & DefinedValueOrEmptyObject<E>>>;
+declare type BodyAttributes<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<BodyAttr & DataKeys & SchemaAugmentations['bodyAttrs'] & DefinedValueOrEmptyObject<E>>>;
 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.
@@ -88,7 +105,7 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
 
 declare function resolveUnrefHeadInput(ref: any): any;
 
-declare const resolveVueInputPlugin: unhead.HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+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;
@@ -109,4 +126,4 @@ declare const headSymbol: InjectionKey<VueHeadClient>;
 declare function injectHead(): VueHeadClient;
 declare function createHead(): HeadClient<ReactiveHead> & Plugin;
 
-export { Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, Vue3, VueHeadClient, createHead, headSymbol, injectHead, resolveUnrefHeadInput, resolveVueInputPlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+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 };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { resolveUnref } from '@vueuse/shared';
 import { unref, getCurrentInstance, ref, watchEffect, watch, nextTick, onBeforeUnmount, version, inject } from 'vue';
-import { defineHeadPlugin, asArray, getActiveHead, createHead as createHead$1, hydratesStatePlugin } from 'unhead';
-import { debouncedUpdateDom } from 'unhead/client';
+import { defineHeadPlugin, asArray, getActiveHead, createHead as createHead$1, HydratesStatePlugin } from 'unhead';
+import { debouncedRenderDOMHead } from 'unhead/client';
 
 function resolveUnrefHeadInput(ref) {
   const root = resolveUnref(ref);
@@ -14,21 +14,18 @@ function resolveUnrefHeadInput(ref) {
       Object.entries(root).map(([key, value]) => {
         if (key === "titleTemplate")
           return [key, unref(value)];
-        return [
-          key,
-          resolveUnrefHeadInput(value)
-        ];
+        return [key, resolveUnrefHeadInput(value)];
       })
     );
   }
   return root;
 }
 
-const resolveVueInputPlugin = defineHeadPlugin({
+const VueReactiveInputPlugin = defineHeadPlugin({
   hooks: {
-    "entries:resolve": function({ entries }) {
-      for (const k in entries)
-        entries[k].input = resolveUnrefHeadInput(entries[k].input);
+    "entries:resolve": function(ctx) {
+      for (const entry of ctx.entries)
+        entry.input = resolveUnrefHeadInput(entry.input);
     }
   }
 });
@@ -40,7 +37,7 @@ function useHead$2(input, options = {}) {
   head.push(input, options);
 }
 
-function useServerHead$2(input, options = {}) {
+function useServerHead$1(input, options = {}) {
   useHead$2(input, { ...options, mode: "server" });
 }
 
@@ -48,42 +45,34 @@ function useHead$1(input, options = {}) {
   const head = injectHead();
   const vm = getCurrentInstance();
   if (!vm) {
-    head.push(
-      input,
-      options
-    );
+    head.push(input, options);
     return;
   }
-  const sideEffects = [];
   const resolvedInput = ref({});
   watchEffect(() => {
     resolvedInput.value = resolveUnrefHeadInput(input);
   });
   let entry;
   watch(resolvedInput, (e) => {
-    if (!entry) {
+    if (!entry)
       entry = head.push(e, options);
-      sideEffects.push(() => entry?.dispose());
-    } else {
+    else
       entry.patch(e);
-      debouncedUpdateDom(nextTick, head);
-    }
+    debouncedRenderDOMHead(nextTick, head);
   }, { immediate: true });
   onBeforeUnmount(() => {
-    sideEffects.forEach((fn) => fn());
-    if (entry)
-      entry.dispose();
-    debouncedUpdateDom(nextTick, head);
+    entry?.dispose();
+    debouncedRenderDOMHead(nextTick, head);
   });
 }
 
-function useServerHead$1(input, options = {}) {
-}
-
 function useServerHead(input, options = {}) {
-  return IS_CLIENT ? useServerHead$1(input, options) : useServerHead$2(input, options);
+  if (!IS_CLIENT)
+    useServerHead$1(input, options);
 }
 function useHead(input, options = {}) {
+  if (options.mode === "server" && IS_CLIENT || options.mode === "client" && !IS_CLIENT)
+    return;
   return IS_CLIENT ? useHead$1(input, options) : useHead$2(input, options);
 }
 const useTitle = (title) => useHead({ title });
@@ -105,8 +94,8 @@ function injectHead() {
 function createHead() {
   const head = createHead$1({
     plugins: [
-      hydratesStatePlugin,
-      resolveVueInputPlugin
+      HydratesStatePlugin,
+      VueReactiveInputPlugin
     ]
   });
   const vuePlugin = {
@@ -131,4 +120,4 @@ function createHead() {
   return { ...vuePlugin, ...head };
 }
 
-export { Vue3, createHead, headSymbol, injectHead, resolveUnrefHeadInput, resolveVueInputPlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { Vue3, VueReactiveInputPlugin, createHead, headSymbol, injectHead, resolveUnrefHeadInput, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

package/dist/runtimes/client/useHead.mjs

@@ -1,35 +1,27 @@
 import { getCurrentInstance, nextTick, onBeforeUnmount, ref, watch, watchEffect } from "vue";
-import { debouncedUpdateDom } from "unhead/client";
+import { debouncedRenderDOMHead } from "unhead/client";
 import { injectHead, resolveUnrefHeadInput } from "../../index";
 export function useHead(input, options = {}) {
   const head = injectHead();
   const vm = getCurrentInstance();
   if (!vm) {
-    head.push(
-      input,
-      options
-    );
+    head.push(input, options);
     return;
   }
-  const sideEffects = [];
   const resolvedInput = ref({});
   watchEffect(() => {
     resolvedInput.value = resolveUnrefHeadInput(input);
   });
   let entry;
   watch(resolvedInput, (e) => {
-    if (!entry) {
+    if (!entry)
       entry = head.push(e, options);
-      sideEffects.push(() => entry?.dispose());
-    } else {
+    else
       entry.patch(e);
-      debouncedUpdateDom(nextTick, head);
-    }
+    debouncedRenderDOMHead(nextTick, head);
   }, { immediate: true });
   onBeforeUnmount(() => {
-    sideEffects.forEach((fn) => fn());
-    if (entry)
-      entry.dispose();
-    debouncedUpdateDom(nextTick, head);
+    entry?.dispose();
+    debouncedRenderDOMHead(nextTick, head);
   });
 }

package/package.json

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