feature: Support wasm target (#20)

Author: adamglin0

.gitignore

@@ -94,7 +94,6 @@ fabric.properties
 # Generated files
 bin/
 gen/
-out/
 
 # Gradle files
 .gradle
@@ -143,7 +142,6 @@ obj/
 
 # IntelliJ IDEA
 *.iml
-*.iws
 /out/
 
 # User-specific configurations
@@ -190,87 +188,45 @@ hs_err_pid*
 
 ## Plugin-specific files:
 
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
 # Mongo Explorer plugin
 .idea/mongoSettings.xml
 
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
 ### Example user template template
 ### Example user template
 
 # IntelliJ project files
 .idea
-*.iml
 out
 gen
 ### Kotlin template
-# Compiled class file
-*.class
-
-# Log file
-*.log
 
 # BlueJ files
 *.ctxt
 
-# Mobile Tools for Java (J2ME)
-.mtj.tmp/
-
-# Package Files #
-*.war
 *.nar
-*.ear
 *.zip
 *.tar.gz
 *.rar
 
-# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
-hs_err_pid*
-replay_pid*
 
-### Android template
-# Gradle files
-.gradle/
-build/
-
-# Local configuration file (sdk path, etc)
-local.properties
-
-# Log/OS Files
-*.log
+replay_pid*
 
 # Android Studio generated files and folders
-captures/
 .externalNativeBuild/
 .cxx/
-*.apk
 output.json
 
 # IntelliJ
-*.iml
 .idea/
 misc.xml
 deploymentTargetDropDown.xml
 render.experimental.xml
 
-# Keystore files
-*.jks
-*.keystore
-
 # Google Services (e.g. APIs or Firebase)
 google-services.json
 
 # Android Profiling
 *.hprof
 
-.kotlin
+.kotlin
+/kotlin-js-store

compose-shadow/build.gradle.kts

@@ -1,7 +1,8 @@
-@file:OptIn(ExperimentalEncodingApi::class)
+@file:OptIn(ExperimentalEncodingApi::class, ExperimentalWasmDsl::class)
 
 import com.vanniktech.maven.publish.SonatypeHost
 import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 import kotlin.io.encoding.ExperimentalEncodingApi
 
@@ -22,7 +23,7 @@ kotlin {
         }
     }
 
-    jvm("desktop")
+    jvm()
 
     iosX64()
     iosArm64()
@@ -31,12 +32,38 @@ kotlin {
     macosX64()
     macosArm64()
 
+    wasmJs {
+        browser()
+    }
+
     sourceSets {
         commonMain.dependencies {
             implementation(compose.runtime)
             implementation(compose.foundation)
             implementation(compose.ui)
-            implementation(libs.androidx.annotation)
+        }
+        val nonWebMain by creating {
+            dependsOn(commonMain.get())
+            dependencies {
+                implementation(libs.androidx.annotation)
+            }
+        }
+        val skikoMain by creating {
+            dependsOn(commonMain.get())
+        }
+        androidMain.configure {
+            dependsOn(nonWebMain)
+        }
+        jvmMain.configure {
+            dependsOn(skikoMain)
+            dependsOn(nonWebMain)
+        }
+        nativeMain.configure {
+            dependsOn(skikoMain)
+            dependsOn(nonWebMain)
+        }
+        wasmJsMain.configure {
+            dependsOn(skikoMain)
         }
     }
 }

compose-shadow/src/commonMain/kotlin/com/adamglin/composeshadow/DropShadow.kt

@@ -1,6 +1,5 @@
 package com.adamglin.composeshadow
 
-import androidx.annotation.RequiresApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.geometry.Size
@@ -34,7 +33,6 @@ import com.adamglin.composeshadow.utils.setMaskFilter
  * @param blur The blur radius of the shadow.
  * @param spread The spread radius of the shadow.
  */
-@RequiresApi(26)
 fun Modifier.dropShadow(
     shape: Shape,
     color: Color = Color.Black.copy(0.25f),

compose-shadow/src/desktopMain/kotlin/com/adamglin/composeshadow/utils/maskFilter.desktop.kt

@@ -1,10 +1,9 @@
 package com.adamglin.composeshadow.utils
 
-
 import androidx.compose.ui.graphics.NativePaint
 import org.jetbrains.skia.FilterBlurMode
 import org.jetbrains.skia.MaskFilter
 
-internal actual fun NativePaint.setMaskFilter(blurRadius: Float) {
+actual fun NativePaint.setMaskFilter(blurRadius: Float) {
     this.maskFilter = MaskFilter.makeBlur(FilterBlurMode.NORMAL, blurRadius / 2, true)
 }

compose-shadow/src/appleMain/kotlin/com/adamglin/composeshadow/utils/maskFilter.apple.kt renamed to compose-shadow/src/skikoMain/kotlin/com/adamglin/composeshadow/utils/maskFilter.skiko.kt

@@ -1,4 +1,7 @@
+@file:OptIn(ExperimentalWasmDsl::class)
+
 import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
 
@@ -16,7 +19,7 @@ kotlin {
             jvmTarget.set(JvmTarget.JVM_11)
         }
     }
-    jvm("desktop")
+    jvm()
     listOf(
         iosArm64(),
         iosX64(),
@@ -28,8 +31,14 @@ kotlin {
         }
     }
 
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+        }
+        binaries.executable()
+    }
+
     sourceSets {
-        val desktopMain by getting
         commonMain.dependencies {
             // compose multiplatform
             implementation(compose.runtime)

sample/shared/build.gradle.kts

@@ -0,0 +1,41 @@
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+plugins {
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.compose.multiplatform)
+    alias(libs.plugins.compose.compiler)
+}
+
+kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            val rootDirPath = project.rootDir.path
+            val projectDirPath = project.projectDir.path
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(rootDirPath)
+                        add(projectDirPath)
+                    }
+                }
+            }
+        }
+        binaries.executable()
+    }
+    sourceSets {
+        wasmJsMain.dependencies {
+            implementation(compose.runtime)
+            implementation(compose.foundation)
+            implementation(compose.material)
+            implementation(compose.ui)
+            implementation(compose.components.resources)
+            implementation(compose.components.uiToolingPreview)
+            implementation(project(":sample:shared"))
+        }
+    }
+}

sample/wasm-app/build.gradle.kts

@@ -0,0 +1,13 @@
+package com.demo0913
+
+import SampleApp
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    ComposeViewport(document.body!!) {
+        SampleApp()
+    }
+}

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

@@ -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>KotlinProject</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+    <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+</body>
+</html>

sample/wasm-app/src/wasmJsMain/resources/index.html

@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}