@unhead/vue 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,112 @@
+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 * as unhead from 'unhead';
+import { HeadEntryOptions, Arrayable, HeadClient } from 'unhead';
+import { InjectionKey, Plugin } from 'vue';
+
+declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
+    [key in keyof T]?: MaybeComputedRef<T[key]>;
+};
+
+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>>>;
+declare type Link<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Link$1<E>>;
+declare type Meta<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Meta$1<E>>;
+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>>>;
+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.
+     * It only contains text; tags within the element are ignored.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
+     */
+    title?: Title;
+    /**
+     * Generate the title from a template.
+     */
+    titleTemplate?: TitleTemplate;
+    /**
+     * The <base> HTML element specifies the base URL to use for all relative URLs in a document.
+     * There can be only one <base> element in a document.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+     */
+    base?: Base<E['base']>;
+    /**
+     * The <link> HTML element specifies relationships between the current document and an external resource.
+     * This element is most commonly used to link to stylesheets, but is also used to establish site icons
+     * (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as
+     */
+    link?: MaybeComputedRef<Link<E['link']>[]>;
+    /**
+     * The <meta> element represents metadata that cannot be expressed in other HTML elements, like <link> or <script>.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
+     */
+    meta?: MaybeComputedRef<Meta<E['meta']>[]>;
+    /**
+     * The <style> HTML element contains style information for a document, or part of a document.
+     * It contains CSS, which is applied to the contents of the document containing the <style> element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
+     */
+    style?: MaybeComputedRef<Style<E['style']>[]>;
+    /**
+     * The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
+     */
+    script?: MaybeComputedRef<Script<E['script']>[]>;
+    /**
+     * The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported
+     * or if scripting is currently turned off in the browser.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
+     */
+    noscript?: MaybeComputedRef<Noscript<E['noscript']>[]>;
+    /**
+     * Attributes for the <html> HTML element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
+     */
+    htmlAttrs?: HtmlAttributes<E['htmlAttrs']>;
+    /**
+     * Attributes for the <body> HTML element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
+     */
+    bodyAttrs?: BodyAttributes<E['bodyAttrs']>;
+}
+
+declare function resolveUnrefHeadInput(ref: any): any;
+
+declare const resolveVueInputPlugin: 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 const useTitle: (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 useHtmlAttrs: (attrs: ReactiveHead['htmlAttrs']) => void;
+declare const useBodyAttrs: (attrs: ReactiveHead['bodyAttrs']) => void;
+
+declare const Vue3: boolean;
+declare type VueHeadClient = HeadClient<ReactiveHead>;
+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 };

package/dist/index.mjs

