I want to bring WASM support to Ashampoo Kim, but ...

# webassembly

[Stefan Oltmann]

I want to bring WASM support to Ashampoo Kim, but I don't know how I can implement ZLib here:

https://github.com/Ashampoo/kim/blob/wasm/src/wasmMain/kotlin/com/ashampoo/kim/common/ZLib.wasm.kt

I'm sure it's possible using js-interop, but I never did that.
Can someone tell me how I need to do that? Maybe with example code?

[Stefan Oltmann]

I launched Ashampoo Kim v0.8, featuring WASM support; however, its functionality for PNG is restricted because of a lack of zlib implementation.

I've encountered difficulties in implementing it and would welcome any assistance or guidance.

https://github.com/Ashampoo/kim/issues/45

[bashor]

I see a few options:
• implement zlib in pure Kotlin
• use a JS implementation through JS interop.
• use some implementation compiled to wasm through wasm interop

[Stefan Oltmann]

I don't know how to do any of these. 😅

I will try further to wrap my head round JS interop.

[ephemient]

it might be difficult for the time being since I don't think wasmJs interop supports ByteArray or Buffer yet

[Robert Jaros]

You could try using https://github.com/korlibs-archive/kzlib/tree/master/kzlib/common/src/main/kotlin/com/soywiz/kzlib

[Stefan Oltmann]

Looks like a possible route. 🤔

[ephemient]

nodejs has node:zlib built-in, which should be easy to interop with from kotlin/js (especially since some of the types are already in kotlin-wrappers) , but not kotlin/wasmJs yet

[Svyatoslav Kuzmich [JB]]

Would it be possible to use async/suspend functions? JS has those built-in, but for blocking compression calls, as far as I know, you would need something third-party.

[Svyatoslav Kuzmich [JB]]

^ Looking a a bit more through the code, async versions won’t help

[Stefan Oltmann]

Okay, there is this pako.js I like to use in JS-interop, but after reading the documentation I still don't understand what to do how to use it. 🤷‍♂️

https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.js

[ephemient]

https://dev.to/mpetuska/js-in-kotlinjs-c4g

[Stefan Oltmann]

Is this the right direction?

pako.kt

@file:JsModule("pako")

import org.khronos.webgl.Uint8Array

external object Pako {
    fun deflate(data: String): Uint8Array
    fun inflate(data: Uint8Array): String
}

Zlib.wasm.kt:

import Pako
import org.khronos.webgl.Uint8Array
import org.khronos.webgl.get

actual fun compress(input: String): ByteArray {

    val inputData = Pako.deflate(input)

    return ByteArray(inputData.length) { inputData.get(it) }
}

actual fun decompress(byteArray: ByteArray): String {

    val intArray = Uint8Array(byteArray.toTypedArray()) // does not compile

    return Pako.inflate(intArray)
}

[ephemient]

Array<Byte> to Uint8Array and back: https://pl.kotl.in/kabcbU4kT

[Svyatoslav Kuzmich [JB]]

I’m trying this, but I can’t run tests on my machine (Something about Could not resolve com.goncalossilva:resources:0.4.0)

pako.diff

[Svyatoslav Kuzmich [JB]]

I missed the { to: 'string' } inflate option. Now this file works in my local project!

ZLib.wasm.kt

[Stefan Oltmann]

Thanks. I will try it. 🙂

In the meantime I removed com.goncalossilva:resources, because it lacks WASM support.

[Stefan Oltmann]

@Svyatoslav Kuzmich [JB] The test fails for me 👀

file:///Users/sol/IdeaProjects/kim/build/js/packages/kim-wasm-js-test/kotlin/kim-wasm-js-test.uninstantiated.mjs:1286
        const wasmModule = new WebAssembly.Module(wasmBuffer);
                           ^
CompileError: WebAssembly.Module(): invalid value type 0x71 @+383
    at instantiate (file:///Users/sol/IdeaProjects/kim/build/js/packages/kim-wasm-js-test/kotlin/kim-wasm-js-test.uninstantiated.mjs:1286:28)
    at async file:///Users/sol/IdeaProjects/kim/build/js/packages/kim-wasm-js-test/kotlin/kim-wasm-js-test.mjs:3:17
Node.js v18.12.1

Branch:
https://github.com/Ashampoo/kim/tree/wasm_zlib

[Svyatoslav Kuzmich [JB]]

Oh, I forgot that canary node version need to be chosen, like this https://github.com/Kotlin/kotlin-wasm-examples/blob/eabc1d2325cb613b4853563502c28cb0ee11a2ef/nodejs-example/build.gradle.kts#L21-L28

I got 72/162 passed tests with it. It seems that kotlinx.io haven’t supported paths for Wasm node target.

[Stefan Oltmann]

Looks like it. ^^

But the ZLib tests went through, so it works.

Thank you a lot for your help! 🙏

[Stefan Oltmann]

I got 72/162 passed tests with it. It seems that kotlinx.io haven’t supported paths for Wasm node target.

Regarding that I hope I can make use of the knowledge of other people here. 😅
https://kotlinlang.slack.com/archives/C0B8MA7FA/p1702679611819619

[goncalossilva]

I’m working on adding WASM support to kotlinx-resources and I’m bumping into CompileError: WebAssembly.Module(): invalid value type 0x71 @+365. @Svyatoslav Kuzmich [JB] should we still use a canary node, considering 21 is stable? Latest is 21.4.0.

[goncalossilva]

Hm, I can see we should. 🤔

[Stefan Oltmann]

You could try using https://github.com/korlibs-archive/kzlib/tree/master/kzlib/common/src/main/kotlin/com/soywiz/kzlib

Just a quick update:

I attempted to utilize the suggested method, but it appears to be outdated and no longer functional. Unfortunately, despite investing some time today, extracting the new zlib logic from KorGE proved to be quite challenging.

While KorGE boasts several intriguing features such as 7zip compression, it seems designed exclusively for integration within the game engine rather than for general projects. It's disappointing that the developer deprecated the korlibs repositories, presumably opting for a more consolidated approach within a single project. It would have been preferable if he had at least separated all "korlibs" into a distinct artifact from the main engine.

It's regrettable that the extensive work put into KorGE is not readily usable for a broader audience. 🤷‍♂️

[Stefan Oltmann]

Therefore staying with pako.js for wasmJs is my best option right now.