WIP: Added wasm/js support for webview lib. Rough implementation.

build.gradle.kts

@@ -1,15 +1,17 @@
 plugins {
     // this is necessary to avoid the plugins to be loaded multiple times
     // in each subproject's classloader
-    kotlin("multiplatform").apply(false)
-    kotlin("plugin.serialization").apply(false)
-    id("com.android.application").apply(false)
-    id("com.android.library").apply(false)
-    id("org.jetbrains.compose").apply(false)
-    id("org.jetbrains.dokka")
+    alias(libs.plugins.androidApplication) apply false
+    alias(libs.plugins.androidLibrary) apply false
+    alias(libs.plugins.jetbrainsCompose) apply false
+    alias(libs.plugins.kotlinJvm) apply false
+    alias(libs.plugins.kotlinMultiplatform) apply false
+    alias(libs.plugins.kotlinSerialization)
+
     id("com.vanniktech.maven.publish") version "0.25.3" apply false
     id("org.jlleitschuh.gradle.ktlint") version "11.6.1"
     id("org.jetbrains.kotlin.plugin.atomicfu") version "1.9.20"
+    id("org.jetbrains.dokka").version("1.9.0")
 }
 
 subprojects {

gradle.properties

@@ -8,18 +8,15 @@ kotlin.code.style=official
 kotlin.mpp.stability.nowarn=true
 kotlin.mpp.enableCInteropCommonization=true
 kotlin.mpp.androidSourceSetLayoutVersion=2
+org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
 
 #Android
 android.useAndroidX=true
 android.compileSdk=34
 android.targetSdk=34
 android.minSdk=21
 
-#Versions
-kotlin.version=1.9.20
-agp.version=8.1.1
-compose.version=1.5.10
-
 GROUP=io.github.kevinnzou
 POM_ARTIFACT_ID=compose-webview-multiplatform
 VERSION_NAME=1.9.2

gradle/libs.versions.toml

@@ -0,0 +1,22 @@
+[versions]
+agp = "8.2.2"
+androidx-activityCompose = "1.8.2"
+compose = "1.6.5"
+compose-plugin = "1.6.1"
+kotlin = "1.9.23"
+kotlinSerialization = "1.9.23"
+kotlinxSerializationJson = "1.6.3"
+
+[libraries]
+androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
+compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose" }
+compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }
+kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
+
+[plugins]
+androidApplication = { id = "com.android.application", version.ref = "agp" }
+androidLibrary = { id = "com.android.library", version.ref = "agp" }
+jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }
+kotlinJvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
+kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
+kotlinSerialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlinSerialization" }

sample/composeApp/build.gradle.kts

