Merge pull request #3 from KevinnZou/feature/wasm_support

Feature/wasm support
KevinnZou · Mar 20, 2024 · dfc13ca · dfc13ca
2 parents 7efc1dc + ad3e994
commit dfc13ca
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 2 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -11,6 +11,7 @@ kotlin.mpp.androidSourceSetLayoutVersion=2
 
 #Compose
 org.jetbrains.compose.experimental.uikit.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
 
 #Android
 android.useAndroidX=true
@@ -19,9 +20,9 @@ android.targetSdk=34
 android.minSdk=24
 
 #Versions
-kotlin.version=1.9.10
+kotlin.version=1.9.23
 agp.version=8.1.1
-compose.version=1.5.3
+compose.version=1.6.1
 dokka.version=1.9.0
 
 GROUP=io.github.kevinnzou

diff --git a/sample/shared/build.gradle.kts b/sample/shared/build.gradle.kts
@@ -1,10 +1,23 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+
 plugins {
     kotlin("multiplatform")
     id("com.android.library")
     id("org.jetbrains.compose")
 }
 
 kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeSwipeBoxSample"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeSwipeBoxSample.js"
+            }
+        }
+        binaries.executable()
+    }
+
     androidTarget()
 
     jvm("desktop")
@@ -26,6 +39,7 @@ kotlin {
                 implementation(compose.runtime)
                 implementation(compose.foundation)
                 implementation(compose.material)
+                implementation(compose.ui)
                 @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                 implementation(compose.components.resources)
                 api(project(":swipebox"))
@@ -74,3 +88,7 @@ android {
         jvmToolchain(17)
     }
 }
+
+compose.experimental {
+    web.application {}
+}
diff --git a/sample/shared/src/wasmJsMain/kotlin/com/kevinnzou/sample/main.kt b/sample/shared/src/wasmJsMain/kotlin/com/kevinnzou/sample/main.kt
@@ -0,0 +1,13 @@
+package com.kevinnzou.sample
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") { App() }
+}
+
+actual fun getPlatformName(): String {
+    return "JS/WASM"
+}
diff --git a/sample/shared/src/wasmJsMain/resources/index.html b/sample/shared/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="composeSwipeBoxSample.js"></script>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+</body>
+</html>
diff --git a/swipebox/build.gradle.kts b/swipebox/build.gradle.kts
@@ -1,4 +1,5 @@
 import com.vanniktech.maven.publish.SonatypeHost
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
     kotlin("multiplatform")
@@ -9,6 +10,17 @@ plugins {
 }
 
 kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeSwipeBox"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeSwipeBox.js"
+            }
+        }
+        binaries.executable()
+    }
+
     androidTarget() {
         publishLibraryVariants("release")
     }