Add wasm support (#404)

hfhbd · Sep 9, 2024 · 8ee0059 · 8ee0059
1 parent d220503
commit 8ee0059
Show file tree

Hide file tree

Showing 16 changed files with 708 additions and 629 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -16,14 +16,25 @@ kotlin {
     jvmToolchain(11)
 
     jvm()
-    js(IR) {
+    js {
         browser()
     }
+    wasmJs {
+        browser()
+    }
+    applyDefaultHierarchyTemplate {
+        common {
+            group("jsShared") {
+                withJs()
+                withWasmJs()
+            }
+        }
+    }
 
     explicitApi()
     compilerOptions {
-        allWarningsAsErrors.set(true)
         progressiveMode.set(true)
+        freeCompilerArgs.add("-Xexpect-actual-classes")
     }
 
     sourceSets {
@@ -39,18 +50,19 @@ kotlin {
                 implementation(libs.kotlinx.coroutines.core)
             }
         }
-        named("jsMain") {
+
+        jsMain {
             dependencies {
                 api(compose.html.core)
             }
         }
-        named("jsTest") {
+        jsTest {
             dependencies {
                 implementation(compose.html.testUtils)
             }
         }
 
-        named("jvmTest") {
+        jvmTest {
             dependencies {
                 implementation(compose.desktop.uiTestJUnit4) // there is no non-ui testing
                 implementation(compose.desktop.currentOs) // ui-testings needs skiko
@@ -159,3 +171,11 @@ tasks {
         }
     }
 }
+
+plugins.withType<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin> {
+    the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().downloadBaseUrl = null
+}
+
+the<org.jetbrains.kotlin.gradle.targets.js.binaryen.BinaryenRootExtension>().apply {
+    downloadBaseUrl = null
+}
diff --git a/detekt-baseline.xml b/detekt-baseline.xml
@@ -2,6 +2,9 @@
 <SmellBaseline>
   <ManuallySuppressedIssues></ManuallySuppressedIssues>
   <CurrentIssues>
+    <ID>Filename:browserApi.js.kt$app.softwork.routingcompose.browserApi.js.kt</ID>
+    <ID>Filename:browserApi.kt$app.softwork.routingcompose.browserApi.kt</ID>
+    <ID>Filename:browserApi.wasm.kt$app.softwork.routingcompose.browserApi.wasm.kt</ID>
     <ID>Filename:demo.kt$.demo.kt</ID>
     <ID>Filename:main.kt$.main.kt</ID>
   </CurrentIssues>

diff --git a/integrationTest/browserRouterTest/build.gradle.kts b/integrationTest/browserRouterTest/build.gradle.kts
@@ -5,7 +5,7 @@ plugins {
 }
 
 kotlin {
-    js(IR) {
+    js {
         browser {
             binaries.executable()
         }

diff --git a/integrationTest/build.gradle.kts b/integrationTest/build.gradle.kts
@@ -1,3 +1,7 @@
+import org.gradle.kotlin.dsl.support.KotlinCompilerOptions
+import org.jetbrains.kotlin.gradle.dsl.KotlinCommonCompilerOptions
+import org.jetbrains.kotlin.gradle.targets.js.ir.KotlinJsIrCompilation
+
 plugins {
     kotlin("multiplatform")
     kotlin("plugin.compose")
@@ -8,8 +12,21 @@ kotlin {
     jvmToolchain(11)
 
     jvm()
-    js(IR) {
+    js {
+        browser()
+    }
+    wasmJs {
         browser()
+        binaries.executable()
+    }
+
+    applyDefaultHierarchyTemplate {
+        common {
+            group("jvmWasmShared") {
+                withJvm()
+                withWasmJs()
+            }
+        }
     }
 
     sourceSets {
@@ -19,7 +36,12 @@ kotlin {
                 api(libs.kotlinx.coroutines.core)
             }
         }
-        named("jvmMain") {
+        named("jvmWasmSharedMain") {
+            dependencies {
+                implementation(compose.material)
+            }
+        }
+        jvmMain {
             dependencies {
                 implementation(compose.desktop.currentOs)
             }

diff --git a/integrationTest/hashRouterTest/build.gradle.kts b/integrationTest/hashRouterTest/build.gradle.kts
@@ -5,7 +5,7 @@ plugins {
 }
 
 kotlin {
-    js(IR) {
+    js {
         browser {
             binaries.executable()
         }

diff --git a/integrationTest/src/jvmMain/kotlin/main.kt b/integrationTest/src/jvmMain/kotlin/main.kt
@@ -1,85 +1,22 @@
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.window.*
 import app.softwork.routingcompose.*
 
 fun main() = application {
-    Demo(1)
-    Demo(2)
+    DemoWindow(1)
+    DemoWindow(2)
 }
 
-private const val Answer = 42
-
 @Composable
-private fun Demo(it: Int) {
+fun DemoWindow(it: Int) {
     var isOpen by remember { mutableStateOf(true) }
     var wasMagic42 by remember { mutableStateOf(false) }
     if (isOpen) {
         Window(onCloseRequest = {
             isOpen = false
         }, title = "$it") {
             DesktopRouter("/$it") {
-                Column {
-                    val params = parameters?.map
-                    if (params != null) {
-                        Text("Parameters: $params")
-                    }
-                    if (wasMagic42) {
-                        route("/answer") {
-                            val router = Router.current
-                            Text("The Answer to the Ultimate Question of Life, the Universe, and Everything is 42.")
-                            Button(onClick = { router.navigateBack() }) {
-                                Text("Back")
-                            }
-                        }
-                    }
-                    int {
-                        Content(it, wasMagic42)
-                        if (it == Answer) {
-                            LaunchedEffect(it) {
-                                wasMagic42 = true
-                            }
-                        }
-                    }
-                    string {
-                        Column {
-                            val router = Router.current
-                            Text("Hello $it")
-                            Button(onClick = { router.navigateBack() }) {
-                                Text("Back")
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@Composable
-fun Content(int: Int, wasMagic42: Boolean) {
-    var name by remember { mutableStateOf("") }
-    val router = Router.current
-    Column {
-        Text("Hello World $int")
-        TextField(value = name, {
-            name = it
-        })
-
-        if (name.isNotBlank()) {
-            Button({
-                router.navigate("/$name")
-            }) {
-                Text("Update name")
-            }
-        }
-
-        if (wasMagic42) {
-            Button({
-                router.navigate("/answer")
-            }) {
-                Text("Unlocked answer")
+                Demo(it, wasMagic42, { wasMagic42 = it })
             }
         }
     }

diff --git a/integrationTest/src/jvmWasmSharedMain/kotlin/demo.kt b/integrationTest/src/jvmWasmSharedMain/kotlin/demo.kt
@@ -0,0 +1,78 @@
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.runtime.*
+import app.softwork.routingcompose.*
+
+private const val Answer = 42
+
+@Composable
+fun RouteBuilder.Demo(
+    root: Int,
+    wasMagic42: Boolean,
+    changeMagic42: (Boolean) -> Unit,
+) {
+    Column {
+        val params = parameters?.map
+        if (params != null) {
+            Text("Parameters: $params")
+        }
+        if (wasMagic42) {
+            route("/answer") {
+                val router = Router.current
+                Text("The Answer to the Ultimate Question of Life, the Universe, and Everything is 42.")
+                Button(onClick = {
+                    router.navigate("/$root")
+                }) {
+                    Text("Back")
+                }
+            }
+        }
+        int {
+            Content(it, wasMagic42)
+            if (it == Answer) {
+                LaunchedEffect(it) {
+                    changeMagic42(true)
+                }
+            }
+        }
+        string {
+            Column {
+                val router = Router.current
+                Text("Hello $it")
+                Button(onClick = {
+                    router.navigate("/$root")
+                }) {
+                    Text("Back")
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun Content(int: Int, wasMagic42: Boolean) {
+    var name by remember { mutableStateOf("") }
+    val router = Router.current
+    Column {
+        Text("Hello World $int")
+        TextField(value = name, {
+            name = it
+        })
+
+        if (name.isNotBlank()) {
+            Button({
+                router.navigate("/$name")
+            }) {
+                Text("Update name")
+            }
+        }
+
+        if (wasMagic42) {
+            Button({
+                router.navigate("/answer")
+            }) {
+                Text("Unlocked answer")
+            }
+        }
+    }
+}
diff --git a/integrationTest/src/wasmJsMain/kotlin/main.kt b/integrationTest/src/wasmJsMain/kotlin/main.kt
@@ -0,0 +1,13 @@
+
+import androidx.compose.runtime.*
+import androidx.compose.ui.*
+import androidx.compose.ui.window.*
+import app.softwork.routingcompose.*
+
+@ExperimentalComposeUiApi
+fun main() = CanvasBasedWindow("WASM Test") {
+    var wasMagic42 by remember { mutableStateOf(false) }
+    HashRouter("/1") {
+        Demo(1, wasMagic42, { wasMagic42 = it })
+    }
+}
diff --git a/integrationTest/src/wasmJsMain/resources/index.html b/integrationTest/src/wasmJsMain/resources/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+<script type="application/javascript" src="integrationTest.js"></script>
+</body>
+</html>