WasmJs target support (#42)

* Added wasmJs target for library & implemented browser sample

* Upgrade Kotlin to version 2.0.21

* Tiny updates

---------

Co-authored-by: Albert Chang <[email protected]>

build.gradle.kts

@@ -17,6 +17,6 @@ buildscript {
     }
 }
 
-task<Delete>("clean") {
+tasks.withType<Delete> {
     delete(rootProject.layout.buildDirectory)
 }

gradle/libs.versions.toml

@@ -6,13 +6,13 @@ sdk-compile = "34"
 buildTools = "35.0.0"
 binaryCompatibilityValidator = "0.16.3"
 maven-publish = "0.29.0"
-kotlin = "2.0.20"
+kotlin = "2.0.21"
 dokka = "1.9.20"
 coroutines = "1.8.1"
 compose-jetbrains = "1.6.11"
 compose-jetpack = "1.6.8"
 compose-compiler = "1.5.15"
-ktor = "2.3.12"
+ktor = "3.0.0"
 androidx-activity = "1.9.1"
 coil = "2.7.0"
 jUnit = "4.13.2"
@@ -38,6 +38,7 @@ compose-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest", ve
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-client-java = { module = "io.ktor:ktor-client-java", version.ref = "ktor" }
 ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
+ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
 coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
 jUnit = { module = "junit:junit", version.ref = "jUnit" }

sample/shared/build.gradle.kts

@@ -1,3 +1,4 @@
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
@@ -24,6 +25,12 @@ kotlin {
         }
     }
 
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser()
+        binaries.library()
+    }
+
     applyDefaultHierarchyTemplate()
 
     sourceSets {
@@ -58,6 +65,13 @@ kotlin {
                 implementation(libs.ktor.client.darwin)
             }
         }
+
+        val wasmJsMain by getting {
+            dependsOn(nonAndroidMain)
+            dependencies {
+                implementation(libs.ktor.client.js)
+            }
+        }
     }
 }
 

sample/shared/src/wasmJsMain/kotlin/com/mxalbert/zoomable/sample/AsyncZoomableImage.wasm.kt

@@ -0,0 +1,6 @@
+package com.mxalbert.zoomable.sample
+
+import io.ktor.client.HttpClient
+import io.ktor.client.engine.js.Js
+
+internal actual val httpClient = HttpClient(Js)

sample/shared/src/wasmJsMain/kotlin/com/mxalbert/zoomable/sample/ZoomableApp.wasm.kt

@@ -0,0 +1,16 @@
+package com.mxalbert.zoomable.sample
+
+import androidx.compose.material.SnackbarHostState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+
+@Composable
+fun ZoomableApp() {
+    val snackbarHostState = remember { SnackbarHostState() }
+
+    ZoomableApp(snackbarHostState = snackbarHostState) {
+        ZoomableImagePage(snackbarHostState = snackbarHostState) {
+            AsyncZoomableImage(url = Images[0])
+        }
+    }
+}

sample/wasmJsApp/.gitignore

@@ -0,0 +1 @@
+/build

sample/wasmJsApp/build.gradle.kts

@@ -0,0 +1,33 @@
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+plugins {
+    kotlin("multiplatform")
+    alias(libs.plugins.jetbrains.compose)
+    alias(libs.plugins.kotlin.plugin.compose)
+}
+
+kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser {
+            val rootDirPath = project.rootDir.path
+            commonWebpackConfig {
+                outputFileName = "zoomable.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    port = 8080
+                    static = (static ?: mutableListOf()).apply {
+                        add(rootDirPath)
+                    }
+                }
+            }
+        }
+        binaries.executable()
+    }
+    sourceSets {
+        wasmJsMain.dependencies {
+            implementation(project(":sample:shared"))
+            implementation(libs.compose.foundation.jetbrains)
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+package com.github.trueddd
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import com.mxalbert.zoomable.sample.ZoomableApp
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    CanvasBasedWindow(
+        title = "Zoomable",
+        canvasElementId = "canvas",
+    ) {
+        ZoomableApp()
+    }
+}

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

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>Zoomable</title>
+    <script type="application/javascript" src="zoomable.js"></script>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+</body>
+</html>

settings.gradle.kts

@@ -10,3 +10,4 @@ include(":zoomable")
 include(":sample:shared")
 include(":sample:desktopApp")
 include(":sample:androidApp")
+include(":sample:wasmJsApp")

zoomable/build.gradle.kts

@@ -2,6 +2,7 @@ import com.vanniktech.maven.publish.JavadocJar
 import com.vanniktech.maven.publish.KotlinMultiplatform
 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
 
 plugins {
@@ -29,6 +30,12 @@ kotlin {
     iosArm64()
     iosSimulatorArm64()
 
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser()
+        binaries.library()
+    }
+
     sourceSets {
         commonMain.dependencies {
             compileOnly(libs.compose.runtime.jetbrains)
@@ -62,6 +69,12 @@ kotlin {
             implementation(libs.compose.foundation.jetbrains)
             implementation(libs.compose.ui.util.jetbrains)
         }
+
+        wasmJsMain.dependencies {
+            implementation(libs.compose.runtime.jetbrains)
+            implementation(libs.compose.foundation.jetbrains)
+            implementation(libs.compose.ui.util.jetbrains)
+        }
     }
 }