chore(frontend): integrate SQLite Web Worker and improve debug initialization
- Added `sqlite.worker.js` for custom SQLite Web Worker setup compatible with SQLDelight. - Enhanced Webpack configuration in `sqlite-config.js` for SQLite-related assets and dynamic path resolution. - Updated Koin `apiClient` setup to dynamically inject Authorization headers using the `HttpSend` plugin. - Fixed Keycloak realm configuration to include new local URLs (`http://localhost:8080`). - Removed redundant Web Worker copy tasks from Gradle and adjusted Kotlin code for streamlined worker creation.
This commit is contained in:
+3
-8
@@ -8,8 +8,6 @@ import org.w3c.dom.Worker
|
||||
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)
|
||||
|
||||
@@ -20,11 +18,8 @@ actual class DatabaseDriverFactory {
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to create the worker using proper URL resolution
|
||||
// Helper function to create the worker
|
||||
private fun createWorker(): Worker {
|
||||
return js(
|
||||
"""
|
||||
new Worker(new URL('sqlite.worker.js', import.meta.url), { type: 'module' })
|
||||
"""
|
||||
)
|
||||
// Try the relative path again, as an absolute path might fail depending on base href
|
||||
return js("new Worker('sqlite.worker.js')")
|
||||
}
|
||||
|
||||
@@ -1,109 +1,122 @@
|
||||
// We do NOT import from node_modules anymore to avoid Webpack bundling issues.
|
||||
// import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
|
||||
|
||||
// Minimal debug worker
|
||||
console.log("Worker: sqlite.worker.js loaded. Starting initialization...");
|
||||
|
||||
// Minimal worker protocol compatible with SQLDelight's `web-worker-driver`.
|
||||
function runWorker({driver}) {
|
||||
console.log("Worker: runWorker called");
|
||||
let db = null;
|
||||
const open = (name) => {
|
||||
console.log("Worker: Opening database", name);
|
||||
db = driver.open(name);
|
||||
};
|
||||
try {
|
||||
// We do NOT import from node_modules anymore to avoid Webpack bundling issues.
|
||||
// import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
|
||||
|
||||
// Open once with the default database name expected by SQLDelight.
|
||||
open('app.db');
|
||||
// Message buffer for messages arriving before DB is ready
|
||||
let messageQueue = [];
|
||||
let db = null;
|
||||
let isReady = false;
|
||||
|
||||
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}});
|
||||
// Minimal worker protocol compatible with SQLDelight's `web-worker-driver`.
|
||||
self.onmessage = (event) => {
|
||||
if (!isReady) {
|
||||
console.log("Worker: Buffering message (DB not ready)", event.data);
|
||||
messageQueue.push(event);
|
||||
return;
|
||||
}
|
||||
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)});
|
||||
}
|
||||
};
|
||||
}
|
||||
processMessage(event);
|
||||
};
|
||||
|
||||
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});
|
||||
};
|
||||
|
||||
async function init() {
|
||||
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');
|
||||
|
||||
// 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);
|
||||
}
|
||||
function processMessage(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) });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error("Database initialization error in worker:", e);
|
||||
self.postMessage({type: 'error', message: 'Database initialization failed: ' + e.message});
|
||||
}
|
||||
self.onerror = function(event) {
|
||||
console.error("Error in Web Worker (onerror):", event.message, event.filename, event.lineno);
|
||||
// Don't postMessage here as it might confuse the driver if it expects a response to a query
|
||||
};
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
// 1. Load the sqlite3.js library manually via importScripts.
|
||||
console.log("Worker: Loading sqlite3.js via importScripts...");
|
||||
try {
|
||||
importScripts('sqlite3.js');
|
||||
} catch (e) {
|
||||
throw new Error("Failed to importScripts('sqlite3.js'). Check if file exists at root. Error: " + e.message);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
// Initialize DB
|
||||
const dbName = 'app.db';
|
||||
if (opfsAvailable) {
|
||||
console.log("Initialisiere persistente OPFS Datenbank: " + dbName);
|
||||
db = new sqlite3.oo1.OpfsDb(dbName);
|
||||
} else {
|
||||
console.warn("OPFS nicht verfügbar, Fallback auf In-Memory");
|
||||
db = new sqlite3.oo1.DB(dbName);
|
||||
}
|
||||
|
||||
// Mark as ready and process queue
|
||||
isReady = true;
|
||||
console.log("Worker: DB Ready. Processing " + messageQueue.length + " buffered messages.");
|
||||
while (messageQueue.length > 0) {
|
||||
processMessage(messageQueue.shift());
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error("Database initialization error in worker:", e);
|
||||
// We can't easily communicate this back to the driver during init,
|
||||
// but console.error should show up.
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
} catch (e) {
|
||||
console.error("Critical Worker Error:", e);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
+22
-9
@@ -41,11 +41,14 @@ val networkModule = module {
|
||||
|
||||
// 2. API Client (Configured for Gateway & Auth Header)
|
||||
single(named("apiClient")) {
|
||||
// Resolve TokenProvider lazily to avoid circular dependency issues during init
|
||||
val tokenProvider: TokenProvider? = try {
|
||||
get<TokenProvider>()
|
||||
} catch (_: Throwable) {
|
||||
println("[apiClient] Warning: No TokenProvider found in Koin")
|
||||
null
|
||||
}
|
||||
|
||||
HttpClient {
|
||||
// JSON (kotlinx) configuration
|
||||
install(ContentNegotiation) {
|
||||
@@ -75,16 +78,10 @@ val networkModule = module {
|
||||
exponentialDelay()
|
||||
}
|
||||
|
||||
// Manual Auth Header Injection (instead of Auth plugin) to support immediate logout
|
||||
install(DefaultRequest) {
|
||||
// Base URL configuration
|
||||
defaultRequest {
|
||||
val base = NetworkConfig.baseUrl.trimEnd('/')
|
||||
url(base) // Set base URL
|
||||
|
||||
// Inject Authorization header if token is present
|
||||
val token = tokenProvider?.getAccessToken()
|
||||
if (token != null) {
|
||||
header("Authorization", "Bearer $token")
|
||||
}
|
||||
url(base)
|
||||
}
|
||||
|
||||
// Logging for development
|
||||
@@ -96,6 +93,22 @@ val networkModule = module {
|
||||
}
|
||||
level = LogLevel.INFO
|
||||
}
|
||||
}.also { client ->
|
||||
// Dynamic Auth Header Injection via HttpSend plugin
|
||||
// This ensures we get the CURRENT token for each request
|
||||
if (tokenProvider != null) {
|
||||
client.plugin(HttpSend).intercept { request ->
|
||||
try {
|
||||
val token = tokenProvider.getAccessToken()
|
||||
if (token != null) {
|
||||
request.header("Authorization", "Bearer $token")
|
||||
}
|
||||
} catch (e: Exception) {
|
||||
println("[apiClient] Error getting access token: $e")
|
||||
}
|
||||
execute(request)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user