https://kotlinlang.org logo
#javascript
Title
# javascript
c

Chrys

02/29/2024, 12:59 PM
what's the KotlinJS equivalent of this
<div data-foo="bar"></div>
in the 1.0.0-pre.623 wrapper bom version. So far attrs in
div { attrs["data-foo"] = bar
} hasn't been recognized
a

Artem Kobzar

02/29/2024, 1:08 PM
@turansky ^^
t

turansky

02/29/2024, 1:13 PM
Looks like you use
kotlin-react-dom-legacy
😞
c

Chrys

02/29/2024, 1:15 PM
Copy code
plugins {
    alias(libs.plugins.kotlin.multiplatform)
    alias(libs.plugins.kotlin.serialization)
}

val kotlinWrappersVersion = "1.0.0-pre.623"

kotlin {
    js(IR) {
        binaries.executable()
        browser {
            commonWebpackConfig (Action {
                cssSupport {
                    enabled.set(true)
                }
            })
            webpackTask (Action {
                mainOutputFileName.set("web.js")
            })
            testTask ( Action {
                useKarma {
                    useChromeHeadless()
                }
            })
        }
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(kotlin("stdlib-js"))
                implementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersVersion"))
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-mui")
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
    }
}
Am I
t

turansky

02/29/2024, 1:17 PM
In
kotlin-react-dom
recommended solution - strict extension on
HTMLAttributes
Copy code
var HTMLAttributes<*>.dataFoo: String?
    get() = asDynamic()["data-foo"]
    set(value) = { 
        asDynamic()["data-foo"] = value
    }
Result:
Copy code
div {
    dataFoo = "bar"
}
c

Chrys

02/29/2024, 1:20 PM
Thanks, its being recognized
t

turansky

02/29/2024, 1:21 PM
Also you can specify target and create extensions for
input
only for example
Copy code
var HTMLAttributes<HTMLInputElement>.dataFoo: String?
    get() = asDynamic()["data-foo"]
    set(value) = { 
        asDynamic()["data-foo"] = value
    }
💯 1
@Artem Kobzar For simple cases it can be helpful to have something like this:
Copy code
external var HTMLAttributes<HTMLInputElement>.dataFoo: String?
😉