when i make an interface to represent an options o...

# javascript

[Reuben Firmin]

when i make an interface to represent an options object for a library, how do i keep the property names stable? the compiler is shortening them. (details in thread)

[Reuben Firmin]

I'm mapping sortablejs like this:

@file:JsModule("sortablejs")
@file:JsNonModule
package ah.libs

import org.w3c.dom.Element

@JsName("default")
external object Sortable {

    fun create(el: Element, options: SortableOptions)

    interface SortableOptions {
        val group: String
        val animation: Int
        val forceFallback: Boolean
        val dragClass: String
        val ghostClass: String
        val easing: String
    }
}

[Reuben Firmin]

in the script that I'm exporting for the backend to use, I then call this function:

@OptIn(ExperimentalJsExport::class)
@JsExport
class MyCode {

    // ...

    fun makeSortable(columnId: String, group: String, dragClass: String, ghostClass: String) {
        val element = document.getElementById(columnId)
        if (element == null) {
            throw Exception("Couldn't find element $columnId")
        } else {
            val myOptions = object: Sortable.SortableOptions {
                override val group = group
                override val animation = 100
                override val forceFallback = true
                override val dragClass = dragClass
                override val ghostClass = ghostClass
                override val easing = "cubic-bezier(0, 0.55, 0.45, 1)"
            }
            console.log(myOptions)
            Sortable.create(element, myOptions)
            console.log("Made element $columnId sortable")
        }
    }
}

[Reuben Firmin]

when I log "myOptions" here, they're messed up

[hfhbd]

Did you try JsExport?

[Reuben Firmin]

on the interface itself?

[hfhbd]

Yes

[Reuben Firmin]

(trying)

[Reuben Firmin]

nope, same issue.

[Reuben Firmin]

this is with it extracted as:

@OptIn(ExperimentalJsExport::class)
@JsExport
interface SortableOptions {
    val group: String
    val animation: Int
    val forceFallback: Boolean
    val dragClass: String
    val ghostClass: String
    val easing: String
}

[Reuben Firmin]

from the backend, I'm calling my function by creating a script tag (this is a kotlinx.html project)

fun FlowContent.makeSortable(columnId: String, group: String, dragClass: String, ghostClass: String) {
        script {
            unsafe {
                raw("""
                    window.bundle.makeSortable("$columnId", "$group", "$dragClass", "$ghostClass");
                """.trimIndent())
            }
        }
    }

which results in:

<script>window.bundle.makeSortable("kanban_0", "deals_board", "dragClass", "ghostClass");</script>

[Reuben Firmin]

changing to data class and annotating with JsName worked:

data class SortableOptions(
    @JsName("group")
    val group: String,
    @JsName("animation")
    val animation: Int,
    @JsName("forceFallback")
    val forceFallback: Boolean,
    @JsName("dragClass")
    val dragClass: String,
    @JsName("ghostClass")
    val ghostClass: String,
    @JsName("easing")
    val easing: String)

[Reuben Firmin]

when the kotlin team's online though, can you let me know what the best practice is here? why doesn't interface work (even if it has JsName annotations)?

[turansky]

What about such declaration?

external interface SortableOptions {
    var group: String
    var animation: Int
    var forceFallback: Boolean
    var dragClass: String
    var ghostClass: String
    var easing: String
}

and such initialization

val options: SortableOptions = jso {
    this.group = group
    animation = 100
    forceFallback = true
    this.dragClass = dragClass
    this.ghostClass = ghostClass
    this.easing = "cubic-bezier(0, 0.55, 0.45, 1)"
}

?

[Reuben Firmin]

hmm, do you mean jso? my IDE can't find that. and as "js" it gives an error

[turansky]

jso

[turansky]

Example

[Reuben Firmin]

hm. IDE is definitely not happy. that's in the main kotlin-js project?
import js.core.jso fails on "js"

[turansky]

https://github.com/JetBrains/kotlin-wrappers#using-in-your-projects

[turansky]

dependencies {
    // platform declaration
    implementation("org.jetbrains.kotlin-wrappers:kotlin-js")
}

[Reuben Firmin]

great! that works, as does your earlier suggestion. thanks!

i didn't know about the kotlin-wrappers - are there class docs for them somewhere? i'd like to explore -browser, -styled, -web a bit further. source only for now?

[turansky]

kotlin-browser , kotlin-web - latest Browser declarations.
Most classes and members has MDN links.

[turansky]

Screenshot 2023-12-07 at 12.18.00.png

[Reuben Firmin]

gotcha, thanks

[turansky]

To exclude default DOM API wrappers you can use this flag

[Reuben Firmin]

got it. is the idea to merge the wrappers into the mainline codebase at some point?

[turansky]

We have more regular releases (3 releases yesterday for example).
It's fine to be library :)

[Reuben Firmin]

Fair enough. Deprecate the stuff in main, maybe? It's not well documented and not obvious that they exist. Would be great to have better docs around them