Target JS and Wasm

gradle.properties

@@ -22,3 +22,7 @@ android.enableJetifier=false
 kotlin.mpp.androidSourceSetLayoutVersion=2
 kotlin.mpp.androidGradlePluginCompatibility.nowarn=true
 org.jetbrains.compose.experimental.uikit.enabled=true
+
+#Compose for Web is Experimental
+org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true

gradle/libs.versions.toml

@@ -6,7 +6,7 @@ agp = "8.1.4"
 androidx-compose-ui = "1.6.0"   # https://developer.android.com/jetpack/androidx/releases/compose-ui
 androidx-compose-ui-material3 = "1.1.2"
 androidx-compose-compiler = "1.5.8" # https://developer.android.com/jetpack/androidx/releases/compose-compiler
-compose-multiplatform = "1.5.12" # https://github.com/JetBrains/compose-multiplatform/releases
+compose-multiplatform = "1.6.0" # https://github.com/JetBrains/compose-multiplatform/releases
 androidx-appcompat = "1.6.1"
 androidx-activity = "1.8.2"  # https://developer.android.com/jetpack/androidx/releases/activity
 androidx-savedstate = "1.2.1"  # https://developer.android.com/jetpack/androidx/releases/savedstate

library/build.gradle.kts

@@ -1,3 +1,5 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+
 plugins {
   alias(libs.plugins.android.library)
   alias(libs.plugins.kotlin.multiplatform)
@@ -15,6 +17,13 @@ kotlin {
   iosX64()
   iosArm64()
   iosSimulatorArm64()
+  js(IR) {
+    browser()
+  }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+  }
 
   sourceSets {
     val commonMain by getting {

sample/build.gradle.kts → sample/androidApp/build.gradle.kts

@@ -30,6 +30,7 @@ android {
 
 dependencies {
   implementation(projects.library)
+  implementation(projects.sample.shared)
   implementation(libs.androidx.appcompat)
   implementation(libs.androidx.activity)
   implementation(libs.compose.foundation)

sample/androidApp/src/main/kotlin/me/saket/swipe/sample/SampleActivity.kt

@@ -0,0 +1,51 @@
+package me.saket.swipe.sample
+
+import android.os.Build
+import android.os.Bundle
+import androidx.activity.compose.setContent
+import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.*
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.core.view.WindowCompat
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import me.saket.swipe.sample.theme.DarkTheme
+import me.saket.swipe.sample.theme.LightTheme
+import me.saket.swipe.sample.theme.MainContent
+
+@OptIn(ExperimentalMaterial3Api::class)
+class SampleActivity : AppCompatActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+
+    setContent {
+      val uiController = rememberSystemUiController()
+      val systemInDarkTheme = isSystemInDarkTheme()
+      LaunchedEffect(Unit) {
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+        uiController.setSystemBarsColor(Color.Transparent, darkIcons = !systemInDarkTheme)
+        uiController.setNavigationBarColor(Color.Transparent)
+      }
+
+      val colors = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+        if (systemInDarkTheme) dynamicDarkColorScheme(this) else dynamicLightColorScheme(this)
+      } else {
+        if (systemInDarkTheme) DarkTheme else LightTheme
+      }
+
+      MaterialTheme(colors) {
+        Scaffold(
+          topBar = {
+            TopAppBar(title = { Text(stringResource(R.string.app_name)) })
+          }
+        ) { contentPadding ->
+          MainContent(modifier = Modifier.padding(contentPadding))
+        }
+      }
+    }
+  }
+}

sample/shared/build.gradle.kts

@@ -0,0 +1,72 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+
+plugins {
+  alias(libs.plugins.android.library)
+  alias(libs.plugins.kotlin.multiplatform)
+  alias(libs.plugins.compose.multiplatform)
+}
+
+kotlin {
+  @Suppress("OPT_IN_USAGE")
+  targetHierarchy.default()
+
+  androidTarget()
+  jvm()
+  iosX64()
+  iosArm64()
+  iosSimulatorArm64()
+  js(IR) {
+    browser()
+  }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+  }
+
+  sourceSets {
+    val commonMain by getting {
+      dependencies {
+        implementation(projects.library)
+        implementation(compose.ui)
+        implementation(compose.foundation)
+        implementation(compose.material3)
+        implementation(compose.materialIconsExtended)
+        @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+        implementation(compose.components.resources)
+      }
+    }
+
+    val jsWasmMain by creating {
+      dependsOn(commonMain)
+    }
+
+    val jsMain by getting {
+      dependsOn(jsWasmMain)
+    }
+
+    val wasmJsMain by getting {
+      dependsOn(jsWasmMain)
+    }
+  }
+}
+
+android {
+  namespace = "me.saket.swipe"
+
+  defaultConfig {
+    minSdk = libs.versions.minSdk.get().toInt()
+    compileSdk = libs.versions.compileSdk.get().toInt()
+  }
+  buildFeatures {
+    compose = true
+  }
+  composeOptions {
+    kotlinCompilerExtensionVersion = libs.versions.androidx.compose.compiler.get()
+  }
+  java {
+    toolchain.languageVersion.set(JavaLanguageVersion.of(11))
+  }
+  lint {
+    abortOnError = true
+  }
+}

sample/shared/src/commonMain/composeResources/values/strings.xml

@@ -0,0 +1,3 @@
+<resources xmlns="">
+  <string name="app_name">Swipe</string>
+</resources>

sample/src/main/kotlin/me/saket/swipe/sample/SampleActivity.kt → sample/shared/src/commonMain/kotlin/me/saket/swipe/sample/theme/MainContent.kt

@@ -1,36 +1,19 @@
-package me.saket.swipe.sample
+package me.saket.swipe.sample.theme
 
-import android.os.Build
-import android.os.Bundle
-import androidx.activity.compose.setContent
-import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.twotone.Archive
 import androidx.compose.material.icons.twotone.ReplyAll
 import androidx.compose.material.icons.twotone.Snooze
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.dynamicDarkColorScheme
-import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -39,50 +22,19 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import androidx.core.view.WindowCompat
-import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import me.saket.swipe.SwipeAction
 import me.saket.swipe.SwipeableActionsBox
-import me.saket.swipe.sample.theme.DarkTheme
-import me.saket.swipe.sample.theme.LightTheme
 
-@OptIn(ExperimentalMaterial3Api::class)
-class SampleActivity : AppCompatActivity() {
-  override fun onCreate(savedInstanceState: Bundle?) {
-    super.onCreate(savedInstanceState)
 
-    setContent {
-      val uiController = rememberSystemUiController()
-      val systemInDarkTheme = isSystemInDarkTheme()
-      LaunchedEffect(Unit) {
-        WindowCompat.setDecorFitsSystemWindows(window, false)
-        uiController.setSystemBarsColor(Color.Transparent, darkIcons = !systemInDarkTheme)
-        uiController.setNavigationBarColor(Color.Transparent)
-      }
-
-      val colors = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-        if (systemInDarkTheme) dynamicDarkColorScheme(this) else dynamicLightColorScheme(this)
-      } else {
-        if (systemInDarkTheme) DarkTheme else LightTheme
-      }
+@Composable
+fun MainContent(modifier: Modifier = Modifier) {
 
-      MaterialTheme(colors) {
-        Scaffold(
-          topBar = {
-            TopAppBar(title = { Text(stringResource(R.string.app_name)) })
-          }
-        ) { contentPadding ->
-          LazyColumn(Modifier.padding(contentPadding).fillMaxSize()) {
-            items(20) { index ->
-              SwipeableBoxPreview(
-                Modifier.fillMaxWidth()
-              )
-            }
-          }
-        }
-      }
+  LazyColumn(modifier.fillMaxSize()) {
+    items(20) { index ->
+      SwipeableBoxPreview(
+        Modifier.fillMaxWidth()
+      )
     }
   }
 }
@@ -125,7 +77,7 @@ private fun SwipeableBoxPreview(modifier: Modifier = Modifier) {
 }
 
 @Composable
-private fun BatmanIpsumItem(
+fun BatmanIpsumItem(
   modifier: Modifier = Modifier,
   isSnoozed: Boolean
 ) {

sample/webApp/README.md

@@ -0,0 +1,7 @@
+# Web app
+
+To start the web app, run:
+
+```shell
+./gradlew :sample:webApp:wasmJsBrowserDevelopmentRun
+```

sample/webApp/build.gradle.kts

@@ -0,0 +1,58 @@
+import org.jetbrains.compose.ExperimentalComposeLibrary
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+plugins {
+  alias(libs.plugins.kotlin.multiplatform)
+  alias(libs.plugins.compose.multiplatform)
+}
+
+
+kotlin {
+  js(IR) {
+    moduleName = "sample"
+    browser {
+      commonWebpackConfig {
+        outputFileName = "sample.js"
+      }
+    }
+    binaries.executable()
+  }
+
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = "sample"
+    browser {
+      commonWebpackConfig {
+        outputFileName = "sample.js"
+      }
+    }
+    binaries.executable()
+  }
+
+  sourceSets {
+    val jsWasmMain by creating {
+      dependencies {
+        implementation(projects.library)
+        implementation(projects.sample.shared)
+        implementation(compose.runtime)
+        implementation(compose.ui)
+        implementation(compose.foundation)
+        implementation(compose.material3)
+        @OptIn(ExperimentalComposeLibrary::class)
+        implementation(compose.components.resources)
+      }
+    }
+    val jsMain by getting {
+      dependsOn(jsWasmMain)
+    }
+    val wasmJsMain by getting {
+      dependsOn(jsWasmMain)
+    }
+  }
+}
+
+
+compose.experimental {
+  web.application {}
+}

sample/webApp/src/jsMain/kotlin/me/saket/swipe/sample/main.kt

@@ -0,0 +1,14 @@
+package me.saket.swipe.sample
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  onWasmReady {
+    CanvasBasedWindow("Sample") {
+      MainContentWeb()
+    }
+  }
+}

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

sample/webApp/src/jsWasmMain/kotlin/me/saket/swipe/sample/Common.kt

@@ -0,0 +1,9 @@
+package me.saket.swipe.sample
+
+import androidx.compose.runtime.Composable
+import me.saket.swipe.sample.theme.MainContent
+
+@Composable
+internal fun MainContentWeb() {
+  MainContent()
+}

sample/webApp/src/wasmJsMain/kotlin/me/saket/swipe/sample/Main.wasm.kt

@@ -0,0 +1,13 @@
+package me.saket.swipe.sample
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import me.saket.swipe.sample.theme.MainContent
+
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  CanvasBasedWindow(canvasElementId = "ComposeTarget") {
+    MainContent()
+  }
+}