From 6c926dda0567d765fe84239e13606e43ff2e3657 Mon Sep 17 00:00:00 2001 From: Leonid Stashevsky Date: Tue, 6 Feb 2024 17:39:00 +0100 Subject: [PATCH] Replace usage js with WasmJs in README.md (#257) --- README.md | 59 ++++++++++++++++++++++++++++++++++-------------- build.gradle.kts | 36 ++--------------------------- 2 files changed, 44 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 4eeb930a..af2e82c6 100644 --- a/README.md +++ b/README.md @@ -6,37 +6,61 @@ # kotlinx.html -A kotlinx.html library provides DSL to build HTML to [Writer](https://docs.oracle.com/javase/8/docs/api/java/io/Writer.html)/[Appendable](https://docs.oracle.com/javase/8/docs/api/java/lang/Appendable.html) or DOM. Available to all Kotlin Multiplatform targets and browser(or other JavaScript engine) for better [Kotlin programming](https://kotlinlang.org) for Web. +The kotlinx.html library provides a DSL +to build HTML +to [Writer](https://docs.oracle.com/javase/8/docs/api/java/io/Writer.html)/[Appendable](https://docs.oracle.com/javase/8/docs/api/java/lang/Appendable.html) +or DOM. +Available to all Kotlin Multiplatform targets and browsers (or other WasmJS or JavaScript engines) +for better [Kotlin programming](https://kotlinlang.org) for Web. # Get started -See [Getting started](https://github.com/kotlin/kotlinx.html/wiki/Getting-started) page for details how to include the library. +See [Getting started](https://github.com/kotlin/kotlinx.html/wiki/Getting-started) page for details how to include the +library. # DOM -You can build DOM tree with JVM and JS naturally -See example for JavaScript-targeted Kotlin +You can build a DOM tree with JVM, JS, and WASM. +The following example shows how to build the DOM for WasmJs-targeted Kotlin: ```kotlin -window.setInterval({ - val myDiv = document.create.div("panel") { - p { - +"Here is " - a("https://kotlinlang.org") { +"official Kotlin site" } - } - } - - document.getElementById("container")!!.appendChild(myDiv) +import kotlinx.browser.document +import kotlinx.browser.window +import kotlinx.html.a +import kotlinx.html.div +import kotlinx.html.dom.append +import kotlinx.html.dom.create +import kotlinx.html.p - document.getElementById("container")!!.append { +fun main() { + val body = document.body ?: error("No body") + body.append { div { - +"added it" + p { + +"Here is " + a("https://kotlinlang.org") { +"official Kotlin site" } + } } } -}, 1000L) + + val timeP = document.create.p { + +"Time: 0" + } + + body.append(timeP) + + var time = 0 + window.setInterval({ + time++ + timeP.textContent = "Time: $time" + + return@setInterval null + }, 1000) +} ``` # Stream + You can build HTML directly to Writer (JVM) or Appendable (Multiplatform) ```kotlin @@ -56,6 +80,7 @@ System.out.appendHTML().html { See [wiki](https://github.com/kotlin/kotlinx.html/wiki) pages -# Building +# Building + See [development](https://github.com/kotlin/kotlinx.html/wiki/Development) page for details. diff --git a/build.gradle.kts b/build.gradle.kts index 78c2fd7c..a4ed9bf1 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -4,8 +4,8 @@ import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl /** - * This build script supports following parameters: - * -PversionTag - works together with "branch-build" profile and overrides "-SNAPSHOT" suffix of the version. + * This build script supports the following parameters: + * -PversionTag - works together with "branch-build" profile and overrides "-SNAPSHOT" suffix of the version. */ plugins { kotlin("multiplatform") version "1.9.22" @@ -206,38 +206,6 @@ tasks.register("generate") { } } -tasks.register("jsPackagePrepare") { - dependsOn("jsLegacyMainClasses") - tasks["assemble"].dependsOn(this) - - group = "build" - description = "Assembles NPM package (result is placed into 'build/tmp/jsPackage')." - - val baseTargetDir = "$buildDir/tmp/jsPackage" - - from("README-JS.md") - from("$buildDir/js/packages/${project.name}/kotlin") - into(baseTargetDir) - - rename("README-JS.md", "README.md") - - doLast { - var npmVersion = version as String - if (npmVersion.endsWith("-SNAPSHOT")) { - npmVersion = npmVersion.replace("-SNAPSHOT", "-${System.currentTimeMillis()}") - } - - val organization = when { - project.hasProperty("branch-build") -> "kotlinx-branch-build" - project.hasProperty("master-build") -> "kotlinx-master-build" - else -> null - } - - File(baseTargetDir, "package.json").writeText(packageJson(npmVersion, organization)) - file("$baseTargetDir/kotlinx-html-js").renameTo(File("$buildDir/js-module/kotlinx-html-js")) - } -} - publishing { publications { configureEach {