Contents:

• Resources
• Kotlin/JS — FAQ
  • Integrate SASS/CSS files in the Webpack build
  • Custom HTML attributes in the kotlin-react DSL

Resources #

Kotlin-specific:

• Arrow: Functional companion to Kotlin’s Standard Library;
• kotlinx.serialization: Kotlin multiplatform / multi-format serialization;
• Ktor: HTTP client/server library;
• SQLDelight: Generates type-safe Kotlin APIs from SQL;
• kotlinx-gettext: I18N library;

CLI:

• clikt: Multiplatform command line interface parsing for Kotlin;
• kotter: A declarative, Kotlin-idiomatic API for writing dynamic console applications;

UI, Kotlin/JS:

• kotlin-wrappers: wrappers for popular JavaScript libraries;
• kvision: web UI framework for Kotlin, alternative to React;
  • kvision-io (GitHub): source code for a presentation website built in Kotlin, useful sample of a Webpack configuration that integrates Sass and Bulma;
• kobweb: A modern framework for full stack web apps in Kotlin, built upon Compose HTML;
• compose-multiplatform: modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable;

Samples:

• Uncancelable, like in Cats-Effect;
  • Using UncancellableRegion;

Kotlin/JS — FAQ #

Integrate SASS/CSS files in the Webpack build #

Declare a require function:

@JsName("require")
external fun jsRequire(name: String): dynamic

Declare dependencies in build.gradle.kts:

implementation(devNpm("sass", "^1.62.1"))
implementation(devNpm("sass-loader", "^13.2.2"))

For configuring Webpack, create a file webpack.config.d/css.js:

config.module.rules.push({
    test: /\.css$/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {sourceMap: false}
        }
    ]
});

And another file at webpack.config.d/sass.js:

config.module.rules.push({
    test: /\.s[ac]ss$/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {sourceMap: false}
        },
        "sass-loader"
    ]
});

We can also declare external dependencies on CSS frameworks, such as Bulma:

implementation(npm("bulma", "^0.9.4"))

Create src/main/resources/sass/main.scss:

@import '~bulma/bulma';

html {
  background-color: antiquewhite;
}

Then in src/main/kotlin/main.kt:

fun main() {
    jsRequire("./sass/main.scss")
}

Reference: Slack conversation.

Custom HTML attributes in the kotlin-react DSL #

When using the React DSL from kotlin-wrappers:

import react.dom.html.AnchorHTMLAttributes
import react.dom.html.HTMLAttributes

operator fun HTMLAttributes<*>.get(key: String): String? =
    asDynamic()[key]

operator fun HTMLAttributes<*>.set(key: String, value: String?) {
    if (value == null)
        asDynamic().removeAttribute(key)
    else
        asDynamic()[key] = value
}

var AnchorHTMLAttributes<*>.dataTarget: String?
    get() = this["data-target"]
    set(value) { this["data-target"] = value }

//...
import react.dom.html.ReactHTML as html

html.a {
    dataTarget = "siteNavBar"
    //...
}

Reference: kotlin-wrappers#1788.