Add support for WasmJs target in addition to exising Js support

colorpicker-compose/build.gradle.kts

@@ -1,4 +1,5 @@
 import com.github.skydoves.colorpicker.compose.Configuration
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 @Suppress("DSL_SCOPE_VIOLATION")
 plugins {
@@ -39,6 +40,11 @@ kotlin {
     browser()
     nodejs()
   }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    binaries.library()
+  }
+
   @Suppress("OPT_IN_USAGE")
   applyHierarchyTemplate {
     common {
@@ -61,6 +67,7 @@ kotlin {
             }
           }
           withJs()
+          withWasmJs()
         }
       }
     }

gradle.properties

@@ -56,6 +56,7 @@ kotlin.native.cacheKind=none
 org.jetbrains.compose.experimental.uikit.enabled=true
 org.jetbrains.compose.experimental.macos.enabled=true
 org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
 compose.kotlin.native.manageCacheKind=false
 
 # Required to publish to Nexus (see https://github.com/gradle/gradle/issues/11308)

settings.gradle.kts

@@ -6,7 +6,8 @@ pluginManagement {
   }
 }
 dependencyResolutionManagement {
-  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+  // This causes WASM builds to fail with `Could not determine the dependencies of task ':kotlinNodeJsSetup'.`
+  // repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
   repositories {
     google()
     mavenCentral()
@@ -16,3 +17,4 @@ rootProject.name = "ColorPickerComposeDemo"
 include(":app")
 include(":colorpicker-compose")
 include(":benchmark")
+include("wasmApp")

wasmApp/build.gradle.kts

@@ -0,0 +1,47 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+@Suppress("DSL_SCOPE_VIOLATION")
+plugins {
+  id(libs.plugins.kotlin.multiplatform.get().pluginId)
+  id(libs.plugins.jetbrains.compose.get().pluginId)
+  id(libs.plugins.compose.compiler.get().pluginId)
+}
+
+kotlin {
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = "wasm-demo"
+    browser {
+      commonWebpackConfig {
+        outputFileName = "composeApp.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(compose.runtime)
+      implementation(compose.foundation)
+      implementation(compose.ui)
+      implementation(compose.components.uiToolingPreview)
+      implementation(compose.material)
+      implementation(compose.components.resources)
+
+      implementation(project(":colorpicker-compose"))
+    }
+  }
+}
+
+tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinJvmCompile>().configureEach {
+  compilerOptions {
+    jvmTarget.set(org.jetbrains.kotlin.gradle.dsl.JvmTarget.JVM_11)
+  }
+}

wasmApp/src/commonMain/kotlin/PickColour.kt

@@ -0,0 +1,104 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * 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
+ *
+ * http://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.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.selection.SelectionContainer
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.github.skydoves.colorpicker.compose.AlphaSlider
+import com.github.skydoves.colorpicker.compose.AlphaTile
+import com.github.skydoves.colorpicker.compose.BrightnessSlider
+import com.github.skydoves.colorpicker.compose.ColorEnvelope
+import com.github.skydoves.colorpicker.compose.HsvColorPicker
+import com.github.skydoves.colorpicker.compose.rememberColorPickerController
+
+@Composable
+fun PickColour() {
+  val controller = rememberColorPickerController()
+  var currentColorEnvelope by remember {
+    mutableStateOf(
+      ColorEnvelope(
+        Color.Green,
+        "ff00ff00",
+        false,
+      ),
+    )
+  }
+
+  Column(
+    modifier = Modifier.fillMaxSize().background(Color.Black),
+    horizontalAlignment = Alignment.CenterHorizontally,
+  ) {
+    HsvColorPicker(
+      initialColor = currentColorEnvelope.color,
+      modifier = Modifier.padding(10.dp).size(300.dp),
+      controller = controller,
+      onColorChanged = { colorEnvelope: ColorEnvelope ->
+        currentColorEnvelope = colorEnvelope
+      },
+    )
+
+    Spacer(Modifier.height(8.dp))
+
+    AlphaSlider(
+      modifier = Modifier
+        .height(35.dp)
+        .width(400.dp),
+      controller = controller,
+    )
+
+    Spacer(Modifier.height(8.dp))
+
+    BrightnessSlider(
+      modifier = Modifier
+        .height(35.dp)
+        .width(400.dp),
+      controller = controller,
+    )
+
+    Spacer(Modifier.height(8.dp))
+
+    SelectionContainer {
+      Text(
+        currentColorEnvelope.hexCode,
+        color = currentColorEnvelope.color,
+      )
+    }
+
+    AlphaTile(
+      modifier = Modifier
+        .size(80.dp)
+        .clip(RoundedCornerShape(6.dp)),
+      controller = controller,
+    )
+  }
+}

wasmApp/src/wasmJsMain/kotlin/Main.kt

@@ -0,0 +1,25 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * 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
+ *
+ * http://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
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  ComposeViewport(document.body!!) {
+    PickColour()
+  }
+}

wasmApp/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>WasmJs Color Picker</title>
+  <link type="text/css" rel="stylesheet" href="style.css">
+  <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+</body>
+</html>

wasmApp/src/wasmJsMain/resources/style.css

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