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

Reuben Firmin

12/06/2023, 10:00 PM
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)
I'm mapping sortablejs like this:
Copy code
@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
    }
}
in the script that I'm exporting for the backend to use, I then call this function:
Copy code
@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")
        }
    }
}
when I log "myOptions" here, they're messed up
h

hfhbd

12/06/2023, 10:01 PM
Did you try JsExport?
r

Reuben Firmin

12/06/2023, 10:02 PM
on the interface itself?
h

hfhbd

12/06/2023, 10:02 PM
Yes
r

Reuben Firmin

12/06/2023, 10:03 PM
(trying)
nope, same issue.
this is with it extracted as:
Copy code
@OptIn(ExperimentalJsExport::class)
@JsExport
interface SortableOptions {
    val group: String
    val animation: Int
    val forceFallback: Boolean
    val dragClass: String
    val ghostClass: String
    val easing: String
}
from the backend, I'm calling my function by creating a script tag (this is a kotlinx.html project)
Copy code
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:
Copy code
<script>window.bundle.makeSortable("kanban_0", "deals_board", "dragClass", "ghostClass");</script>
changing to data class and annotating with JsName worked:
Copy code
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)
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)?
t

turansky

12/06/2023, 10:40 PM
What about such declaration?
Copy code
external interface SortableOptions {
    var group: String
    var animation: Int
    var forceFallback: Boolean
    var dragClass: String
    var ghostClass: String
    var easing: String
}
and such initialization
Copy code
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)"
}
?
r

Reuben Firmin

12/06/2023, 11:06 PM
hmm, do you mean jso? my IDE can't find that. and as "js" it gives an error
t

turansky

12/06/2023, 11:33 PM
r

Reuben Firmin

12/07/2023, 9:38 AM
hm. IDE is definitely not happy. that's in the main kotlin-js project? import js.core.jso fails on "js"
Copy code
dependencies {
    // platform declaration
    implementation("org.jetbrains.kotlin-wrappers:kotlin-js")
}
r

Reuben Firmin

12/07/2023, 10:11 AM
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?
t

turansky

12/07/2023, 10:16 AM
kotlin-browser
,
kotlin-web
- latest Browser declarations. Most classes and members has MDN links.
Screenshot 2023-12-07 at 12.18.00.png
r

Reuben Firmin

12/07/2023, 10:21 AM
gotcha, thanks
t

turansky

12/07/2023, 11:04 AM
To exclude default DOM API wrappers you can use this flag
r

Reuben Firmin

12/07/2023, 11:16 AM
got it. is the idea to merge the wrappers into the mainline codebase at some point?
t

turansky

12/07/2023, 3:56 PM
We have more regular releases (3 releases yesterday for example). It's fine to be library :)
r

Reuben Firmin

12/09/2023, 12:26 PM
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