@@ -0,0 +1,134 @@
+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';
+
+function resolveUnrefHeadInput(ref) {
+  const root = resolveUnref(ref);
+  if (!ref || !root)
+    return root;
+  if (Array.isArray(root))
+    return root.map(resolveUnrefHeadInput);
+  if (typeof root === "object") {
+    return Object.fromEntries(
+      Object.entries(root).map(([key, value]) => {
+        if (key === "titleTemplate")
+          return [key, unref(value)];
+        return [
+          key,
+          resolveUnrefHeadInput(value)
+        ];
+      })
+    );
+  }
+  return root;
+}
+
+const resolveVueInputPlugin = defineHeadPlugin({
+  hooks: {
+    "entries:resolve": function({ entries }) {
+      for (const k in entries)
+        entries[k].input = resolveUnrefHeadInput(entries[k].input);
+    }
+  }
+});
+
+const IS_CLIENT = typeof window !== "undefined";
+
+function useHead$2(input, options = {}) {
+  const head = injectHead();
+  head.push(input, options);
+}
+
+function useServerHead$2(input, options = {}) {
+  useHead$2(input, { ...options, mode: "server" });
+}
+
+function useHead$1(input, options = {}) {
+  const head = injectHead();
+  const vm = getCurrentInstance();
+  if (!vm) {
+    head.push(
+      input,
+      options
+    );
+    return;
+  }
+  const sideEffects = [];
+  const resolvedInput = ref({});
+  watchEffect(() => {
+    resolvedInput.value = resolveUnrefHeadInput(input);
+  });
+  let entry;
+  watch(resolvedInput, (e) => {
+    if (!entry) {
+      entry = head.push(e, options);
+      sideEffects.push(() => entry?.dispose());
+    } else {
+      entry.patch(e);
+      debouncedUpdateDom(nextTick, head);
+    }
+  }, { immediate: true });
+  onBeforeUnmount(() => {
+    sideEffects.forEach((fn) => fn());
+    if (entry)
+      entry.dispose();
+    debouncedUpdateDom(nextTick, head);
+  });
+}
+
+function useServerHead$1(input, options = {}) {
+}
+
+function useServerHead(input, options = {}) {
+  return IS_CLIENT ? useServerHead$1(input, options) : useServerHead$2(input, options);
+}
+function useHead(input, options = {}) {
+  return IS_CLIENT ? useHead$1(input, options) : useHead$2(input, options);
+}
+const useTitle = (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 useHtmlAttrs = (attrs) => useHead({ htmlAttrs: attrs });
+const useBodyAttrs = (attrs) => useHead({ bodyAttrs: attrs });
+
+const Vue3 = version.startsWith("3");
+const headSymbol = Symbol("head");
+function injectHead() {
+  return getCurrentInstance() && inject(headSymbol) || getActiveHead();
+}
+function createHead() {
+  const head = createHead$1({
+    plugins: [
+      hydratesStatePlugin,
+      resolveVueInputPlugin
+    ]
+  });
+  const vuePlugin = {
+    install(app) {
+      if (Vue3)
+        app.config.globalProperties.$head = head;
+      app.provide(headSymbol, head);
+      app.mixin({
+        created() {
+          const instance = getCurrentInstance();
+          if (!instance)
+            return;
+          const options = instance.type;
+          if (!options || !("head" in options))
+            return;
+          const source = typeof options.head === "function" ? () => options.head() : options.head;
+          head.push(source);
+        }
+      });
+    }
+  };
+  return { ...vuePlugin, ...head };
+}
+
+export { Vue3, createHead, headSymbol, injectHead, resolveUnrefHeadInput, resolveVueInputPlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };

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

@@ -0,0 +1,14 @@
+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;
+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

@@ -0,0 +1,14 @@
+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

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

package/dist/runtime/alias/index.mjs

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

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

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

package/dist/runtime/server/index.mjs

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

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

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

package/dist/runtime/server/useHead.mjs

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

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

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

package/dist/runtime/server/useServerHead.mjs

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

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

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

package/dist/runtimes/client/index.mjs

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

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

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

package/dist/runtimes/client/useHead.mjs

@@ -0,0 +1,35 @@
+import { getCurrentInstance, nextTick, onBeforeUnmount, ref, watch, watchEffect } from "vue";
+import { debouncedUpdateDom } 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
+    );
+    return;
+  }
+  const sideEffects = [];
+  const resolvedInput = ref({});
+  watchEffect(() => {
+    resolvedInput.value = resolveUnrefHeadInput(input);
+  });
+  let entry;
+  watch(resolvedInput, (e) => {
+    if (!entry) {
+      entry = head.push(e, options);
+      sideEffects.push(() => entry?.dispose());
+    } else {
+      entry.patch(e);
+      debouncedUpdateDom(nextTick, head);
+    }
+  }, { immediate: true });
+  onBeforeUnmount(() => {
+    sideEffects.forEach((fn) => fn());
+    if (entry)
+      entry.dispose();
+    debouncedUpdateDom(nextTick, head);
+  });
+}

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

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

package/dist/runtimes/client/useServerHead.mjs

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@unhead/vue",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@7.14.0",
+  "author": "Harlan Wilton <harlan@harlanzw.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/harlan-zw",
+  "homepage": "https://github.com/harlan-zw/unhead#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/harlan-zw/unhead.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/harlan-zw/unhead/issues"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=2.7 || >=3"
+  },
+  "dependencies": {
+    "@unhead/schema": "0.0.1",
+    "@vueuse/shared": "latest",
+    "unhead": "0.0.1"
+  },
+  "devDependencies": {
+    "vue": "latest"
+  },
+  "scripts": {
+    "build": "unbuild .",
+    "stub": "unbuild . --stub"
+  }
+}