fix: resolve PWA build issues with SQL.js worker files

- Update worker format to ESM in Vite config to fix IIFE format error - Increase PWA precache file size limit to 10MB to accommodate SQL.js files - Fix type declarations for worker configuration - Add proper type annotations for Vite config - Add type declarations for absurd-sql module
1 month ago · 81d4f0c762
7 changed files with 116 additions and 23 deletions
--- a/doc/secure-storage-implementation.md
+++ b/doc/secure-storage-implementation.md
@ -53,7 +53,7 @@ async function example() {
      [did, publicKeyHex]
    );

-  } catch (error) {
+    } catch (error) {
    console.error('Database operation failed:', error);
  }
 }
@ -88,7 +88,7 @@ export class AbsurdSqlDatabaseService implements PlatformService {
  private static instance: AbsurdSqlDatabaseService | null = null;
  private db: AbsurdSqlDatabase | null = null;
  private initialized: boolean = false;
-
+      
  // Singleton pattern
  static getInstance(): AbsurdSqlDatabaseService {
    if (!AbsurdSqlDatabaseService.instance) {
@ -101,7 +101,7 @@ export class AbsurdSqlDatabaseService implements PlatformService {
  async dbQuery(sql: string, params: unknown[] = []): Promise<QueryExecResult[]> {
    await this.waitForInitialization();
    return this.queueOperation<QueryExecResult[]>("query", sql, params);
-  }
+    }

  async dbExec(sql: string, params: unknown[] = []): Promise<void> {
    await this.waitForInitialization();
@ -136,8 +136,8 @@ async function getAccount(did: string): Promise<Account | undefined> {
  }

  return account;
-}
-```
+   }
+   ```

 ## Success Criteria

--- a/package-lock.json
+++ b/package-lock.json
@ -128,7 +128,7 @@
        "tailwindcss": "^3.4.1",
        "typescript": "~5.2.2",
        "vite": "^5.2.0",
-        "vite-plugin-pwa": "^0.19.8"
+        "vite-plugin-pwa": "^1.0.0"
      }
    },
    "node_modules/@0no-co/graphql.web": {
@ -16638,6 +16638,21 @@
        "pend": "~1.2.0"
      }
    },
+    "node_modules/fdir": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fetch-blob": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
@ -28248,6 +28263,36 @@
        "node": ">= 6"
      }
    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/tmp": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
@ -29296,17 +29341,17 @@
      }
    },
    "node_modules/vite-plugin-pwa": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.19.8.tgz",
-      "integrity": "sha512-e1oK0dfhzhDhY3VBuML6c0h8Xfx6EkOVYqolj7g+u8eRfdauZe5RLteCIA/c5gH0CBQ0CNFAuv/AFTx4Z7IXTw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-1.0.0.tgz",
+      "integrity": "sha512-X77jo0AOd5OcxmWj3WnVti8n7Kw2tBgV1c8MCXFclrSlDV23ePzv2eTDIALXI2Qo6nJ5pZJeZAuX0AawvRfoeA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
+        "debug": "^4.3.6",
        "pretty-bytes": "^6.1.1",
-        "workbox-build": "^7.0.0",
-        "workbox-window": "^7.0.0"
+        "tinyglobby": "^0.2.10",
+        "workbox-build": "^7.3.0",
+        "workbox-window": "^7.3.0"
      },
      "engines": {
        "node": ">=16.0.0"
@ -29315,10 +29360,10 @@
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
-        "@vite-pwa/assets-generator": "^0.2.4",
-        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0",
-        "workbox-build": "^7.0.0",
-        "workbox-window": "^7.0.0"
+        "@vite-pwa/assets-generator": "^1.0.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
+        "workbox-build": "^7.3.0",
+        "workbox-window": "^7.3.0"
      },
      "peerDependenciesMeta": {
        "@vite-pwa/assets-generator": {
@ -29326,6 +29371,31 @@
        }
      }
    },
+    "node_modules/vite-plugin-pwa/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-pwa/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/vite-plugin-pwa/node_modules/pretty-bytes": {
      "version": "6.1.1",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -166,7 +166,7 @@
    "tailwindcss": "^3.4.1",
    "typescript": "~5.2.2",
    "vite": "^5.2.0",
-    "vite-plugin-pwa": "^0.19.8"
+    "vite-plugin-pwa": "^1.0.0"
  },
  "main": "./dist-electron/main.js",
  "build": {
--- a/src/main.web.ts
+++ b/src/main.web.ts
@ -1,3 +1,4 @@
+// @ts-ignore
 import { initBackend } from "absurd-sql/dist/indexeddb-main-thread";
 import { initializeApp } from "./main.common";
 import "./registerServiceWorker"; // Web PWA support
--- a/src/types/absurd-sql.d.ts
+++ b/src/types/absurd-sql.d.ts
@ -0,0 +1,16 @@
+declare module 'absurd-sql/dist/indexeddb-main-thread' {
+  export interface SQLiteOptions {
+    filename?: string;
+    autoLoad?: boolean;
+    debug?: boolean;
+  }
+
+  export interface SQLiteDatabase {
+    exec: (sql: string, params?: any[]) => Promise<any>;
+    close: () => Promise<void>;
+  }
+
+  export function initSqlJs(options?: any): Promise<any>;
+  export function createDatabase(options?: SQLiteOptions): Promise<SQLiteDatabase>;
+  export function openDatabase(options?: SQLiteOptions): Promise<SQLiteDatabase>;
+} 
--- a/vite.config.common.mts
+++ b/vite.config.common.mts
@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, UserConfig, Plugin } from "vite";
 import vue from "@vitejs/plugin-vue";
 import dotenv from "dotenv";
 import { loadAppConfig } from "./vite.config.utils.mts";
@ -11,7 +11,7 @@ dotenv.config();
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

-export async function createBuildConfig(mode: string) {
+export async function createBuildConfig(mode: string): Promise<UserConfig> {
  const appConfig = await loadAppConfig();
  const isElectron = mode === "electron";
  const isCapacitor = mode === "capacitor";
@ -40,13 +40,18 @@ export async function createBuildConfig(mode: string) {
          ? ['@capacitor/app'] 
          : [],
        output: {
-          format: 'es',
+          format: 'esm',
          generatedCode: {
            preset: 'es2015'
-          }
+          },
+          manualChunks: undefined
        }
      }
    },
+    worker: {
+      format: 'es',
+      plugins: () => []
+    },
    define: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.VITE_PLATFORM': JSON.stringify(mode),
--- a/vite.config.web.mts
+++ b/vite.config.web.mts
@ -19,7 +19,8 @@ export default defineConfig(async () => {
          cleanupOutdatedCaches: true,
          skipWaiting: true,
          clientsClaim: true,
-          sourcemap: true
+          sourcemap: true,
+          maximumFileSizeToCacheInBytes: 10 * 1024 * 1024 // 10MB
        }
      })
    ]