Add Web (wasm JS) support and update theme preference handling

softartdev · softartdev · commit f8a366a6253f · 2025-06-16T05:02:29.000+04:00
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ Supported platforms:
 - Android
 - iOS
 - Desktop JVM (MacOS, Linux, Windows)
+- Web (wasm JS)
 
 ![Android screenshot](doc/screenshots/gif/android/material_design_3/demo.gif)
 ![iOS screenshot](doc/screenshots/gif/iOS/material_design_3/demo.gif)
@@ -103,6 +104,13 @@ private val preferences: NSUserDefaults = NSUserDefaults.standardUserDefaults
 actual var themeEnum: ThemeEnum
     get() = preferences.integerForKey(THEME_KEY).let(ThemeEnum.values()::get)
     set(value) = preferences.setInteger(value.ordinal, THEME_KEY)
+
+// wasm js:
+private val storage: Storage = window.localStorage
+
+actual var themeEnum: ThemeEnum
+    get() = storage.getItem(THEME_KEY)?.toIntOrNull()?.let(ThemeEnum.values()::get) ?: ThemeEnum.SystemDefault
+    set(value) = storage.setItem(THEME_KEY, value.ordinal.toString())
 ```
 Also used [composition local](https://developer.android.com/jetpack/compose/compositionlocal) for access from theme-scoped as an implicit way:
 ```kotlin
diff --git a/gradle.properties b/gradle.properties
@@ -1,5 +1,5 @@
 GROUP=io.github.softartdev
-VERSION=0.9.6
+VERSION=0.9.7
 
 org.gradle.jvmargs=-Xmx16g -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 -Dkotlin.daemon.jvm.options\="-Xmx16g" -XX:+UseParallelGC -XX:MaxMetaspaceSize=1g
 org.gradle.parallel=true
diff --git a/sample/build.gradle.kts b/sample/build.gradle.kts
@@ -1,5 +1,6 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
     kotlin("multiplatform")
