Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace usage js with WasmJs in README.md #257

Merged
merged 1 commit into from Feb 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
59 changes: 42 additions & 17 deletions README.md
Expand Up @@ -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
Expand All @@ -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.

36 changes: 2 additions & 34 deletions build.gradle.kts
Expand Up @@ -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"
Expand Down Expand Up @@ -206,38 +206,6 @@ tasks.register<Task>("generate") {
}
}

tasks.register<Copy>("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 {
Expand Down