Add basic UI for the compose app with Wasm

Author: JSMonk

build.gradle.kts

@@ -1,23 +1,24 @@
 import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack
 
-val kotlinVersion = "1.8.21"
-val serializationVersion = "1.5.1"
+val serializationVersion = "1.6.2"
 val ktorVersion = "2.3.0"
 val logbackVersion = "1.2.11"
 val kotlinWrappersVersion = "1.0.0-pre.561"
 val kmongoVersion = "4.5.0"
 
 plugins {
-    kotlin("multiplatform") version "1.8.21"
+    kotlin("multiplatform") version "1.9.21"
     application //to run JVM part
-    kotlin("plugin.serialization") version "1.8.21"
+    kotlin("plugin.serialization") version "1.9.21"
+    id("org.jetbrains.compose") version "1.6.0-alpha01"
 }
 
 group = "org.example"
 version = "1.0-SNAPSHOT"
 
 repositories {
     mavenCentral()
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
 }
 
 kotlin {
@@ -29,11 +30,15 @@ kotlin {
             binaries.executable()
         }
     }
+    wasmJs {
+        browser {
+            binaries.executable()
+        }
+    }
     sourceSets {
         val commonMain by getting {
             dependencies {
                 implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:$serializationVersion")
-                implementation("io.ktor:ktor-client-core:$ktorVersion")
             }
         }
 
@@ -46,6 +51,7 @@ kotlin {
 
         val jvmMain by getting {
             dependencies {
+                implementation("io.ktor:ktor-client-core:$ktorVersion")
                 implementation("io.ktor:ktor-serialization:$ktorVersion")
                 implementation("io.ktor:ktor-server-content-negotiation:$ktorVersion")
                 implementation("io.ktor:ktor-serialization-kotlinx-json:$ktorVersion")
@@ -60,6 +66,7 @@ kotlin {
 
         val jsMain by getting {
             dependencies {
+                implementation("io.ktor:ktor-client-core:$ktorVersion")
                 implementation("io.ktor:ktor-client-js:$ktorVersion")
                 implementation("io.ktor:ktor-client-content-negotiation:$ktorVersion")
                 implementation("io.ktor:ktor-serialization-kotlinx-json:$ktorVersion")
@@ -68,13 +75,28 @@ kotlin {
                 implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
             }
         }
+
+        val wasmJsMain by getting {
+            dependencies {
+                implementation(compose.runtime)
+                implementation(compose.ui)
+                implementation(compose.foundation)
+                implementation(compose.material3)
+                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+                implementation(compose.components.resources)
+            }
+        }
     }
 }
 
 application {
     mainClass.set("ServerKt")
 }
 
+compose.experimental {
+    web.application {}
+}
+
 // include JS artifacts in any JAR we generate
 tasks.named<Jar>("jvmJar").configure {
     val taskName = if (project.hasProperty("isProduction")
@@ -85,7 +107,9 @@ tasks.named<Jar>("jvmJar").configure {
         "jsBrowserDevelopmentWebpack"
     }
     val webpackTask = tasks.named<KotlinWebpack>(taskName)
-    from(webpackTask.map { File(it.destinationDirectory, it.outputFileName) }) // bring output file along into the JAR
+    from(webpackTask.map { it.outputDirectory }) // bring output file along into the JAR
+    into("static")
+    duplicatesStrategy = DuplicatesStrategy.EXCLUDE
 }
 
 tasks {
@@ -114,4 +138,4 @@ tasks.register("stage") {
 
 tasks.named<JavaExec>("run").configure {
     classpath(tasks.named<Jar>("jvmJar")) // so that the JS artifacts generated by `jvmJar` can be found and served
-}
+}

gradle.properties

@@ -1,2 +1,4 @@
 kotlin.code.style=official
-kotlin.js.compiler=ir
+kotlin.js.compiler=ir
+org.jetbrains.compose.experimental.wasm.enabled=true
+kotlin.daemon.jvmargs=-Xmx4G