chore(frontend): remove custom Webpack sqlite-wasm integration plugins and cleanup config

- Deleted `dummy.js` and its usage for sqlite-wasm integration as custom Webpack adjustments are no longer necessary.
- Removed outdated Webpack configuration files: `ignore-sqlite-wasm.js`, `ignore-sqlite-wasm-critical-dependency.js`, and `sqljs-fix.js`.
- Introduced `sqlite-config.js` for simplified and streamlined sqlite-wasm and Skiko Webpack configuration.
- Minor code formatting adjustments across frontend modules for improved consistency.
This commit is contained in:
2026-01-26 20:37:23 +01:00
parent 29ad73b508
commit 3e587381ed
30 changed files with 1535 additions and 941 deletions
@@ -6,23 +6,25 @@ import org.w3c.dom.Worker
@Suppress("EXPECT_ACTUAL_CLASSIFIERS_ARE_IN_BETA_WARNING")
actual class DatabaseDriverFactory {
actual suspend fun createDriver(): SqlDriver {
// Wir nutzen eine Helper-Funktion, um den Worker zu erstellen.
// Dies ermöglicht uns, 'new URL(..., import.meta.url)' in JS zu verwenden,
// was Webpack dazu bringt, den Pfad korrekt aufzulösen.
val worker = createWorker()
val driver = WebWorkerDriver(worker)
actual suspend fun createDriver(): SqlDriver {
// Wir nutzen eine Helper-Funktion, um den Worker zu erstellen.
// Dies ermöglicht uns, 'new URL(..., import.meta.url)' in JS zu verwenden,
// was Webpack dazu bringt, den Pfad korrekt aufzulösen.
val worker = createWorker()
val driver = WebWorkerDriver(worker)
// Initialize schema asynchronously
AppDatabase.Schema.create(driver).await()
// Initialize schema asynchronously
AppDatabase.Schema.create(driver).await()
return driver
}
return driver
}
}
// Helper function to create the worker using proper URL resolution
private fun createWorker(): Worker {
return js("""
return js(
"""
new Worker(new URL('sqlite.worker.js', import.meta.url), { type: 'module' })
""")
"""
)
}
@@ -1,103 +1,109 @@
import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
// We do NOT import from node_modules anymore to avoid Webpack bundling issues.
// import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
console.log("Worker: sqlite.worker.js loaded. Starting initialization...");
// Minimal worker protocol compatible with SQLDelight's `web-worker-driver`.
// Mirrors the message format used by SQLDelight's `sqljs.worker.js` implementation.
function runWorker({ driver }) {
console.log("Worker: runWorker called");
let db = null;
const open = (name) => {
console.log("Worker: Opening database", name);
db = driver.open(name);
};
function runWorker({driver}) {
console.log("Worker: runWorker called");
let db = null;
const open = (name) => {
console.log("Worker: Opening database", name);
db = driver.open(name);
};
// Open once with the default database name expected by SQLDelight.
open('app.db');
// Open once with the default database name expected by SQLDelight.
open('app.db');
self.onmessage = (event) => {
const data = event.data;
try {
switch (data && data.action) {
case 'exec': {
if (!data.sql) throw new Error('exec: Missing query string');
// sqlite-wasm oo1 DB supports `.exec(...)`.
// We intentionally return only `values` which is sufficient for SQLDelight.
const rows = [];
db.exec({
sql: data.sql,
bind: data.params ?? [],
rowMode: 'array',
callback: (row) => rows.push(row)
});
return postMessage({ id: data.id, results: { values: rows } });
}
case 'begin_transaction':
db.exec('BEGIN TRANSACTION;');
return postMessage({ id: data.id, results: [] });
case 'end_transaction':
db.exec('END TRANSACTION;');
return postMessage({ id: data.id, results: [] });
case 'rollback_transaction':
db.exec('ROLLBACK TRANSACTION;');
return postMessage({ id: data.id, results: [] });
default:
throw new Error(`Unsupported action: ${data && data.action}`);
}
} catch (err) {
console.error("Worker: Error processing message", err);
return postMessage({ id: data && data.id, error: err?.message ?? String(err) });
self.onmessage = (event) => {
const data = event.data;
try {
switch (data && data.action) {
case 'exec': {
if (!data.sql) throw new Error('exec: Missing query string');
const rows = [];
db.exec({
sql: data.sql,
bind: data.params ?? [],
rowMode: 'array',
callback: (row) => rows.push(row)
});
return postMessage({id: data.id, results: {values: rows}});
}
};
case 'begin_transaction':
db.exec('BEGIN TRANSACTION;');
return postMessage({id: data.id, results: []});
case 'end_transaction':
db.exec('END TRANSACTION;');
return postMessage({id: data.id, results: []});
case 'rollback_transaction':
db.exec('ROLLBACK TRANSACTION;');
return postMessage({id: data.id, results: []});
default:
throw new Error(`Unsupported action: ${data && data.action}`);
}
} catch (err) {
console.error("Worker: Error processing message", err);
return postMessage({id: data && data.id, error: err?.message ?? String(err)});
}
};
}
// Error handling wrapper
self.onerror = function(event) {
console.error("Error in Web Worker (onerror):", event.message, event.filename, event.lineno);
// Optionally, send the error back to the main thread
self.postMessage({ type: 'error', message: event.message, filename: event.filename, lineno: event.lineno });
self.onerror = function (event) {
console.error("Error in Web Worker (onerror):", event.message, event.filename, event.lineno);
self.postMessage({type: 'error', message: event.message, filename: event.filename, lineno: event.lineno});
};
// Manually fetch the WASM file to bypass Webpack/sqlite-wasm loading issues
async function init() {
try {
console.log("Worker: Fetching sqlite3.wasm manually...");
const response = await fetch('/sqlite3.wasm');
if (!response.ok) {
throw new Error(`Failed to fetch sqlite3.wasm: ${response.status} ${response.statusText}`);
}
const wasmBinary = await response.arrayBuffer();
console.log("Worker: sqlite3.wasm fetched successfully, size:", wasmBinary.byteLength);
try {
// 1. Load the sqlite3.js library manually via importScripts.
// This file is copied to the root by Webpack (CopyWebpackPlugin).
// This bypasses Webpack's module resolution for the library itself.
console.log("Worker: Loading sqlite3.js via importScripts...");
importScripts('sqlite3.js');
console.log("Worker: Calling sqlite3InitModule with wasmBinary...");
const sqlite3 = await sqlite3InitModule({
print: console.log,
printErr: console.error,
wasmBinary: wasmBinary // Provide the binary directly!
});
console.log("Worker: sqlite3InitModule resolved successfully");
const opfsAvailable = 'opfs' in sqlite3;
console.log("Worker: OPFS available:", opfsAvailable);
runWorker({
driver: {
open: (name) => {
if (opfsAvailable) {
console.log("Initialisiere persistente OPFS Datenbank: " + name);
return new sqlite3.oo1.OpfsDb(name);
} else {
console.warn("OPFS nicht verfügbar, Fallback auf In-Memory");
return new sqlite3.oo1.DB(name);
}
}
}
});
} catch (e) {
console.error("Database initialization error in worker:", e);
self.postMessage({ type: 'error', message: 'Database initialization failed: ' + e.message });
// After importScripts, `sqlite3InitModule` should be available globally.
if (typeof self.sqlite3InitModule !== 'function') {
throw new Error("sqlite3InitModule is not defined after importScripts. Check if sqlite3.js was loaded correctly.");
}
console.log("Worker: Fetching sqlite3.wasm manually...");
const response = await fetch('sqlite3.wasm');
if (!response.ok) {
throw new Error(`Failed to fetch sqlite3.wasm: ${response.status} ${response.statusText}`);
}
const wasmBinary = await response.arrayBuffer();
console.log("Worker: sqlite3.wasm fetched successfully, size:", wasmBinary.byteLength);
console.log("Worker: Calling sqlite3InitModule with wasmBinary...");
const sqlite3 = await self.sqlite3InitModule({
print: console.log,
printErr: console.error,
wasmBinary: wasmBinary
});
console.log("Worker: sqlite3InitModule resolved successfully");
const opfsAvailable = 'opfs' in sqlite3;
console.log("Worker: OPFS available:", opfsAvailable);
runWorker({
driver: {
open: (name) => {
if (opfsAvailable) {
console.log("Initialisiere persistente OPFS Datenbank: " + name);
return new sqlite3.oo1.OpfsDb(name);
} else {
console.warn("OPFS nicht verfügbar, Fallback auf In-Memory");
return new sqlite3.oo1.DB(name);
}
}
}
});
} catch (e) {
console.error("Database initialization error in worker:", e);
self.postMessage({type: 'error', message: 'Database initialization failed: ' + e.message});
}
}
init();