kotlin-hands-on · evilya · Oct 2, 2025
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -14,14 +14,12 @@ plugins {
 
 kotlin {
     androidTarget {
-        @OptIn(ExperimentalKotlinGradlePluginApi::class)
         compilerOptions {
             jvmTarget.set(JvmTarget.JVM_11)
         }
     }
 
     listOf(
-        iosX64(),
         iosArm64(),
         iosSimulatorArm64()
     ).forEach { iosTarget ->
@@ -31,25 +29,16 @@ kotlin {
         }
     }
 
-    jvm("desktop")
+    jvm()
+
+    js {
+        browser()
+        binaries.executable()
+    }
 
     @OptIn(ExperimentalWasmDsl::class)
     wasmJs {
-        outputModuleName.set("composeApp")
-        browser {
-            val rootDirPath = project.rootDir.path
-            val projectDirPath = project.projectDir.path
-            commonWebpackConfig {
-                outputFileName = "composeApp.js"
-                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
-                    static = (static ?: mutableListOf()).apply {
-                        // Serve sources to debug inside browser
-                        add(rootDirPath)
-                        add(projectDirPath)
-                    }
-                }
-            }
-        }
+        browser()
         binaries.executable()
     }
 
@@ -60,8 +49,6 @@ kotlin {
             }
         }
 
-        val desktopMain by getting
-
         androidMain.dependencies {
             implementation(compose.preview)
             implementation(libs.androidx.activity.compose)
@@ -73,18 +60,18 @@ kotlin {
             implementation(compose.ui)
             implementation(compose.components.resources)
             implementation(compose.components.uiToolingPreview)
-            implementation(libs.androidx.lifecycle.viewmodel)
+            implementation(libs.androidx.lifecycle.viewmodelCompose)
             implementation(libs.androidx.lifecycle.runtimeCompose)
             implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.7.1")
         }
         commonTest.dependencies {
             implementation(libs.kotlin.test)
         }
-        desktopMain.dependencies {
+        jvmMain.dependencies {
             implementation(compose.desktop.currentOs)
             implementation(libs.kotlinx.coroutinesSwing)
         }
-        wasmJsMain.dependencies {
+        webMain.dependencies {
             implementation(npm("@js-joda/timezone", "2.22.0"))
         }
     }

diff --git a/composeApp/src/jsMain/kotlin/compose/project/demo/composedemo/Platform.js.kt b/composeApp/src/jsMain/kotlin/compose/project/demo/composedemo/Platform.js.kt
@@ -0,0 +1,7 @@
+package compose.project.demo.composedemo
+
+class JsPlatform: Platform {
+    override val name: String = "Web with Kotlin/JS"
+}
+
+actual fun getPlatform(): Platform = JsPlatform()
diff --git a/.../project/demo/composedemo/Platform.jvm.kt → .../project/demo/composedemo/Platform.jvm.kt b/.../project/demo/composedemo/Platform.jvm.kt → .../project/demo/composedemo/Platform.jvm.kt
diff --git a/.../compose/project/demo/composedemo/main.kt → .../compose/project/demo/composedemo/main.kt b/.../compose/project/demo/composedemo/main.kt → .../compose/project/demo/composedemo/main.kt
diff --git a/.../compose/project/demo/composedemo/main.kt → .../compose/project/demo/composedemo/main.kt b/.../compose/project/demo/composedemo/main.kt → .../compose/project/demo/composedemo/main.kt
@@ -2,16 +2,18 @@ package compose.project.demo.composedemo
 
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.ComposeViewport
-import kotlinx.browser.document
+import kotlin.js.ExperimentalWasmJsInterop
+import kotlin.js.JsModule
 
+@OptIn(ExperimentalWasmJsInterop::class)
 @JsModule("@js-joda/timezone")
 external object JsJodaTimeZoneModule
 
 private val jsJodaTz = JsJodaTimeZoneModule
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    ComposeViewport(viewportContainerId = "composeApplication") {
+    ComposeViewport {
         App()
     }
-}
+}
diff --git a/...seApp/src/wasmJsMain/resources/index.html → composeApp/src/webMain/resources/index.html b/...seApp/src/wasmJsMain/resources/index.html → composeApp/src/webMain/resources/index.html
@@ -8,6 +8,5 @@
     <script type="application/javascript" src="composeApp.js"></script>
 </head>
 <body>
-<div id="composeApplication" style="width:400px; height: 600px;"></div>
 </body>
 </html>
diff --git a/...seApp/src/wasmJsMain/resources/styles.css → composeApp/src/webMain/resources/styles.css b/...seApp/src/wasmJsMain/resources/styles.css → composeApp/src/webMain/resources/styles.css
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -1,19 +1,18 @@
 [versions]
-agp = "8.7.3"
-android-compileSdk = "35"
+agp = "8.11.2"
+android-compileSdk = "36"
 android-minSdk = "24"
-android-targetSdk = "35"
-androidx-activity = "1.10.1"
+android-targetSdk = "36"
+androidx-activity = "1.11.0"
 androidx-appcompat = "1.7.1"
-androidx-constraintlayout = "2.2.1"
-androidx-core = "1.16.0"
-androidx-espresso = "3.6.1"
-androidx-lifecycle = "2.9.1"
-androidx-testExt = "1.2.1"
-composeHotReload = "1.0.0-alpha11"
-composeMultiplatform = "1.8.2"
+androidx-core = "1.17.0"
+androidx-espresso = "3.7.0"
+androidx-lifecycle = "2.9.4"
+androidx-testExt = "1.3.0"
+composeHotReload = "1.0.0-beta07"
+composeMultiplatform = "1.9.0"
 junit = "4.13.2"
-kotlin = "2.2.0"
+kotlin = "2.2.20"
 kotlinx-coroutines = "1.10.2"
 
 [libraries]
@@ -24,9 +23,8 @@ androidx-core-ktx = { module = "androidx.core:core-ktx", version.ref = "androidx
 androidx-testExt-junit = { module = "androidx.test.ext:junit", version.ref = "androidx-testExt" }
 androidx-espresso-core = { module = "androidx.test.espresso:espresso-core", version.ref = "androidx-espresso" }
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
-androidx-constraintlayout = { module = "androidx.constraintlayout:constraintlayout", version.ref = "androidx-constraintlayout" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
-androidx-lifecycle-viewmodel = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel", version.ref = "androidx-lifecycle" }
+androidx-lifecycle-viewmodelCompose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "androidx-lifecycle" }
 androidx-lifecycle-runtimeCompose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
 kotlinx-coroutinesSwing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
 

diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,5 @@ @@
         <script type="application/javascript" src="composeApp.js"></script>
     </head>
     <body>
-    <div id="composeApplication" style="width:400px; height: 600px;"></div>
     </body>
     </html>