You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
4.0 KiB
164 lines
4.0 KiB
2 years ago
|
# Getting started with the Compose HTML library
|
||
4 years ago
|
|
||
|
2 years ago
|
In this tutorial, we will create a simple web UI application using the Compose HTML Library.
|
||
|
4 years ago
|
|
||
|
|
## Prerequisites
|
||
|
|
|
||
|
|
You need to have the following software installed before you begin:
|
||
|
|
* JDK 11 or later
|
||
|
|
* IntelliJ IDEA Community Edition or Ultimate Edition 2020.2 or later (you can use other editors, but for this tutorial we assume you are using IntelliJ IDEA)
|
||
|
|
|
||
|
|
## Creating a new project
|
||
|
|
|
||
|
2 years ago
|
You can create the project by [downloading the template here](https://github.com/JetBrains/compose-multiplatform-html-library-template).
|
||
|
2 years ago
|
|
||
|
|
If you want to create the project manually, perform the following steps:
|
||
|
4 years ago
|
|
||
|
|
#### 1. Create a Kotlin Multiplatform project:
|
||
|
|
- Select `Gradle` on the left menu
|
||
|
|
- Tick `Kotlin DSL build script`
|
||
|
|
- Tick `Kotlin/Multiplatform`
|
||
|
|
|
||
|
3 years ago
|
<img alt="" src="create-mpp.png" height="500" />
|
||
|
4 years ago
|
|
||
|
|
|
||
|
|
#### 2. Update `settings.gradle.kts`:
|
||
|
|
``` kotlin
|
||
|
|
pluginManagement {
|
||
|
|
repositories {
|
||
|
|
gradlePluginPortal()
|
||
|
|
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### 3. Update `build.gradle.kts`:
|
||
4 years ago
|
``` kotlin
|
||
|
4 years ago
|
// Add compose gradle plugin
|
||
|
|
plugins {
|
||
|
2 years ago
|
kotlin("multiplatform") version "1.8.20"
|
||
|
|
id("org.jetbrains.compose") version "1.4.0"
|
||
|
4 years ago
|
}
|
||
|
|
|
||
|
|
// Add maven repositories
|
||
|
|
repositories {
|
||
|
|
mavenCentral()
|
||
|
|
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
|
||
|
3 years ago
|
google()
|
||
|
4 years ago
|
}
|
||
|
|
|
||
|
|
// Enable JS(IR) target and add dependencies
|
||
|
|
kotlin {
|
||
|
|
js(IR) {
|
||
|
|
browser()
|
||
|
|
binaries.executable()
|
||
|
|
}
|
||
|
|
sourceSets {
|
||
|
|
val jsMain by getting {
|
||
|
|
dependencies {
|
||
|
2 years ago
|
implementation(compose.html.core)
|
||
|
4 years ago
|
implementation(compose.runtime)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### 5. Add the following directories to the project:
|
||
|
|
- src/jsMain/kotlin
|
||
|
|
- src/jsMain/resources
|
||
|
|
|
||
|
|
#### 6. Add the `index.html` file to the `resources`:
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Sample</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root"></div>
|
||
|
|
<script src="REPLACE_WITH_YOUR_MODULE_NAME.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
3 years ago
|
#### 7. Add the `Main.kt` file to the `kotlin`:
|
||
|
4 years ago
|
```kotlin
|
||
|
4 years ago
|
import androidx.compose.runtime.mutableStateOf
|
||
|
|
import androidx.compose.runtime.getValue
|
||
|
|
import androidx.compose.runtime.setValue
|
||
|
4 years ago
|
import androidx.compose.runtime.Composable
|
||
|
|
import org.jetbrains.compose.web.attributes.*
|
||
|
|
import org.jetbrains.compose.web.css.*
|
||
|
|
import org.jetbrains.compose.web.dom.*
|
||
|
|
import org.jetbrains.compose.web.renderComposable
|
||
|
4 years ago
|
|
||
|
4 years ago
|
fun main() {
|
||
|
|
var count: Int by mutableStateOf(0)
|
||
|
|
|
||
|
|
renderComposable(rootElementId = "root") {
|
||
3 years ago
|
Div({ style { padding(25.px) } }) {
|
||
|
4 years ago
|
Button(attrs = {
|
||
4 years ago
|
onClick { count -= 1 }
|
||
|
4 years ago
|
}) {
|
||
|
|
Text("-")
|
||
|
|
}
|
||
|
|
|
||
|
3 years ago
|
Span({ style { padding(15.px) } }) {
|
||
|
4 years ago
|
Text("$count")
|
||
|
4 years ago
|
}
|
||
|
|
|
||
|
|
Button(attrs = {
|
||
|
4 years ago
|
onClick { count += 1 }
|
||
|
4 years ago
|
}) {
|
||
|
|
Text("+")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Running the project
|
||
|
|
|
||
|
|
Use the command line to run:
|
||
|
|
|
||
|
|
```shell
|
||
|
|
./gradlew jsBrowserRun
|
||
|
|
```
|
||
|
|
|
||
|
3 years ago
|
Instead of manually compiling and executing a Kotlin/JS project every time you want to see the changes you made, you can use the continuous compilation mode:
|
||
|
|
```shell
|
||
|
|
./gradlew jsBrowserRun --continuous
|
||
|
|
```
|
||
|
|
|
||
|
4 years ago
|
Or run it from the IDE:
|
||
|
|
|
||
|
3 years ago
|
<img alt="" src="run_project.png" height="500" />
|
||
|
4 years ago
|
|
||
|
|
The browser will open `localhost:8080`:
|
||
|
|
|
||
|
3 years ago
|
<img alt="" src="run_result.png" height="500" />
|
||
|
3 years ago
|
|
||
|
|
## Common issues when running the project
|
||
|
|
|
||
|
|
#### [webpack-cli] Unable to load '@webpack-cli/serve' command
|
||
|
|
https://youtrack.jetbrains.com/issue/KT-49124
|
||
|
|
```
|
||
|
|
[webpack-cli] Unable to load '@webpack-cli/serve' command
|
||
|
|
[webpack-cli] TypeError: options.forEach is not a function
|
||
|
|
...
|
||
|
|
```
|
||
|
|
There is a temporary workaround:
|
||
|
|
```
|
||
|
|
In build.gradle.kts:
|
||
|
|
|
||
|
|
// a temporary workaround for a bug in jsRun invocation - see https://youtrack.jetbrains.com/issue/KT-48273
|
||
|
|
afterEvaluate {
|
||
|
|
rootProject.extensions.configure<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension> {
|
||
|
|
versions.webpackDevServer.version = "4.0.0"
|
||
|
|
versions.webpackCli.version = "4.9.0"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|