feat(store): store data in indexedDB

Author: VChet

package.json

@@ -25,6 +25,7 @@
     "@vueuse/integrations": "^13.9.0",
     "dayjs": "^1.11.18",
     "http-status-codes": "^2.3.0",
+    "idb-keyval": "^6.2.2",
     "semver": "^7.7.2",
     "sortablejs": "^1.15.6",
     "vite": "^7.1.6",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { createGlobalState, useLocalStorage, whenever } from "@vueuse/core";
+import { useIDBKeyval } from "@vueuse/integrations/useIDBKeyval";
 import dayjs from "dayjs";
 import { fetchRepositoryEvents } from "@/service/octokit";
 import { useSettingsStore } from "@/store/settings";
@@ -46,7 +47,8 @@ const DEFAULT_STORE: EventsStore = {
 };
 
 export const useEventsStore = createGlobalState(() => {
-  const storage = useLocalStorage<EventsStore>("events", DEFAULT_STORE, { mergeDefaults: true });
+  const local = useLocalStorage("events", DEFAULT_STORE);
+  const { data: storage } = useIDBKeyval("events", local.value ?? DEFAULT_STORE, { deep: true, writeDefaults: true });
   const events = computed<FeedEvent[]>({
     get: () => storage.value.data,
     set: (value) => { storage.value.data = value; }

src/store/events.ts

@@ -1,10 +1,12 @@
 import { createGlobalState, useLocalStorage } from "@vueuse/core";
+import { useIDBKeyval } from "@vueuse/integrations/useIDBKeyval";
 
 type ExcludedDependenciesStore = Set<string>;
 const DEFAULT_STORE: ExcludedDependenciesStore = new Set();
 
 export const useExcludedDependenciesStore = createGlobalState(() => {
-  const excludedDependencies = useLocalStorage("excludedDependencies", DEFAULT_STORE, { mergeDefaults: true });
+  const local = useLocalStorage("excludedDependencies", DEFAULT_STORE);
+  const { data: excludedDependencies } = useIDBKeyval("excludedDependencies", local.value ?? DEFAULT_STORE, { deep: true, writeDefaults: true });
 
   function hideDependency(dep: string): void {
     excludedDependencies.value.add(dep);

src/store/excluded-dependencies.ts

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { createGlobalState, useLocalStorage, whenever } from "@vueuse/core";
+import { useIDBKeyval } from "@vueuse/integrations/useIDBKeyval";
 import dayjs from "dayjs";
 import type { PackageJson } from "type-fest";
 import { useDependencyTable } from "@/composable/useDependencyTable";
@@ -20,7 +21,8 @@ async function fetchLatestVersion(dependency: string): Promise<string | null> {
 };
 
 export const useLatestVersionsStore = createGlobalState(() => {
-  const storage = useLocalStorage<LatestVersionsStore>("latestVersions", DEFAULT_STORE, { mergeDefaults: true });
+  const local = useLocalStorage("latestVersions", DEFAULT_STORE);
+  const { data: storage } = useIDBKeyval("latestVersions", local.value ?? DEFAULT_STORE, { deep: true, writeDefaults: true });
   const latestVersions = computed({
     get: () => storage.value.data,
     set: (value) => { storage.value.data = value; }

src/store/latest-versions.ts

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { createGlobalState, useLocalStorage, whenever } from "@vueuse/core";
+import { useIDBKeyval } from "@vueuse/integrations/useIDBKeyval";
 import dayjs from "dayjs";
 import { isExportedRepository, type ExportedRepository } from "@/helpers/export";
 import { fetchRepo, fetchRepositoryFiles, fetchRepositoryPackages, fetchRepositoryWorkflows } from "@/service/octokit";
@@ -30,7 +31,8 @@ async function parsePackageManager(fullName: Repository["full_name"]): Promise<"
 }
 
 export const useRepositoriesStore = createGlobalState(() => {
-  const storage = useLocalStorage<RepositoriesStore>("repositories", DEFAULT_STORE, { mergeDefaults: true });
+  const local = useLocalStorage("repositories", DEFAULT_STORE);
+  const { data: storage } = useIDBKeyval<RepositoriesStore>("repositories", local.value ?? DEFAULT_STORE, { deep: true, writeDefaults: true });
   const repositories = computed({
     get: () => storage.value.data,
     set: (data) => { storage.value.data = data; }

src/store/repositories.ts

@@ -1,4 +1,5 @@
 import { createGlobalState, useLocalStorage } from "@vueuse/core";
+import { useIDBKeyval } from "@vueuse/integrations/useIDBKeyval";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 
 type Theme = "github" | "aqua" | "cream" | "mint" | "rose" | "departure";
@@ -19,7 +20,8 @@ const DEFAULT_STORE: SettingsStore = {
 };
 
 export const useSettingsStore = createGlobalState(() => {
-  const settings = useLocalStorage<SettingsStore>("settings", DEFAULT_STORE, { mergeDefaults: true });
+  const local = useLocalStorage("settings", DEFAULT_STORE);
+  const { data: settings } = useIDBKeyval<SettingsStore>("settings", local.value ?? DEFAULT_STORE, { deep: true, writeDefaults: true });
 
   const { needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
 

src/store/settings.ts

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { createGlobalState, useEventListener, useLocalStorage } from "@vueuse/core";
+import { useIDBKeyval } from "@vueuse/integrations/useIDBKeyval";
 import { useRepositoriesStore } from "./repositories";
 import type { Repository } from "@/composable/useRepo";
 
@@ -32,7 +33,8 @@ function summarize(repos: RepoSummary[]): Delta & { repos: number } {
 }
 
 export const useSummaryStorage = createGlobalState(() => {
-  const storage = useLocalStorage<SummaryStore>("summary", DEFAULT_STORE, { mergeDefaults: true });
+  const local = useLocalStorage("summary", DEFAULT_STORE);
+  const { data: storage } = useIDBKeyval<SummaryStore>("summary", local.value ?? DEFAULT_STORE, { deep: true, writeDefaults: true });
   const { repositories } = useRepositoriesStore();
 
   const currentRepos = computed<RepoSummary[]>(() =>