fix(useFavicon): improve type overload (#2123)

packages/core/useFavicon/index.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect } from 'vitest'
+import { computed, ref } from 'vue'
+import { useFavicon } from '.'
+
+describe('useFavicon', () => {
+  it('no param', () => {
+    const favicon = useFavicon()
+    expect(favicon.value).toEqual(null)
+    favicon.value = 'https://www.google.at/favicon.ico'
+    expect(favicon.value).toEqual('https://www.google.at/favicon.ico')
+  })
+
+  it('const', () => {
+    const favicon = useFavicon('v1')
+    expect(favicon.value).toEqual('v1')
+    favicon.value = 'v2'
+    expect(favicon.value).toEqual('v2')
+  })
+
+  it('null', () => {
+    const favicon = useFavicon(null)
+    expect(favicon.value).toEqual(null)
+    favicon.value = 'v1'
+    expect(favicon.value).toEqual('v1')
+  })
+
+  it('undefined', () => {
+    const favicon = useFavicon(undefined)
+    expect(favicon.value).toEqual(null)
+    favicon.value = 'v1'
+    expect(favicon.value).toEqual('v1')
+  })
+
+  it('ref const', () => {
+    const tagetRef = ref('v1')
+    const favicon = useFavicon(tagetRef)
+    expect(favicon.value).toEqual('v1')
+    tagetRef.value = 'v2'
+    expect(favicon.value).toEqual('v2')
+  })
+
+  it('ref null', () => {
+    const tagetRef = ref(null)
+    const favicon = useFavicon(tagetRef)
+    expect(favicon.value).toEqual(null)
+  })
+
+  it('ref undefined', () => {
+    const favicon = useFavicon(ref(undefined))
+    expect(favicon.value).toEqual(undefined)
+  })
+
+  it('computed/readonly', () => {
+    const onoff = ref(1)
+    const target = computed(() => onoff.value === 1 ? 'a.jpg' : 'b.jpg')
+    const favicon = useFavicon(target)
+    expect(favicon.value).toEqual('a.jpg')
+    onoff.value = 2
+    expect(favicon.value).toEqual('b.jpg')
+    // favicon.value = '1'
+  })
+
+  it('function/readonly', () => {
+    const target = () => 'a.jpg'
+    const favicon = useFavicon(target)
+    expect(favicon.value).toEqual('a.jpg')
+    // favicon.value = '1'
+  })
+})

packages/core/useFavicon/index.ts

@@ -1,6 +1,6 @@
 import type { MaybeComputedRef, MaybeReadonlyRef, MaybeRef } from '@vueuse/shared'
 import { isString, resolveRef } from '@vueuse/shared'
-import type { ComputedRef, Ref, WritableComputedRef } from 'vue-demi'
+import type { ComputedRef, Ref } from 'vue-demi'
 import { watch } from 'vue-demi'
 import type { ConfigurableDocument } from '../_configurable'
 import { defaultDocument } from '../_configurable'
@@ -18,11 +18,11 @@ export interface UseFaviconOptions extends ConfigurableDocument {
  * @param options
  */
 export function useFavicon(
-  newIcon?: MaybeReadonlyRef<string | null | undefined>,
+  newIcon: MaybeReadonlyRef<string | null | undefined>,
   options?: UseFaviconOptions
 ): ComputedRef<string | null | undefined>
 export function useFavicon(
-  newIcon: MaybeRef<string | null | undefined>,
+  newIcon?: MaybeRef<string | null | undefined>,
   options?: UseFaviconOptions
 ): Ref<string | null | undefined>
 export function useFavicon(
@@ -52,7 +52,7 @@ export function useFavicon(
     { immediate: true },
   )
 
-  return favicon as WritableComputedRef<string | null | undefined>
+  return favicon
 }
 
 export type UseFaviconReturn = ReturnType<typeof useFavicon>