From 30674854177b150008320de7aaf0de0eb9a1fdb7 Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Thu, 16 Nov 2023 23:54:04 +0800
Subject: [PATCH] refactor(storage): use unstorage

---
 src/app/content/index.tsx     |  4 ++--
 src/domain/MessageList.ts     |  2 +-
 src/domain/externs/Storage.ts | 10 ++++++++--
 src/impl/Storage.ts           | 26 ++++++++++++++++++++------
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx
index b9c942e..47f8c76 100644
--- a/src/app/content/index.tsx
+++ b/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()]
     })
 
diff --git a/src/domain/MessageList.ts b/src/domain/MessageList.ts
index 3655151..8d440b0 100644
--- a/src/domain/MessageList.ts
+++ b/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',
diff --git a/src/domain/externs/Storage.ts b/src/domain/externs/Storage.ts
index 705f8df..b01b219 100644
--- a/src/domain/externs/Storage.ts
+++ b/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>
-  set: <T>(key: string, value: T) => Promise<void>
+  get: <T extends StorageValue>(key: string) => Promise<T | null>
+  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')
     }
   }
 })
diff --git a/src/impl/Storage.ts b/src/impl/Storage.ts
index 8718342..b9f16b0 100644
--- a/src/impl/Storage.ts
+++ b/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({
-  name: STORAGE_NAME,
-  get,
-  set
+const browserLocalStorage = createStorage({
+  driver: webExtensionDriver({ storageArea: 'local' })
 })
 
-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
+})