elk/composables/idb/index.ts

import type { MaybeComputedRef, RemovableRef } from '@vueuse/core'
import type { Ref } from 'vue'
import { del, get, set, update } from 'idb-keyval'
import type { UseIDBOptions } from '@vueuse/integrations/useIDBKeyval'

export async function useAsyncIDBKeyval<T>(
  key: IDBValidKey,
  initialValue: MaybeComputedRef<T>,
  options: UseIDBOptions = {},
): Promise<RemovableRef<T>> {
  const {
    flush = 'pre',
    deep = true,
    shallow,
    onError = (e: unknown) => {
      console.error(e)
    },
  } = options

  const data = (shallow ? shallowRef : ref)(initialValue) as Ref<T>

  const rawInit: T = resolveUnref(initialValue)

  async function read() {
    try {
      const rawValue = await get<T>(key)
      if (rawValue === undefined) {
        if (rawInit !== undefined && rawInit !== null)
          await set(key, rawInit)
      }
      else {
        data.value = rawValue
      }
    }
    catch (e) {
      onError(e)
    }
  }

  await read()

  async function write() {
    try {
      if (data.value == null) {
        await del(key)
      }
      else {
        // IndexedDB does not support saving proxies, convert from proxy before saving
        if (Array.isArray(data.value))
          await update(key, () => (JSON.parse(JSON.stringify(data.value))))
        else if (typeof data.value === 'object')
          await update(key, () => ({ ...data.value }))
        else
          await update(key, () => (data.value))
      }
    }
    catch (e) {
      onError(e)
    }
  }

  watch(data, () => write(), { flush, deep })

  return data as RemovableRef<T>
}