feat: Kotlin/Wasm with WASI tutorial (#4513)

* update: Kotlin/Wasm with Wasi tutorial

This PR adds a tutorial about running and testing an app built with Kotlin/Wasm and WASI. Besides, it includes a brief explanation of WASI in the Kotlin/Wasm overview.

* update: restructured the overview according to skuzmich review and other minor changes.

* chore: added link to YT issue about WASI support

* replaced "sub-platforms" with "target environments"

* Zalim review

* Daniel review

* chore: replaced project for toolchain and other word replacement.

* chore: updated wizard image

docs/kr.tree

@@ -240,6 +240,7 @@
 		</toc-element>
 		<toc-element toc-title="WebAssembly (Wasm)">
 			<toc-element topic="wasm-get-started.md"/>
+			<toc-element topic="wasm-wasi.md"/>
 			<toc-element topic="wasm-debugging.md"/>
 			<toc-element topic="wasm-js-interop.md"/>
 			<toc-element topic="wasm-troubleshooting.md"/>

docs/topics/wasm/wasm-debugging.md

@@ -21,7 +21,7 @@ Create a project using the Kotlin Multiplatform wizard:
 3. Select the **Web** option. Make sure that no other options are selected.
 4. Click the **Download** button and unpack the resulting archive.
 
-![Kotlin Multiplatform wizard](wasm-compose-wizard.png){width=600}
+![Kotlin Multiplatform wizard](wasm-compose-web-wizard.png){width=600}
 
 ## Open the project in IntelliJ IDEA
 

docs/topics/wasm/wasm-get-started.md

@@ -1,6 +1,6 @@
-[//]: # (title: Get started with Kotlin/Wasm in IntelliJ IDEA)
+[//]: # (title: Get started with Kotlin/Wasm and Compose Multiplatform)
 
-> Kotlin/Wasm is [Alpha](components-stability.md). It may be changed at any time.
+> Kotlin/Wasm is in [Alpha](components-stability.md). It may be changed at any time.
 > 
 > [Join the Kotlin/Wasm community.](https://slack-chats.kotlinlang.org/c/webassembly)
 >
@@ -23,7 +23,7 @@ Create a project using the Kotlin Multiplatform wizard:
 3. Select the **Web** option. Make sure that no other options are selected.
 4. Click the **Download** button and unpack the resulting archive.
 
-![Kotlin Multiplatform wizard](wasm-compose-wizard.png){width=600}
+![Kotlin Multiplatform wizard](wasm-compose-web-wizard.png){width=600}
 
 ## Open the project in IntelliJ IDEA
 
@@ -34,6 +34,8 @@ Create a project using the Kotlin Multiplatform wizard:
 ## Run the application
 
 1. In IntelliJ IDEA, open the **Gradle** tool window by selecting **View** | **Tool Windows** | **Gradle**.
+
+   You can find the Gradle tasks in the Gradle tool window once the project loads.
 
    > You need at least Java 11 as your Gradle JVM for the tasks to load successfully.
    >
@@ -106,10 +108,9 @@ Join the Kotlin/Wasm community in Kotlin Slack:
 
 <a href="https://slack-chats.kotlinlang.org/c/webassembly"><img src="join-slack-channel.svg" width="700" alt="Join the Kotlin/Wasm community" style="block"/></a>
 
-Try the Kotlin/Wasm examples from the `kotlin-wasm-examples` repository:
+Try more Kotlin/Wasm examples:
 
-* [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)
-* [Compose example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-example)
+* [Compose image viewer](https://github.com/JetBrains/compose-multiplatform/tree/master/examples/imageviewer)
+* [Jetsnack application](https://github.com/JetBrains/compose-multiplatform/tree/master/examples/jetsnack)
+* [Node.js example](https://github.com/Kotlin/kotlin-wasm-nodejs-template)
+* [WASI example](https://github.com/Kotlin/kotlin-wasm-wasi-template)

docs/topics/wasm/wasm-overview.md

@@ -1,19 +1,38 @@
-[//]: # (title: Kotlin Wasm)
+[//]: # (title: Kotlin/Wasm)
 
-> Kotlin Wasm is [Alpha](components-stability.md).
+> Kotlin/Wasm is in [Alpha](components-stability.md).
 > It may be changed at any time. You can use it in scenarios before production. We would appreciate your feedback in [YouTrack](https://youtrack.jetbrains.com/issue/KT-56492).
 >
 > [Join the Kotlin/Wasm community](https://slack-chats.kotlinlang.org/c/webassembly).
 >
 {style="note"}
 
+Kotlin/Wasm has the power to compile your Kotlin code into [WebAssembly (Wasm)](https://webassembly.org/) format. 
+With Kotlin/Wasm, you can create applications that run on
+different environments and devices, which support Wasm and meet Kotlin's requirements.
+
+Wasm is a binary instruction format for a stack-based virtual machine. This
+format is platform-independent because it runs on its own virtual machine. Wasm provides Kotlin and other languages with
+a compilation target. 
+
+You can use Kotlin/Wasm in different target environments, such as browsers, for developing 
+web applications built with [Compose Multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/), or outside the 
+browser in standalone Wasm virtual machines. In the outside-of-browser case,
+[WebAssembly System Interface (WASI)](https://wasi.dev/) provides access to platform APIs, which you can also utilize.
+
+
+## Kotlin/Wasm and Compose Multiplatform
+
 With Kotlin, you have the power to build applications and reuse mobile and desktop user interfaces (UIs) in your web projects through
 Compose Multiplatform and Kotlin/Wasm.
 
 [Compose Multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/) is a declarative framework based on Kotlin
 and [Jetpack Compose](https://developer.android.com/jetpack/compose) that allows you to implement the UI
-once and share it across all the platforms you target. Specifically for web platforms, Compose Multiplatform uses 
-Kotlin/Wasm as its compilation target.
+once and share it across all the platforms you target. 
+
+For web platforms, Compose Multiplatform uses 
+Kotlin/Wasm as its compilation target. Applications built with Kotlin/Wasm and Compose Multiplatform use a 
+`wasm-js` target and run in browsers.
 
 [Explore our online demo of an application built with Compose Multiplatform and Kotlin/Wasm](https://zal.im/wasm/jetsnack/)
 
@@ -25,21 +44,29 @@ Kotlin/Wasm as its compilation target.
 >
 {style="tip"}
 
-[WebAssembly (Wasm)](https://webassembly.org/) is a binary instruction format for a stack-based virtual machine. This
-format is platform-independent because it runs on its own virtual machine. Wasm provides Kotlin and other languages with 
-a compilation target to run on the web.
-
-Kotlin/Wasm compiles your Kotlin code into Wasm format. Using Kotlin/Wasm, you can create applications that run on 
-different environments and devices, which support Wasm and meet Kotlin's requirements. 
-
-Additionally, you can use the most popular Kotlin libraries in Kotlin/Wasm out of the box. Like other Kotlin and Multiplatform
-projects, you can include dependency declarations in the build script. For more information, 
+Additionally, you can use the most popular Kotlin libraries in Kotlin/Wasm out of the box. Like in other Kotlin and Multiplatform
+projects, you can include dependency declarations in the build script. For more information,
 see [Adding dependencies on multiplatform libraries](multiplatform-add-dependencies.md).
 
 Would you like to try it yourself?
 
 <a href="wasm-get-started.md"><img src="wasm-get-started-button.svg" width="700" alt="Get started with Kotlin/Wasm" style="block"/></a>
 
+## Kotlin/Wasm and WASI
+
+Kotlin/Wasm uses the [WebAssembly System Interface (WASI)](https://wasi.dev/) for server-side applications.
+Applications built with Kotlin/Wasm and WASI use a Wasm-WASI target, allowing you to call the WASI API and run applications 
+outside the browser environment.
+
+Kotlin/Wasm leverages WASI to abstract away platform-specific details, allowing the same Kotlin code to run across diverse 
+platforms. This expands the reach of Kotlin/Wasm beyond web applications without requiring custom handling for each runtime.
+
+WASI provides a secure standard interface for running Kotlin applications compiled to WebAssembly across different environments.
+
+> To see Kotlin/Wasm and WASI in action, check the [Get started with Kotlin/Wasm and WASI tutorial](wasm-wasi.md).
+>
+{style="tip"}
+
 ## Kotlin/Wasm performance
 
 Although Kotlin/Wasm is still in Alpha, Compose Multiplatform running on Kotlin/Wasm already shows encouraging performance 
@@ -75,4 +102,4 @@ allows you to use Kotlin code from JavaScript. For more information, see [Use Ko
 ## Learn more
 
 * Learn more about Kotlin/Wasm in this [YouTube playlist](https://kotl.in/wasm-pl).
-* Explore the [Kotlin/Wasm examples](https://github.com/Kotlin/kotlin-wasm-examples) in our GitHub repository.
+* Explore the [Kotlin/Wasm examples](https://github.com/Kotlin/kotlin-wasm-examples) in our GitHub repository.

docs/topics/wasm/wasm-wasi.md

@@ -0,0 +1,132 @@
+[//]: # (title: Get started with Kotlin/Wasm and WASI)
+
+> Kotlin/Wasm is in [Alpha](components-stability.md). It may be changed at any time.
+>
+> [Join the Kotlin/Wasm community.](https://slack-chats.kotlinlang.org/c/webassembly)
+>
+{style="note"}
+
+This tutorial demonstrates how to run a simple [Kotlin/Wasm](wasm-overview.md) application using the [WebAssembly System Interface (WASI)](https://wasi.dev/) 
+in various WebAssembly virtual machines.
+
+You can find examples of an application running on [Node.js](https://nodejs.org/en), [Deno](https://deno.com/),
+and [WasmEdge](https://wasmedge.org/) virtual machines. The output is a simple application that uses the standard WASI API.
+
+Currently, Kotlin/Wasm supports WASI 0.1, also known as Preview 1.
+[Support for WASI 0.2 is planned for future releases](https://youtrack.jetbrains.com/issue/KT-64568).
+
+> The Kotlin/Wasm toolchain provides Node.js tasks (`wasmWasiNode*`) out of the box.
+> Other task variants in the project, such as those utilizing Deno or WasmEdge, are included as custom tasks.
+>
+{style="tip"}
+
+## Before you start
+
+1. Download and install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/).
+
+2. Clone the [Kotlin/Wasm WASI template repository](https://github.com/Kotlin/kotlin-wasm-wasi-template) by selecting 
+   **File | New | Project from Version Control** in IntelliJ IDEA.
+
+   You can also clone it from the command line:
+
+   ```bash
+   git clone [email protected]:Kotlin/kotlin-wasm-wasi-template.git
+   ```
+
+## Run the application
+
+1. Open the **Gradle** tool window by selecting **View** | **Tool Windows** | **Gradle**. 
+
+   In the **Gradle** tool window, you can find the Gradle tasks under **kotlin-wasm-wasi-example** once the project loads.
+
+   > You need at least Java 11 as your Gradle JVM for the tasks to load successfully.
+   >
+   {style="note"}
+
+2. From **kotlin-wasm-wasi-example** | **Tasks** | **kotlin node**, select and run one of the following Gradle tasks:
+
+   * **wasmWasiNodeRun** to run the application in Node.js.
+   * **wasmWasiDenoRun** to run the application in Deno.
+   * **wasmWasiWasmEdgeRun** to run the application in WasmEdge.
+
+     > When using Deno on a Windows platform, ensure `deno.exe` is installed. For more information,
+     > see [Deno's installation documentation](https://docs.deno.com/runtime/manual/getting_started/installation).
+     >
+     {style="tip"}
+
+   ![Kotlin/Wasm and WASI tasks](wasm-wasi-gradle-task.png){width=600}
+
+Alternatively, run one of the following commands 
+in the terminal from the ` kotlin-wasm-wasi-template` root directory:
+
+* To run the application in Node.js:
+
+  ```bash
+  ./gradlew wasmWasiNodeRun
+  ```
+
+* To run the application in Deno:
+
+  ```bash
+  ./gradlew wasmWasiDenoRun
+  ```
+
+* To run the application in WasmEdge:
+
+  ```bash
+  ./gradlew wasmWasiWasmEdgeRun
+  ```
+
+  The terminal displays a message when your application is built successfully:
+
+  ![Kotlin/Wasm and WASI app](wasm-wasi-apps.png){width=600}
+
+## Test the application
+
+You can also test that the Kotlin/Wasm application works correctly across various virtual machines.
+
+In the Gradle tool window, run one of the following Gradle tasks from **kotlin-wasm-wasi-example** | **Tasks** | **verification**:
+
+* **wasmWasiNodeTest** to test the application in Node.js.
+* **wasmWasiDenoTest** to test the application in Deno.
+* **wasmWasiWasmEdgeTest** to test the application in WasmEdge.
+
+![Kotlin/Wasm and WASI test tasks](wasm-wasi-test-task.png){width=600}
+
+Alternatively, run one of the following commands
+in the terminal from the ` kotlin-wasm-wasi-template` root directory:
+
+* To test the application in Node.js:
+
+  ```bash
+  ./gradlew wasmWasiNodeTest
+  ```
+
+* To test the application in Deno:
+
+  ```bash
+  ./gradlew wasmWasiDenoTest
+  ```
+
+* To test the application in WasmEdge:
+
+  ```bash
+  ./gradlew wasmWasiWasmEdgeTest
+  ```
+
+You can see the test results:
+
+![Kotlin/Wasm and WASI test](wasm-wasi-test-result.png){width=600}
+
+## What's next?
+
+Join the Kotlin/Wasm community in Kotlin Slack:
+
+<a href="https://slack-chats.kotlinlang.org/c/webassembly"><img src="join-slack-channel.svg" width="700" alt="Join the Kotlin/Wasm community" style="block"/></a>
+
+Try more Kotlin/Wasm examples:
+
+* [Compose image viewer](https://github.com/JetBrains/compose-multiplatform/tree/master/examples/imageviewer)
+* [Jetsnack application](https://github.com/JetBrains/compose-multiplatform/tree/master/examples/jetsnack)
+* [Node.js example](https://github.com/Kotlin/kotlin-wasm-nodejs-template)
+* [Compose example](https://github.com/Kotlin/kotlin-wasm-compose-template)