Is there a clean way to call functions in a kotlinjs generated bundle from the backend (kotlinx.html...

# javascript

[Reuben Firmin]

Is there a clean way to call functions in a kotlinjs generated bundle from the backend (kotlinx.html) in a multiplatform project? I want to avoid creating "raw" blocks and having untyped function calls.

[turansky]

Do you have short example?

[Reuben Firmin]

Sure. On the frontend (kotlinjs, compiled into a bundle):

fun addHelpers() {
        window.asDynamic().clearModals = ::hideBackdrop
    }

    fun hideBackdrop() {
        val maybeBackdrop = document.body!!.lastChild!!
        if (maybeBackdrop is HTMLElement) {
            if (maybeBackdrop.nodeName.lowercase() == "div" && maybeBackdrop.hasAttribute("modal-backdrop")) {
                maybeBackdrop.remove()
            }
        }
    }

Backend (kotlinx.html):

script {
                unsafe {
                    raw("""
                        window.clearModals();
                        """.trimIndent())
                }
            }

[Reuben Firmin]

(this is a fairly trivial example, but imagine e.g. providing data series and options to a chart - it gets really ugly)

[Reuben Firmin]

Any thoughts on this @turansky?

[turansky]

Looks like you want "special interop", which you can implement in different ways.
It looks like possible, but it doesn't look like language responsibility.

[Reuben Firmin]

Hm, don't you think multiplatform should provide glue between different layers? Right now it's not kotlin top to bottom of the app, because you need to "shell out" to javascript, which is untyped

[Reuben Firmin]

I.e. you own the compiler, the IDE, the frontend language, the backend language - so you have the opportunity to create the holy grail of a unified stack. Right now the gap is still very awkward

[turansky]

You can write bridge right now just in Kotlin if you want.

[Reuben Firmin]

What would that look like?

[turansky]

expect/actual
In Java it will generate JS code (string)

[Reuben Firmin]

What does that mean @turansky? I.e. how would I use that?

[turansky]

actual class A {
    fun do()
}
// Java
expected class A {
    fun do() = "<http://window.do|window.do>()"  
}
//JS
expected class A {
    fun do() { your code }
}
fun main() {
    install(A())
}

[turansky]

Works fine for functions with serializable parameters or without parameters.

[Reuben Firmin]

interesting, i will try it