Avoid node:fs dependency in sql.js

README.md

@@ -31,7 +31,9 @@ Browser-safe entry that avoids Node-only dependencies. It expects `Buffer`,
 `Uint8Array`, or `ArrayBuffer` inputs rather than file paths.
 
 SQLite-backed formats (Snap `.sps/.spb` and TouchChat `.ce`) require a WASM
-SQLite engine. Configure `sql.js` in your bundler before loading those formats:
+SQLite engine. To support these, configure `sql.js` in your bundler
+and either include `<script src="sql-wasm.js"></script>` in your HTML, or
+`window.initSqlJs = require('sql.js');` in your app.
 
 ```ts
 import { configureSqlJs, SnapProcessor } from '@willwade/aac-processors/browser';

examples/vitedemo/index.html

@@ -574,7 +574,6 @@ <h1>🎯 AAC Processors Browser Demo</h1>
             </div>
         </div>
     </div>
-
     <script type="module" src="/src/main.ts"></script>
 </body>
 </html>

examples/vitedemo/package.json

@@ -10,7 +10,8 @@
   },
   "devDependencies": {
     "typescript": "^5.6.3",
-    "vite": "^6.0.1"
+    "vite": "^7.3.1",
+    "vite-plugin-commonjs": "^0.10.4"
   },
   "dependencies": {
     "@willwade/aac-processors": "file:../..",

examples/vitedemo/src/main.ts

@@ -5,6 +5,8 @@
  * It tests all browser-compatible processors with real file uploads.
  */
 
+window.initSqlJs = require('sql.js');
+
 // Polyfill Buffer for browser environment
 if (typeof (window as any).Buffer === 'undefined') {
   // Create a proper Buffer wrapper class that extends Uint8Array
@@ -80,8 +82,9 @@ import {
   AACTree,
   AACPage,
   AACButton
-} from 'aac-processors';
-import { validateFileOrBuffer, type ValidationResult } from 'aac-processors/validation';
+} from '@willwade/aac-processors/browser';
+import { validateFileOrBuffer, type ValidationResult } from '@willwade/aac-processors/validation';
+import initSqlJs from 'sql.js';
 
 import sqlWasmUrl from 'sql.js/dist/sql-wasm.wasm?url';
 

examples/vitedemo/vite.config.ts

@@ -1,17 +1,13 @@
 import { defineConfig } from 'vite';
 import path from 'path';
+import commonjs from 'vite-plugin-commonjs';
 
 export default defineConfig({
+  plugins: [
+    commonjs()
+  ],
   resolve: {
     alias: [
-      {
-        find: /^aac-processors\/validation$/,
-        replacement: path.resolve(__dirname, '../../src/validation.ts'),
-      },
-      {
-        find: /^aac-processors$/,
-        replacement: path.resolve(__dirname, '../../src/index.browser.ts'),
-      },
       {
         find: /^stream$/,
         replacement: path.resolve(__dirname, 'node_modules/stream-browserify'),
@@ -31,8 +27,7 @@ export default defineConfig({
     ],
   },
   optimizeDeps: {
-    exclude: ['aac-processors'],
-    include: []
+    include: ['@willwade/aac-processors']
   },
   define: {
     'process.env': '{}',
@@ -51,7 +46,8 @@ export default defineConfig({
     sourcemap: true,
     commonjsOptions: {
       // Ignore Node.js built-in modules
-      ignore: ['crypto', 'stream', 'timers', 'events', 'fs', 'path', 'os']
+      ignore: ['crypto', 'stream', 'timers', 'events', 'fs', 'path', 'os'],
+      include: [/@willwade\/aac-processors/, /node_modules/]
     }
   }
 });

package.json

@@ -181,7 +181,7 @@
     "fast-xml-parser": "^5.2.0",
     "jszip": "^3.10.1",
     "plist": "^3.1.0",
-    "sql.js": "^1.13.0",
+    "sql.js": "^1.14.1",
     "xml2js": "^0.6.2",
     "yauzl": "^3.2.0"
   },

src/utils/sqlite.ts

@@ -1,4 +1,4 @@
-import type { SqlJsConfig, SqlJsStatic } from 'sql.js';
+import type { SqlJsConfig, SqlJsStatic, InitSqlJsStatic } from 'sql.js';
 import { defaultFileAdapter, FileAdapter, getNodeRequire, isNodeRuntime } from './io';
 
 export interface SqliteStatementAdapter {
@@ -30,12 +30,14 @@ export function configureSqlJs(config: SqlJsConfig): void {
   sqlJsConfig = { ...(sqlJsConfig ?? {}), ...config };
 }
 
-async function getSqlJs(): Promise<SqlJsStatic> {
+async function getSqlJsBrowser(): Promise<SqlJsStatic> {
   if (!sqlJsPromise) {
-    sqlJsPromise = import('sql.js').then((module) => {
-      const initSqlJs = module.default || module;
-      return initSqlJs(sqlJsConfig ?? {});
-    });
+    const isBrowser = typeof globalThis !== 'undefined' && (globalThis as any).window !== undefined;
+    if (!isBrowser) throw new Error('Must be run in a browser');
+    const window = (globalThis as any).window;
+    if (!('initSqlJs' in window)) throw new Error('Need to add sql-wasm.js script element to DOM');
+    const initSqlJs = window.initSqlJs as InitSqlJsStatic;
+    sqlJsPromise = initSqlJs(sqlJsConfig ?? {});
   }
   return sqlJsPromise;
 }
@@ -120,7 +122,7 @@ export async function openSqliteDatabase(
   const data = await readBinaryFromInput(input);
 
   if (!isNodeRuntime()) {
-    const SQL = await getSqlJs();
+    const SQL = await getSqlJsBrowser();
     const db = new SQL.Database(data);
     return { db: createSqlJsAdapter(db) };
   }