diff --git a/docs/01_Architecture/Reference/Tech_Stack/Implementierung_Offline-First_KMP.md b/docs/01_Architecture/Reference/Tech_Stack/Implementierung_Offline-First_KMP.md new file mode 100644 index 00000000..9dbe591a --- /dev/null +++ b/docs/01_Architecture/Reference/Tech_Stack/Implementierung_Offline-First_KMP.md @@ -0,0 +1,649 @@ +Hier ist der Quellcode des Berichts im Markdown-Format: + +# Architektonische Resilienz in verteilten Systemen: Ein umfassender Leitfaden zur Implementierung von Offline-First Kotlin Multiplatform Architekturen mit SQLDelight + +## Zusammenfassung + +Die Softwareentwicklungslandschaft des Jahres 2026, geprägt durch die Veröffentlichung von Kotlin 2.3.0 und Gradle 9.1.0, bietet Entwicklern beispiellose Möglichkeiten zur Vereinheitlichung komplexer Geschäftslogik über Plattformgrenzen hinweg. Dieser Forschungsbericht analysiert detailliert die architektonischen Muster, Implementierungsstrategien und zugrundeliegenden Mechanismen, die für den Aufbau einer robusten, asynchronen Offline-First-Anwendung erforderlich sind. Der Fokus liegt hierbei auf der Integration von SQLDelight in einer Kotlin Multiplatform (KMP) Umgebung, die sowohl Desktop (JVM) als auch Web (Kotlin/JS) Ziele bedient, eingebettet in eine Mikro-Frontend-Architektur. + +Ein zentraler Schwerpunkt dieser Arbeit ist die Überbrückung der Dichotomie zwischen der synchronen Natur klassischer JVM-Datenbanktreiber und der inhärent asynchronen, Event-Loop-basierten Umgebung des modernen Web (insbesondere unter Nutzung von Web Workern und OPFS). Darüber hinaus wird die fortgeschrittene Integration von Persistenzschichten in einem Mikro-Frontend-Ökosystem untersucht, um sicherzustellen, dass eine einzige Quelle der Wahrheit („Single Source of Truth“) über unabhängig bereitgestellte Frontend-Einheiten hinweg konsistent bleibt. + +## 1. Einleitung und technologischer Kontext (2026) + +### 1.1 Die Evolution von Kotlin Multiplatform + +Mit der Veröffentlichung von Kotlin 2.3.0 im Dezember 2025 hat sich das Ökosystem von einer experimentellen Technologie zu einem stabilen Standard für Enterprise-Architekturen entwickelt. Während frühere Versionen oft mit Inkonsistenzen zwischen den Compilern (JVM vs. JS/Native) zu kämpfen hatten, bietet der K2-Compiler in Version 2.3.0 eine vereinheitlichte Frontend-IR (Intermediate Representation), die eine robustere statische Analyse und performantere Kompilierung ermöglicht. Dies ist entscheidend für komplexe Multi-Modul-Projekte, wie sie in Mikro-Frontend-Architekturen üblich sind. + +### 1.2 Gradle 9.1.0: Die Build-Infrastruktur + +Gradle 9.1.0, veröffentlicht im September 2025, hat die Art und Weise, wie KMP-Projekte konfiguriert werden, grundlegend verändert. Mit der vollständigen Unterstützung des „Configuration Cache“ und der strikten „Project Isolation“ zwingt es Entwickler zu sauberen Modulgrenzen. Für unser Szenario bedeutet dies, dass die Abhängigkeiten zwischen dem `shared`-Modul (Datenbank) und den konsumierenden Mikro-Frontends explizit und ohne Seiteneffekte definiert werden müssen, um die parallele Ausführung und inkrementelle Kompilierung nicht zu gefährden. + +### 1.3 Die Problemstellung: Synchron vs. Asynchron + +Die zentrale Herausforderung bei der Entwicklung einer Cross-Platform-Datenbanklösung liegt in den unterschiedlichen I/O-Modellen der Zielplattformen: + +* **JVM (Desktop):** Historisch geprägt durch blockierende I/O-Operationen (JDBC). Ein Datenbankaufruf blockiert den Thread, bis das Ergebnis vorliegt. +* **Kotlin/JS (Web):** Basiert auf einem Single-Threaded Event Loop. Blockierende Operationen sind hier verboten, da sie das UI einfrieren würden. Moderne Web-Architekturen lagern datenintensive Aufgaben in Web Worker aus, die ausschließlich über asynchrone Nachrichten (Promises/Futures) kommunizieren. + +SQLDelight 2.0+ adressiert dieses Problem mit der Konfiguration `generateAsync = true`. Dieser Bericht wird detailliert darlegen, wie diese Einstellung genutzt werden kann, um eine einheitliche, asynchrone Schnittstelle zu schaffen, die auf der JVM effizient in Coroutinen gekapselt wird, während sie im Web nativ mit dem asynchronen Modell korrespondiert. + +## 2. Architektonische Fundamente + +### 2.1 Das Offline-First Paradigma + +In einer Offline-First-Architektur fungiert die lokale Datenbank nicht als bloßer Cache, sondern als primäre Quelle der Wahrheit. Die Benutzeroberfläche (UI) kommuniziert niemals direkt mit dem Netzwerk. + +| Konzept | Traditionelle Architektur | Offline-First Architektur | +| --- | --- | --- | +| **Datenquelle** | Remote API (REST/GraphQL) | Lokale Datenbank (SQLite) | +| **Lesepfad** | UI ruft Netzwerk auf -> Wartet -> Zeigt an | UI beobachtet Datenbank (Flow) -> Zeigt an | +| **Schreibpfad** | UI sendet an API -> Wartet auf OK -> Aktualisiert UI | UI schreibt in DB -> DB emittiert neue Daten -> Sync im Hintergrund | +| **Netzwerkstatus** | Voraussetzung für Funktionalität | Optional; beeinflusst nur Synchronisation | + +Dieses Prinzip der „Inversion of Control“ entkoppelt die User Experience von Netzwerklatenz und -verfügbarkeit. In SQLDelight wird dies durch Reactive Extensions realisiert, die SQL-Abfragen als `Flow` exponieren, die sich bei Datenänderungen automatisch aktualisieren. + +### 2.2 Mikro-Frontends in Kotlin/JS + +Die Mikro-Frontend-Architektur überträgt die Prinzipien von Microservices auf das Frontend: Die Anwendung wird in vertikale, in sich geschlossene Slices (Features) zerlegt, die unabhängig entwickelt und deployt werden können. Im Kontext von Kotlin/JS und einer geteilten Datenbank stellt dies eine besondere Herausforderung dar: **Das Singleton-Problem**. + +Wenn Modul A (z.B. „Dashboard“) und Modul B (z.B. „Einstellungen“) jeweils ihre eigene Instanz der Datenbank-Engine initialisieren, kommt es zu Konflikten beim Zugriff auf die physische Speicherdatei (z.B. im Origin Private File System, OPFS). Da SQLite in der Regel nur einen Schreibzugriff gleichzeitig erlaubt (Single Writer Principle), muss die Architektur einen **Shared Core Kernel** definieren – ein separat kompiliertes Modul, das die Datenbankinstanz hält und via Webpack Module Federation in die Feature-Module injiziert wird. + +## 3. Projekt-Setup und Build-Konfiguration + +Das Fundament eines stabilen KMP-Projekts ist eine präzise Gradle-Konfiguration. Wir verwenden einen Version Catalog (`libs.versions.toml`), um Konsistenz über alle Module hinweg zu gewährleisten. + +### 3.1 Version Catalog (`gradle/libs.versions.toml`)toml + +[versions] +kotlin = "2.3.0" +gradle = "9.1.0" +sqldelight = "2.1.0" +coroutines = "1.10.1" # Hypothetische Version passend zu Kotlin 2.3 +ktor = "3.1.0" +koin = "4.0.0" +serialization = "1.8.0" + +[libraries] + +# SQLDelight + +sqldelight-gradle = { module = "app.cash.sqldelight:gradle-plugin", version.ref = "sqldelight" } +sqldelight-driver-sqlite = { module = "app.cash.sqldelight:sqlite-driver", version.ref = "sqldelight" } +sqldelight-driver-webworker = { module = "app.cash.sqldelight:web-worker-driver", version.ref = "sqldelight" } +sqldelight-coroutines = { module = "app.cash.sqldelight:coroutines-extensions", version.ref = "sqldelight" } + +# Kotlin + +kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" } +kotlin-coroutines-swing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "coroutines" } # Für Desktop UI + +# Web Specifics + +npm-sqljs = { module = "sql.js", version = "1.12.0" } +npm-copy-webpack = { module = "copy-webpack-plugin", version = "12.0.0" } + +[plugins] +kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" } +sqldelight = { id = "app.cash.sqldelight", version.ref = "sqldelight" } + +``` + +### 3.2 Modulstruktur für Mikro-Frontends +Eine saubere Trennung ist essenziell. Wir empfehlen folgende Struktur: + +* `:shared-kernel` (KMP): Enthält die Datenbankdefinition (`.sq` Dateien), die generierten Interfaces und die Singleton-Instanziierung der Datenbank. +* `:shared-logic` (KMP): Enthält domänenspezifische Logik, Repositories und ViewModels, die den Kernel nutzen. +* `:desktop-app` (JVM): Der Einstiegspunkt für die Desktop-Anwendung. +* `:web-host` (JS): Die „Shell“-Anwendung, die Mikro-Frontends lädt. +* `:web-feature-a` (JS): Ein eigenständiges Mikro-Frontend. + +### 3.3 Konfiguration des Shared-Kernel Moduls +Das `shared-kernel` Modul ist das Herzstück. Hier wird SQLDelight konfiguriert. + +**`shared-kernel/build.gradle.kts`**: +```kotlin +plugins { + alias(libs.plugins.kotlinMultiplatform) + alias(libs.plugins.sqldelight) +} + +kotlin { + // 1. JVM Target für Desktop + jvm("desktop") + + // 2. JS Target für Web (IR Compiler ist Standard in 2.0+) + js(IR) { + // WICHTIG: Als Library kompilieren für Webpack Federation + binaries.library() + generateTypeScriptDefinitions() + browser { + commonWebpackConfig { + cssSupport { + enabled.set(true) + } + } + } + } + + sourceSets { + val commonMain by getting { + dependencies { + implementation(libs.kotlin.coroutines.core) + implementation(libs.sqldelight.coroutines) + } + } + val desktopMain by getting { + dependencies { + implementation(libs.sqldelight.driver.sqlite) + } + } + val jsMain by getting { + dependencies { + implementation(libs.sqldelight.driver.webworker) + // NPM Abhängigkeiten für SQL.js / Worker + implementation(npm("sql.js", "1.12.0")) + implementation(npm("@cashapp/sqldelight-sqljs-worker", "2.1.0")) + implementation(devNpm("copy-webpack-plugin", "12.0.0")) + } + } + } +} + +// 3. SQLDelight Konfiguration +sqldelight { + databases { + create("AppDatabase") { + packageName.set("com.example.offlinefirst.db") + // KRITISCH: Aktiviert Suspend-Funktionen in generierten Interfaces + generateAsync.set(true) + // Stellt sicher, dass das Schema für beide Plattformen kompatibel bleibt + schemaOutputDirectory.set(file("src/commonMain/sqldelight/databases")) + verifyMigrations.set(true) + } + } +} + +``` + +Die Einstellung `generateAsync.set(true)` ist der entscheidende Hebel. Ohne diese Einstellung generiert SQLDelight blockierende Funktionen (`executeAsList`). Mit ihr werden `suspend` Funktionen (`awaitAsList`) generiert. Dies ist für das Web-Target zwingend erforderlich, da der Web Worker asynchron antwortet. + +## 4. Datenbank-Design und Schema-Management + +In einer Offline-First-Architektur muss das Datenbankschema robust genug sein, um Synchronisationsstatus zu verwalten. + +**`shared-kernel/src/commonMain/sqldelight/com/example/offlinefirst/db/Task.sq`**: + +```sql +-- Tabelle für Aufgaben +CREATE TABLE Task ( + id TEXT NOT NULL PRIMARY KEY, + title TEXT NOT NULL, + description TEXT, + is_completed INTEGER AS Boolean NOT NULL DEFAULT 0, + created_at INTEGER NOT NULL, + updated_at INTEGER NOT NULL, + -- Synchronisations-Metadaten + sync_status TEXT NOT NULL DEFAULT 'SYNCED', -- 'SYNCED', 'DIRTY', 'DELETED' + last_synced_at INTEGER +); + +-- Indizes für Performance bei Abfragen +CREATE INDEX idx_task_sync_status ON Task(sync_status); +CREATE INDEX idx_task_created_at ON Task(created_at); + +-- Queries (Nutzung von Named Arguments für Kotlin) +selectAll: +SELECT * FROM Task +WHERE sync_status!= 'DELETED' +ORDER BY created_at DESC; + +selectDirty: +SELECT * FROM Task +WHERE sync_status = 'DIRTY'; + +insertOrReplace: +INSERT OR REPLACE INTO Task(id, title, description, is_completed, created_at, updated_at, sync_status, last_synced_at) +VALUES (?,?,?,?,?,?,?,?); + +updateCompletion: +UPDATE Task +SET is_completed = :isCompleted, + updated_at = :updatedAt, + sync_status = 'DIRTY' +WHERE id = :id; + +markAsSynced: +UPDATE Task +SET sync_status = 'SYNCED', + last_synced_at = :syncedAt +WHERE id = :id; + +softDelete: +UPDATE Task +SET sync_status = 'DELETED', + updated_at = :deletedAt +WHERE id = :id; + +``` + +**Analyse:** +Wir verwenden „Soft Deletes“ (Markieren als gelöscht statt physischem Löschen), um sicherzustellen, dass Löschvorgänge auch an den Server synchronisiert werden können. Das Feld `sync_status` steuert die Synchronisationslogik. + +## 5. Plattform-Implementierung: Die Treiber-Schicht + +Hier liegt die größte Komplexität. Wir müssen eine Brücke zwischen der synchronen JVM-Welt und der asynchronen JS-Welt schlagen. + +### 5.1 Abstrakte Fabrik + +Im `commonMain` definieren wir eine Schnittstelle zur Erstellung des Treibers. + +```kotlin +// shared-kernel/src/commonMain/kotlin/DatabaseFactory.kt +interface DatabaseFactory { + suspend fun createDriver(): SqlDriver +} + +// Hilfsfunktion zur Initialisierung +suspend fun createDatabase(factory: DatabaseFactory): AppDatabase { + val driver = factory.createDriver() + // Schema-Erstellung muss ebenfalls asynchron erwartet werden + AppDatabase.Schema.create(driver).await() + return AppDatabase(driver) +} + +``` + +### 5.2 Desktop (JVM) Implementierung: Der asynchrone Wrapper + +Der `JdbcSqliteDriver` ist blockierend. Auch wenn SQLDelight `suspend` Interfaces generiert, führt der zugrunde liegende Treiber I/O auf dem aufrufenden Thread aus. + +**`shared-kernel/src/desktopMain/kotlin/DesktopDatabaseFactory.kt`**: + +```kotlin +import app.cash.sqldelight.db.SqlDriver +import app.cash.sqldelight.driver.jdbc.sqlite.JdbcSqliteDriver +import java.io.File + +class DesktopDatabaseFactory(private val dbPath: String) : DatabaseFactory { + override suspend fun createDriver(): SqlDriver { + // JDBC Connection String + val driver = JdbcSqliteDriver("jdbc:sqlite:$dbPath") + + // Initiale Schema-Erstellung prüfen + // Da wir generateAsync=true nutzen, gibt Schema.create ein Result zurück, + // auf das wir warten müssen (.await()). + // Der JDBC Treiber führt dies jedoch synchron aus. + if (!File(dbPath).exists()) { + AppDatabase.Schema.create(driver).await() + } else { + // Migrationen prüfen (vereinfacht) + val currentVersion = 1 // Logic to fetch version + if (AppDatabase.Schema.version > currentVersion) { + AppDatabase.Schema.migrate(driver, currentVersion.toLong(), AppDatabase.Schema.version).await() + } + } + return driver + } +} + +``` + +**Das Async-Paradoxon auf der JVM:** +Das bloße Vorhandensein von `suspend` im Interface macht den JDBC-Treiber nicht nicht-blockierend. Wenn Sie eine Query in `Dispatchers.Main` aufrufen, wird die UI einfrieren, obwohl es eine `suspend fun` ist. +*Lösung:* Die Repository-Schicht (siehe Abschnitt 6) muss zwingend `withContext(Dispatchers.IO)` verwenden, um die Ausführung auf einen Hintergrund-Thread-Pool zu verlagern. + +### 5.3 Web (Kotlin/JS) Implementierung: Web Worker & OPFS + +Für eine echte Offline-First-Anwendung im Web reicht `localStorage` oder `IndexedDB` oft nicht aus, insbesondere bei komplexen relationalen Daten. Die modernste Lösung (Stand 2026) ist SQLite über WebAssembly (Wasm) mit dem **Origin Private File System (OPFS)** als Backend. + +OPFS bietet einen performanten Dateisystemzugriff, der speziell für Datenbanken optimiert ist, erfordert aber zwingend die Ausführung in einem Web Worker, da die synchronen Zugriffsmethoden (`FileSystemSyncAccessHandle`) im Main Thread blockiert sind. + +**Schritt 1: Der Worker-Code** +Wir benötigen einen Web Worker, der den SQLite Wasm Code lädt. + +**`shared-kernel/src/jsMain/kotlin/WebDatabaseFactory.kt`**: + +```kotlin +import app.cash.sqldelight.db.SqlDriver +import app.cash.sqldelight.driver.worker.WebWorkerDriver +import org.w3c.dom.Worker + +class WebDatabaseFactory : DatabaseFactory { + override suspend fun createDriver(): SqlDriver { + // Wir instanziieren einen Worker, der auf einer dedizierten JS-Datei basiert. + // Webpack muss diese Datei korrekt verarbeiten und bereitstellen. + val worker = Worker( + js("""new URL("@cashapp/sqldelight-sqljs-worker/sqljs.worker.js", import.meta.url)""") + ) + + val driver = WebWorkerDriver(worker) + + // Initialisierung + AppDatabase.Schema.create(driver).await() + + return driver + } +} + +``` + +*Hinweis:* Der Standard `@cashapp/sqldelight-sqljs-worker` nutzt oft noch `sql.js` (In-Memory). Für Persistenz via OPFS müssen Sie oft einen **Custom Worker** implementieren, der `sqlite-wasm` lädt und das VFS für OPFS konfiguriert. +Ein solcher Custom Worker Code (JavaScript) sähe in etwa so aus (vereinfacht): + +```javascript +// custom-sqlite.worker.js +import { initBackend } from '@sqlite.org/sqlite-wasm'; + +addEventListener('message', async ({ data }) => { + // Initialisierung des OPFS VFS + const sqlite3 = await initBackend(); + const db = new sqlite3.oo1.OpfsDb('/mydb.sqlite3'); + //... Kommunikation mit SQLDelight Driver Protokoll... +}); + +``` + +**Schritt 2: Webpack Konfiguration für Worker** +Damit `import.meta.url` korrekt aufgelöst wird, muss Webpack im verbrauchenden Modul (Web-App) konfiguriert werden. + +**`web-host/webpack.config.d/sql-worker.js`**: + +```javascript +const CopyWebpackPlugin = require('copy-webpack-plugin'); + +// Kopiert die WASM Binaries an einen Ort, wo der Browser sie laden kann +config.plugins.push( + new CopyWebpackPlugin({ + patterns: [ + { + from: '../../node_modules/sql.js/dist/sql-wasm.wasm', + to: 'sql-wasm.wasm' + } + ] + }) +); + +// Fallbacks für Node-Module, die im Browser fehlen +config.resolve.fallback = { + ...config.resolve.fallback, + fs: false, + path: false, + crypto: false +}; + +``` + +## 6. Das Repository-Pattern: Abstraktion der Asynchronität + +Das Repository ist die entscheidende Schicht, um die Unterschiede zwischen JVM (Blocking Wrapper) und JS (Native Async) zu verbergen. + +### 6.1 Dispatcher Provider + +Wir injizieren Dispatcher, um Testbarkeit und Plattformunterschiede zu managen. + +```kotlin +// commonMain +interface DispatcherProvider { + val io: CoroutineDispatcher + val main: CoroutineDispatcher +} + +// desktopMain +object DesktopDispatcherProvider : DispatcherProvider { + override val io = Dispatchers.IO + override val main = Dispatchers.Main +} + +// jsMain +object JsDispatcherProvider : DispatcherProvider { + // In JS gibt es nur einen Thread. Dispatchers.Default ist hier semantisch passend, + // technisch aber auf dem gleichen Event Loop. + override val io = Dispatchers.Default + override val main = Dispatchers.Main +} + +``` + +### 6.2 TaskRepository Implementierung + +```kotlin +class TaskRepository( + private val db: AppDatabase, + private val dispatchers: DispatcherProvider +) { + private val queries = db.taskQueries + + // READ: Reaktiv (Flow) + // Beobachtet die DB. Wenn sich Daten ändern, emittiert der Flow neu. + fun getTasks(): Flow> { + return queries.selectAll() + .asFlow() + // WICHTIG: mapToList führt die Query aus. + // Auf JVM blockiert das! Daher muss es auf Dispatchers.IO verschoben werden. + .mapToList(dispatchers.io) + .flowOn(dispatchers.io) + } + + // WRITE: Suspend + suspend fun addTask(title: String) = withContext(dispatchers.io) { + val id = uuid4().toString() // Benötigt library: com.benasher44:uuid + val now = Clock.System.now().toEpochMilliseconds() + + queries.transaction { + queries.insertOrReplace( + id = id, + title = title, + description = null, + is_completed = false, + created_at = now, + updated_at = now, + sync_status = "DIRTY", // Markiert für Sync + last_synced_at = null + ) + } + } + + // SYNC Helper + suspend fun getDirtyTasks(): List = withContext(dispatchers.io) { + queries.selectDirty().awaitAsList() + } +} + +``` + +**Analyse der `mapToList` Problematik:** +Auf der JVM wird der Listener benachrichtigt, wenn sich die Tabelle ändert. Der Flow sammelt neu. `mapToList` iteriert über den Cursor. Da der JDBC-Treiber blockiert, geschieht dies synchron. Ohne `.flowOn(dispatchers.io)` würde dies auf dem UI-Thread passieren (wenn dort collected wird) und Ruckler verursachen. Auf JS wartet `mapToList` auf das Promise des Workers, was den Main Thread nicht blockiert, aber dennoch Rechenzeit beansprucht. Die Verwendung von `flowOn` ist also Best Practice für beide Plattformen. + +## 7. Mikro-Frontend Architektur im Web + +In einer Mikro-Frontend-Umgebung (z.B. basierend auf Webpack Module Federation) laden wir verschiedene Teile der Anwendung zur Laufzeit nach. Das Risiko: Jedes Mikro-Frontend könnte versuchen, seine eigene Datenbankverbindung zu öffnen. Bei OPFS/SQLite führt dies zum Absturz, da die Datei gelockt ist. + +**Lösung: Shared Kernel als Singleton via Module Federation.** + +### 7.1 Export des Shared Kernels + +Wir müssen sicherstellen, dass Webpack das `shared-kernel` Modul nur einmal lädt und an alle Mikro-Frontends verteilt. + +In `shared-kernel` (JS Target): +Wir erstellen einen expliziten Einstiegspunkt (Entry Point) für JS. + +```kotlin +// shared-kernel/src/jsMain/kotlin/Entry.kt +@file:JsExport +package com.example.offlinefirst.kernel + +@JsExport +class DatabaseProvider { + private var _database: AppDatabase? = null + + // Initialisierungsmethode, die NUR von der Shell-App aufgerufen wird + suspend fun initialize() { + if (_database!= null) return + val factory = WebDatabaseFactory() + _database = createDatabase(factory) + } + + // Zugriffsmethode für Feature-Module + fun getDatabase(): AppDatabase { + return _database?: throw Error("Database not initialized! Call initialize() in App Shell.") + } +} + +// Globales Singleton +@JsExport +val dbProvider = DatabaseProvider() + +``` + +### 7.2 Webpack Federation Konfiguration + +In der `build.gradle.kts` der konsumierenden Web-Module (Shell und Features) müssen wir Webpack anweisen, das Kotlin-Laufzeitsystem und unseren Kernel zu teilen. + +**`web-host/webpack.config.d/federation.js`**: + +```javascript +const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); + +config.plugins.push( + new ModuleFederationPlugin({ + name: "app_shell", + remotes: { + feature_dashboard: "feature_dashboard@http://localhost:8081/remoteEntry.js", + feature_settings: "feature_settings@http://localhost:8082/remoteEntry.js" + }, + shared: { + // Kotlin Standardbibliothek teilen, um `instanceof` Checks und globalen State zu erhalten + "kotlin": { singleton: true, eager: true }, + "kotlinx-coroutines-core": { singleton: true, eager: true }, + // Unser kompiliertes Kernel-Modul + "shared-kernel": { singleton: true, requiredVersion: "1.0.0" } + } + }) +); + +``` + +**Erklärung „Singleton & Eager“:** + +* `singleton: true`: Stellt sicher, dass Webpack nur eine Version der Bibliothek lädt. Dies ist entscheidend für den Datenbank-State. + + +* `eager: true`: Zwingt Webpack, diese Bibliotheken sofort beim Start zu laden, statt sie asynchron nachzuladen. Dies verhindert Probleme bei der Initialisierung von Kotlin-Objekten (wie `dbProvider`), die beim App-Start verfügbar sein müssen. + +## 8. Synchronisation und Offline-Logik (Store5) + +Für eine robuste Synchronisation empfiehlt sich die Implementierung einer „Sync Engine“, die unabhängig vom UI läuft. + +### 8.1 Die Sync-Engine + +Diese Klasse überwacht die Netzwerkverbindung und synchronisiert Daten im Hintergrund. + +```kotlin +class SyncEngine( + private val repository: TaskRepository, + private val api: TaskApi, + private val scope: CoroutineScope +) { + // Einfache StateFlow basierte Netzwerküberwachung (Plattform-spezifisch zu implementieren) + val isOnline = NetworkMonitor.status // Flow + + fun start() { + scope.launch { + isOnline.collect { online -> + if (online) { + syncPush() + syncPull() + } + } + } + } + + private suspend fun syncPush() { + val dirtyTasks = repository.getDirtyTasks() + dirtyTasks.forEach { task -> + try { + // Sende an API + val response = api.pushTask(task) + // Markiere lokal als Synced + repository.markAsSynced(task.id, response.syncedAt) + } catch (e: Exception) { + // Fehlerbehandlung: Exponential Backoff Logik hier einfügen + console.error("Sync failed for task ${task.id}: $e") + } + } + } +} + +``` + +### 8.2 Hintergrund-Synchronisation + +* **Android/JVM:** Hier würde man `WorkManager` nutzen, um den Sync auch dann auszuführen, wenn die App geschlossen ist. + + +* **Web:** Hier ist die Situation komplexer. Die Background Sync API ist in Browsern noch nicht flächendeckend stabil für alle Szenarien verfügbar. Die gängige Praxis ist, den Sync im Service Worker oder im Shared Worker auszuführen, solange mindestens ein Tab geöffnet ist. +* *Architektur-Tipp:* Nutzen Sie den gleichen Web Worker, der die Datenbank hält, auch für die Synchronisation, um den Main Thread zu entlasten. + + + +## 9. Teststrategien + +Das Testen von asynchronem Datenbankcode erfordert besondere Sorgfalt. + +### 9.1 In-Memory Tests + +Für Unit Tests verwenden wir In-Memory-Treiber. + +* **JVM:** `JdbcSqliteDriver(JdbcSqliteDriver.IN_MEMORY)` +* **JS:** Hier können wir den einfachen `sql.js` Treiber ohne Worker nutzen, da Performance im Unit Test sekundär ist und wir keine Persistenz brauchen. + +```kotlin +// shared-kernel/src/commonTest/kotlin/TaskRepositoryTest.kt +class TaskRepositoryTest { + @Test + fun testInsertAndRead() = runTest { + // Setup Driver (Platform specific helper) + val driver = createTestDriver() + val db = AppDatabase(driver) + AppDatabase.Schema.create(driver).await() // Auch im Test await()! + + val repo = TaskRepository(db, TestDispatcherProvider) + + repo.addTask("Test Task") + + val tasks = repo.getTasks().first() + assertEquals(1, tasks.size) + assertEquals("Test Task", tasks.title) + assertEquals("DIRTY", tasks.sync_status) + } +} + +``` + +*Hinweis:* `runTest` aus `kotlinx-coroutines-test` ist essenziell, um Coroutinen in Tests deterministisch auszuführen. + +## 10. Fazit und Ausblick + +Die Implementierung einer Offline-First-Architektur mit Kotlin Multiplatform, SQLDelight und Mikro-Frontends ist im Jahr 2026 eine leistungsfähige, wenn auch komplexe Lösung. + +**Schlüsselerkenntnisse:** + +1. **Konfiguration ist der Schlüssel:** Die korrekte Einstellung von `generateAsync = true` in SQLDelight und die Webpack Federation Config (`singleton: true`) sind die häufigsten Fehlerquellen. +2. **Threading-Modelle verstehen:** Der Entwickler muss sich stets bewusst sein, ob Code auf der blockierenden JVM oder im asynchronen JS-Event-Loop läuft. Das `DispatcherProvider`-Muster ist hierfür unerlässlich. +3. **Persistenz im Web:** OPFS ist der Game-Changer, der echte SQLite-Performance in den Browser bringt und `IndexedDB` als primären Speicher für komplexe Daten ablöst. + +Durch die Einhaltung der in diesem Bericht dargelegten Muster lässt sich eine Anwendung erstellen, die sich für den Nutzer wie eine native App anfühlt – reaktionsschnell, robust gegen Netzwerkfehler und nahtlos über Plattformen hinweg synchronisiert. + +--- + +**Referenzen im Kontext:** +- Kotlin Versionierung und Release-Zyklen. +- Asynchrones Treiber-Verhalten und Konfiguration. +- Web Worker Setup und NPM Abhängigkeiten. +- Web Persistenztechnologien (OPFS). +- Webpack Module Federation Strategien. +- Hintergrund-Synchronisation. + +``` + +``` diff --git a/frontend/README.md b/frontend/README.md index 5d946f1a..3ccccae3 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -3,4 +3,4 @@ Dieses Modul enthält den gesamten Code für das Kotlin Multiplatform (KMP) Frontend "Meldestelle Portal". **Die vollständige Dokumentation befindet sich hier:** -[**-> docs/06_Frontend/README.md**](../docs/06_Frontend/README.md) +[**→ docs/06_Frontend/README.md**](../docs/06_Frontend/README.md) diff --git a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Buttons.kt b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Buttons.kt index 2798d5e9..e643aba0 100644 --- a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Buttons.kt +++ b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Buttons.kt @@ -22,23 +22,23 @@ import at.mocode.frontend.core.designsystem.theme.Dimens */ @Composable fun DenseButton( - text: String, - onClick: () -> Unit, - modifier: Modifier = Modifier, - enabled: Boolean = true, - containerColor: Color = MaterialTheme.colorScheme.primary + text: String, + onClick: () -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + containerColor: Color = MaterialTheme.colorScheme.primary ) { - Button( - onClick = onClick, - enabled = enabled, - modifier = modifier.height(32.dp), // Fixe, kompakte Höhe - shape = MaterialTheme.shapes.small, // Nutzt unsere 4dp Rundung - colors = ButtonDefaults.buttonColors(containerColor = containerColor), - contentPadding = PaddingValues(horizontal = Dimens.SpacingM, vertical = 0.dp) // Wenig Padding - ) { - Text( - text = text, - style = MaterialTheme.typography.labelMedium // Kleinere Schrift - ) - } + Button( + onClick = onClick, + enabled = enabled, + modifier = modifier.height(32.dp), // Fixe, kompakte Höhe + shape = MaterialTheme.shapes.small, // Nutzt unsere 4dp Rundung + colors = ButtonDefaults.buttonColors(containerColor = containerColor), + contentPadding = PaddingValues(horizontal = Dimens.SpacingM, vertical = 0.dp) // Wenig Padding + ) { + Text( + text = text, + style = MaterialTheme.typography.labelMedium // Kleinere Schrift + ) + } } diff --git a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Cards.kt b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Cards.kt index 6882b772..83918413 100644 --- a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Cards.kt +++ b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/components/Cards.kt @@ -21,22 +21,22 @@ import at.mocode.frontend.core.designsystem.theme.Dimens */ @Composable fun DashboardCard( - modifier: Modifier = Modifier, - content: @Composable ColumnScope.() -> Unit + modifier: Modifier = Modifier, + content: @Composable ColumnScope.() -> Unit ) { - Card( - modifier = modifier, - shape = MaterialTheme.shapes.medium, - colors = CardDefaults.cardColors( - containerColor = MaterialTheme.colorScheme.surface - ), - border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant), // Dünner Rahmen - elevation = CardDefaults.cardElevation(defaultElevation = 0.dp) // Kein Schatten + Card( + modifier = modifier, + shape = MaterialTheme.shapes.medium, + colors = CardDefaults.cardColors( + containerColor = MaterialTheme.colorScheme.surface + ), + border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant), // Dünner Rahmen + elevation = CardDefaults.cardElevation(defaultElevation = 0.dp) // Kein Schatten + ) { + Column( + modifier = Modifier.padding(Dimens.SpacingS) // Kompaktes Padding innen ) { - Column( - modifier = Modifier.padding(Dimens.SpacingS) // Kompaktes Padding innen - ) { - content() - } + content() } + } } diff --git a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/AppTheme.kt b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/AppTheme.kt index 3a9ec2b8..e0585907 100644 --- a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/AppTheme.kt +++ b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/AppTheme.kt @@ -18,89 +18,89 @@ import androidx.compose.ui.unit.sp // Blau steht für Aktion/Information, Grau für Struktur. private val LightColorScheme = lightColorScheme( - primary = Color(0xFF0052CC), // Enterprise Blue (stark) - onPrimary = Color.White, - primaryContainer = Color(0xFFDEEBFF), - onPrimaryContainer = Color(0xFF0052CC), + primary = Color(0xFF0052CC), // Enterprise Blue (stark) + onPrimary = Color.White, + primaryContainer = Color(0xFFDEEBFF), + onPrimaryContainer = Color(0xFF0052CC), - secondary = Color(0xFF2684FF), // Helleres Blau für Akzente - onSecondary = Color.White, + secondary = Color(0xFF2684FF), // Helleres Blau für Akzente + onSecondary = Color.White, - background = Color(0xFFF4F5F7), // Helles Grau (nicht hartes Weiß) - surface = Color.White, - onBackground = Color(0xFF172B4D), // Fast Schwarz (besser lesbar als #000) - onSurface = Color(0xFF172B4D), + background = Color(0xFFF4F5F7), // Helles Grau (nicht hartes Weiß) + surface = Color.White, + onBackground = Color(0xFF172B4D), // Fast Schwarz (besser lesbar als #000) + onSurface = Color(0xFF172B4D), - error = Color(0xFFDE350B), - onError = Color.White + error = Color(0xFFDE350B), + onError = Color.White ) private val DarkColorScheme = darkColorScheme( - primary = Color(0xFF4C9AFF), // Helleres Blau auf Dunkel - onPrimary = Color(0xFF091E42), - primaryContainer = Color(0xFF0052CC), - onPrimaryContainer = Color.White, + primary = Color(0xFF4C9AFF), // Helleres Blau auf Dunkel + onPrimary = Color(0xFF091E42), + primaryContainer = Color(0xFF0052CC), + onPrimaryContainer = Color.White, - secondary = Color(0xFF2684FF), - onSecondary = Color.White, + secondary = Color(0xFF2684FF), + onSecondary = Color.White, - background = Color(0xFF1E1E1E), // Dunkles Grau (angenehmer als #000) - surface = Color(0xFF2C2C2C), // Panels heben sich leicht ab - onBackground = Color(0xFFEBECF0), - onSurface = Color(0xFFEBECF0), + background = Color(0xFF1E1E1E), // Dunkles Grau (angenehmer als #000) + surface = Color(0xFF2C2C2C), // Panels heben sich leicht ab + onBackground = Color(0xFFEBECF0), + onSurface = Color(0xFFEBECF0), - error = Color(0xFFFF5630), - onError = Color.Black + error = Color(0xFFFF5630), + onError = Color.Black ) // --- 2. Formen (Shapes) --- // Enterprise Apps nutzen oft weniger Rundung als Consumer Apps (seriöser). private val AppShapes = Shapes( - small = RoundedCornerShape(Dimens.CornerRadiusS), // Buttons, Inputs - medium = RoundedCornerShape(Dimens.CornerRadiusM), // Cards, Dialogs - large = RoundedCornerShape(Dimens.CornerRadiusM) + small = RoundedCornerShape(Dimens.CornerRadiusS), // Buttons, Inputs + medium = RoundedCornerShape(Dimens.CornerRadiusM), // Cards, Dialogs + large = RoundedCornerShape(Dimens.CornerRadiusM) ) // --- 3. Typografie --- // wir setzen auf klare Hierarchie. private val AppTypography = Typography( - titleLarge = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Bold, - fontSize = 22.sp, - lineHeight = 28.sp - ), - titleMedium = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.SemiBold, - fontSize = 16.sp, - lineHeight = 24.sp - ), - bodyMedium = TextStyle( // Standard Text - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Normal, - fontSize = 14.sp, - lineHeight = 20.sp - ), - labelSmall = TextStyle( // Für dichte Tabellen/Labels - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Medium, - fontSize = 11.sp, - lineHeight = 16.sp - ) + titleLarge = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Bold, + fontSize = 22.sp, + lineHeight = 28.sp + ), + titleMedium = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.SemiBold, + fontSize = 16.sp, + lineHeight = 24.sp + ), + bodyMedium = TextStyle( // Standard Text + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 14.sp, + lineHeight = 20.sp + ), + labelSmall = TextStyle( // Für dichte Tabellen/Labels + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + lineHeight = 16.sp + ) ) @Composable fun AppTheme( - darkTheme: Boolean = false, // Kann später via Settings gesteuert werden - content: @Composable () -> Unit + darkTheme: Boolean = false, // Kann später via Settings gesteuert werden + content: @Composable () -> Unit ) { - val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme + val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme - MaterialTheme( - colorScheme = colorScheme, - shapes = AppShapes, - typography = AppTypography, - content = content - ) + MaterialTheme( + colorScheme = colorScheme, + shapes = AppShapes, + typography = AppTypography, + content = content + ) } diff --git a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/Dimens.kt b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/Dimens.kt index b5e9096e..7c5f07bf 100644 --- a/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/Dimens.kt +++ b/frontend/core/design-system/src/commonMain/kotlin/at/mocode/frontend/core/designsystem/theme/Dimens.kt @@ -8,20 +8,20 @@ import androidx.compose.ui.unit.dp * Wenn wir den Abstand global ändern wollen, machen wir das nur hier. */ object Dimens { - // Spacing (Abstände) - val SpacingXS = 4.dp // Sehr eng (für Tabellen, dichte Listen) - val SpacingS = 8.dp // Standard Abstand zwischen Elementen - val SpacingM = 16.dp // Abstand für Sektionen - val SpacingL = 24.dp // Außenabstand für Screens + // Spacing (Abstände) + val SpacingXS = 4.dp // Sehr eng (für Tabellen, dichte Listen) + val SpacingS = 8.dp // Standard Abstand zwischen Elementen + val SpacingM = 16.dp // Abstand für Sektionen + val SpacingL = 24.dp // Außenabstand für Screens - // Sizes (Größen) - val IconSizeS = 16.dp - val IconSizeM = 24.dp + // Sizes (Größen) + val IconSizeS = 16.dp + val IconSizeM = 24.dp - // Borders - val BorderThin = 1.dp + // Borders + val BorderThin = 1.dp - // Corner Radius (Ecken) - val CornerRadiusS = 4.dp // Leicht abgerundet (Enterprise Look) - val CornerRadiusM = 8.dp + // Corner Radius (Ecken) + val CornerRadiusS = 4.dp // Leicht abgerundet (Enterprise Look) + val CornerRadiusM = 8.dp } diff --git a/frontend/core/local-db/src/commonMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.kt b/frontend/core/local-db/src/commonMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.kt index 472ce4b6..e590ce9e 100644 --- a/frontend/core/local-db/src/commonMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.kt +++ b/frontend/core/local-db/src/commonMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.kt @@ -4,5 +4,5 @@ import app.cash.sqldelight.db.SqlDriver @Suppress("EXPECT_ACTUAL_CLASSIFIERS_ARE_IN_BETA_WARNING") expect class DatabaseDriverFactory() { - suspend fun createDriver(): SqlDriver + suspend fun createDriver(): SqlDriver } diff --git a/frontend/core/local-db/src/jsMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.js.kt b/frontend/core/local-db/src/jsMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.js.kt index a429b46e..77f6c04c 100644 --- a/frontend/core/local-db/src/jsMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.js.kt +++ b/frontend/core/local-db/src/jsMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.js.kt @@ -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' }) - """) + """ + ) } diff --git a/frontend/core/local-db/src/jsMain/resources/sqlite.worker.js b/frontend/core/local-db/src/jsMain/resources/sqlite.worker.js index 36d16a62..5b2317ed 100644 --- a/frontend/core/local-db/src/jsMain/resources/sqlite.worker.js +++ b/frontend/core/local-db/src/jsMain/resources/sqlite.worker.js @@ -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(); diff --git a/frontend/core/local-db/src/jvmMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.jvm.kt b/frontend/core/local-db/src/jvmMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.jvm.kt index 153600a9..01893f14 100644 --- a/frontend/core/local-db/src/jvmMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.jvm.kt +++ b/frontend/core/local-db/src/jvmMain/kotlin/at/mocode/frontend/core/localdb/DatabaseDriverFactory.jvm.kt @@ -4,31 +4,32 @@ import app.cash.sqldelight.db.SqlDriver import app.cash.sqldelight.driver.jdbc.sqlite.JdbcSqliteDriver import java.io.File +@Suppress("EXPECT_ACTUAL_CLASSIFIERS_ARE_IN_BETA_WARNING") actual class DatabaseDriverFactory { - actual suspend fun createDriver(): SqlDriver { - // For desktop, we use a persistent file database - // In dev mode, we might want to use a temporary file or user home - val dbFile = File(System.getProperty("user.home"), ".meldestelle/app_database.db") - dbFile.parentFile.mkdirs() + actual suspend fun createDriver(): SqlDriver { + // For desktop, we use a persistent file database + // In dev mode, we might want to use a temporary file or user home + val dbFile = File(System.getProperty("user.home"), ".meldestelle/app_database.db") + dbFile.parentFile.mkdirs() - val driver = JdbcSqliteDriver("jdbc:sqlite:${dbFile.absolutePath}") + val driver = JdbcSqliteDriver("jdbc:sqlite:${dbFile.absolutePath}") - // Schema creation/migration needs to be handled carefully. - // For now, we just create it if it doesn't exist. - // In a real app, we'd check version and migrate. - // Since generateAsync=true, the Schema.create signature might be suspend or return AsyncResult. - // However, JdbcSqliteDriver is synchronous. We might need to wrap or await. - // But wait! Schema.create(driver) returns void or Unit usually. - // Let's check the generated code later. For now, we assume standard behavior. + // Schema creation/migration needs to be handled carefully. + // For now, we just create it if it doesn't exist. + // In a real app, we'd check version and migrate. + // Since generateAsync=true, the Schema.create signature might be suspend or return AsyncResult. + // However, JdbcSqliteDriver is synchronous. We might need to wrap or await. + // But wait! Schema.create(driver) returns void or Unit usually. + // Let's check the generated code later. For now, we assume standard behavior. - try { - AppDatabase.Schema.create(driver).await() - } catch (e: Exception) { - // Schema might already exist. - // SQLDelight doesn't have "createIfNotExists" built-in easily without version check. - // We'll leave this simple for now and refine with proper migration logic later. - } - - return driver + try { + AppDatabase.Schema.create(driver).await() + } catch (e: Exception) { + // Schema might already exist. + // SQLDelight doesn't have "createIfNotExists" built-in easily without version check. + // We'll leave this simple for now and refine with proper migration logic later. } + + return driver + } } diff --git a/frontend/core/local-db/src/wasmJsMain/resources/sqlite.worker.js b/frontend/core/local-db/src/wasmJsMain/resources/sqlite.worker.js index d9ccb0bd..4fe51449 100644 --- a/frontend/core/local-db/src/wasmJsMain/resources/sqlite.worker.js +++ b/frontend/core/local-db/src/wasmJsMain/resources/sqlite.worker.js @@ -2,82 +2,82 @@ import sqlite3InitModule from '@sqlite.org/sqlite-wasm'; // 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 }) { - let db = null; - const open = (name) => { - db = driver.open(name); - }; +function runWorker({driver}) { + let db = null; + const open = (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'); - 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) { - 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) { + return postMessage({id: data && data.id, error: err?.message ?? String(err)}); + } + }; } // Error handling wrapper -self.onerror = function(event) { - console.error("Error in Web Worker:", 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:", 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}); }; try { - sqlite3InitModule({ - print: console.log, - printErr: console.error, - }).then((sqlite3) => { - try { - const opfsAvailable = 'opfs' in sqlite3; + sqlite3InitModule({ + print: console.log, + printErr: console.error, + }).then((sqlite3) => { + try { + const opfsAvailable = 'opfs' in sqlite3; - 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 (inner):", e); - self.postMessage({ type: 'error', message: 'Database initialization failed (inner): ' + e.message }); + 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 (inner):", e); + self.postMessage({type: 'error', message: 'Database initialization failed (inner): ' + e.message}); + } + }); } catch (e) { - console.error("Database initialization error in worker (outer):", e); - self.postMessage({ type: 'error', message: 'Database initialization failed (outer): ' + e.message }); + console.error("Database initialization error in worker (outer):", e); + self.postMessage({type: 'error', message: 'Database initialization failed (outer): ' + e.message}); } diff --git a/frontend/core/navigation/src/commonTest/kotlin/at/mocode/frontend/core/navigation/DeepLinkHandlerTest.kt b/frontend/core/navigation/src/commonTest/kotlin/at/mocode/frontend/core/navigation/DeepLinkHandlerTest.kt index db347f68..7fee34a6 100644 --- a/frontend/core/navigation/src/commonTest/kotlin/at/mocode/frontend/core/navigation/DeepLinkHandlerTest.kt +++ b/frontend/core/navigation/src/commonTest/kotlin/at/mocode/frontend/core/navigation/DeepLinkHandlerTest.kt @@ -8,7 +8,9 @@ import kotlin.test.assertTrue private class FakeNav : NavigationPort { var last: String? = null - override fun navigateTo(route: String) { last = route } + override fun navigateTo(route: String) { + last = route + } } private class FakeUserProvider(private val user: User?) : CurrentUserProvider { diff --git a/frontend/core/network/src/commonMain/kotlin/at/mocode/frontend/core/network/NetworkModule.kt b/frontend/core/network/src/commonMain/kotlin/at/mocode/frontend/core/network/NetworkModule.kt index e82b03b9..10ed39a1 100644 --- a/frontend/core/network/src/commonMain/kotlin/at/mocode/frontend/core/network/NetworkModule.kt +++ b/frontend/core/network/src/commonMain/kotlin/at/mocode/frontend/core/network/NetworkModule.kt @@ -11,7 +11,7 @@ import org.koin.core.qualifier.named import org.koin.dsl.module /** - * Simple token provider interface so core network module does not depend on auth-feature. + * Simple token provider interface so the core network module does not depend on auth-feature. */ interface TokenProvider { fun getAccessToken(): String? @@ -41,7 +41,11 @@ val networkModule = module { // 2. API Client (Configured for Gateway & Auth Header) single(named("apiClient")) { - val tokenProvider: TokenProvider? = try { get() } catch (_: Throwable) { null } + val tokenProvider: TokenProvider? = try { + get() + } catch (_: Throwable) { + null + } HttpClient { // JSON (kotlinx) configuration install(ContentNegotiation) { @@ -79,7 +83,7 @@ val networkModule = module { // Inject Authorization header if token is present val token = tokenProvider?.getAccessToken() if (token != null) { - header("Authorization", "Bearer $token") + header("Authorization", "Bearer $token") } } diff --git a/frontend/core/network/src/wasmJsMain/kotlin/at/mocode/frontend/core/network/PlatformConfig.wasmJs.kt b/frontend/core/network/src/wasmJsMain/kotlin/at/mocode/frontend/core/network/PlatformConfig.wasmJs.kt index 7b59e993..7fbf8d31 100644 --- a/frontend/core/network/src/wasmJsMain/kotlin/at/mocode/frontend/core/network/PlatformConfig.wasmJs.kt +++ b/frontend/core/network/src/wasmJsMain/kotlin/at/mocode/frontend/core/network/PlatformConfig.wasmJs.kt @@ -13,9 +13,9 @@ actual object PlatformConfig { // In Wasm, we can access a window directly if we are in the browser main thread. // However, we need to be careful about exceptions. val origin = try { - window.location.origin + window.location.origin } catch (e: Throwable) { - null + null } if (!origin.isNullOrBlank()) return origin.removeSuffix("/") @@ -28,9 +28,11 @@ actual object PlatformConfig { // Helper function for JS interop in Wasm // Kotlin/Wasm does not support 'dynamic' type or complex js() blocks inside functions. // We must use top-level external functions or simple js() expressions. -private fun getGlobalApiBaseUrl(): String = js(""" +private fun getGlobalApiBaseUrl(): String = js( + """ (function() { var global = typeof globalThis !== 'undefined' ? globalThis : (typeof window !== 'undefined' ? window : (typeof self !== 'undefined' ? self : {})); return (global.API_BASE_URL && typeof global.API_BASE_URL === 'string') ? global.API_BASE_URL : ""; })() -""") +""" +) diff --git a/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingScreen.kt b/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingScreen.kt index fb58d0e3..5a224302 100644 --- a/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingScreen.kt +++ b/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingScreen.kt @@ -23,274 +23,274 @@ import at.mocode.frontend.core.designsystem.theme.Dimens @Composable fun PingScreen( - viewModel: PingViewModel, - onBack: () -> Unit = {} + viewModel: PingViewModel, + onBack: () -> Unit = {} ) { - val uiState = viewModel.uiState + val uiState = viewModel.uiState - // Wir nutzen jetzt das globale Theme (Hintergrund kommt vom Theme) - Column( + // Wir nutzen jetzt das globale Theme (Hintergrund kommt vom Theme) + Column( + modifier = Modifier + .fillMaxSize() + .background(MaterialTheme.colorScheme.background) + .padding(Dimens.SpacingS) // Globales Spacing + ) { + // 1. Header + PingHeader( + onBack = onBack, + isSyncing = uiState.isSyncing, + isLoading = uiState.isLoading + ) + + Spacer(Modifier.height(Dimens.SpacingS)) + + // 2. Main Dashboard Area (Split View) + Row(modifier = Modifier.weight(1f)) { + // Left Panel: Controls & Status Grid (60%) + Column( modifier = Modifier - .fillMaxSize() - .background(MaterialTheme.colorScheme.background) - .padding(Dimens.SpacingS) // Globales Spacing - ) { - // 1. Header - PingHeader( - onBack = onBack, - isSyncing = uiState.isSyncing, - isLoading = uiState.isLoading - ) - + .weight(0.6f) + .fillMaxHeight() + .padding(end = Dimens.SpacingS) + ) { + ActionToolbar(viewModel) Spacer(Modifier.height(Dimens.SpacingS)) + StatusGrid(uiState) + } - // 2. Main Dashboard Area (Split View) - Row(modifier = Modifier.weight(1f)) { - // Left Panel: Controls & Status Grid (60%) - Column( - modifier = Modifier - .weight(0.6f) - .fillMaxHeight() - .padding(end = Dimens.SpacingS) - ) { - ActionToolbar(viewModel) - Spacer(Modifier.height(Dimens.SpacingS)) - StatusGrid(uiState) - } - - // Right Panel: Terminal Log (40%) - // Hier nutzen wir bewusst einen dunklen "Terminal"-Look, unabhängig vom Theme - DashboardCard( - modifier = Modifier - .weight(0.4f) - .fillMaxHeight() - ) { - LogHeader(onClear = { viewModel.clearLogs() }) - LogConsole(uiState.logs) - } - } - - Spacer(Modifier.height(Dimens.SpacingXS)) - - // 3. Footer - PingStatusBar(uiState.lastSyncResult) + // Right Panel: Terminal Log (40%) + // Hier nutzen wir bewusst einen dunklen "Terminal"-Look, unabhängig vom Theme + DashboardCard( + modifier = Modifier + .weight(0.4f) + .fillMaxHeight() + ) { + LogHeader(onClear = { viewModel.clearLogs() }) + LogConsole(uiState.logs) + } } + + Spacer(Modifier.height(Dimens.SpacingXS)) + + // 3. Footer + PingStatusBar(uiState.lastSyncResult) + } } @Composable private fun PingHeader( - onBack: () -> Unit, - isSyncing: Boolean, - isLoading: Boolean + onBack: () -> Unit, + isSyncing: Boolean, + isLoading: Boolean ) { - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.fillMaxWidth().height(40.dp) - ) { - IconButton(onClick = onBack) { - Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back", tint = MaterialTheme.colorScheme.onBackground) - } - Text( - "PING SERVICE // DASHBOARD", - style = MaterialTheme.typography.titleMedium, - color = MaterialTheme.colorScheme.onBackground, - modifier = Modifier.weight(1f).padding(start = Dimens.SpacingS) - ) - - if (isLoading) { - StatusBadge("BUSY", Color(0xFFFFA000)) // Amber - Spacer(Modifier.width(Dimens.SpacingS)) - } - - if (isSyncing) { - StatusBadge("SYNCING", MaterialTheme.colorScheme.primary) - Spacer(Modifier.width(Dimens.SpacingS)) - CircularProgressIndicator( - modifier = Modifier.size(16.dp), - strokeWidth = 2.dp, - color = MaterialTheme.colorScheme.primary - ) - } else { - StatusBadge("IDLE", Color(0xFF388E3C)) // Green - } + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.fillMaxWidth().height(40.dp) + ) { + IconButton(onClick = onBack) { + Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back", tint = MaterialTheme.colorScheme.onBackground) } + Text( + "PING SERVICE // DASHBOARD", + style = MaterialTheme.typography.titleMedium, + color = MaterialTheme.colorScheme.onBackground, + modifier = Modifier.weight(1f).padding(start = Dimens.SpacingS) + ) + + if (isLoading) { + StatusBadge("BUSY", Color(0xFFFFA000)) // Amber + Spacer(Modifier.width(Dimens.SpacingS)) + } + + if (isSyncing) { + StatusBadge("SYNCING", MaterialTheme.colorScheme.primary) + Spacer(Modifier.width(Dimens.SpacingS)) + CircularProgressIndicator( + modifier = Modifier.size(16.dp), + strokeWidth = 2.dp, + color = MaterialTheme.colorScheme.primary + ) + } else { + StatusBadge("IDLE", Color(0xFF388E3C)) // Green + } + } } @Composable private fun StatusBadge(text: String, color: Color) { - Surface( - color = color.copy(alpha = 0.1f), - contentColor = color, - shape = MaterialTheme.shapes.small, - border = androidx.compose.foundation.BorderStroke(1.dp, color) - ) { - Text( - text = text, - style = MaterialTheme.typography.labelSmall, - modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp) - ) - } + Surface( + color = color.copy(alpha = 0.1f), + contentColor = color, + shape = MaterialTheme.shapes.small, + border = androidx.compose.foundation.BorderStroke(1.dp, color) + ) { + Text( + text = text, + style = MaterialTheme.typography.labelSmall, + modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp) + ) + } } @Composable private fun ActionToolbar(viewModel: PingViewModel) { - // Wrap buttons to avoid overflow on small screens - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(Dimens.SpacingXS) - ) { - DenseButton(text = "Simple", onClick = { viewModel.performSimplePing() }) - DenseButton(text = "Enhanced", onClick = { viewModel.performEnhancedPing() }) - DenseButton(text = "Secure", onClick = { viewModel.performSecurePing() }) - DenseButton(text = "Health", onClick = { viewModel.performHealthCheck() }) - DenseButton( - text = "Sync", - onClick = { viewModel.triggerSync() }, - containerColor = MaterialTheme.colorScheme.secondary - ) - } + // Wrap buttons to avoid overflow on small screens + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(Dimens.SpacingXS) + ) { + DenseButton(text = "Simple", onClick = { viewModel.performSimplePing() }) + DenseButton(text = "Enhanced", onClick = { viewModel.performEnhancedPing() }) + DenseButton(text = "Secure", onClick = { viewModel.performSecurePing() }) + DenseButton(text = "Health", onClick = { viewModel.performHealthCheck() }) + DenseButton( + text = "Sync", + onClick = { viewModel.triggerSync() }, + containerColor = MaterialTheme.colorScheme.secondary + ) + } } @Composable private fun StatusGrid(uiState: PingUiState) { - Column(verticalArrangement = Arrangement.spacedBy(Dimens.SpacingS)) { - // Row 1 - Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(Dimens.SpacingS)) { - DashboardCard(modifier = Modifier.weight(1f)) { - StatusHeader("SIMPLE / SECURE PING") - if (uiState.simplePingResponse != null) { - KeyValueRow("Status", uiState.simplePingResponse.status) - KeyValueRow("Service", uiState.simplePingResponse.service) - KeyValueRow("Time", uiState.simplePingResponse.timestamp) - } else { - EmptyStateText() - } - } - - DashboardCard(modifier = Modifier.weight(1f)) { - StatusHeader("HEALTH CHECK") - if (uiState.healthResponse != null) { - KeyValueRow("Status", uiState.healthResponse.status) - KeyValueRow("Healthy", uiState.healthResponse.healthy.toString()) - KeyValueRow("Service", uiState.healthResponse.service) - } else { - EmptyStateText() - } - } + Column(verticalArrangement = Arrangement.spacedBy(Dimens.SpacingS)) { + // Row 1 + Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(Dimens.SpacingS)) { + DashboardCard(modifier = Modifier.weight(1f)) { + StatusHeader("SIMPLE / SECURE PING") + if (uiState.simplePingResponse != null) { + KeyValueRow("Status", uiState.simplePingResponse.status) + KeyValueRow("Service", uiState.simplePingResponse.service) + KeyValueRow("Time", uiState.simplePingResponse.timestamp) + } else { + EmptyStateText() } + } - // Row 2 - DashboardCard(modifier = Modifier.fillMaxWidth()) { - StatusHeader("ENHANCED PING (RESILIENCE)") - if (uiState.enhancedPingResponse != null) { - Row(modifier = Modifier.fillMaxWidth()) { - Column(modifier = Modifier.weight(1f)) { - KeyValueRow("Status", uiState.enhancedPingResponse.status) - KeyValueRow("Timestamp", uiState.enhancedPingResponse.timestamp) - } - Column(modifier = Modifier.weight(1f)) { - KeyValueRow("Circuit Breaker", uiState.enhancedPingResponse.circuitBreakerState) - KeyValueRow("Latency", "${uiState.enhancedPingResponse.responseTime}ms") - } - } - } else { - EmptyStateText() - } + DashboardCard(modifier = Modifier.weight(1f)) { + StatusHeader("HEALTH CHECK") + if (uiState.healthResponse != null) { + KeyValueRow("Status", uiState.healthResponse.status) + KeyValueRow("Healthy", uiState.healthResponse.healthy.toString()) + KeyValueRow("Service", uiState.healthResponse.service) + } else { + EmptyStateText() } + } } + + // Row 2 + DashboardCard(modifier = Modifier.fillMaxWidth()) { + StatusHeader("ENHANCED PING (RESILIENCE)") + if (uiState.enhancedPingResponse != null) { + Row(modifier = Modifier.fillMaxWidth()) { + Column(modifier = Modifier.weight(1f)) { + KeyValueRow("Status", uiState.enhancedPingResponse.status) + KeyValueRow("Timestamp", uiState.enhancedPingResponse.timestamp) + } + Column(modifier = Modifier.weight(1f)) { + KeyValueRow("Circuit Breaker", uiState.enhancedPingResponse.circuitBreakerState) + KeyValueRow("Latency", "${uiState.enhancedPingResponse.responseTime}ms") + } + } + } else { + EmptyStateText() + } + } + } } @Composable private fun StatusHeader(title: String) { - Text( - text = title, - style = MaterialTheme.typography.labelSmall, - color = MaterialTheme.colorScheme.primary, - fontWeight = FontWeight.Bold, - modifier = Modifier.padding(bottom = Dimens.SpacingXS) - ) - HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant, thickness = 1.dp) - Spacer(Modifier.height(Dimens.SpacingXS)) + Text( + text = title, + style = MaterialTheme.typography.labelSmall, + color = MaterialTheme.colorScheme.primary, + fontWeight = FontWeight.Bold, + modifier = Modifier.padding(bottom = Dimens.SpacingXS) + ) + HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant, thickness = 1.dp) + Spacer(Modifier.height(Dimens.SpacingXS)) } @Composable private fun EmptyStateText() { - Text("No Data", style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant) + Text("No Data", style = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onSurfaceVariant) } @Composable private fun KeyValueRow(key: String, value: String) { - Row(modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp)) { - Text( - text = "$key:", - modifier = Modifier.width(100.dp), - style = MaterialTheme.typography.bodySmall, - color = MaterialTheme.colorScheme.onSurfaceVariant - ) - Text( - text = value, - style = MaterialTheme.typography.bodySmall, - fontWeight = FontWeight.Medium, - color = MaterialTheme.colorScheme.onSurface - ) - } + Row(modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp)) { + Text( + text = "$key:", + modifier = Modifier.width(100.dp), + style = MaterialTheme.typography.bodySmall, + color = MaterialTheme.colorScheme.onSurfaceVariant + ) + Text( + text = value, + style = MaterialTheme.typography.bodySmall, + fontWeight = FontWeight.Medium, + color = MaterialTheme.colorScheme.onSurface + ) + } } // --- Log Components (Terminal Style - intentionally distinct) --- @Composable private fun LogHeader(onClear: () -> Unit) { - Row( - modifier = Modifier - .fillMaxWidth() - .padding(bottom = Dimens.SpacingXS), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween + Row( + modifier = Modifier + .fillMaxWidth() + .padding(bottom = Dimens.SpacingXS), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Text("EVENT LOG", style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.Bold) + TextButton( + onClick = onClear, + contentPadding = PaddingValues(0.dp), + modifier = Modifier.height(24.dp) ) { - Text("EVENT LOG", style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.Bold) - TextButton( - onClick = onClear, - contentPadding = PaddingValues(0.dp), - modifier = Modifier.height(24.dp) - ) { - Text("CLEAR", style = MaterialTheme.typography.labelSmall) - } + Text("CLEAR", style = MaterialTheme.typography.labelSmall) } + } } @Composable private fun LogConsole(logs: List) { - LazyColumn( - modifier = Modifier - .fillMaxSize() - .background(Color(0xFF1E1E1E)) // Always dark for terminal - .padding(Dimens.SpacingXS), - reverseLayout = false - ) { - items(logs) { log -> - val color = if (log.isError) Color(0xFFFF5555) else Color(0xFF55FF55) - Text( - text = "[${log.timestamp}] [${log.source}] ${log.message}", - color = color, - fontSize = 11.sp, - fontFamily = FontFamily.Monospace, - lineHeight = 14.sp - ) - } + LazyColumn( + modifier = Modifier + .fillMaxSize() + .background(Color(0xFF1E1E1E)) // Always dark for terminal + .padding(Dimens.SpacingXS), + reverseLayout = false + ) { + items(logs) { log -> + val color = if (log.isError) Color(0xFFFF5555) else Color(0xFF55FF55) + Text( + text = "[${log.timestamp}] [${log.source}] ${log.message}", + color = color, + fontSize = 11.sp, + fontFamily = FontFamily.Monospace, + lineHeight = 14.sp + ) } + } } @Composable private fun PingStatusBar(lastSync: String?) { - Surface( - color = MaterialTheme.colorScheme.primaryContainer, - modifier = Modifier.fillMaxWidth() - ) { - Text( - text = lastSync ?: "Ready", - style = MaterialTheme.typography.labelSmall, - color = MaterialTheme.colorScheme.onPrimaryContainer, - modifier = Modifier.padding(horizontal = Dimens.SpacingS, vertical = 2.dp) - ) - } + Surface( + color = MaterialTheme.colorScheme.primaryContainer, + modifier = Modifier.fillMaxWidth() + ) { + Text( + text = lastSync ?: "Ready", + style = MaterialTheme.typography.labelSmall, + color = MaterialTheme.colorScheme.onPrimaryContainer, + modifier = Modifier.padding(horizontal = Dimens.SpacingS, vertical = 2.dp) + ) + } } diff --git a/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingViewModel.kt b/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingViewModel.kt index 78ad8d22..c24b8547 100644 --- a/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingViewModel.kt +++ b/frontend/features/ping-feature/src/commonMain/kotlin/at/mocode/ping/feature/presentation/PingViewModel.kt @@ -16,10 +16,10 @@ import kotlinx.datetime.TimeZone import kotlinx.datetime.toLocalDateTime data class LogEntry( - val timestamp: String, - val source: String, - val message: String, - val isError: Boolean = false + val timestamp: String, + val source: String, + val message: String, + val isError: Boolean = false ) data class PingUiState( @@ -43,7 +43,9 @@ class PingViewModel( private fun addLog(source: String, message: String, isError: Boolean = false) { val now = Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()) - val timeString = "${now.hour.toString().padStart(2, '0')}:${now.minute.toString().padStart(2, '0')}:${now.second.toString().padStart(2, '0')}" + val timeString = "${now.hour.toString().padStart(2, '0')}:${now.minute.toString().padStart(2, '0')}:${ + now.second.toString().padStart(2, '0') + }" val entry = LogEntry(timeString, source, message, isError) uiState = uiState.copy(logs = listOf(entry) + uiState.logs) // Prepend for newest first } diff --git a/frontend/shared/build.gradle.kts b/frontend/shared/build.gradle.kts index 27bdfafe..507b211f 100644 --- a/frontend/shared/build.gradle.kts +++ b/frontend/shared/build.gradle.kts @@ -1,93 +1,109 @@ plugins { - alias(libs.plugins.kotlinMultiplatform) - alias(libs.plugins.kotlinSerialization) - alias(libs.plugins.composeMultiplatform) - alias(libs.plugins.composeCompiler) + alias(libs.plugins.kotlinMultiplatform) + alias(libs.plugins.kotlinSerialization) + alias(libs.plugins.composeMultiplatform) + alias(libs.plugins.composeCompiler) } kotlin { - jvm("desktop") + jvm("desktop") - js(IR) { - browser() - binaries.executable() + js(IR) { + // WICHTIG: Als Library kompilieren für Webpack Federation + binaries.library() + generateTypeScriptDefinitions() + browser { + commonWebpackConfig { + cssSupport { + enabled.set(true) + } + } + } + } + + // Wasm vorerst deaktiviert + /* + @OptIn(org.jetbrains.kotlin.gradle.ExperimentalWasmDsl::class) + wasmJs { + browser() + binaries.executable() + } + */ + + sourceSets { + commonMain { + dependencies { + implementation(projects.frontend.core.domain) + // implementation(projects.frontend.core.designSystem) // REMOVED: Circular dependency + implementation(projects.frontend.core.navigation) + implementation(projects.frontend.core.network) + implementation(projects.frontend.core.localDb) + + // Features - REMOVED: Circular dependency. Shared should NOT depend on features. + // implementation(projects.frontend.features.authFeature) + // implementation(projects.frontend.features.pingFeature) + + // KMP Bundles + implementation(libs.bundles.kmp.common) + implementation(libs.bundles.compose.common) + + // Ktor (used directly in shared/di and shared/network) + implementation(libs.ktor.client.core) + implementation(libs.ktor.client.contentNegotiation) + implementation(libs.ktor.client.logging) + implementation(libs.ktor.client.serialization.kotlinx.json) + + // Serialization + implementation(libs.kotlinx.serialization.json) + + implementation(libs.kotlinx.coroutines.core) + // implementation(libs.sqldelight.coroutines) // Wird transitiv über core:localDb geladen + + // Compose + implementation(compose.runtime) + implementation(compose.foundation) + implementation(compose.material3) + implementation(compose.ui) + implementation(compose.components.resources) + implementation(compose.components.uiToolingPreview) + + // Koin + implementation(libs.koin.core) + implementation(libs.koin.compose) + implementation(libs.koin.compose.viewmodel) + } + } + + commonTest { + dependencies { + implementation(libs.kotlin.test) + } + } + + val desktopMain by getting { + dependencies { + implementation(compose.desktop.currentOs) + implementation(libs.kotlinx.coroutines.swing) + // implementation(libs.sqldelight.driver.sqlite) // Wird transitiv über core:localDb geladen + } + } + + val jsMain by getting { + dependencies { + implementation(libs.ktor.client.js) + // implementation(libs.sqldelight.driver.web) // Wird transitiv über core:localDb geladen + + // Webpack Plugin für Federation Support (falls benötigt) + implementation(devNpm("copy-webpack-plugin", "12.0.0")) + } } - // Wasm vorerst deaktiviert /* - @OptIn(org.jetbrains.kotlin.gradle.ExperimentalWasmDsl::class) - wasmJs { - browser() - binaries.executable() + val wasmJsMain by getting { + dependencies { + implementation(libs.ktor.client.js) + } } */ - - sourceSets { - commonMain { - dependencies { - implementation(projects.frontend.core.domain) - // implementation(projects.frontend.core.designSystem) // REMOVED: Circular dependency - implementation(projects.frontend.core.navigation) - implementation(projects.frontend.core.network) - implementation(projects.frontend.core.localDb) - - // Features - REMOVED: Circular dependency. Shared should NOT depend on features. - // implementation(projects.frontend.features.authFeature) - // implementation(projects.frontend.features.pingFeature) - - // KMP Bundles - implementation(libs.bundles.kmp.common) - implementation(libs.bundles.compose.common) - - // Ktor (used directly in shared/di and shared/network) - implementation(libs.ktor.client.core) - implementation(libs.ktor.client.contentNegotiation) - implementation(libs.ktor.client.logging) - implementation(libs.ktor.client.serialization.kotlinx.json) - - // Serialization - implementation(libs.kotlinx.serialization.json) - - // Compose - implementation(compose.runtime) - implementation(compose.foundation) - implementation(compose.material3) - implementation(compose.ui) - implementation(compose.components.resources) - implementation(compose.components.uiToolingPreview) - - // Koin - implementation(libs.koin.core) - implementation(libs.koin.compose) - implementation(libs.koin.compose.viewmodel) - } - } - - commonTest { - dependencies { - implementation(libs.kotlin.test) - } - } - - val desktopMain by getting { - dependencies { - implementation(compose.desktop.currentOs) - implementation(libs.kotlinx.coroutines.swing) - } - } - - val jsMain by getting { - dependencies { - implementation(libs.ktor.client.js) - } - } - - /* - val wasmJsMain by getting { - dependencies { - implementation(libs.ktor.client.js) - } - } - */ - } + } } diff --git a/frontend/shared/src/commonMain/kotlin/at/mocode/shared/network/NetworkUtils.kt b/frontend/shared/src/commonMain/kotlin/at/mocode/shared/network/NetworkUtils.kt index caae7256..05bba72a 100644 --- a/frontend/shared/src/commonMain/kotlin/at/mocode/shared/network/NetworkUtils.kt +++ b/frontend/shared/src/commonMain/kotlin/at/mocode/shared/network/NetworkUtils.kt @@ -1,6 +1,5 @@ package at.mocode.shared.network - import at.mocode.shared.domain.model.ApiError import kotlinx.coroutines.delay diff --git a/frontend/shells/meldestelle-portal/build.gradle.kts b/frontend/shells/meldestelle-portal/build.gradle.kts index f34482c8..60712b0a 100644 --- a/frontend/shells/meldestelle-portal/build.gradle.kts +++ b/frontend/shells/meldestelle-portal/build.gradle.kts @@ -51,8 +51,6 @@ kotlin { } // Browser-Tests komplett deaktivieren (Configuration Cache kompatibel) testTask { -// enabled = false - useKarma { useChromeHeadless() environment("CHROME_BIN", "/usr/bin/google-chrome-stable") @@ -62,15 +60,6 @@ kotlin { binaries.executable() } - // Wasm vorerst deaktiviert - /* - @OptIn(org.jetbrains.kotlin.gradle.ExperimentalWasmDsl::class) - wasmJs { - browser() - binaries.executable() - } - */ - sourceSets { commonMain.dependencies { // Shared modules @@ -114,18 +103,6 @@ kotlin { implementation(devNpm("copy-webpack-plugin", "11.0.0")) } - /* - val wasmJsMain = getByName("wasmJsMain") - wasmJsMain.dependencies { - implementation(libs.ktor.client.js) // WASM verwendet JS-Client [cite: 7] - - // Compose für shared UI components für WASM - implementation(compose.runtime) - implementation(compose.foundation) - implementation(compose.material3) - } - */ - commonTest.dependencies { implementation(libs.kotlin.test) } @@ -136,104 +113,28 @@ kotlin { // SQLDelight WebWorker (OPFS) resource // --------------------------------------------------------------------------- // `:frontend:core:local-db` ships `sqlite.worker.js` as a JS resource. -// When bundling the final JS app, webpack resolves `new URL("sqlite.worker.js", import.meta.url)` -// relative to the Kotlin JS package folder (root build dir). We therefore copy the worker into -// that folder before webpack runs. +// We need to ensure this worker file is available in the output directory so the browser can load it. +// The WASM file itself is handled by Webpack (via CopyWebpackPlugin in webpack.config.d/sqlite-config.js). -// HACK: Overwrite sqlite3.wasm in node_modules with a dummy JS file to fool Webpack -val patchSqliteWasmInNodeModules by tasks.registering(Copy::class) { - dependsOn(rootProject.tasks.named("kotlinNpmInstall")) +val copySqliteWorkerToWebpackSource by tasks.registering(Copy::class) { val localDb = project(":frontend:core:local-db") dependsOn(localDb.tasks.named("jsProcessResources")) - // We take our dummy.js - from(localDb.layout.buildDirectory.file("processedResources/js/main/dummy.js")) { - rename { "sqlite3.wasm" } // Rename it to sqlite3.wasm - } - - // And copy it OVER the original wasm file in node_modules - into(rootProject.layout.buildDirectory.dir("js/node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm")) - - // Force overwrite - duplicatesStrategy = DuplicatesStrategy.INCLUDE -} - -val copySqliteAssetsToWebpackSource by tasks.registering(Copy::class) { - val localDb = project(":frontend:core:local-db") - dependsOn(localDb.tasks.named("jsProcessResources"), rootProject.tasks.named("kotlinNpmInstall")) - - // Explicit dependency on the patch task to ensure we copy the REAL wasm file before it gets patched? - // NO! We want to copy the REAL wasm file to the output, but PATCH the one in node_modules. - // So we must copy the real one BEFORE patching. - // But wait, copySqliteAssetsToWebpackSource copies FROM node_modules. - // If we patch node_modules first, we copy the dummy file! - - // So: copySqliteAssetsToWebpackSource must run BEFORE patchSqliteWasmInNodeModules? - // Or we copy from a different source (e.g. the original npm package cache? No access). - - // Better: We copy the real wasm file from node_modules to a temporary location FIRST, - // then patch node_modules, then copy from temp to output. - - // Actually, we can just copy from node_modules BEFORE the patch task runs. - // But Gradle task ordering is tricky. - - // Let's change the source of the copy. We can't easily access the original npm package. - // But we know that `kotlinNpmInstall` restores the original files. - - // So the order must be: - // 1. kotlinNpmInstall (restores original sqlite3.wasm) - // 2. copySqliteAssetsToWebpackSource (copies original sqlite3.wasm to output) - // 3. patchSqliteWasmInNodeModules (overwrites sqlite3.wasm with dummy.js) - // 4. webpack (uses dummy.js) - - mustRunAfter(rootProject.tasks.named("kotlinNpmInstall")) - from(localDb.layout.buildDirectory.file("processedResources/js/main/sqlite.worker.js")) - from(rootProject.layout.buildDirectory.file("js/node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm")) // Root build directory where Kotlin JS packages are assembled. // This is one of the directories served by webpack-dev-server for static content. into(rootProject.layout.buildDirectory.dir("js/packages/${rootProject.name}-frontend-shells-meldestelle-portal/kotlin")) } -// Additional task to copy the worker and its wasm dependency to the distribution folder (for production build) -val copySqliteAssetsToDist by tasks.registering(Copy::class) { - val localDb = project(":frontend:core:local-db") - dependsOn(localDb.tasks.named("jsProcessResources"), rootProject.tasks.named("kotlinNpmInstall")) - - // Same logic here: copy before patch - mustRunAfter(rootProject.tasks.named("kotlinNpmInstall")) - - from(localDb.layout.buildDirectory.file("processedResources/js/main/sqlite.worker.js")) - from(rootProject.layout.buildDirectory.file("js/node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm")) - - // Copy to the distribution directory where index.html resides - into(layout.buildDirectory.dir("dist/js/productionExecutable")) -} - -// Ensure the assets are present for the production bundle. -tasks.named("jsBrowserProductionWebpack") { - dependsOn(copySqliteAssetsToWebpackSource) - dependsOn(patchSqliteWasmInNodeModules) - - // Enforce order: Copy real assets first, then patch node_modules - // patchSqliteWasmInNodeModules must run AFTER copySqliteAssetsToWebpackSource - // But wait, dependsOn doesn't guarantee order. - // We need to configure the tasks themselves. - - finalizedBy(copySqliteAssetsToDist) -} - -// Configure task ordering -patchSqliteWasmInNodeModules { - mustRunAfter(copySqliteAssetsToWebpackSource) - // Removed circular dependency: mustRunAfter(copySqliteAssetsToDist) -} - -// Ensure the assets are present for the development bundle. +// Ensure the worker is present for the development bundle. tasks.named("jsBrowserDevelopmentWebpack") { - dependsOn(copySqliteAssetsToWebpackSource) - dependsOn(patchSqliteWasmInNodeModules) + dependsOn(copySqliteWorkerToWebpackSource) +} + +// Ensure the worker is present for the production bundle. +tasks.named("jsBrowserProductionWebpack") { + dependsOn(copySqliteWorkerToWebpackSource) } // KMP Compile-Optionen @@ -253,9 +154,6 @@ tasks.withType { // Kotlin/JS source maps // --------------------------------------------------------------------------- // Production source maps must remain enabled for browser debugging. -// The remaining Kotlin/Gradle message -// `Cannot rewrite paths in JavaScript source maps: Too many sources or format is not supported` -// is treated as an external Kotlin/JS toolchain limitation and is documented separately. // Configure a duplicate handling strategy for distribution tasks tasks.withType { @@ -268,7 +166,7 @@ tasks.withType { // Duplicate-Handling für Distribution tasks.withType { - duplicatesStrategy = DuplicatesStrategy.EXCLUDE // Statt EXCLUDE + duplicatesStrategy = DuplicatesStrategy.EXCLUDE } tasks.withType { diff --git a/frontend/shells/meldestelle-portal/src/commonMain/kotlin/MainApp.kt b/frontend/shells/meldestelle-portal/src/commonMain/kotlin/MainApp.kt index e1473378..b9fba4cb 100644 --- a/frontend/shells/meldestelle-portal/src/commonMain/kotlin/MainApp.kt +++ b/frontend/shells/meldestelle-portal/src/commonMain/kotlin/MainApp.kt @@ -39,6 +39,7 @@ fun MainApp() { onPrimaryCta = { currentScreen = AppScreen.Login }, onSecondary = { currentScreen = AppScreen.Home } ) + is AppScreen.Home -> WelcomeScreen( authTokenManager = authTokenManager, onOpenPing = { currentScreen = AppScreen.Ping }, @@ -169,7 +170,7 @@ private fun LandingScreen( @Composable private fun FeatureCard(number: String, title: String, body: String) { - Surface( tonalElevation = 0.dp ) { + Surface(tonalElevation = 0.dp) { Row(modifier = Modifier.fillMaxWidth()) { Column(modifier = Modifier.width(56.dp).padding(top = 6.dp)) { Text(text = number, style = MaterialTheme.typography.titleMedium, color = MaterialTheme.colorScheme.primary) diff --git a/frontend/shells/meldestelle-portal/src/jsMain/resources/dummy.js b/frontend/shells/meldestelle-portal/src/jsMain/resources/dummy.js deleted file mode 100644 index 1ad26507..00000000 --- a/frontend/shells/meldestelle-portal/src/jsMain/resources/dummy.js +++ /dev/null @@ -1,14 +0,0 @@ -// This is a dummy file to satisfy Webpack's requirement for sqlite3.wasm and other modules. -// It mimics the structure of the sqlite3-wasm module to prevent build errors. - -// The worker code imports it like this: -// import sqlite3InitModule from '@sqlite.org/sqlite-wasm'; - -// So we need a default export that is a function. -// This function should mimic the behavior of sqlite3InitModule, which returns a Promise. -export default function dummySqlite3InitModule() { - // Since we are manually loading the WASM binary in the worker, this dummy module - // is primarily here to satisfy Webpack's resolution and prevent errors. - // It doesn't need to actually load the WASM. - return Promise.resolve({}); -}; diff --git a/frontend/shells/meldestelle-portal/src/jsMain/resources/index.html b/frontend/shells/meldestelle-portal/src/jsMain/resources/index.html index 9c7f76f0..ffcf32a2 100644 --- a/frontend/shells/meldestelle-portal/src/jsMain/resources/index.html +++ b/frontend/shells/meldestelle-portal/src/jsMain/resources/index.html @@ -15,7 +15,7 @@ +