diff --git a/docs/images/wasm/wasm-app-run.png b/docs/images/wasm/wasm-app-run.png new file mode 100644 index 00000000000..b75319e364d Binary files /dev/null and b/docs/images/wasm/wasm-app-run.png differ diff --git a/docs/images/wasm/wasm-browser-app.png b/docs/images/wasm/wasm-browser-app.png deleted file mode 100644 index 17df8b48bd0..00000000000 Binary files a/docs/images/wasm/wasm-browser-app.png and /dev/null differ diff --git a/docs/images/wasm/wasm-browser-source-app.png b/docs/images/wasm/wasm-browser-source-app.png deleted file mode 100644 index 2b93d5a53c1..00000000000 Binary files a/docs/images/wasm/wasm-browser-source-app.png and /dev/null differ diff --git a/docs/images/wasm/wasm-browser-updated-app.png b/docs/images/wasm/wasm-browser-updated-app.png deleted file mode 100644 index f435f677c49..00000000000 Binary files a/docs/images/wasm/wasm-browser-updated-app.png and /dev/null differ diff --git a/docs/images/wasm/wasm-build-app.png b/docs/images/wasm/wasm-build-app.png deleted file mode 100644 index 24fe08a9786..00000000000 Binary files a/docs/images/wasm/wasm-build-app.png and /dev/null differ diff --git a/docs/images/wasm/wasm-button-click.png b/docs/images/wasm/wasm-button-click.png new file mode 100644 index 00000000000..70bef035dca Binary files /dev/null and b/docs/images/wasm/wasm-button-click.png differ diff --git a/docs/images/wasm/wasm-enable-in-idea.png b/docs/images/wasm/wasm-enable-in-idea.png deleted file mode 100644 index 7ce4970f592..00000000000 Binary files a/docs/images/wasm/wasm-enable-in-idea.png and /dev/null differ diff --git a/docs/images/wasm/wasm-enable-wizard.png b/docs/images/wasm/wasm-enable-wizard.png deleted file mode 100644 index 055bc95e529..00000000000 Binary files a/docs/images/wasm/wasm-enable-wizard.png and /dev/null differ diff --git a/docs/images/wasm/wasm-gradle-task-window.png b/docs/images/wasm/wasm-gradle-task-window.png new file mode 100644 index 00000000000..6ac8c1df06b Binary files /dev/null and b/docs/images/wasm/wasm-gradle-task-window.png differ diff --git a/docs/images/wasm/wasm-new-project-intellij.png b/docs/images/wasm/wasm-new-project-intellij.png deleted file mode 100644 index e77dd986cb6..00000000000 Binary files a/docs/images/wasm/wasm-new-project-intellij.png and /dev/null differ diff --git a/docs/images/wasm/wasm-updated-app-run.png b/docs/images/wasm/wasm-updated-app-run.png new file mode 100644 index 00000000000..63cae1974a2 Binary files /dev/null and b/docs/images/wasm/wasm-updated-app-run.png differ diff --git a/docs/topics/wasm/wasm-get-started.md b/docs/topics/wasm/wasm-get-started.md index a133e6448eb..ca56c2525e7 100644 --- a/docs/topics/wasm/wasm-get-started.md +++ b/docs/topics/wasm/wasm-get-started.md @@ -4,66 +4,42 @@ > {type="warning"} -This tutorial demonstrates how to use IntelliJ IDEA for creating a Kotlin/Wasm application. +This tutorial demonstrates how to work with a Kotlin/Wasm application in IntelliJ IDEA. -To get started, install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/download/index.html). The tutorial is applicable to both IntelliJ IDEA Community Edition and the Ultimate Edition. +## Before you start -## Enable an experimental Kotlin/Wasm Wizard in IntelliJ IDEA +1. Download and install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/). +2. Clone the [Kotlin/Wasm examples](https://github.com/Kotlin/kotlin-wasm-examples/tree/main) repository + by selecting **File** | **New** | **Project from Version Control** in IntelliJ IDEA. -1. Press double **Shift** to open a search, enter **Registry**. + You can also clone it from the command line: - ![Open registry in IntelliJ IDEA](wasm-enable-in-idea.png){width=700} - -2. Select **Registry** from the list. Registry window opens. -3. Find the `kotlin.wasm.wizard` registry key in the list, and enable it. - - ![Enable Kotlin/Wasm Wizard](wasm-enable-wizard.png){width=700} - -4. Restart IntelliJ IDEA. - -## Create a new Kotlin/Wasm project - -1. In IntelliJ IDEA, select **File** | **New** | **Project**. -2. In the panel on the left, select **Kotlin Multiplatform**. -3. Enter a project name, select **Browser Application with Kotlin/Wasm** as the project template, and click **Next**. - - ![Create a Kotlin/Wasm application](wasm-new-project-intellij.png){width=700} + ```bash + git clone git@github.com:Kotlin/kotlin-wasm-examples.git + ``` - By default, your project will use Gradle with Kotlin DSL as the build system. +## Run the application -4. Accept the default configuration on the next screen and click **Finish**. Your project will open. +1. Open the **Gradle** tool window: **View** | **Tool Windows** | **Gradle**. +2. In the **kotlin-wasm-browser-example** | **Tasks** | **kotlin browser**, select and run the **wasmJsBrowserRun** task. - By default, the wizard creates the necessary `Simple.kt` file. + ![Run the Gradle task](wasm-gradle-task-window.png){width=650} -5. Open the `build.gradle.kts` file and ensure that the Kotlin Multiplatform plugin version is set to `1.8.20`: + Alternatively, you can run the following command in Terminal from the project directory: - ```kotlin - plugins { - kotlin("multiplatform") version "1.8.20" - } + ```bash + ./gradlew wasmJsBrowserRun -t ``` -## Build and run the application - -1. Click **Build Project** next to the run configuration at the top of the screen: - - ![Build the application](wasm-build-app.png){width=600} - -2. Run the application by clicking **Run** next to the run configuration at the top of the screen. - 3. Once the application starts, open the following URL in your browser: - ```text - http://localhost:8080 + ```bash + http://localhost:8080/ ``` - You should see the "JS Client" tab in your browser: - - ![Empty Kotlin/Wasm application in browser](wasm-browser-app.png){width=500} - - If you open a page source, you'll find the name of the JavaScript bundle: + You should see "Hello, World!" text: - ![Source of Kotlin/Wasm application in browser](wasm-browser-source-app.png){width=500} + ![Run the Kotlin/Wasm application](wasm-app-run.png){width=650} ### Troubleshooting @@ -110,28 +86,50 @@ Run the application with the `--js-flags=--experimental-wasm-gc` command line ar ```kotlin import kotlinx.browser.document + import kotlinx.browser.window + import kotlinx.dom.appendElement import kotlinx.dom.appendText fun main() { - println("Hello, ${greet()}") - document.body!!.appendText("Hello, you're using Kotlin/Wasm!") + document.body?.appendText("Hello, ${greet()}!") + + document.body?.appendElement("button") { + this.textContent = "Click me, I'm a button!" + addEventListener("click") { + window.setTimeout({ + window.alert("👋") + null + }, 1000) + } + } } fun greet() = "world" ``` -2. Run the application by clicking **Run** next to the run configuration at the top of the screen. + This code adds a button to the document and an action. -3. Once the application starts, open the following URL in your browser: +2. Run the application again. Once the application starts, open the following URL in your browser: -```text -http://localhost:8080 -``` + ```text + http://localhost:8080 + ``` + + You should see the "Hello, World" text within the button: -You'll see the text "Hello, you're using Kotlin/Wasm!": + ![Run Kotlin/Wasm application in browser](wasm-updated-app-run.png){width=650} -![Kotlin/Wasm application in browser](wasm-browser-updated-app.png){width=500} +3. Click the button to see the alert message: + + ![Alert action](wasm-button-click.png){width=650} + +Now you can work with Kotlin/Wasm code that runs in the browser! ## What's next? -[Explore the Kotlin/Wasm interoperability with JavaScript](wasm-js-interop.md) \ No newline at end of file +Try out other Kotlin/Wasm examples from the `kotlin-wasm-examples` repository: + +* [Compose image viewer](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-imageviewer) +* [Jetsnack application](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-jetsnack) +* [Node.js example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/nodejs-example) +* [WASI example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/wasi-example) \ No newline at end of file