feat(useIDBKeyval): new integration - Idb-keyval wrapper

packages/add-ons.md

@@ -77,6 +77,7 @@ Integration wrappers for utility libraries
   - [`useDrauu`](https://vueuse.org/integrations/useDrauu/) — reactive instance for [drauu](https://github.com/antfu/drauu)
   - [`useFocusTrap`](https://vueuse.org/integrations/useFocusTrap/) — reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap)
   - [`useFuse`](https://vueuse.org/integrations/useFuse/) — easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse)
+  - [`useIDBKeyval`](https://vueuse.org/integrations/useIDBKeyval/) — wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval)
   - [`useJwt`](https://vueuse.org/integrations/useJwt/) — wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode)
   - [`useNProgress`](https://vueuse.org/integrations/useNProgress/) — reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress)
   - [`useQRCode`](https://vueuse.org/integrations/useQRCode/) — wrapper for [`qrcode`](https://github.com/soldair/node-qrcode)

packages/integrations/README.md

@@ -21,6 +21,7 @@ npm i <b>@vueuse/integrations</b>
   - [`useDrauu`](https://vueuse.org/integrations/useDrauu/) — reactive instance for [drauu](https://github.com/antfu/drauu)
   - [`useFocusTrap`](https://vueuse.org/integrations/useFocusTrap/) — reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap)
   - [`useFuse`](https://vueuse.org/integrations/useFuse/) — easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse)
+  - [`useIDBKeyval`](https://vueuse.org/integrations/useIDBKeyval/) — wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval)
   - [`useJwt`](https://vueuse.org/integrations/useJwt/) — wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode)
   - [`useNProgress`](https://vueuse.org/integrations/useNProgress/) — reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress)
   - [`useQRCode`](https://vueuse.org/integrations/useQRCode/) — wrapper for [`qrcode`](https://github.com/soldair/node-qrcode)

packages/integrations/index.ts

@@ -5,6 +5,7 @@ export * from './useCookies'
 export * from './useDrauu'
 export * from './useFocusTrap'
 export * from './useFuse'
+export * from './useIDBKeyval'
 export * from './useJwt'
 export * from './useNProgress'
 export * from './useQRCode'

packages/integrations/package.json

@@ -86,6 +86,11 @@
       "types": "./useAsyncValidator/component.d.ts",
       "require": "./useAsyncValidator/component.cjs",
       "import": "./useAsyncValidator/component.mjs"
+    },
+    "./useIDBKeyval": {
+      "types": "./useIDBKeyval.d.ts",
+      "require": "./useIDBKeyval.cjs",
+      "import": "./useIDBKeyval.mjs"
     }
   },
   "main": "./index.cjs",
@@ -151,6 +156,7 @@
     "drauu": "^0.3.2",
     "focus-trap": "^7.0.0",
     "fuse.js": "^6.6.2",
+    "idb-keyval": "^6.2.0",
     "jwt-decode": "^3.1.2",
     "nprogress": "^0.2.0",
     "qrcode": "^1.5.1",

packages/integrations/useIDBKeyval/demo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { stringify } from '@vueuse/docs-utils'
+import { useIDBKeyval } from '@vueuse/integrations'
+
+const state = useIDBKeyval('vue-use-idb-keyval', {
+  name: 'Banana',
+  color: 'Yellow',
+  size: 'Medium',
+  count: 0,
+})
+
+const text = stringify(state)
+</script>
+
+<template>
+  <div>
+    <input v-model="state.name" type="text">
+    <input v-model="state.color" type="text">
+    <input v-model="state.size" type="text">
+    <input v-model.number="state.count" type="range" min="0" step="0.01" max="1000">
+
+    <pre lang="json">{{ text }}</pre>
+  </div>
+</template>

packages/integrations/useIDBKeyval/index.md

@@ -0,0 +1,35 @@
+---
+category: '@Integrations'
+---
+
+# useIDBKeyval
+
+Wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval).
+
+
+## Install idb-keyval as a peer dependency
+
+```bash
+npm install idb-keyval
+```
+
+## Usage
+
+```ts
+import { useIDBKeyval } from '@vueuse/integrations'
+
+// bind object
+const storedObject = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })
+
+// update object
+storedObject.value.hello = 'hola'
+
+// bind boolean
+const flag = useIDBKeyval('my-flag', true) // returns Ref<boolean>
+
+// bind number
+const count = useIDBKeyval('my-count', 0) // returns Ref<number>
+
+// delete data from idb storage
+storedObject.value = null
+```

packages/integrations/useIDBKeyval/index.ts

@@ -0,0 +1,87 @@
+import type { ConfigurableFlush, MaybeComputedRef, RemovableRef } from '@vueuse/shared'
+import { resolveUnref } from '@vueuse/shared'
+import type { Ref } from 'vue-demi'
+import { ref, shallowRef, watch } from 'vue-demi'
+import { del, get, set, update } from 'idb-keyval'
+
+export interface UseIDBOptions extends ConfigurableFlush {
+  /**
+   * Watch for deep changes
+   *
+   * @default true
+   */
+  deep?: boolean
+
+  /**
+   * On error callback
+   *
+   * Default log error to `console.error`
+   */
+  onError?: (error: unknown) => void
+
+  /**
+   * Use shallow ref as reference
+   *
+   * @default false
+   */
+  shallow?: boolean
+}
+
+/**
+ *
+ * @param key
+ * @param initialValue
+ * @param options
+ */
+export function useIDBKeyval<T>(
+  key: IDBValidKey,
+  initialValue: MaybeComputedRef<T>,
+  options: UseIDBOptions = {},
+): RemovableRef<T> {
+  const {
+    flush = 'pre',
+    deep = true,
+    shallow,
+    onError = (e) => {
+      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)
+          set(key, rawInit)
+      }
+      else {
+        data.value = rawValue
+      }
+    }
+    catch (e) {
+      onError(e)
+    }
+  }
+
+  read()
+
+  async function write() {
+    try {
+      if (data.value == null)
+        await del(key)
+      else
+        await update(key, () => ({ ...data.value }))
+    }
+    catch (e) {
+      onError(e)
+    }
+  }
+
+  watch(data, () => write(), { flush, deep })
+
+  return data as RemovableRef<T>
+}