refactor(storage): use unstorage

src/app/content/index.tsx

@@ -4,7 +4,7 @@ import { Remesh } from 'remesh'
 import { RemeshRoot } from 'remesh-react'
 import { RemeshLogger } from 'remesh-logger'
 import App from './App'
-import StorageImpl from '@/impl/Storage'
+import { StorageIndexDBImpl } from '@/impl/Storage'
 import '@/assets/styles/tailwind.css'
 
 export default defineContentScript({
@@ -12,7 +12,7 @@ export default defineContentScript({
   matches: ['*://*.example.com/*', '*://*.google.com/*', '*://*.v2ex.com/*'],
   async main(ctx) {
     const store = Remesh.store({
-      externs: [StorageImpl],
+      externs: [StorageIndexDBImpl],
       inspectors: [RemeshLogger()]
     })
 

src/domain/MessageList.ts

@@ -9,7 +9,7 @@ const MessageListDomain = Remesh.domain({
   name: 'MessageListDomain',
   impl: (domain) => {
     const storage = domain.getExtern(Storage)
-    const storageKey = `${storage.name}.MESSAGE_LIST`
+    const storageKey = `MESSAGE_LIST`
 
     const MessageListModule = ListModule<Message>(domain, {
       name: 'MessageListModule',

src/domain/externs/Storage.ts

@@ -1,9 +1,12 @@
 import { Remesh } from 'remesh'
 
+export type StorageValue = null | string | number | boolean | object
+
 export interface Storage {
   name: string
-  get: <T>(key: string) => Promise<T | undefined>
+  get: <T extends StorageValue>(key: string) => Promise<T | null>
-  set: <T>(key: string, value: T) => Promise<void>
+  set: <T extends StorageValue>(key: string, value: T) => Promise<void>
+  clear: () => Promise<void>
 }
 
 const StorageExtern = Remesh.extern<Storage>({
@@ -14,6 +17,9 @@ const StorageExtern = Remesh.extern<Storage>({
     },
     set: async () => {
       throw new Error('"set" not implemented')
+    },
+    clear: async () => {
+      throw new Error('"clear" not implemented')
     }
   }
 })

src/impl/Storage.ts

@@ -1,11 +1,25 @@
-import { get, set } from 'idb-keyval'
+import indexedDbDriver from 'unstorage/drivers/indexedb'
 import StorageExtern from '@/domain/externs/Storage'
 import { STORAGE_NAME } from '@/constants'
 
-const StorageImpl = StorageExtern.impl({
+const browserLocalStorage = createStorage({
-  name: STORAGE_NAME,
+  driver: webExtensionDriver({ storageArea: 'local' })
-  get,
-  set
 })
 
-export default StorageImpl
+const indexDBStorage = createStorage({
+  driver: indexedDbDriver({ base: `${STORAGE_NAME}:` })
+})
+
+export const StorageIndexDBImpl = StorageExtern.impl({
+  name: STORAGE_NAME,
+  get: indexDBStorage.getItem,
+  set: indexDBStorage.setItem,
+  clear: indexDBStorage.clear
+})
+
+export const StorageBrowserLocalImpl = StorageExtern.impl({
+  name: STORAGE_NAME,
+  get: browserLocalStorage.getItem,
+  set: browserLocalStorage.setItem,
+  clear: browserLocalStorage.clear
+})