Merge pull request #617 from CanizaresSoftwares/add_kotlin_js_support

kizitonwose · web-flow · commit 5fd2aedf2c92 · 2025-06-22T01:24:11.000+02:00
feat: add JavaScript target support for compose-multiplatform
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ The library provides the following artifacts:
 
 `com.kizitonwose.calendar:compose`: The compose artifact for Android projects. This uses the [java.time](https://docs.oracle.com/javase/8/docs/api/java/time/package-summary.html) APIs. 
 
-`com.kizitonwose.calendar:compose-multiplatform`: The compose artifact for Compose Multiplatform projects. This uses the [kotlinx-datetime](https://github.com/Kotlin/kotlinx-datetime) library and supports Android, iOS, WasmJs and Desktop platforms.
+`com.kizitonwose.calendar:compose-multiplatform`: The compose artifact for Compose Multiplatform projects. This uses the [kotlinx-datetime](https://github.com/Kotlin/kotlinx-datetime) library and supports Android, iOS, js, WasmJs and Desktop platforms.
 
 `com.kizitonwose.calendar:view`: The view artifact for Android projects. This uses the [java.time](https://docs.oracle.com/javase/8/docs/api/java/time/package-summary.html) APIs and can exist alongside the Android compose artifact in an Android project if needed.
 
@@ -116,7 +116,7 @@ Add the multiplatform calendar library to your project's `build.gradle.kts`:
 ```kotlin
 commonMain.dependencies {
   // The calendar library for compose multiplatform projects
-  // Supports Android, iOS, WasmJs and Desktop platforms
+  // Supports Android, iOS, js, WasmJs and Desktop platforms
   implementation("com.kizitonwose.calendar:compose-multiplatform:<latest-version>")
 }
 ```
diff --git a/compose-multiplatform/library/api/library.klib.api b/compose-multiplatform/library/api/library.klib.api
@@ -1,5 +1,5 @@
 // Klib ABI Dump
-// Targets: [iosArm64, iosSimulatorArm64, iosX64, wasmJs]
+// Targets: [iosArm64, iosSimulatorArm64, iosX64, js, wasmJs]
 // Rendering settings:
 // - Signature version: 2
 // - Show manifest properties: true
diff --git a/compose-multiplatform/library/build.gradle.kts b/compose-multiplatform/library/build.gradle.kts
@@ -22,6 +22,10 @@ kotlin {
         binaries.library()
     }
 
+    js(IR) {
+        browser()
+    }
+
     androidTarget {
         publishLibraryVariants("release")
     }
@@ -43,6 +47,7 @@ kotlin {
 
     sourceSets {
         val commonMain by getting
+        val jsMain by getting
         val wasmJsMain by getting
         val nativeMain by getting
         val desktopMain by getting
@@ -65,10 +70,16 @@ kotlin {
             api(libs.kotlinx.datetime)
         }
 
+        val webMain by creating {
+            dependsOn(commonMain)
+            jsMain.dependsOn(this)
+            wasmJsMain.dependsOn(this)
+        }
+
         val nonJvmMain by creating {
             dependsOn(commonMain)
             nativeMain.dependsOn(this)
-            wasmJsMain.dependsOn(this)
+            webMain.dependsOn(this)
             dependencies {
                 api(libs.kotlinx.serialization.core)
             }
diff --git a/compose-multiplatform/library/src/jsMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromTag.js.kt b/compose-multiplatform/library/src/jsMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromTag.js.kt
@@ -0,0 +1,4 @@
+package com.kizitonwose.calendar.core
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo#firstday
+internal actual fun jsFirstDayFromTag(languageTag: String): Int = js("new Intl.Locale(languageTag).getWeekInfo().firstDay") as Int
diff --git a/compose-multiplatform/library/src/jsMain/kotlin/com/kizitonwose/calendar/data/Utils.js.kt b/compose-multiplatform/library/src/jsMain/kotlin/com/kizitonwose/calendar/data/Utils.js.kt
@@ -0,0 +1,4 @@
+package com.kizitonwose.calendar.data
+
+internal actual fun log(tag: String, message: String) =
+    console.log("$tag : $message")
diff --git a/compose-multiplatform/library/src/wasmJsMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromTag.wasmJs.kt b/compose-multiplatform/library/src/wasmJsMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromTag.wasmJs.kt
@@ -0,0 +1,4 @@
+package com.kizitonwose.calendar.core
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo#firstday
+internal actual fun jsFirstDayFromTag(languageTag: String): Int = js("new Intl.Locale(languageTag).weekInfo?.firstDay")
diff --git a/compose-multiplatform/library/src/webMain/kotlin/com/kizitonwose/calendar/core/Extensions.js.kt b/compose-multiplatform/library/src/webMain/kotlin/com/kizitonwose/calendar/core/Extensions.js.kt
@@ -15,6 +15,3 @@ public actual fun firstDayOfWeekFromLocale(locale: Locale): DayOfWeek {
         firstDayFromMap(locale)
     }
 }
-
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo#firstday
-private fun jsFirstDayFromTag(languageTag: String): Int = js("new Intl.Locale(languageTag).weekInfo?.firstDay")
diff --git a/compose-multiplatform/library/src/webMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromMap.kt b/compose-multiplatform/library/src/webMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromMap.kt
diff --git a/compose-multiplatform/library/src/webMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromTag.kt b/compose-multiplatform/library/src/webMain/kotlin/com/kizitonwose/calendar/core/FirstDayFromTag.kt
@@ -0,0 +1,3 @@
+package com.kizitonwose.calendar.core
+
+internal expect fun jsFirstDayFromTag(languageTag: String): Int
diff --git a/compose-multiplatform/sample/build.gradle.kts b/compose-multiplatform/sample/build.gradle.kts
@@ -3,6 +3,7 @@ import com.kizitonwose.calendar.buildsrc.Config
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDistributionDsl
 import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
@@ -30,6 +31,23 @@ kotlin {
         binaries.executable()
     }
 
+    js(IR) {
+        outputModuleName = "composeJsApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeJsApp.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(project.projectDir.path)
+                    }
+                }
+            }
+            useCommonJs()
+        }
+        binaries.executable()
+    }
+
     androidTarget {}
 
     jvm("desktop")
@@ -49,6 +67,7 @@ kotlin {
 
     sourceSets {
         val commonMain by getting
+        val jsMain by getting
         val wasmJsMain by getting
         val nativeMain by getting
         val desktopMain by getting
@@ -70,11 +89,17 @@ kotlin {
 //            implementation("com.kizitonwose.calendar:compose-multiplatform:2.6.0-alpha02")
             implementation(project(":compose-multiplatform:library"))
             implementation(libs.jetbrains.compose.navigation)
+            implementation(libs.material.icons)
+        }
+        val webMain by creating {
+            dependsOn(commonMain)
+            jsMain.dependsOn(this)
+            wasmJsMain.dependsOn(this)
         }
         val nonJvmMain by creating {
             dependsOn(commonMain)
             nativeMain.dependsOn(this)
-            wasmJsMain.dependsOn(this)
+            webMain.dependsOn(this)
             dependencies {}
         }
         desktopMain.dependsOn(jvmMain)
diff --git a/compose-multiplatform/sample/src/jsMain/kotlin/Main.kt b/compose-multiplatform/sample/src/jsMain/kotlin/Main.kt
@@ -0,0 +1,10 @@
+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/compose-multiplatform/sample/src/jsMain/resources/index.html b/compose-multiplatform/sample/src/jsMain/resources/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendar Library</title>
+    <script src="skiko.js"> </script>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+</head>
+<body>
+<script src="composeJsApp.js"></script>
+</body>
+</html>
diff --git a/compose-multiplatform/sample/src/webMain/kotlin/Device.web.kt b/compose-multiplatform/sample/src/webMain/kotlin/Device.web.kt
diff --git a/compose-multiplatform/sample/src/webMain/kotlin/Format.web.kt b/compose-multiplatform/sample/src/webMain/kotlin/Format.web.kt
diff --git a/compose-multiplatform/sample/src/webMain/resources/styles.css b/compose-multiplatform/sample/src/webMain/resources/styles.css
diff --git a/gradle.properties b/gradle.properties
@@ -27,3 +27,5 @@ POM_LICENCE_DIST=repo
 POM_DEVELOPER_ID=kizitonwose
 POM_DEVELOPER_NAME=Kizito Nwose
 POM_DEVELOPER_URL=https://github.com/kizitonwose
+
+org.jetbrains.compose.experimental.jscanvas.enabled=true
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -6,6 +6,7 @@ composeMultiplatform = "1.8.0"
 espresso = "3.6.1"
 junit5 = "5.12.2"
 kotlinxSerialization = "1.8.1"
+materialIconsVersion = "1.7.3"
 
 [libraries]
 kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib-jdk8", version.ref = "kotlin" }
@@ -22,6 +23,7 @@ androidx-constraintlayout = { module = "androidx.constraintlayout:constraintlayo
 androidx-recyclerview = { module = "androidx.recyclerview:recyclerview", version = "1.4.0" }
 androidx-cardview = { module = "androidx.cardview:cardview", version = "1.0.0" }
 material-view = { module = "com.google.android.material:material", version = "1.12.0" }
+material-icons = { module = "org.jetbrains.compose.material:material-icons-core", version.ref = "materialIconsVersion" }
 
 androidx-test-espresso-core = { module = "androidx.test.espresso:espresso-core", version.ref = "espresso" }
 androidx-test-espresso-contrib = { module = "androidx.test.espresso:espresso-contrib", version.ref = "espresso" }
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,3 @@ public actual fun firstDayOfWeekFromLocale(locale: Locale): DayOfWeek {`
`15`	`15`	`firstDayFromMap(locale)`
`16`	`16`	`}`
`17`	`17`	`}`
`18`		`-`
`19`		`-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo#firstday`
`20`		`-private fun jsFirstDayFromTag(languageTag: String): Int = js("new Intl.Locale(languageTag).weekInfo?.firstDay")`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+package com.kizitonwose.calendar.core`
	`2`	`+`
	`3`	`+internal expect fun jsFirstDayFromTag(languageTag: String): Int`