diff --git a/src/createHead.ts b/src/createHead.ts index f07684e..b5169da 100644 --- a/src/createHead.ts +++ b/src/createHead.ts @@ -1,179 +1,18 @@ -import type { HeadTag, MaybeComputedRef, MergeHead, ReactiveHead, VueHeadClient } from '@unhead/vue' -import { createHead as createUnhead, useHead } from '@unhead/vue' -import { debouncedRenderDOMHead, renderDOMHead } from '@unhead/dom' +import type { MergeHead } from '@unhead/vue' +import { createHead as createUnhead } from '@unhead/vue' import type { - ActiveHeadEntry, CreateHeadOptions, Head, - HeadEntry, - HeadEntryOptions, - HeadPlugin, - Unhead, } from '@unhead/schema' -import type { App } from 'vue' -import { version } from 'vue' +import type { VueHeadClientPollyFill } from '@unhead/vue/polyfill' +import { polyfillAsVueUseHead } from '@unhead/vue/polyfill' -export type HookBeforeDomUpdate = (() => Promise | void | boolean) -export type HookTagsResolved = ((tags: HeadTag[]) => Promise | void) -export type HookEntriesResolved = ((entries: HeadEntry[]) => Promise | void) - -export interface LegacyHeadOptions { - /** - * @deprecated - */ - resolved?: boolean - /** - * @deprecated - */ - raw?: boolean -} - -export interface HeadClient { - install: (app: App) => void - - resolveTags: () => Promise - - use: (plugin: HeadPlugin) => void - - headEntries: () => HeadEntry>>[] - push: (entry: MaybeComputedRef>, options?: HeadEntryOptions) => ActiveHeadEntry>> - /** - * @deprecated use `push` - */ - addEntry: (entry: MaybeComputedRef>, options?: HeadEntryOptions & LegacyHeadOptions) => ActiveHeadEntry>> - /** - * @deprecated use `push` - */ - addReactiveEntry: (objs: MaybeComputedRef>, options?: HeadEntryOptions & LegacyHeadOptions) => () => void - /** - * @deprecated use `@unhead/dom` - */ - updateDOM: (document?: Document, force?: boolean) => void - - internalHooks: Unhead['hooks'] - - /** - * @deprecated - */ - hooks: - /** - * Array of user provided functions to hook into before the DOM is updated. - * - * When returning false from this function, it will block DOM updates, this can be useful when stopping dom updates - * between page transitions. - * - * You are able to modify the payload of hook using this. - */ - Record<'before:dom', HookBeforeDomUpdate[]> & - Record<'resolved:entries', HookEntriesResolved[]> & - /** - * Array of user provided functions to hook into after the tags have been resolved (deduped and sorted). - */ - Record<'resolved:tags', HookTagsResolved[]> - - /** - * Backwards compatibility function to fetch the headTags. - * - * This function forces reactivity resolving and is not performant. - * - * @deprecated Use `unhead.resolveTags()`. - */ - headTags: () => Promise - /** - * Backwards compatibility function to add a head obj. - * - * Note: This will not support reactivity. Use `addReactiveEntry` instead. - * - * @deprecated Use addEntry - */ - addHeadObjs: (entry: MaybeComputedRef>, options?: HeadEntryOptions) => ActiveHeadEntry>> - /** - * @deprecated Does not do anything - */ - removeHeadObjs: (entry: MaybeComputedRef>) => void - /** - * Access the underlying unhead instance. - */ - unhead: VueHeadClient -} - -export function createHead(initHeadObject?: Head, options?: CreateHeadOptions): HeadClient { +export function createHead(initHeadObject?: Head, options?: CreateHeadOptions): VueHeadClientPollyFill { const unhead = createUnhead(options || {}) - // make migration easier - const legacyHead: HeadClient = { - unhead, - - install(app) { - // vue 3 only - if (version.startsWith('3')) { - app.config.globalProperties.$head = unhead - app.provide('usehead', unhead) - } - }, - use(plugin) { - unhead.use(plugin) - }, - resolveTags() { - return unhead.resolveTags() - }, - headEntries() { - return unhead.headEntries() - }, - headTags() { - return unhead.resolveTags() - }, - push(input, options) { - return unhead.push(input, options) - }, - addEntry(input, options) { - return unhead.push(input, options) - }, - addHeadObjs(input, options) { - return unhead.push(input, options) - }, - addReactiveEntry(input, options) { - const api = useHead(input, options) - if (typeof api !== 'undefined') - return api.dispose - - return () => {} - }, - removeHeadObjs() { - // not able to handle this - }, - updateDOM(document, force) { - if (force) - renderDOMHead(unhead, { document }) - else - debouncedRenderDOMHead(unhead, { delayFn: fn => setTimeout(() => fn(), 50), document }) - }, - - internalHooks: unhead.hooks, - hooks: { - 'before:dom': [], - 'resolved:tags': [], - 'resolved:entries': [], - }, - } - - // we need to load a bunch of the pre v1 @vueuse/head functions on to the unhead instance as this is what is returned - // from the injection - - // @ts-expect-error runtime hack to fix legacy implementations - unhead.addHeadObjs = legacyHead.addHeadObjs - // @ts-expect-error runtime hack to fix legacy implementations - unhead.updateDOM = legacyHead.updateDOM - - unhead.hooks.hook('dom:beforeRender', (ctx) => { - for (const hook of legacyHead.hooks['before:dom']) { - if (hook() === false) - ctx.shouldRender = false - } - }) - + const legacyHead = polyfillAsVueUseHead(unhead) if (initHeadObject) - legacyHead.addHeadObjs(initHeadObject) + legacyHead.push(initHeadObject) return legacyHead } diff --git a/src/env.ts b/src/env.ts deleted file mode 100644 index cf6ae16..0000000 --- a/src/env.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { version } from 'vue' - -export const Vue2 = version.startsWith('2.') - -export const IsBrowser = typeof window !== 'undefined'