WASM support (#289)

* Kotlin WASM support

* update compose and kodein

* Revert kodein build gradle change

* Fix detekt

* fix build

* chore: update compose

build.gradle.kts

@@ -11,6 +11,7 @@ buildscript {
         classpath(libs.plugin.ktlint)
         classpath(libs.plugin.maven)
         classpath(libs.plugin.multiplatform.compose)
+        classpath(libs.plugin.atomicfu)
     }
 }
 

buildSrc/src/main/kotlin/Setup.kt

@@ -15,6 +15,7 @@ import org.gradle.kotlin.dsl.withType
 import org.gradle.kotlin.dsl.getByType
 import org.jetbrains.kotlin.gradle.dsl.KotlinJvmOptions
 import org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 private fun BaseExtension.setupAndroid() {
@@ -69,6 +70,7 @@ fun Project.setupModuleForAndroidxCompose(
 fun Project.setupModuleForComposeMultiplatform(
     withKotlinExplicitMode: Boolean = true,
     fullyMultiplatform: Boolean = false,
+    enableWasm: Boolean = true,
     iosPrefixName: String = "ios" // only used in ios sample
 ) {
     plugins.withType<org.jetbrains.kotlin.gradle.plugin.KotlinBasePluginWrapper> {
@@ -92,6 +94,10 @@ fun Project.setupModuleForComposeMultiplatform(
                 js(IR) {
                     browser()
                 }
+                if (enableWasm) {
+                    @OptIn(ExperimentalWasmDsl::class)
+                    wasmJs { browser() }
+                }
                 macosX64()
                 macosArm64()
                 ios(iosPrefixName)
@@ -126,6 +132,13 @@ fun Project.setupModuleForComposeMultiplatform(
                 }
 
                 if (fullyMultiplatform) {
+                    val commonWebMain by creating {
+                        dependsOn(commonMain)
+                    }
+
+                    val jsMain by getting
+                    jsMain.dependsOn(commonWebMain)
+
                     val nativeMain by creating {
                         dependsOn(commonMain)
                     }
@@ -145,6 +158,11 @@ fun Project.setupModuleForComposeMultiplatform(
                     val iosSimulatorArm64Main = getByName(iosPrefixName + "SimulatorArm64Main").apply {
                         dependsOn(iosMain)
                     }
+
+                    if (enableWasm) {
+                        val wasmJsMain by getting
+                        wasmJsMain.dependsOn(commonWebMain)
+                    }
                 }
             }
         }

gradle.properties

@@ -21,8 +21,12 @@ kotlin.native.ignoreIncorrectDependencies=true
 android.defaults.buildfeatures.buildconfig = false
 
 org.jetbrains.compose.experimental.macos.enabled=true
-org.jetbrains.compose.experimental.uikit.enabled=true
 org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
+
+kotlinx.atomicfu.enableJvmIrTransformation=true
+kotlinx.atomicfu.enableNativeIrTransformation=true
+kotlinx.atomicfu.enableJsIrTransformation=true
 
 kotlin.mpp.androidSourceSetLayoutVersion=2
 

gradle/libs.versions.toml

@@ -2,12 +2,13 @@
 plugin-android = "8.1.1"
 plugin-ktlint = "11.5.1"
 plugin-maven = "0.25.3"
-plugin-multiplatform-compose = "1.5.11"
+plugin-multiplatform-compose = "1.6.0-rc02"
 plugin-binaryCompatibilityValidator = "0.13.2"
+plugin-atomicfu = "0.23.1"
 
-coroutines = "1.7.3"
+coroutines = "1.8.0-RC2"
 kotlin = "1.9.21"
-kodein = "7.20.2"
+kodein = "7.21.2"
 koin = "3.4.3"
 koin-compose = "1.0.4"
 hilt = "2.49"
@@ -24,7 +25,7 @@ rxjava = "3.1.5"
 
 junit = "5.10.0"
 
-multiplatformUuid = "0.8.1"
+multiplatformUuid = "0.8.2"
 
 [libraries]
 plugin-android = { module = "com.android.tools.build:gradle", version.ref = "plugin-android" }
@@ -33,6 +34,7 @@ plugin-ktlint = { module = "org.jlleitschuh.gradle:ktlint-gradle", version.ref =
 plugin-maven = { module = "com.vanniktech:gradle-maven-publish-plugin", version.ref = "plugin-maven" }
 plugin-hilt = { module = "com.google.dagger:hilt-android-gradle-plugin", version.ref = "hilt" }
 plugin-multiplatform-compose = { module = "org.jetbrains.compose:compose-gradle-plugin", version.ref = "plugin-multiplatform-compose" }
+plugin-atomicfu = { module = "org.jetbrains.kotlinx:atomicfu-gradle-plugin", version.ref = "plugin-atomicfu" }
 
 leakCanary = { module = "com.squareup.leakcanary:leakcanary-android", version.ref = "leakCanary" }
 coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }

samples/multiplatform/build.gradle.kts

@@ -3,13 +3,27 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat.Dmg
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat.Msi
 import org.jetbrains.compose.desktop.application.tasks.AbstractNativeMacApplicationPackageTask
 import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
     kotlin("multiplatform")
     id("com.android.application")
     id("org.jetbrains.compose")
 }
 
+kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+            }
+        }
+        binaries.executable()
+    }
+}
+
 setupModuleForComposeMultiplatform(
     fullyMultiplatform = true,
     withKotlinExplicitMode = false

samples/multiplatform/src/wasmJsMain/kotlin/main.wasmJs.kt

@@ -0,0 +1,8 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import cafe.adriel.voyager.sample.multiplatform.SampleApplication
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") { SampleApplication() }
+}

samples/multiplatform/src/wasmJsMain/resources/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Compose App</title>
+    <script type="application/javascript" src="skiko.js"></script>
+    <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+</body>
+</html>

voyager-core/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     id("com.android.library")
     id("org.jetbrains.compose")
     id("com.vanniktech.maven.publish")
+    id("kotlinx-atomicfu")
 }
 
 setupModuleForComposeMultiplatform(fullyMultiplatform = true)
@@ -36,7 +37,7 @@ kotlin {
                 implementation(libs.lifecycle.viewModelCompose)
             }
         }
-        val jsMain by getting {
+        val commonWebMain by getting {
             dependencies {
                 implementation(libs.multiplatformUuid)
             }

voyager-kodein/build.gradle.kts

@@ -20,7 +20,7 @@ kotlin {
                 api(projects.voyagerNavigator)
                 compileOnly(compose.runtime)
                 compileOnly(compose.runtimeSaveable)
-                implementation(libs.kodein)
+                compileOnly(libs.kodein)
             }
         }
 

voyager-koin/build.gradle.kts

@@ -5,7 +5,10 @@ plugins {
     id("com.vanniktech.maven.publish")
 }
 
-setupModuleForComposeMultiplatform(fullyMultiplatform = true)
+setupModuleForComposeMultiplatform(
+    fullyMultiplatform = true,
+    enableWasm = false // https://github.com/InsertKoinIO/koin/issues/1634
+)
 
 android {
     namespace = "cafe.adriel.voyager.koin"