@@ -24,6 +25,24 @@ kotlin {
             isStatic = true
         }
     }
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            val rootDirPath = project.rootDir.path
+            val projectDirPath = project.projectDir.path
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(rootDirPath)
+                        add(projectDirPath)
+                    }
+                }
+            }
+        }
+        binaries.executable()
+    }
     sourceSets {
         commonMain.dependencies {
             api(project(":theme:theme-material"))
diff --git a/sample/src/wasmJsMain/kotlin/com/softartdev/shared/EdgeToEdge.wasmJs.kt b/sample/src/wasmJsMain/kotlin/com/softartdev/shared/EdgeToEdge.wasmJs.kt
@@ -0,0 +1,7 @@
+package com.softartdev.shared
+
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun EnableEdgeToEdge(material3: Boolean, inDark: Boolean) {
+}
diff --git a/sample/src/wasmJsMain/kotlin/com/softartdev/shared/main.kt b/sample/src/wasmJsMain/kotlin/com/softartdev/shared/main.kt
@@ -0,0 +1,12 @@
+package com.softartdev.shared
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    ComposeViewport(document.body!!) {
+        App()
+    }
+}
diff --git a/sample/src/wasmJsMain/resources/index.html b/sample/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>Material Theme Preferences</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+    <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/sample/src/wasmJsMain/resources/styles.css b/sample/src/wasmJsMain/resources/styles.css
@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
diff --git a/theme/theme-material/build.gradle.kts b/theme/theme-material/build.gradle.kts
@@ -23,6 +23,10 @@ kotlin {
     iosX64()
     iosArm64()
     iosSimulatorArm64()
+    wasmJs {
+        browser()
+        binaries.executable()
+    }
     sourceSets {
         commonMain.dependencies {
             api(project(":theme:theme-prefs"))
diff --git a/theme/theme-material3/build.gradle.kts b/theme/theme-material3/build.gradle.kts
@@ -23,6 +23,10 @@ kotlin {
     iosX64()
     iosArm64()
     iosSimulatorArm64()
+    wasmJs {
+        browser()
+        binaries.executable()
+    }
     sourceSets {
         commonMain.dependencies {
             api(project(":theme:theme-prefs"))
diff --git a/theme/theme-prefs/build.gradle.kts b/theme/theme-prefs/build.gradle.kts
@@ -21,6 +21,10 @@ kotlin {
     iosX64()
     iosArm64()
     iosSimulatorArm64()
+    wasmJs {
+        browser()
+        binaries.executable()
+    }
     applyDefaultHierarchyTemplate()
 
     sourceSets {
@@ -35,6 +39,9 @@ kotlin {
         androidMain.dependencies {
             api(compose.ui)
         }
+        wasmJsMain.dependencies {
+            implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
+        }
     }
     explicitApi()
 }
diff --git a/theme/theme-prefs/src/desktopMain/kotlin/com/softartdev/theme/pref/JvmPreferenceHelper.kt b/theme/theme-prefs/src/desktopMain/kotlin/com/softartdev/theme/pref/JvmPreferenceHelper.kt
@@ -8,7 +8,7 @@ internal class JvmPreferenceHelper : PreferenceHelper {
      private var preferences: Preferences = Preferences.userNodeForPackage(ThemeEnum::class.java)
 
      override var themeEnum: ThemeEnum
-          get() = preferences.getInt(THEME_KEY, ThemeEnum.SystemDefault.ordinal).let(ThemeEnum.values()::get)
+          get() = preferences.getInt(THEME_KEY, ThemeEnum.SystemDefault.ordinal).let(ThemeEnum.entries::get)
           set(value) = preferences.putInt(THEME_KEY, value.ordinal)
 
      override fun clear() = preferences.clear()
diff --git a/theme/theme-prefs/src/iosMain/kotlin/com/softartdev/theme/pref/IosPreferenceHelper.kt b/theme/theme-prefs/src/iosMain/kotlin/com/softartdev/theme/pref/IosPreferenceHelper.kt
@@ -8,7 +8,7 @@ internal class IosPreferenceHelper : PreferenceHelper {
     private var preferences: NSUserDefaults = NSUserDefaults.standardUserDefaults
 
     override var themeEnum: ThemeEnum
-        get() = preferences.integerForKey(defaultName = THEME_KEY).toInt().let(ThemeEnum.values()::get)
+        get() = preferences.integerForKey(defaultName = THEME_KEY).toInt().let(ThemeEnum.entries::get)
         set(value) = preferences.setInteger(value.ordinal.toLong(), THEME_KEY)
 
     override fun clear() = preferences.removeObjectForKey(defaultName = THEME_KEY)
diff --git a/theme/theme-prefs/src/wasmJsMain/kotlin/com/softartdev/theme/pref/PreferenceHelper.wasmJs.kt b/theme/theme-prefs/src/wasmJsMain/kotlin/com/softartdev/theme/pref/PreferenceHelper.wasmJs.kt
@@ -0,0 +1,21 @@
+package com.softartdev.theme.pref
+
+import androidx.compose.runtime.Composable
+import kotlinx.browser.window
+import org.w3c.dom.Storage
+
+internal class WasmJsPreferenceHelper : PreferenceHelper {
+
+    private val storage: Storage = window.localStorage
+
+    override var themeEnum: ThemeEnum
+        get() = storage.getItem(THEME_KEY)?.toIntOrNull()
+            ?.let(ThemeEnum.entries::getOrNull)
+            ?: ThemeEnum.SystemDefault
+        set(value) = storage.setItem(THEME_KEY, value.ordinal.toString())
+
+    override fun clear() = storage.removeItem(THEME_KEY)
+}
+
+@Composable
+internal actual fun obtainPreferenceHelper(): PreferenceHelper = WasmJsPreferenceHelper()

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,10 @@ kotlin {`
`21`	`21`	`iosX64()`
`22`	`22`	`iosArm64()`
`23`	`23`	`iosSimulatorArm64()`
	`24`	`+ wasmJs {`
	`25`	`+ browser()`
	`26`	`+ binaries.executable()`
	`27`	`+ }`
`24`	`28`	`applyDefaultHierarchyTemplate()`
`25`	`29`
`26`	`30`	`sourceSets {`
`@@ -35,6 +39,9 @@ kotlin {`
`35`	`39`	`androidMain.dependencies {`
`36`	`40`	`api(compose.ui)`
`37`	`41`	`}`
	`42`	`+ wasmJsMain.dependencies {`
	`43`	`+ implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")`
	`44`	`+ }`
`38`	`45`	`}`
`39`	`46`	`explicitApi()`
`40`	`47`	`}`