what's the KotlinJS equivalent of this `<div ...

# javascript

[Chrys]

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

[Artem Kobzar]

@turansky ^^

[turansky]

Looks like you use kotlin-react-dom-legacy 😞

[Chrys]

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

[turansky]

In kotlin-react-dom recommended solution - strict extension on HTMLAttributes

var HTMLAttributes<*>.dataFoo: String?
    get() = asDynamic()["data-foo"]
    set(value) = { 
        asDynamic()["data-foo"] = value
    }

[turansky]

Result:

div {
    dataFoo = "bar"
}

[Chrys]

Thanks, its being recognized

[turansky]

Also you can specify target and create extensions for input only for example

[turansky]

var HTMLAttributes<HTMLInputElement>.dataFoo: String?
    get() = asDynamic()["data-foo"]
    set(value) = { 
        asDynamic()["data-foo"] = value
    }

[turansky]

@Artem Kobzar For simple cases it can be helpful to have something like this:

external var HTMLAttributes<HTMLInputElement>.dataFoo: String?

😉