Add IndexedDB Storage

Author: MacFJA

.docs/01-Basic.md

@@ -59,4 +59,27 @@
 <footer>
     <input name="email"><label><input type="checkbox" bind:checked={$newsLetterSubscription}> I want to receive news by email</label>
 </footer>
+```
+
+## indexedDB storage
+
+```html
+<script>
+    import { persist, indexedDBStorage } from "@macfja/svelte-persistent-store"
+    import { writable } from "svelte/store"
+
+    const layout = persist(writable('2column'), indexedDBStorage(), 'myapp-layout')
+</script>
+
+<aside>
+    <label>
+        <span>Select the application layout:</span>
+        <select bind:value={$layout}>
+            <option value="2column">2 columns (Right)</option>
+            <option value="2column-left">2 columns (Left)</option>
+            <option value="stacked">Stacked</option>
+            <option value="stacked-rev">Stacked Reversed</option>
+        </select>
+    </label>
+</aside>
 ```

.docs/05-New-Async-Storage.md

@@ -0,0 +1,28 @@
+# Create a new asynchronous storage 
+
+There is a workaround (trickery) to work with asynchronous data storage.
+(Remember, `StorageInterface.getValue` should synchronously return a value)
+
+The idea is to use the `SelfUpdateStorageInterface` interface to deliver the value when it finally arrived.
+
+The `IndexedDBStorage` use this workaround.
+
+## Quick example
+
+```js
+function myStorage<T>(): SelfUpdateStorageInterface<T> {
+    const listeners: Array<{key: string, listener: (newValue: T) => void}> = []
+    const listenerFunction = (eventKey: string, newValue: T) => {
+        listeners
+            .filter(({key}) => key === eventKey)
+            .forEach(({listener}) => listener(newValue))
+    }
+    return {
+        getValue(key: string): T | null {
+            readRealStorageWithPromise(key).then(value => listenerFunction(key, value))
+            return null // Tell the store to use current decorated store value
+        },
+        // ... addListener, removeListener, setValue, deleteValue
+    }
+}
+```

.docs/README.md

@@ -8,4 +8,5 @@
 
 ## How to
 
-- [Add new storage](04-New-Storage.md)
+- [Add new storage](04-New-Storage.md)
+- [Add an asynchronous storage](05-New-Async-Storage.md)

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add external change listener for SessionStorage and LocalStorage
 - Add documentation
+- Add IndexedDB Storage
 
 ## [1.0.2]
 

README.md

@@ -23,11 +23,12 @@ $name = 'Jeanne Doe'
 
 ## Storages
 
-There are 3 storages built-in:
+There are 4 storages built-in:
 
  - `localStorage()`, that use `window.localStorage` to save values 
  - `sessionStorage()`, that use `window.sessionStorage` to save values 
  - `cookieStorage()`, that use `document.cookie` to save values 
+ - `indexedDBStorage()`, that use `window.indexedDB` to save values
 
 You can add more storages, you just need to implement the interface `StorageInterface`
 

package-lock.json

@@ -12,6 +12,7 @@
     "README.md"
   ],
   "dependencies": {
+    "idb-keyval": "^5.0.4",
     "js-cookies": "^1.0.4"
   },
   "devDependencies": {
@@ -62,6 +63,7 @@
     "persistent",
     "localStorage",
     "sessionStorage",
+    "indexedDB",
     "cookie",
     "svelte",
     "sveltejs"

package.json

@@ -19,7 +19,8 @@
     {
       "title": "How to",
       "pages": [
-        {"title": "Add new storage", "source": "/.docs/04-New-Storage.md"}
+        {"title": "Add new storage", "source": "/.docs/04-New-Storage.md"},
+        {"title": "Add an asynchronous storage", "source": ".docs/05-New-Async-Storage.md"}
       ]
     }
   ]

pagesconfig.json

@@ -1,3 +1,4 @@
+import { get, set, createStore, del } from "idb-keyval"
 import Cookies from "js-cookies/src/cookies.js"
 import type { Writable } from "svelte/store"
 
@@ -41,14 +42,16 @@ export interface StorageInterface<T> {
 export interface SelfUpdateStorageInterface<T> extends StorageInterface<T> {
     /**
      * Add a listener to the storage values changes
-     * @param {(key: string) => void} listener The listener callback function
+     * @param {string} key The key to listen
+     * @param {(newValue: T) => void} listener The listener callback function
      */
-    addListener(listener: (key: string) => void): void;
+    addListener(key: string, listener: (newValue: T) => void): void;
     /**
      * Remove a listener from the storage values changes
-     * @param {(key: string) => void} listener The listener callback function to remove
+     * @param {string} key The key that was listened
+     * @param {(newValue: T) => void} listener The listener callback function to remove
      */
-    removeListener(listener: (key: string) => void): void;
+    removeListener(key: string, listener: (newValue: T) => void): void;
 }
 
 /**
@@ -65,10 +68,8 @@ export function persist<T>(store: Writable<T>, storage: StorageInterface<T>, key
     }
 
     if ((storage as SelfUpdateStorageInterface<T>).addListener) {
-        (storage as SelfUpdateStorageInterface<T>).addListener(eventKey => {
-            if (eventKey === key) {
-                store.set(storage.getValue(key))
-            }
+        (storage as SelfUpdateStorageInterface<T>).addListener(key, newValue => {
+            store.set(newValue)
         })
     }
 
@@ -85,10 +86,13 @@ export function persist<T>(store: Writable<T>, storage: StorageInterface<T>, key
 }
 
 function getBrowserStorage(browserStorage: Storage, listenExternalChanges = false): SelfUpdateStorageInterface<any> {
-    const listeners: Array<(key: string) => void> = []
+    const listeners: Array<{key: string, listener: (newValue: any) => void}> = []
     const listenerFunction = (event: StorageEvent) => {
+        const eventKey = event.key
         if (event.storageArea === browserStorage) {
-            listeners.forEach(call => call(event.key))
+            listeners
+                .filter(({key}) => key === eventKey)
+                .forEach(({listener}) => listener(JSON.parse(event.newValue)))
         }
     }
     const connect = () => {
@@ -103,14 +107,14 @@ function getBrowserStorage(browserStorage: Storage, listenExternalChanges = fals
     }
 
     return {
-        addListener(listener: (key: string) => void) {
-            listeners.push(listener)
+        addListener(key: string, listener: (newValue: any) => void) {
+            listeners.push({key, listener})
             if (listeners.length === 1) {
                 connect()
             }
         },
-        removeListener(listener: (key: string) => void) {
-            const index = listeners.indexOf(listener)
+        removeListener(key: string, listener: (newValue: any) => void) {
+            const index = listeners.indexOf({key, listener})
             if (index !== -1) {
                 listeners.splice(index, 1)
             }
@@ -184,6 +188,48 @@ export function cookieStorage(): StorageInterface<any> {
     }
 }
 
+/**
+ * Storage implementation that use the browser IndexedDB
+ */
+export function indexedDBStorage<T>(): SelfUpdateStorageInterface<T> {
+    if (typeof indexedDB !== "object" || typeof window === "undefined" || typeof window?.indexedDB !== "object") {
+        console.warn("Unable to find the IndexedDB. No data will be persisted.")
+        return noopSelfUpdateStorage()
+    }
+
+    const database = createStore("svelte-persist", "persist")
+    const listeners: Array<{key: string, listener: (newValue: T) => void}> = []
+    const listenerFunction = (eventKey: string, newValue: T) => {
+        if (newValue === undefined) {
+            return
+        }
+        listeners
+            .filter(({key}) => key === eventKey)
+            .forEach(({listener}) => listener(newValue))
+    }
+    return {
+        addListener(key: string, listener: (newValue: any) => void) {
+            listeners.push({key, listener})
+        },
+        removeListener(key: string, listener: (newValue: any) => void) {
+            const index = listeners.indexOf({key, listener})
+            if (index !== -1) {
+                listeners.splice(index, 1)
+            }
+        },
+        getValue(key: string): T | null {
+            get(key, database).then(value => listenerFunction(key, value))
+            return null
+        },
+        setValue(key: string, value: T): void {
+            set(key, value, database)
+        },
+        deleteValue(key: string): void {
+            del(key, database)
+        }
+    }
+}
+
 /**
  * Storage implementation that do nothing
  */
@@ -199,4 +245,24 @@ export function noopStorage(): StorageInterface<any> {
             // Do nothing
         }
     }
+}
+
+function noopSelfUpdateStorage(): SelfUpdateStorageInterface<any> {
+    return {
+        addListener() {
+            // Do nothing
+        },
+        removeListener() {
+            // Do nothing
+        },
+        getValue(): null {
+            return null
+        },
+        deleteValue() {
+            // Do nothing
+        },
+        setValue() {
+            // Do nothing
+        }
+    }
 }

src/index.ts

@@ -6,6 +6,7 @@ fixture("Svelte Persistent Storage")
 const cookieInput = Selector('#cookieInput'),
     localInput = Selector('#localInput'),
     sessionInput = Selector('#sessionInput'),
+    indexedInput = Selector('#indexedInput'),
     documentCookie = Selector('#documentCookie'),
     reloadButton = Selector('#reloadButton'),
     clearButton = Selector('#clearButton')
@@ -17,6 +18,7 @@ test("Initial state", async t => {
         .expect(cookieInput.value).eql("John")
         .expect(localInput.value).eql('Foo')
         .expect(sessionInput.value).eql('Bar')
+        .expect(indexedInput.value).eql('Hello')
         .expect(documentCookie.textContent).contains("sps-userName=%22John%22")
 })
 
@@ -54,4 +56,15 @@ test("Session storage", async t => {
         .click(clearButton)
         .click(reloadButton)
         .expect(sessionInput.value).eql("Bar")
+})
+
+test("IndexedDB storage", async t => {
+    await t
+        .expect(indexedInput.value).eql("Hello")
+        .typeText(indexedInput, " World")
+        .click(reloadButton)
+        .expect(indexedInput.value).eql("Hello World")
+        .click(clearButton)
+        .click(reloadButton)
+        .expect(indexedInput.value).eql("Hello")
 })

tests/e2e.ts

@@ -1,10 +1,11 @@
 <script>
-    import {persist, cookieStorage, localStorage, sessionStorage} from "../../src/index"
+    import {persist, cookieStorage, localStorage, sessionStorage, indexedDBStorage} from "../../src/index"
     import { writable } from "svelte/store"
 
     let cookieExample = persist(writable('John'), cookieStorage(), 'sps-userName')
     let localExample = persist(writable('Foo'), localStorage(), 'sps-action')
     let sessionExample = persist(writable('Bar'), sessionStorage(), 'sps-call')
+    let indexedDBExample = persist(writable('Hello'), indexedDBStorage(), 'sps-data')
 
     let cookie = ''
 
@@ -31,6 +32,11 @@
     <label>Enter a word: <input id="sessionInput" bind:value={$sessionExample}></label>
 </fieldset>
 
+<fieldset>
+    <legend>IndexedDB Storage</legend>
+    <label>Enter a word: <input id="indexedInput" bind:value={$indexedDBExample}></label>
+</fieldset>
+
 <button id="reloadButton" on:click={() => window.location.reload()}>Reload the page</button>
 
-<button id="clearButton" on:click={() => {cookieExample.delete(); localExample.delete(); sessionExample.delete()}}>Clear storages</button>
+<button id="clearButton" on:click={() => {cookieExample.delete(); localExample.delete(); sessionExample.delete(); indexedDBExample.delete()}}>Clear storages</button>