- use sql.js instead SQLite WASM

- open DB

Author: JanisV

frontend/package-lock.json

@@ -12,7 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sqlite.org/sqlite-wasm": "^3.47.0-build1",
+    "sql.js": "^1.13.0",
     "vue": "^3.5.25"
   },
   "devDependencies": {

frontend/package.json

@@ -1,14 +1,61 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import initSqlJs from 'sql.js';
 import HelloWorld from './components/HelloWorld.vue'
 import FileUploader from './components/FileUploader.vue'
 import CoinList from "@/components/CoinList.vue";
 
 const selectedFile = ref(null)
 
-const handleFile = (file) => {
-  console.log(file);
-  selectedFile.value = file;
+const db = ref(null);
+const status = ref('');
+
+let SQL = null;
+
+onMounted(async () => {
+  try {
+    SQL = await initSqlJs({
+      locateFile: file => `https://sql.js.org/dist/${file}`
+    });
+    status.value = 'SQL.js loaded successfully';
+  } catch (err) {
+    console.error('Failed to load SQL.js:', err);
+    status.value = 'Failed to load SQL.js';
+  }
+});
+
+const handleFileUpload = async (file) => {
+  if (!file) return;
+
+  status.value = 'Loading database...';
+
+  const reader = new FileReader();
+
+  reader.onload = async (e) => {
+    try {
+      const arrayBuffer = e.target.result;
+      const uint8Array = new Uint8Array(arrayBuffer);
+
+      // Load database
+      db.value = new SQL.Database(uint8Array);
+
+      const result = db.value.exec(`SELECT COUNT(*) FROM coins`);
+      console.log(`Coins in database: ${result[0].values[0][0]}`);
+
+      status.value = `Database loaded successfully: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
+
+      selectedFile.value = file;
+    } catch (err) {
+      console.error('Error loading database:', err);
+      status.value = 'Error loading database';
+    }
+  };
+
+  reader.onerror = () => {
+    status.value = `Error reading file`;
+  };
+
+  reader.readAsArrayBuffer(file);
 };
 </script>
 
@@ -23,12 +70,13 @@ const handleFile = (file) => {
 
   <main>
     <div v-if="!selectedFile" class="select-view">
-      <FileUploader :handleFile="handleFile" />
+      <FileUploader :handleFile="handleFileUpload" />
       <p>Your file not will be uploaded to the internet. You can disable internet connection.</p>
     </div>
     <div v-else class="file-view">
       <CoinList :file_name="selectedFile.name" />
     </div>
+    <div v-if="status" class="status">{{ status }}</div>
   </main>
 </template>
 

frontend/src/App.vue

@@ -18,7 +18,7 @@ const handleFileUpload = (event) => {
   <label for="file-input" class="btn">
     Select an OpenNumismat collection file (*.db):
   </label>
-  <input id="file-input" type="file" @change="handleFileUpload">
+  <input id="file-input" type="file" @change="handleFileUpload" accept=".db" ref="fileInput">
 </template>
 
 <style scoped>

frontend/src/components/FileUploader.vue

@@ -21,7 +21,4 @@ export default defineConfig({
       'Cross-Origin-Embedder-Policy': 'require-corp',
     },
   },
-  optimizeDeps: {
-    exclude: ['@sqlite.org/sqlite-wasm'],
-  },
 })