Add wasm support (#361)

build.gradle.kts

@@ -54,5 +54,6 @@ gradleConventionsKmpDefaults {
  KmpTarget.Ios,
  KmpTarget.Js,
  KmpTarget.Jvm,
+ KmpTarget.WasmJs,
  )
 }

gradle.properties

@@ -53,3 +53,4 @@ kotlin.mpp.androidGradlePluginCompatibility.nowarn=true
 kotlin.native.ignoreDisabledTargets=true
 org.jetbrains.compose.experimental.jscanvas.enabled=true
 org.jetbrains.compose.experimental.uikit.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true

kotlin-js-store/yarn.lock

@@ -139,9 +139,9 @@
  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
 "@types/estree@^1.0.0":
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
- integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+ integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
  version "4.17.31"
@@ -919,9 +919,9 @@ envinfo@^7.7.3:
  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
 es-module-lexer@^1.2.1:
- version "1.3.0"
- resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
- integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.4.0.tgz#285182e7f8f536ff5f4c57f2309836ef851474d8"
+ integrity sha512-lcCr3v3OLezdfFyx9r5NRYHOUTQNnFEQ9E87Mx8Kc+iqyJNkO7MJoB4GQRTlIMw9kLLTwGw0OAkm4BQQud/d9g==
 
 escalade@^3.1.1:
  version "3.1.1"

sample/shared/build.gradle.kts

@@ -14,6 +14,7 @@ kotlin {
  KmpTarget.Android,
  KmpTarget.Js,
  KmpTarget.Jvm,
+ KmpTarget.WasmJs,
  project = project,
  ignoreDefaultTargets = true,
  )

sample/shared/src/wasmJsMain/kotlin/com/eygraber/compose/colorpicker/sample/FixedDecimalCount.wasm.kt

@@ -0,0 +1,6 @@
+package com.eygraber.compose.colorpicker.sample
+
+@JsFun("(f, d) => f.toFixed(d)")
+external fun toFixed(f: Float, d: Int): String
+
+actual fun Float.toFixedDecimalCount(digits: Int): String = toFixed(this, digits)

sample/webApp/build.gradle.kts

@@ -0,0 +1,46 @@
+import com.eygraber.conventions.kotlin.kmp.wasmJsMain
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+
+plugins {
+ id("com.eygraber.conventions-kotlin-multiplatform")
+ id("com.eygraber.conventions-detekt")
+ id("com.eygraber.conventions-compose-jetbrains")
+}
+
+kotlin {
+ kmpTargets(
+ KmpTarget.WasmJs,
+ project = project,
+ binaryType = BinaryType.Executable,
+ webOptions = KmpTarget.WebOptions(
+ isNodeEnabled = false,
+ isBrowserEnabled = true,
+ moduleName = "color-picker-wasm",
+ ),
+ ignoreDefaultTargets = true,
+ )
+ @OptIn(ExperimentalWasmDsl::class)
+ wasmJs {
+ browser {
+ commonWebpackConfig {
+ outputFileName = "color-picker-wasm.js"
+ experiments += "topLevelAwait"
+ }
+ }
+ }
+
+ sourceSets {
+ wasmJsMain {
+ dependencies {
+ implementation(compose.foundation)
+ implementation(compose.material3)
+
+ implementation(projects.sample.shared)
+ }
+ }
+ }
+}
+
+compose.experimental {
+ web.application {}
+}

sample/webApp/detekt.yml

@@ -0,0 +1,4 @@
+potential-bugs:
+ active: true
+ MissingPackageDeclaration:
+ active: false

sample/js-app/src/jsMain/kotlin/main.js.kt → sample/webApp/src/wasmJsMain/kotlin/main.wasm.kt

@@ -1,15 +1,10 @@
-@file:Suppress("MissingPackageDeclaration")
-
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.CanvasBasedWindow
 import com.eygraber.compose.colorpicker.sample.Sample
-import org.jetbrains.skiko.wasm.onWasmReady
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
- onWasmReady {
- CanvasBasedWindow("ColorPicker") {
- Sample()
- }
+ CanvasBasedWindow("ColorPicker") {
+ Sample()
  }
 }

sample/webApp/src/wasmJsMain/resources/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+
+ <title>Color Picker</title>
+ <script type="application/javascript" src="/color-picker-wasm.js"></script>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+</body>
+</html>

sample/webApp/src/wasmJsMain/resources/load.mjs

@@ -0,0 +1,14 @@
+import { instantiate } from 'color-picker-wasm.uninstantiated.mjs';
+
+await wasmSetup;
+
+let te = null;
+try {
+ await instantiate({ skia: Module['asm'] });
+} catch (e) {
+ te = e;
+}
+
+if (te != null) {
+ throw te;
+}

settings.gradle.kts

@@ -11,6 +11,12 @@ pluginManagement {
  }
  }
 
+ maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental") {
+ content {
+ includeGroupByRegex("org\\.jetbrains.*")
+ }
+ }
+
  maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") {
  content {
  includeGroupByRegex("org\\.jetbrains.*")
@@ -32,6 +38,8 @@ pluginManagement {
  }
 
  gradlePluginPortal()
+
+ maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/bootstrap")
  }
 }
 
@@ -42,12 +50,21 @@ dependencyResolutionManagement {
  // repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
 
  repositories {
+ maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental") {
+ content {
+ includeGroupByRegex("org\\.jetbrains.*")
+ }
+ }
+
  addCommonRepositories(
  includeMavenCentral = true,
  includeMavenCentralSnapshots = true,
  includeGoogle = true,
  includeJetbrainsCompose = true,
  )
+
+ maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/bootstrap")
+ maven("https://androidx.dev/storage/compose-compiler/repository/")
  }
 }
 
@@ -60,9 +77,9 @@ rootProject.name = "compose-color-picker"
 
 include(":library")
 include(":sample:android-app")
-include(":sample:js-app")
 include(":sample:jvm-app")
 include(":sample:shared")
+include(":sample:webApp")
 
 enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")