@@ -0,0 +1,85 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+plugins {
+    alias(libs.plugins.kotlinMultiplatform)
+    alias(libs.plugins.androidApplication)
+    alias(libs.plugins.jetbrainsCompose)
+    alias(libs.plugins.kotlinSerialization)
+}
+
+kotlin {
+
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeApp"
+        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()
+    }
+
+    androidTarget {
+        compilations.all {
+            kotlinOptions {
+                jvmTarget = "11"
+            }
+        }
+    }
+
+    sourceSets {
+
+        androidMain.dependencies {
+            implementation(libs.compose.ui.tooling.preview)
+            implementation(libs.androidx.activity.compose)
+        }
+
+        commonMain.dependencies {
+            implementation(compose.runtime)
+            implementation(compose.foundation)
+            implementation(compose.material)
+            implementation(compose.components.resources)
+            implementation(compose.components.uiToolingPreview)
+            implementation(libs.kotlinx.serialization.json)
+            implementation(project(":sample:shared"))
+        }
+    }
+}
+
+android {
+    compileSdk = (findProperty("android.compileSdk") as String).toInt()
+    namespace = "com.multiplatform.webview"
+
+    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
+    sourceSets["main"].resources.srcDirs("src/commonMain/resources")
+
+    defaultConfig {
+        applicationId = "com.multiplatform.webview"
+        minSdk = (findProperty("android.minSdk") as String).toInt()
+        targetSdk = (findProperty("android.targetSdk") as String).toInt()
+        versionCode = 1
+        versionName = "1.0"
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
+    kotlin {
+        jvmToolchain(17)
+    }
+    dependencies {
+        debugImplementation(libs.compose.ui.tooling)
+    }
+}
+
+compose.experimental {
+    web.application {}
+}

sample/composeApp/src/commonMain/kotlin/App.kt

@@ -0,0 +1,35 @@
+import androidx.compose.runtime.Composable
+import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.Text
+import com.multiplatform.webview.web.WebView
+import com.multiplatform.webview.web.rememberWebViewState
+import androidx.compose.ui.Modifier
+
+@Composable
+fun App() {
+
+    MaterialTheme {
+        val webViewState = rememberWebViewState(
+            "https://github.com/KevinnZou/compose-webview-multiplatform"
+        )
+        webViewState.webSettings.apply {
+            isJavaScriptEnabled = true
+            customUserAgentString =
+                "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1) AppleWebKit/625.20 (KHTML, like Gecko) Version/14.3.43 Safari/625.20"
+        }
+        Column(Modifier.fillMaxSize()) {
+            val text =
+                webViewState.let {
+                    "${it.pageTitle ?: ""} ${it.loadingState} ${it.lastLoadedUrl ?: ""}"
+                }
+            Text(text)
+            WebView(
+                state = webViewState,
+                modifier = Modifier.fillMaxSize(),
+            )
+        }
+    }
+}

sample/composeApp/src/wasmJsMain/kotlin/Platform.wasmJs.kt

@@ -0,0 +1,6 @@
+
+/*class WasmPlatform: Platform {
+    override val name: String = "Web with Kotlin/Wasm"
+}
+
+actual fun getPlatform(): Platform = WasmPlatform()*/

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

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

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

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" style="width: 100%; height: 100%">
+<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>

sample/shared/build.gradle.kts

@@ -1,15 +1,30 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
 plugins {
-    kotlin("multiplatform")
-    id("com.android.library")
-    id("org.jetbrains.compose")
-    kotlin("plugin.serialization")
+    alias(libs.plugins.kotlinMultiplatform)
+    alias(libs.plugins.androidLibrary)
+    alias(libs.plugins.jetbrainsCompose)
     id("org.jetbrains.kotlin.plugin.atomicfu")
 }
 
 @OptIn(org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi::class)
 kotlin {
     targetHierarchy.default()
 
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser {
+            commonWebpackConfig {
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        add(project.projectDir.path)
+                    }
+                }
+            }
+        }
+    }
+
     androidTarget {
         compilations.all {
             kotlinOptions {
@@ -37,25 +52,35 @@ kotlin {
                 implementation(compose.runtime)
                 implementation(compose.foundation)
                 implementation(compose.material)
+                implementation(libs.kotlinx.serialization.json)
                 @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                 implementation(compose.components.resources)
-                implementation("co.touchlab:kermit:2.0.0-RC5")
+                implementation("co.touchlab:kermit:2.0.3")
                 api(project(":webview"))
-                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
-                implementation("org.jetbrains.kotlinx:atomicfu:0.21.0")
+
                 implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
             }
         }
         val androidMain by getting {
             dependencies {
+                implementation("org.jetbrains.kotlinx:atomicfu:0.21.0")
                 api("androidx.activity:activity-compose:1.7.2")
                 api("androidx.appcompat:appcompat:1.6.1")
                 implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:$coroutines")
             }
         }
+        val iosX64Main by getting
+        val iosArm64Main by getting
+        val iosSimulatorArm64Main by getting
+        val iosMain by getting {
+            dependencies {
+                implementation("org.jetbrains.kotlinx:atomicfu:0.21.0")
+            }
+        }
         val desktopMain by getting {
             dependencies {
                 implementation(compose.desktop.common)
+                implementation("org.jetbrains.kotlinx:atomicfu:0.21.0")
                 implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:$coroutines")
             }
         }

sample/shared/src/wasmJsMain/kotlin/com/kevinnzou/sample/main.wasm.kt

@@ -0,0 +1,16 @@
+package com.kevinnzou.sample
+
+//import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.runtime.Composable
+
+actual fun getPlatformName(): String = "Wasm"
+
+@Composable
+fun MainWebView() = WebViewApp()
+
+/*
+@Preview
+@Composable
+fun AppPreview() {
+    WebViewApp()
+}*/

settings.gradle.kts

@@ -4,6 +4,7 @@ include(":sample:androidApp")
 include(":webview")
 include(":sample:desktopApp")
 include(":sample:shared")
+include(":sample:composeApp")
 
 pluginManagement {
     repositories {
@@ -12,23 +13,6 @@ pluginManagement {
         google()
         maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     }
-
-    plugins {
-        val kotlinVersion = extra["kotlin.version"] as String
-        val agpVersion = extra["agp.version"] as String
-        val composeVersion = extra["compose.version"] as String
-
-        kotlin("jvm").version(kotlinVersion)
-        kotlin("multiplatform").version(kotlinVersion)
-        kotlin("plugin.serialization").version(kotlinVersion)
-        kotlin("android").version(kotlinVersion)
-
-        id("com.android.application").version(agpVersion)
-        id("com.android.library").version(agpVersion)
-
-        id("org.jetbrains.compose").version(composeVersion)
-        id("org.jetbrains.dokka").version("1.9.0")
-    }
 }
 
 dependencyResolutionManagement {