Merge branch 'main' of https://github.com/lihenggui/nowinkmp

README.md

@@ -42,7 +42,7 @@ As Firebase Analytics does not yet support Kotlin Multiplatform, the implementat
 | Module                    | Progress         | Desktop supported | Android supported | iOS supported | Web supported |
 |---------------------------|------------------|-------------------|-------------------|---------------|---------------|
 | app                       | Not started      | ❌                | ❌                | ❌            | ❌            |
-| app-nia-catalog           | Done             | ✅                | ✅                | ❔            | ❌            |
+| app-nia-catalog           | Done             | ✅                | ✅                | ❔            | ✅            |
 | :core:analytics           | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
 | :core:common              | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
 | :core:data                | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
@@ -51,7 +51,7 @@ As Firebase Analytics does not yet support Kotlin Multiplatform, the implementat
 | :core:datastore           | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
 | :core:datastore-proto     | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
 | :core:datastore-test      | Removed          | ❌                | ❌                | ❌            | ❌            |
-| :core:designsystem        | Done             | ✅                | ✅                | ❔            | ❌            |
+| :core:designsystem        | Done             | ✅                | ✅                | ❔            | ✅            |
 | :core:domain              | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
 | :core:model               | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |
 | :core:network             | Done             | ✔️                 | ✔️                 | ✔️             | ❌            |

app-nia-catalog/build.gradle.kts

@@ -16,6 +16,8 @@
 
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget.JVM_11
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
     alias(libs.plugins.dependencyGuard)
@@ -26,6 +28,22 @@ plugins {
 }
 
 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 {
         compilerOptions {
             jvmTarget.set(JVM_11)

app-nia-catalog/src/wasmJsMain/kotlin/Application.kt

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import com.google.samples.apps.niacatalog.ui.NiaCatalog
+import kotlinx.browser.document
+
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main () {
+    ComposeViewport(document.body!!) {
+        NiaCatalog()
+    }
+}

app-nia-catalog/src/wasmJsMain/resources/index.html

@@ -0,0 +1,32 @@
+<!--
+  ~ Copyright 2024 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     https://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>NowInKMP</title>
+    <script src="skiko.js"></script>
+    <link href="styles.css" rel="stylesheet" type="text/css"/>
+    <link rel="icon" type="image/x-icon" href="favicon.png">
+</head>
+<body>
+<div id="ComposeTargetContainer">
+    <canvas id="ComposeTarget"></canvas>
+    <script src="composeApp.js"></script>
+</div>
+</body>
+</html>

app-nia-catalog/src/wasmJsMain/resources/styles.css

@@ -0,0 +1,14 @@
+html, body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+}
+
+canvas {
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+}

core/designsystem/build.gradle.kts

@@ -1,3 +1,6 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
 /*
  * Copyright 2022 The Android Open Source Project
  *
@@ -34,6 +37,22 @@ android {
 }
 
 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()
+    }
     sourceSets {
         androidMain.dependencies {
             implementation(libs.compose.ui.tooling.preview)

gradle.properties

@@ -22,7 +22,8 @@ org.gradle.configureondemand=false
 org.gradle.caching=true
 
 # Enable configuration caching between builds.
-org.gradle.configuration-cache=true
+#org.gradle.configuration-cache=true # commented since its causing build errors, check later
+
 # This option is set because of https://github.com/google/play-services-plugins/issues/246
 # to generate the Configuration Cache regardless of incompatible tasks.
 # See https://github.com/android/nowinandroid/issues/1022 before using it.
@@ -53,3 +54,7 @@ org.jetbrains.compose.experimental.macos.enabled=true
 # Supporess androidDemoDebugResourcesCopyHierarchicalMultiplatformResources' has completed is not supported
 # TODO: Needs to be removed once the issue is fixed
 kotlin.mpp.enableResourcesPublication=false
+
+# suppressing build warnings for experimental features
+org.jetbrains.compose.experimental.wasm.enabled=true
+org.jetbrains.compose.experimental.jscanvas.enabled=true