Support KMP for wasm (#230)

* Support KMP for wasm * Add sample for wasm * Minimize sample codes for wasm * Remove unnecessary dependencies
fornewid · Jun 22, 2024 · 2ed9d42 · 2ed9d42
1 parent 0e1e299
commit 2ed9d42
Show file tree

Hide file tree

Showing 12 changed files with 3,156 additions and 5 deletions.
diff --git a/build-logic/convention/src/main/kotlin/KotlinMultiplatformConventionPlugin.kt b/build-logic/convention/src/main/kotlin/KotlinMultiplatformConventionPlugin.kt
@@ -3,6 +3,7 @@ import org.gradle.api.Project
 import org.gradle.kotlin.dsl.configure
 import org.gradle.kotlin.dsl.getByType
 import org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 import soup.compose.material.motion.buildlogic.configureKotlin
 
 class KotlinMultiplatformConventionPlugin : Plugin<Project> {
@@ -28,6 +29,11 @@ class KotlinMultiplatformConventionPlugin : Plugin<Project> {
                 macosX64()
                 macosArm64()
 
+                @OptIn(ExperimentalWasmDsl::class)
+                wasmJs {
+                    browser()
+                }
+
                 configureKotlin()
             }
         }

diff --git a/core/build.gradle.kts b/core/build.gradle.kts
@@ -13,7 +13,7 @@ kotlin {
         commonMain.dependencies {
             implementation(compose.animation)
             implementation(compose.ui)
-            implementation(libs.androidx.annotation)
+            implementation(libs.jetbrains.annotation)
         }
         androidInstrumentedTest.dependencies {
             implementation(libs.androidx.test.core)

diff --git a/gradle.properties b/gradle.properties
@@ -23,6 +23,7 @@ kotlin.mpp.androidSourceSetLayoutVersion=2
 kotlin.mpp.enableCInteropCommonization=true
 
 org.jetbrains.compose.experimental.macos.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
 
 # Publish
 SONATYPE_HOST=S01

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -14,7 +14,6 @@ compose-plugin = "1.6.10"
 navigation = "2.7.0-alpha07"
 
 # AndroidX
-androidx-annotation = "1.7.0"
 androidx-activity = "1.9.0"
 androidx-tracing = "1.1.0"
 
@@ -26,12 +25,12 @@ compose-foundation = { module = "androidx.compose.foundation:foundation", versio
 compose-ui-testJunit4 = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose" }
 compose-ui-testManifest = { module = "androidx.compose.ui:ui-test-manifest", version.ref = "compose" }
 
+jetbrains-annotation = { module = "org.jetbrains.compose.annotation-internal:annotation", version.ref = "compose-plugin" }
 jetbrains-navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigation" }
 
 # AndroidX
 
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
-androidx-annotation = { module = "androidx.annotation:annotation", version.ref = "androidx-annotation" }
 androidx-tracing = { module = "androidx.tracing:tracing", version.ref = "androidx-tracing" }
 
 # Test

diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
diff --git a/sample/android/build.gradle.kts b/sample/android/build.gradle.kts
@@ -30,7 +30,6 @@ android {
 }
 
 dependencies {
-    implementation(projects.core)
     implementation(projects.sample.shared)
     implementation(libs.androidx.activity.compose)
 }
diff --git a/sample/shared/src/wasmJsMain/kotlin/BackHandler.kt b/sample/shared/src/wasmJsMain/kotlin/BackHandler.kt
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
+    // do nothing
+}
diff --git a/sample/web-wasm/build.gradle.kts b/sample/web-wasm/build.gradle.kts
@@ -0,0 +1,34 @@
+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("mmc.compose")
+}
+
+kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "sample"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "sample.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(project.projectDir.path)
+                    }
+                }
+            }
+        }
+
+        binaries.executable()
+    }
+
+    sourceSets {
+        commonMain.dependencies {
+            implementation(projects.sample.shared)
+            implementation(compose.ui)
+        }
+    }
+}
diff --git a/sample/web-wasm/src/wasmJsMain/kotlin/Main.kt b/sample/web-wasm/src/wasmJsMain/kotlin/Main.kt
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
+import soup.compose.material.motion.shared.App
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    ComposeViewport(document.body!!) {
+        App()
+    }
+}
diff --git a/sample/web-wasm/src/wasmJsMain/resources/index.html b/sample/web-wasm/src/wasmJsMain/resources/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+    <script type="application/javascript" src="sample.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/sample/web-wasm/src/wasmJsMain/resources/styles.css b/sample/web-wasm/src/wasmJsMain/resources/styles.css
@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
diff --git a/settings.gradle b/settings.gradle
@@ -8,7 +8,8 @@ pluginManagement {
 }
 
 dependencyResolutionManagement {
-    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+    //https://youtrack.jetbrains.com/issue/KT-68533/Kotlin-2.0-WasmJs-error-when-using-RepositoriesMode.FAILONPROJECTREPOS
+    //repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
     repositories {
         google()
         mavenCentral()
@@ -21,3 +22,4 @@ include ':core'
 include ':sample:android'
 include ':sample:desktop'
 include ':sample:shared'
+include ':sample:web-wasm'