Adding Wasm Js support

buildSrc/src/main/kotlin/Setup.kt

@@ -16,10 +16,11 @@ import org.gradle.kotlin.dsl.withType
 import org.gradle.kotlin.dsl.getByType
 import org.jetbrains.kotlin.gradle.dsl.KotlinJvmOptions
 import org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 private fun BaseExtension.setupAndroid() {
-    compileSdkVersion(33)
+    compileSdkVersion(34)
     defaultConfig {
         minSdk = 21
         targetSdk = 33
@@ -31,7 +32,8 @@ private fun BaseExtension.setupAndroid() {
 
 fun Project.setupModuleForComposeMultiplatform(
     withKotlinExplicitMode: Boolean = true,
-    iosPrefixName: String = "ios" // only used in ios sample
+    iosPrefixName: String = "ios", // only used in ios sample
+    wasm: Boolean = true,
 ) {
     plugins.withType<org.jetbrains.kotlin.gradle.plugin.KotlinBasePluginWrapper> {
         extensions.configure<KotlinMultiplatformExtension> {
@@ -57,6 +59,11 @@ fun Project.setupModuleForComposeMultiplatform(
             ios(iosPrefixName)
             iosSimulatorArm64("${iosPrefixName}SimulatorArm64")
 
+            if (wasm) {
+                @OptIn(ExperimentalWasmDsl::class)
+                wasmJs { browser() }
+            }
+
             sourceSets {
                 /* Source sets structure
                 common

gradle.properties

@@ -3,7 +3,6 @@ android.useAndroidX=true
 android.enableJetifier=false
 kotlin.code.style=official
 
-kotlin.native.cacheKind=none
 kotlin.native.useEmbeddableCompilerJar=true
 # Enable kotlin/native experimental memory model
 kotlin.native.ignoreDisabledTargets=true
@@ -24,6 +23,7 @@ android.defaults.buildfeatures.buildconfig = 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
 
 kotlin.mpp.androidSourceSetLayoutVersion=2
 

gradle/libs.versions.toml

@@ -1,13 +1,13 @@
 [versions]
 plugin-android = "8.6.0"
 plugin-maven = "0.22.0"
-plugin-composeMultiplatform = "1.3.1"
-voyager = "1.0.0-rc04"
+plugin-composeMultiplatform = "1.6.10"
+voyager = "1.1.0-beta02"
 coroutines = "1.6.4"
 appCompat = "1.5.1"
 composeActivity = "1.6.1"
 
-kotlin = "1.8.10"
+kotlin = "1.9.20"
 
 [libraries]
 plugin-android = { module = "com.android.tools.build:gradle", version.ref = "plugin-android" }

sample/build.gradle.kts

@@ -2,7 +2,6 @@ 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.kotlin.gradle.plugin.mpp.KotlinNativeTarget
 
 plugins {
@@ -15,6 +14,7 @@ setupModuleForComposeMultiplatform(
     withKotlinExplicitMode = false,
     // this is required for the Compose iOS Application DSL expect a `uikit` target name.
     iosPrefixName = "uikit",
+    wasm = false,
 )
 
 android {
@@ -34,21 +34,19 @@ kotlin {
     }
     macosX64(macOsConfiguation)
     macosArm64(macOsConfiguation)
-    val uikitConfiguration: KotlinNativeTarget.() -> Unit = {
-        binaries {
-            executable() {
-                entryPoint = "main"
-                freeCompilerArgs += listOf(
-                    "-linker-option", "-framework", "-linker-option", "Metal",
-                    "-linker-option", "-framework", "-linker-option", "CoreText",
-                    "-linker-option", "-framework", "-linker-option", "CoreGraphics"
-                )
+    iosX64("uikitX64")
+    iosArm64("uikitArm64")
+    iosSimulatorArm64("uikitSimulatorArm64")
+
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
             }
         }
+        binaries.executable()
     }
-    iosX64("uikitX64", uikitConfiguration)
-    iosArm64("uikitArm64", uikitConfiguration)
-    iosSimulatorArm64("uikitSimulatorArm64", uikitConfiguration)
 
     js(IR) {
         browser()
@@ -151,17 +149,5 @@ afterEvaluate {
 }
 
 compose.experimental {
-    uikit.application {
-        bundleIdPrefix = "br.devsrsouza.compose.icons"
-        projectName = "MultiplatformSample"
-        deployConfigurations {
-            simulator("IPhone8") {
-                device = IOSDevices.IPHONE_8
-            }
-            simulator("IPad") {
-                device = IOSDevices.IPAD_MINI_6th_Gen
-            }
-        }
-    }
     web.application {}
 }

sample/src/androidMain/AndroidManifest.xml

@@ -9,7 +9,7 @@
         android:allowBackup="true"
         android:supportsRtl="true">
         <activity
-            android:name=".SampleActivity"
+            android:name="compose.icons.sample.SampleActivity"
             android:exported="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

sample/src/commonMain/kotlin/compose/icons/sample/IconPackScreen.kt

@@ -1,6 +1,8 @@
 package compose.icons.sample
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -10,7 +12,12 @@ import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.core.screen.ScreenKey
 import compose.icons.sample.data.IconPackModel
 import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material.Text
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import compose.icons.FeatherIcons
+import compose.icons.feathericons.Image
 import compose.icons.sample.components.NavigationHeader
 
 data class IconPackScreen(
@@ -28,7 +35,8 @@ data class IconPackScreen(
                 Image(
                     imageVector = icon,
                     contentDescription = null,
-                    modifier = Modifier.size(32.dp)
+                    modifier = Modifier.size(32.dp),
+                    colorFilter = ColorFilter.tint(Color.Black)
                 )
             }
         }

sample/src/wasmJsMain/kotlin/main.wasmJs.kt

@@ -0,0 +1,8 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import compose.icons.sample.SampleApplication
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") { SampleApplication() }
+}

sample/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="composeApp.js"></script>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+</body>
+</html>