vinicius73 / vue-page-title

import type { ComputedRef, ComputedGetter, WatchSource } from 'vue';

import type { SetTitleFn } from './types';

import { inject, computed, ref, watch } from 'vue';

import { PAGE_TITLE, SET_PAGE_TITLE } from './injection-keys';

export type initialValue =

  | string

  | ComputedRef<string>

  | ComputedGetter<string>

  | WatchSource<string>;

/**

 * Get current title or update it.

 *

 * ## Define initial title

 *

 * ```ts

 * const { title } = useTitle('initial title`)

 * ```

 *

 * ## React from ref state

 *

 * ```ts

 * const name = ref('initial name')

 * const { title } = useTitle(name)

 * ```

 *

 * ## Use like a watch source argument

 *

 * ```ts

 * const product = ref({ name: 'One Piece 1017' })

 * const { title } = useTitle(() => product.name)

 * ```

 *

 * ## Pass a computed as argument

 *

 * ```ts

 * const product = ref({ name: 'One Piece 1017' })

 * const name = computed(() => product.name)

 * const { title } = useTitle(name)

 * ```

 *

 * ## Use `setTitle` to dynamically change the title

 *

 * ```ts

 * const product = ref({ name: 'One Piece 1017' })

 * const { setTitle } = useTitle()

 *

 * watchEffect(() => {

 *   setTitle(product.name)

 * })

 * ```

 */

const useTitle = (

  initial?: initialValue

): { title: ComputedRef<string>; setTitle: SetTitleFn } => {

  const title = inject(PAGE_TITLE, ref<string>(''));

  const setTitle = inject(SET_PAGE_TITLE, () => {});

  if (typeof initial === 'string') {

    setTitle(initial);

  } else if (initial != null) {

    watch(initial, setTitle, { immediate: true });

  }

  return {

    title: computed(() => title?.value),

    setTitle,

  };

};

export { useTitle };