feat(useIdbKeyval): ability to wait for IDB writes (#3338)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/integrations/useIDBKeyval/index.md

@@ -30,6 +30,10 @@ const flag = useIDBKeyval('my-flag', true) // returns Ref<boolean>
 // bind number
 const count = useIDBKeyval('my-count', 0) // returns Ref<number>
 
+// awaiting IDB transaction
+await count.set(10)
+console.log('IDB transaction finished!')
+
 // delete data from idb storage
 storedObject.value = null
 ```

packages/integrations/useIDBKeyval/index.ts

@@ -1,7 +1,8 @@
 import type { ConfigurableFlush, MaybeRefOrGetter, RemovableRef } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
+import { watchPausable } from '@vueuse/core'
 import type { Ref } from 'vue-demi'
-import { ref, shallowRef, watch } from 'vue-demi'
+import { ref, shallowRef } from 'vue-demi'
 import { del, get, set, update } from 'idb-keyval'
 
 export interface UseIDBOptions extends ConfigurableFlush {
@@ -31,7 +32,12 @@ export interface UseIDBOptions extends ConfigurableFlush {
    * @default true
    */
   writeDefaults?: boolean
+}
 
+export interface UseIDBKeyvalReturn<T> {
+  data: RemovableRef<T>
+  isFinished: Ref<boolean>
+  set(value: T): Promise<void>
 }
 
 /**
@@ -44,7 +50,7 @@ export function useIDBKeyval<T>(
   key: IDBValidKey,
   initialValue: MaybeRefOrGetter<T>,
   options: UseIDBOptions = {},
-): { data: RemovableRef<T>; isFinished: Ref<boolean> } {
+): UseIDBKeyvalReturn<T> {
   const {
     flush = 'pre',
     deep = true,
@@ -99,7 +105,21 @@ export function useIDBKeyval<T>(
     }
   }
 
-  watch(data, () => write(), { flush, deep })
+  const {
+    pause: pauseWatch,
+    resume: resumeWatch,
+  } = watchPausable(data, () => write(), { flush, deep })
 
-  return { isFinished, data: data as RemovableRef<T> }
+  async function setData(value: T): Promise<void> {
+    pauseWatch()
+    data.value = value
+    await write()
+    resumeWatch()
+  }
+
+  return {
+    set: setData,
+    isFinished,
+    data: data as RemovableRef<T>,
+  }
 }