Hi, can someone help with calling libheif-js from ...

# javascript

[Václav Benes]

Hi, can someone help with calling libheif-js from kotlin wasm/js. This is html/js example: https://codepen.io/catdad/pen/jOJpVJV.

my code

// kotlin
open external class HeifDecoder {
    fun decode(file: JsAny): JsArray<JsAny>
}


@JsName("libheif")
external class Libheif {
    fun _de265_get_version(): Int


    companion object {
        @JsName("HeifDecoder")
        var heifDecoder: HeifDecoder
    }


}

val libheif = Libheif()
    println(libheif)
    println(libheif._de265_get_version())
    println(Libheif.heifDecoder.decode(Blob()))

an Issue is here

// javascript
    
    var HeifDecoder = function() {
            this.decoder = null
        };
        HeifDecoder.prototype.decode = function(buffer) {
            if (this.decoder) {
                Module.heif_context_free(this.decoder)
            }

and i am getting

[Artem Kobzar]

Something like this: https://play.kotlinlang.org/#eyJ2ZXJzaW9uIjoiMi4wLjAiLCJhcmdzIjoiIiwibm9uZU1hcmtlcnMiOn[…]FzcyBVaW50OEFycmF5KCkgOiBKc0FueSIsInBsYXRmb3JtIjoid2FzbSJ9

We know that the approach looks not so nice and we are discussing some ways to make it less verbose

[Václav Benes]

Thx this works.

[Václav Benes]

@Artem Kobzar Additional question what about callbacks?

await new Promise((resolve, reject) => {
image.display(imageData, (displayData) => {
if (!displayData) {
return reject(new Error("HEIF processing error"));
}

resolve();
});
});

is this a proper way?

val context = canvas.getContext("2d") as CanvasRenderingContext2D
    val imageData = context.createImageData(width, height)

    Promise { resolve, reject ->
        image?.display(imageData) {
            println(it)
            // handle error somehow 
            if (it.toString() == "null") {
                return@display reject(ErrorEvent("HEIF processing error"))
            }
            resolve(it)
        }
    }

    context.putImageData(imageData, START_X, START_Y)

or should I wrap it in js(""). :)

[Artem Kobzar]

Yes, it should work and this is an idiomatic way to do it. The right hand rule is to avoid js function call until there is no way to do it without the function.
In the example I've provided, unfortunately there is no way right now to express something like inner class inside an external declaration, but we are discussing to allow the keyword inside external declarations.