feat(useIDBKeyval)!: return format changed, add isFinished (#2474)

Co-authored-by: james.sullivan <james.sullivan@pathai.com>

Author: jssullivan

packages/integrations/useIDBKeyval/index.md

@@ -19,7 +19,7 @@ npm install idb-keyval
 import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
 
 // bind object
-const storedObject = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })
+const { data: storedObject, isFinished } = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })
 
 // update object
 storedObject.value.hello = 'hola'

packages/integrations/useIDBKeyval/index.test.ts

@@ -6,7 +6,7 @@ const cache = {} as any
 
 vi.mock('idb-keyval', () => ({
   get: (key: string) => Promise.resolve(cache[key]),
-  set: (key: string, value: any) => new Promise((resolve, reject) => {
+  set: vi.fn((key: string, value: any) => new Promise((resolve, reject) => {
     if (value === 'error') {
       reject(new Error('set error'))
       return
@@ -15,7 +15,7 @@ vi.mock('idb-keyval', () => ({
     cache[key] = value
 
     resolve(undefined)
-  }),
+  })),
   update: (key: string, updater: () => any) => new Promise((resolve, reject) => {
     const value = updater()
     if (value === 'error') {
@@ -35,16 +35,18 @@ vi.mock('idb-keyval', () => ({
 const KEY1 = 'vue-use-idb-keyval-1'
 const KEY2 = 'vue-use-idb-keyval-2'
 const KEY3 = 'vue-use-idb-keyval-3'
+const KEY4 = 'vue-use-idb-keyval-4'
 describe('useIDBKeyval', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
     console.error = vi.fn()
   })
 
   set(KEY3, 'hello')
 
-  const data1 = useIDBKeyval(KEY1, { count: 0 })
-  const data2 = useIDBKeyval(KEY2, ['foo', 'bar'])
-  const data3 = useIDBKeyval(KEY3, 'world', { shallow: true })
+  const { data: data1 } = useIDBKeyval(KEY1, { count: 0 })
+  const { data: data2 } = useIDBKeyval(KEY2, ['foo', 'bar'])
+  const { data: data3 } = useIDBKeyval(KEY3, 'world', { shallow: true })
 
   it('get/set', async () => {
     expect(data1.value).toEqual({ count: 0 })
@@ -97,4 +99,19 @@ describe('useIDBKeyval', () => {
 
     expect(console.error).toHaveBeenCalledTimes(1)
   })
+  it ('isFinished', async () => {
+    const { isFinished } = useIDBKeyval(KEY4, 'test')
+    expect(isFinished.value).toBe(false)
+
+    await promiseTimeout(50)
+
+    expect(isFinished.value).toBe(true)
+  })
+  it('writeDefaults false', async () => {
+    useIDBKeyval(KEY4, 'test', { writeDefaults: false })
+
+    await promiseTimeout(50)
+
+    expect(set).toHaveBeenCalledTimes(0)
+  })
 })

packages/integrations/useIDBKeyval/index.ts

@@ -25,6 +25,13 @@ export interface UseIDBOptions extends ConfigurableFlush {
    * @default false
    */
   shallow?: boolean
+  /**
+   * Write the default value to the storage when it does not exist
+   *
+   * @default true
+   */
+  writeDefaults?: boolean
+
 }
 
 /**
@@ -37,16 +44,18 @@ export function useIDBKeyval<T>(
   key: IDBValidKey,
   initialValue: MaybeComputedRef<T>,
   options: UseIDBOptions = {},
-): RemovableRef<T> {
+): { data: RemovableRef<T>; isFinished: Ref<boolean> } {
   const {
     flush = 'pre',
     deep = true,
-    shallow,
+    shallow = false,
     onError = (e) => {
       console.error(e)
     },
+    writeDefaults = true,
   } = options
 
+  const isFinished = ref(false)
   const data = (shallow ? shallowRef : ref)(initialValue) as Ref<T>
 
   const rawInit: T = resolveUnref(initialValue)
@@ -55,7 +64,7 @@ export function useIDBKeyval<T>(
     try {
       const rawValue = await get<T>(key)
       if (rawValue === undefined) {
-        if (rawInit !== undefined && rawInit !== null)
+        if (rawInit !== undefined && rawInit !== null && writeDefaults)
           await set(key, rawInit)
       }
       else {
@@ -65,6 +74,7 @@ export function useIDBKeyval<T>(
     catch (e) {
       onError(e)
     }
+    isFinished.value = true
   }
 
   read()
@@ -91,5 +101,5 @@ export function useIDBKeyval<T>(
 
   watch(data, () => write(), { flush, deep })
 
-  return data as RemovableRef<T>
+  return { isFinished, data: data as RemovableRef<T> }
 }