Dev

.github/workflows/build_web.yml

@@ -1,4 +1,4 @@
-name: Build Web (WASM)
+name: Build Web (Kotlin JS)
 
 on:
   push:
@@ -7,7 +7,7 @@ on:
   pull_request:
 
 jobs:
-  build_web_wasm:
+  build_web_js:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout GIT
@@ -30,4 +30,4 @@ jobs:
             ${{ runner.os }}-gradle-
 
       - name: Build Web distribution
-        run: ./gradlew :composeApp:wasmJsBrowserDistribution
+        run: ./gradlew :composeApp:jsBrowserDistribution

.github/workflows/deploy_web_github_pages.yml

@@ -50,12 +50,12 @@ jobs:
             ${{ runner.os }}-gradle-
 
       - name: Build Web distribution
-        run: ./gradlew :composeApp:wasmJsBrowserDistribution
+        run: ./gradlew :composeApp:jsBrowserDistribution
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: 'composeApp/build/dist/wasmJs/productionExecutable'
+          path: 'composeApp/build/dist/js/productionExecutable'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

buildSrc/src/main/kotlin/ivy.ktor-client.gradle.kts

@@ -13,7 +13,7 @@ kotlin {
         iosMain.dependencies {
             implementation(libs.ktor.client.darwin)
         }
-        named("wasmJsMain").dependencies {
+        jsMain.dependencies {
             implementation(libs.ktor.client.js)
         }
         jvmMain.dependencies {

buildSrc/src/main/kotlin/ivy.shared-module.gradle.kts

@@ -1,24 +1,14 @@
-import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
-import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
-
 plugins {
     id("org.jetbrains.kotlin.multiplatform")
     id("com.android.library")
 }
 
 kotlin {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
+    js()
+    js {
         browser {
-            commonWebpackConfig {
-                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
-                    static = (static ?: mutableListOf()).apply {
-                        // Serve sources to debug inside browser
-                        add(project.projectDir.path)
-                    }
-                }
-            }
         }
+        binaries.executable()
     }
 
     androidTarget {

composeApp/build.gradle.kts

@@ -1,6 +1,4 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
-import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
-import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
     id("org.jetbrains.kotlin.multiplatform")
@@ -9,19 +7,9 @@ plugins {
 }
 
 kotlin {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-        moduleName = "composeApp"
+    js()
+    js {
         browser {
-            commonWebpackConfig {
-                outputFileName = "composeApp.js"
-                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
-                    static = (static ?: mutableListOf()).apply {
-                        // Serve sources to debug inside browser
-                        add(project.projectDir.path)
-                    }
-                }
-            }
         }
         binaries.executable()
     }
@@ -35,6 +23,7 @@ kotlin {
     }
 
     jvm("desktop")
+    js()
 
     listOf(
         iosX64(),
@@ -62,6 +51,7 @@ kotlin {
             implementation(compose.ui)
             implementation(compose.components.resources)
             implementation(compose.components.uiToolingPreview)
+            implementation(libs.kotlin.immutableCollections)
         }
         desktopMain.dependencies {
             implementation(compose.desktop.currentOs)

composeApp/src/commonMain/kotlin/ui/navigation/Navigation.kt

@@ -1,9 +1,12 @@
 package ui.navigation
 
 import androidx.compose.runtime.*
+import kotlinx.collections.immutable.persistentListOf
+import kotlinx.collections.immutable.plus
+import kotlinx.collections.immutable.toPersistentList
 
 class Navigation {
-    private var backstack by mutableStateOf(emptyList<Screen>())
+    private var backstack by mutableStateOf(persistentListOf<Screen>())
 
     @Composable
     fun NavHost() {
@@ -14,7 +17,7 @@ class Navigation {
     fun backstack(): List<Screen> = backstack
 
     fun navigate(screen: Screen) {
-        backstack = backstack + screen.also(Screen::initialize)
+        backstack = backstack.plus(screen.also(Screen::initialize))
     }
 
     fun backUntil(predicate: (Screen) -> Boolean) {
@@ -26,7 +29,7 @@ class Navigation {
 
     fun back(): Screen? {
         val lastScreen = backstack.lastOrNull()
-        backstack = backstack.dropLast(1)
+        backstack = backstack.dropLast(1).toPersistentList()
         return lastScreen?.also(Screen::destroy)
     }
 }

composeApp/src/jsMain/resources/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Learn by Ivy</title>
+    <script src="skiko.js"></script>
+</head>
+<body>
+<div>
+    <canvas id="ComposeTarget"></canvas>
+</div>
+<script src="composeApp.js"></script>
+</body>
+</html>

gradle.properties

@@ -1,4 +1,6 @@
 kotlin.code.style=official
+# Features
+org.jetbrains.compose.experimental.jscanvas.enabled=true
 
 #Gradle
 org.gradle.jvmargs=-Xmx2048M -Dfile.encoding=UTF-8 -Dkotlin.daemon.jvm.options\="-Xmx2048M"

gradle/libs.versions.toml

@@ -15,9 +15,8 @@ compose-plugin = "1.6.2"
 junit = "4.13.2"
 kotlin = "1.9.23"
 ktor = "2.3.10"
-ktor-client = "3.0.0-wasm2"
+ktor-client = "2.3.10"
 logback = "1.5.5"
-arrow = "1.2.4"
 kotest = "5.8.1"
 kotlin-coroutines = "1.8.0"
 
@@ -34,14 +33,13 @@ compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview"
 google-testparameterinjector = { module = "com.google.testparameterinjector:test-parameter-injector", version = "1.15" }
 junit = { group = "junit", name = "junit", version.ref = "junit" }
 kotest-assertions = { module = "io.kotest:kotest-assertions-core", version.ref = "kotest" }
-kotest-assertions-arrow = { module = "io.kotest.extensions:kotest-assertions-arrow", version.ref = "arrow" }
 kotest-property = { module = "io.kotest:kotest-property", version.ref = "kotest" }
-kotest-property-arrow = { module = "io.kotest.extensions:kotest-property-arrow", version.ref = "arrow" }
 kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlin-coroutines" }
 kotlin-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "kotlin-coroutines" }
 kotlin-serialization = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version = "1.6.3" }
 kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
 kotlin-test-junit = { module = "org.jetbrains.kotlin:kotlin-test-junit", version.ref = "kotlin" }
+kotlin-immutableCollections = { module = "org.jetbrains.kotlinx:kotlinx-collections-immutable", version = "0.3.7" }
 ktor-server-core = { module = "io.ktor:ktor-server-core-jvm", version.ref = "ktor" }
 ktor-server-netty = { module = "io.ktor:ktor-server-netty-jvm", version.ref = "ktor" }
 ktor-server-tests = { module = "io.ktor:ktor-server-tests-jvm", version.ref = "ktor" }
@@ -72,8 +70,6 @@ test = [
     "mockk",
     "kotest-assertions",
     "kotest-property",
-    "kotest-property-arrow",
-    "kotest-assertions-arrow",
     "kotlin-coroutines-test"
 ]
 ktor-client-common = [

scripts/runWebApp.sh

@@ -11,4 +11,4 @@ if [ ! -f "settings.gradle.kts" ]; then
     exit 1
 fi
 
-./gradlew :composeApp:wasmJsBrowserDevelopmentRun
+./gradlew :composeApp:jsBrowserDevelopmentRun

shared/src/wasmJsMain/kotlin/Platform.wasmJs.kt → shared/src/jsMain/kotlin/Platform.js.kt

@@ -1,11 +1,11 @@
 import io.ktor.client.*
 import io.ktor.client.engine.js.*
 
-class WasmPlatform : Platform {
-    override val name: String = "Web with Kotlin/Wasm"
+class JsPlatform : Platform {
+    override val name: String = "Web with Kotlin/JS"
 
     override fun log(level: LogLevel, msg: String) {
-        println("${level.name}: $msg")
+        console.log("${level.name}: $msg")
     }
 
     override fun httpClient(
@@ -15,4 +15,4 @@ class WasmPlatform : Platform {
     }
 }
 
-actual fun platform(): Platform = WasmPlatform()
+actual fun platform(): Platform = JsPlatform()