Sync infrastracture and README with kotlin-wasm-examples repo compose-example

Author: JSMonk

.gitignore

@@ -1,5 +1,6 @@
 *.iml
 .gradle
+.kotlin
 **/build/
 xcuserdata
 !src/**/build/

README.md

@@ -1,58 +1,95 @@
 
 [![Incubator](https://jb.gg/badges/incubator-plastic.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
-# Compose Multiplatform for Web
+This example showcases a web application built with [Compose Multiplatform for web](#compose-multiplatform-for-web) and [Kotlin/Wasm](https://kotl.in/wasm).
 
-> **Note**
-> Web support is Experimental and may be changed at any time. Use it only for evaluation purposes.
-> We would appreciate your feedback on it in the public Slack channel [#compose-web](https://slack-chats.kotlinlang.org/c/compose-web).
-> If you face any issues, please report them on [GitHub](https://github.com/JetBrains/compose-multiplatform/issues).
+Check it out:
 
-You can experiment with sharing your mobile or desktop UIs with the web. Compose for Web is based on [Kotlin/Wasm](https://kotl.in/wasm),
-the newest target for Kotlin Multiplatform projects. It allows Kotlin developers to run their code in the browser with
-all the benefits that WebAssembly has to offer, such as good and predictable performance for your applications.
-
-# Compose for Web Example
- 
-A simple Compose Multiplatform App.
+[![Static Badge](https://img.shields.io/badge/online%20demo%20%F0%9F%9A%80-6b57ff?style=for-the-badge)](https://kotlin.github.io/kotlin-wasm-compose-template/).
 
 ![](screenshots/compose-example.png)
 
-## Build and run
+## Compose Multiplatform for web
+
+> **Note:**
+> Web support is an [Alpha](https://kotlinlang.org/docs/components-stability.html) feature. It may be changed at any time.
+> You can use it in scenarios before production. We would appreciate your feedback on [GitHub](https://github.com/JetBrains/compose-multiplatform/issues).
+>
+> [Join the compose-web community](https://slack-chats.kotlinlang.org/c/compose-web).
+
+Compose Multiplatform for web enables sharing your mobile or desktop UIs on the web.
+
+Compose Multiplatform for web is based on [Kotlin/Wasm](https://kotl.in/wasm), the newest target for Kotlin Multiplatform projects.
+This enables running your code in the browser, leveraging WebAssembly's advantages like high and consistent application performance.
+
+Follow the instructions in the sections below to try out this application built with Compose Multiplatform for web and Kotlin/Wasm.
+
+## Set up the environment
+
+Before starting, ensure you have the necessary IDE and browser setup to run the application.
+
+### IDE
+
+We recommend using [IntelliJ IDEA 2023.1 or later](https://www.jetbrains.com/idea/) to work with the project.
+It supports Kotlin/Wasm out of the box.
+
+### Browser (for Kotlin/Wasm target)
 
-Check out the repo, navigate to the project folder, and use the following commands:
+To run applications built with Kotlin/Wasm in a browser, you need a browser supporting the [Wasm Garbage Collection (GC) feature](https://github.com/WebAssembly/gc):
 
-### Run Web version via Gradle
+**Chrome and Chromium-based**
+
+* **For version 119 or later:**
+
+  Works by default.
+
+**Firefox**
+
+* **For version 120 or later:**
+
+  Works by default.
+
+**Safari/WebKit**
+
+Wasm GC support is currently under
+[active development](https://bugs.webkit.org/show_bug.cgi?id=247394).
+
+> **Note:**
+> For more information about the browser versions, see the [Troubleshooting documentation](https://kotl.in/wasm_help/).
+
+## Build and run
 
-`./gradlew :composeApp:wasmJsRun`
+To build and run the application:
 
-### Run Desktop version via Gradle
+1. In IntelliJ IDEA, open the repository.
+2. Run the application by typing one of the following Gradle commands in the terminal:
 
-`./gradlew :composeApp:run`
+* **Web version:**
 
-## Setup Environment
+  `./gradlew :composeApp:wasmJsRun`
+  <br>&nbsp;<br>
 
-To run applications built with Kotlin/Wasm in a browser, you need a browser supporting [wasm garbage collection feature](https://github.com/WebAssembly/gc):
+  Once the application starts, open the following URL in your browser:
 
-- For **Chrome** and **Chromium-based** browsers (Edge, Brave etc.), it **should just work** since version 119.
-- For **Firefox** 120 it **should just work**.
-- For **Firefox** 119:
-  1. Open `about:config` in the browser.
-  2. Enable **javascript.options.wasm_gc**.
-  3. Refresh the page.
+  `http://localhost:8080`
 
-For more information see https://kotl.in/wasm_help/.
+  > **Note:**
+  > The port number can vary. If the port 8080 is unavailable, you can find the corresponding port number printed in the console
+  > after building the application.
+<br>&nbsp;<br>
 
-## IDE
+* **Desktop version:**
 
-We recommend using [IntelliJ IDEA 2023.1 or newer](https://www.jetbrains.com/idea/) to work with the project.
+  `./gradlew :composeApp:run`
 
-# Feedback & Questions
+## Feedback and questions
 
-Give it a try, and share your feedback and ask questions in the Kotlin Slack [#compose-web](https://slack-chats.kotlinlang.org/c/compose-web) channel (if you’re not a member, [apply here](https://kotl.in/slack)) or on Twitter to [@bashorov](https://twitter.com/bashorov).
+Give it a try and share your feedback or questions in our [#compose-web](https://slack-chats.kotlinlang.org/c/compose-web) Slack channel.
+[Get a Slack invite](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up).
+You can also share your comments with [@bashorov](https://twitter.com/bashorov) on X (Twitter).
 
-# Learn more
+## Learn more
 
 * [Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform/#compose-multiplatform)
 * [Kotlin/Wasm](https://kotl.in/wasm/)
-* [Other examples](../../../#examples)
+* [Other Kotlin/Wasm examples](https://github.com/Kotlin/kotlin-wasm-examples/tree/main)

build.gradle.kts

@@ -6,4 +6,4 @@ plugins {
     alias(libs.plugins.androidLibrary) apply false
     alias(libs.plugins.kotlinMultiplatform) apply false
     alias(libs.plugins.pluginCompose) apply false
-}
+}

composeApp/build.gradle.kts

@@ -41,9 +41,8 @@ kotlin {
                 devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                     static = (static ?: mutableListOf()).apply {
                         // Serve sources to debug inside browser
+                        add(project.rootDir.path)
                         add(project.projectDir.path)
-                        add(project.projectDir.path + "/commonMain/")
-                        add(project.projectDir.path + "/wasmJsMain/")
                     }
                 }
             }
@@ -78,7 +77,7 @@ android {
 
     sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
     sourceSets["main"].res.srcDirs("src/androidMain/res")
-    sourceSets["main"].resources.srcDirs("src/commonMain/resources")
+    sourceSets["main"].resources.srcDirs("src/commonMain/composeResources")
 
     defaultConfig {
         applicationId = "org.example.project"
@@ -120,4 +119,4 @@ compose.desktop {
 
 compose.experimental {
     web.application {}
-}
+}

composeApp/src/commonMain/kotlin/App.kt

@@ -38,4 +38,4 @@ fun App() {
             }
         }
     }
-}
+}

gradle/libs.versions.toml

@@ -1,6 +1,6 @@
 [versions]
-compose = "1.5.4"
-compose-plugin = "1.6.10"
+compose = "1.5.8"
+compose-plugin = "1.6.11"
 agp = "8.1.4"
 android-minSdk = "24"
 android-compileSdk = "34"
@@ -12,7 +12,7 @@ androidx-material = "1.10.0"
 androidx-constraintlayout = "2.1.4"
 androidx-test-junit = "1.1.5"
 androidx-espresso-core = "3.5.1"
-kotlin = "2.0.0"
+kotlin = "2.0.10"
 junit = "4.13.2"
 
 [libraries]
@@ -33,8 +33,8 @@ androidx-constraintlayout = { group = "androidx.constraintlayout", name = "const
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
 
 [plugins]
-jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }
 androidApplication = { id = "com.android.application", version.ref = "agp" }
 androidLibrary = { id = "com.android.library", version.ref = "agp" }
 kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
-pluginCompose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+pluginCompose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }