Add Wasm target + sample + update deps (#43)

Author: skaldebane

buildSrc/src/main/kotlin/Setup.kt

@@ -6,6 +6,7 @@ import org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension
 import org.gradle.kotlin.dsl.*
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 import com.android.build.gradle.LibraryExtension
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 private fun BaseExtension.android() {
     compileSdkVersion(34)
@@ -37,6 +38,10 @@ fun Project.kotlinMultiplatform(
             js(IR) {
                 browser()
             }
+            @OptIn(ExperimentalWasmDsl::class)
+            wasmJs {
+                browser()
+            }
             macosX64()
             macosArm64()
             ios(iosPrefixName)

gradle.properties

@@ -4,6 +4,7 @@ org.gradle.unsafe.configuration-cache=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
 
 android.useAndroidX=true
 android.enableJetifier=false

gradle/libs.versions.toml

@@ -1,20 +1,20 @@
 [versions]
-plugin-android = "8.1.2"
-plugin-ktlint = "11.6.1"
-plugin-maven = "0.22.0"
+plugin-android = "8.2.2"
+plugin-ktlint = "12.1.0"
+plugin-maven = "0.28.0"
 
-kotlin = "1.9.10"
+kotlin = "1.9.22"
 
-coroutines = "1.7.3"
-ksp = "1.9.10-1.0.13"
+coroutines = "1.8.0"
+ksp = "1.9.22-1.0.17"
 caseFormat = "0.2.0"
-konsumeXml = "1.0"
+konsumeXml = "1.1"
 
 appCompat = "1.6.1"
-compose = "1.5.4"
-composeCompiler = "1.5.3"
-composeActivity = "1.8.0"
-composeMultiplatform = "1.5.3"
+compose = "1.6.4"
+composeCompiler = "1.5.11"
+composeActivity = "1.8.2"
+composeMultiplatform = "1.6.1"
 
 test-junit = "1.1.5"
 

kotlin-js-store/yarn.lock

@@ -3,8 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat.Deb
 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.compose.experimental.dsl.IOSDevices
+// import org.jetbrains.compose.experimental.dsl.IOSDevices
 import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
     kotlin("multiplatform")
@@ -60,6 +61,12 @@ kotlin {
         binaries.executable()
     }
 
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser()
+        binaries.executable()
+    }
+
     sourceSets {
         val commonMain by getting {
             dependencies {
@@ -154,17 +161,17 @@ afterEvaluate {
 }
 
 compose.experimental {
-    uikit.application {
-        bundleIdPrefix = "cafe.adriel.lyricist"
-        projectName = "MultiplatformSample"
-        deployConfigurations {
-            simulator("IPhone8") {
-                device = IOSDevices.IPHONE_8
-            }
-            simulator("IPad") {
-                device = IOSDevices.IPAD_MINI_6th_Gen
-            }
-        }
-    }
+//    uikit.application {
+//        bundleIdPrefix = "cafe.adriel.lyricist"
+//        projectName = "MultiplatformSample"
+//        /*deployConfigurations {
+//            simulator("IPhone8") {
+//                device = IOSDevices.IPHONE_8
+//            }
+//            simulator("IPad") {
+//                device = IOSDevices.IPAD_MINI_6th_Gen
+//            }
+//        }*/
+//    }
     web.application {}
 }

sample-multiplatform/build.gradle.kts

@@ -1,10 +1,15 @@
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
 import cafe.adriel.lyricist.sample.multiplatform.SampleApplication
 import org.jetbrains.skiko.wasm.onWasmReady
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     onWasmReady {
-        Window("Voyager Sample") {
+        CanvasBasedWindow(
+            title = "Voyager Sample",
+            canvasElementId = "ComposeTarget"
+        ) {
             SampleApplication()
         }
     }

sample-multiplatform/src/jsMain/kotlin/main.js.kt

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

sample-multiplatform/src/wasmJsMain/kotlin/main.wasm.kt

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lyricist Sample - Compose Multiplatform</title>
+    <script src="skiko.js"> </script>
+    <link type="text/css" rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<h1>Lyricist Sample - Compose Multiplatform</h1>
+<div>
+    <canvas id="ComposeTarget" width="800" height="600"></canvas>
+</div>
+<script src="sample-multiplatform.js"> </script>150
+</body>
+</html>

sample-multiplatform/src/wasmJsMain/resources/index.html

@@ -0,0 +1,8 @@
+#root {
+    width: 100%;
+    height: 100vh;
+}
+
+#root > .compose-web-column > div {
+    position: relative;
+}