Безопасный для типов DSL для HTML

Библиотека kotlinx.html предоставляет возможность генерировать элементы DOM с использованием статически типизированных билдеров HTML (и, помимо JavaScript, она даже доступна для целевой платформы JVM!). Для использования библиотеки, добавьте соответствующий репозиторий и зависимость в наш файл build.gradle.kts.

repositories {
    // ...
    jcenter()
}

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.7.1")
    // ...
}

После добавления зависимости, вы можете получить доступ к различным интерфейсам для генерации DOM. Для рендеринга заголовка, некоторого текста и ссылки, например, достаточно следующего фрагмента кода:

import kotlinx.browser.*
import kotlinx.html.*
import kotlinx.html.dom.*

fun main() {
    document.body!!.append.div {
        h1 {
            +"Welcome to Kotlin/JS!"
        }
        p {
            +"Fancy joining this year's "
            a("https://kotlinconf.com/") {
                +"KotlinConf"
            }
            +"?"
        }
    }
}

При запуске этого примера в браузере, DOM будет собираться простым способом. Это легко подтвердить, проверив элементы веб-сайта с помощью инструментов разработчика вашего браузера:

Чтобы узнать больше о библиотеке kotlinx.html, ознакомьтесь со страницей GitHub Wiki, где вы найдете больше информации о том, как создавать элементы без их добавления в DOM, привязываться к событиям, таким как onClick, и примеры того, как применять классы CSS к вашим элементам HTML, чтобы назвать лишь некоторые.