Merge branch 'feature/dexie'

composables/viewer/useBuildLibrary.ts

@@ -14,52 +14,41 @@ import {
   useProjectRefs,
   useProjectStore,
 } from '~/composables/store/project';
-import { useIndexedDB } from '~/composables/viewer/useIndexedDB';
+import { useDexie } from '~/composables/viewer/useDexie';
 
 type UpdateBuildOptions = Partial<Omit<SavedBuildData, 'id'>> & {
   $choices?: boolean;
   $notes?: boolean;
 };
 
 export function useBuildLibrary() {
-  const db = useIndexedDB()!;
+  const db = useDexie()!;
 
   const { setSelected } = useProjectStore();
   const $store = useProjectRefs();
 
   const loadBuilds = async (): Promise<SavedBuildData[]> => {
-    return db.transaction('builds', 'readonly', async (tx) => {
-      const store = tx.objectStore('builds');
-      return store.getAll();
-    });
+    return db.builds.toArray();
   };
 
   const saveBuild = async (buildName: string): Promise<SavedBuildData> => {
-    return db.transaction('builds', 'readwrite', async (tx) => {
-      const table = tx.objectStore('builds');
-      const today = new Date();
-      const entry: Omit<SavedBuildData, 'id'> = {
-        name: buildName,
-        createdAt: today,
-        updatedAt: today,
-        project: getProjectInfo($store.store.value),
-        groups: getSelectedItems(
-          $store.selected.value,
-          $store.backpack.value,
-          $store.getObject.value,
-          $store.getObjectRow.value,
-          $store.getRow.value,
-        ),
-        notes: clone($store.buildNotes.value),
-      };
-      const entryId = await table.add(entry);
-      const savedEntry: SavedBuildData = {
-        ...entry,
-        id: entryId,
-      };
-
-      return savedEntry;
-    });
+    const today = new Date();
+    const entry: Omit<SavedBuildData, 'id'> = {
+      name: buildName,
+      createdAt: today,
+      updatedAt: today,
+      project: getProjectInfo($store.store.value),
+      groups: getSelectedItems(
+        $store.selected.value,
+        $store.backpack.value,
+        $store.getObject.value,
+        $store.getObjectRow.value,
+        $store.getRow.value,
+      ),
+      notes: clone($store.buildNotes.value),
+    };
+    const entryId = await db.builds.add(entry);
+    return R.assoc('id', entryId, entry);
   };
 
   const updateBuild = async (
@@ -71,41 +60,34 @@ export function useBuildLibrary() {
       return build;
     }
 
-    return db.transaction('builds', 'readwrite', async (tx) => {
-      const table = tx.objectStore('builds');
-
-      const entry: SavedBuildData = clone(build);
-      entry.updatedAt = new Date();
+    const entry: SavedBuildData = clone(build);
+    entry.updatedAt = new Date();
 
-      console.log('props', rest);
-      if (isNotEmpty(rest)) {
-        // Copy the updated properties into the object
-        Object.assign(entry, rest);
-      }
-      if ($notes) {
-        entry.notes = clone($store.buildNotes.value);
-      }
-      if ($choices) {
-        entry.project = getProjectInfo($store.store.value);
-        entry.groups = getSelectedItems(
-          $store.selected.value,
-          $store.backpack.value,
-          $store.getObject.value,
-          $store.getObjectRow.value,
-          $store.getRow.value,
-        );
-      }
-      await table.put(entry);
+    console.log('props', rest);
+    if (isNotEmpty(rest)) {
+      // Copy the updated properties into the object
+      Object.assign(entry, rest);
+    }
+    if ($notes) {
+      entry.notes = clone($store.buildNotes.value);
+    }
+    if ($choices) {
+      entry.project = getProjectInfo($store.store.value);
+      entry.groups = getSelectedItems(
+        $store.selected.value,
+        $store.backpack.value,
+        $store.getObject.value,
+        $store.getObjectRow.value,
+        $store.getRow.value,
+      );
+    }
+    await db.builds.put(entry);
 
-      return entry;
-    });
+    return entry;
   };
 
   const deleteBuild = async (build: SavedBuildData) => {
-    await db.transaction('builds', 'readwrite', async (tx) => {
-      const store = tx.objectStore('builds');
-      await store.delete(build.id);
-    });
+    await db.builds.delete(build.id);
   };
 
   const loadBuild = (build: SavedBuildData) => {

composables/viewer/useDexie.ts

@@ -0,0 +1,24 @@
+import Dexie, { type EntityTable } from 'dexie';
+
+import type { SavedBuildData } from '~/components/viewer/utils/types';
+
+export const DexieProvider = Symbol('DexieProvider') as InjectionKey<AppDb>;
+
+export class AppDb extends Dexie {
+  builds!: EntityTable<SavedBuildData, 'id'>;
+
+  constructor() {
+    super('cyoa-editor');
+    this.version(1).stores({
+      builds: '++id',
+    });
+  }
+}
+
+export function createDexie(): AppDb {
+  return new AppDb();
+}
+
+export function useDexie(): AppDb {
+  return inject(DexieProvider)!;
+}

package.json

@@ -45,6 +45,7 @@
     "@vueuse/nuxt": "^11.0.3",
     "bootstrap": "5.3.*",
     "canvas-size": "^2.0.0",
+    "dexie": "^4.0.8",
     "dom-to-svg": "^0.12.2",
     "handlebars": "^4.7.8",
     "perfect-debounce": "^1.0.0",

plugins/dexie.client.ts

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app/nuxt';
+import { DexieProvider, createDexie } from '~/composables/viewer/useDexie';
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  nuxtApp.vueApp.provide(DexieProvider, createDexie());
+});

yarn.lock

@@ -5137,6 +5137,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dexie@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "dexie@npm:4.0.8"
+  checksum: 156e0809d5102ec0522cdee473c842e2d8c5a9b91d92792c8a17829953317f11370b34bc2418a66c5c4dec7f99306a6ae8a53d02f530af85f98d8803965bc6bb
+  languageName: node
+  linkType: hard
+
 "diff@npm:^5.2.0":
   version: 5.2.0
   resolution: "diff@npm:5.2.0"
@@ -8920,6 +8927,7 @@ __metadata:
     "@vueuse/nuxt": ^11.0.3
     bootstrap: 5.3.*
     canvas-size: ^2.0.0
+    dexie: ^4.0.8
     dom-to-svg: ^0.12.2
     eslint: ^8.57.0
     eslint-config-prettier: ^8.10.0