Can someone with a working Kotlin/JS project pleas...

# javascript

[Stefan Oltmann]

Can someone with a working Kotlin/JS project please test if https://github.com/ashampoo/kim v0.16 JS works?

I added the target in the latest release (for completeness), but I have no idea how to actually confirm that it's working properly.

Calling Kim.readMetadata(bytes).toString() should be enough to verify.

[Robert Jaros]

Unfortunately it doesn't work for me. The bundling task for browser target fails with this error:

Module not found: Error: Can't resolve 'pako'

[Robert Jaros]

I suppose it could work in nodeJS but that is a major limitation.

[Robert Jaros]

I think there is something wrong with dependencies, because "pako" is available for browser in npm repo. But it's not even downloaded to node_modules.

[Robert Jaros]

When I added implementation(npm("pako","*")) manually to my project it does build without errors. But still doesn't work. It fails on typical nodejs modules, not available in the browser.

[Robert Jaros]

kim.png

[Stefan Oltmann]

Interesting. My exif viewer in wasmJS also needed the extra addition of pako.

[Robert Jaros]

Even more strange you wasmJS project works in the browser and my js project does not.

[Stefan Oltmann]

Looks like it fails on the kotlinx-io dependency. Something that kotlinx-io supports for WASM, but not for pure JS.

[Robert Jaros]

I think this is a problematic part in kotlinx-io.
https://github.com/Kotlin/kotlinx-io/blob/master/core/js/src/node/nodeModulesJs.kt

[Robert Jaros]

For js it just requires node modules.

[Robert Jaros]

And try/catch won't help - webpack will complain.

[Stefan Oltmann]

And for wasmJS not?

[Robert Jaros]

The same file for wasmJs is a bit different

[Robert Jaros]

https://github.com/Kotlin/kotlinx-io/blob/master/core/wasmJs/src/node/nodeModulesWasmJs.kt

[Stefan Oltmann]

I assume this file in the commonMain set is problematic:
https://github.com/Ashampoo/kim/blob/main/src/commonMain/kotlin/com/ashampoo/kim/common/KotlinIoExtensions.kt

I could move it so that it's not available for JS

[Robert Jaros]

For wasm I think it loads modules dynamically, so they are not loaded when unused (I'm not 100% sure)

[Robert Jaros]

You would have to try removing kotlinx-io dependencies, because most of them are targeting nodejs (similar to okio).

[Stefan Oltmann]

Ok, thank you. I will do that.

[Robert Jaros]

There is a fresh but already closed issue for that problem
https://github.com/Kotlin/kotlinx-io/issues/265

[Stefan Oltmann]

Ok, so a kotlinx-io release could also help.

[Robert Jaros]

Indeed these errors are skippable. I can close this giant error message and my app seems to work.

[Robert Jaros]

You might be interested the library works fine for some jpg files I've tested.

[Robert Jaros]

But I have some strange problems with png files.

[Stefan Oltmann]

Thank you! 🙏🙂

I requested a kotlinx-io v0.3.2 release including that fix.
I will update to that dependency in Kim v0.16.1 and then announce it in #feed

[Stefan Oltmann]

Yes, please tell me about the PNG issues 🙂

[Robert Jaros]

Most of them fail on the first try, but work on the second.

[Stefan Oltmann]

For PNG the pako lib is used when they have zlib compressed TXT chunks.

[Stefan Oltmann]

I can imagine problems around that. Do you have a stack trace for me?

[Robert Jaros]

The first call after the app is loaded ends with this:

ImageReadException: Failed to read image.

[Robert Jaros]

But the stacktrace is useless because of coroutines

[Stefan Oltmann]

I think I should improve my error handling 😄

[Stefan Oltmann]

Does your PNG work if dropped into https://stefan-oltmann.de/exif-viewer/ ?

[Robert Jaros]

The stacktrace without coroutines

Uncaught 
Object { message: "Failed to read image.", cause: SyntaxError, name: "ImageReadException", stack: "captureStack@webpack-internal:///./kotlin/kotlin-kotlin-stdlib.js:4189:25\nImageReadException@webpack-internal:///./kotlin/kotlin_com_ashampoo_kim.js:1531:17\n@webpack-internal:///./kotlin/kotlin_com_ashampoo_kim.js:723:17\n@webpack-internal:///./kotlin/kotlin_com_ashampoo_kim.js:654:18\nApp$start$lambda$lambda$lambda_0/<@webpack-internal:///./kotlin/template.js:224:46\nButton$onClick$lambda$lambda/<@webpack-internal:///./kotlin/kvision.js:12450:15\ninvokeHandler@webpack-internal:///../../node_modules/snabbdom/build/modules/eventlisteners.js:8:17\nhandleEvent@webpack-internal:///../../node_modules/snabbdom/build/modules/eventlisteners.js:22:22\nhandler@webpack-internal:///../../node_modules/snabbdom/build/modules/eventlisteners.js:27:20\nEventListener.handleEvent*updateEventListeners@webpack-internal:///../../node_modules/snabbdom/build/modules/eventlisteners.js:70:21\ncreateElm@webpack-internal:///../../node_modules/snabbdom/build/init.js:139:30\naddVnodes@webpack-internal:///../../node_modules/snabbdom/build/init.js:181:45\nupdateChildren@webpack-internal:///../../node_modules/snabbdom/build/init.js:318:22\npatchVnode@webpack-internal:///../../node_modules/snabbdom/build/init.js:344:35\npatch@webpack-internal:///../../node_modules/snabbdom/build/init.js:378:23\n@webpack-internal:///./kotlin/kvision.js:556:17\n@webpack-internal:///./kotlin/kvision.js:15188:50\n@webpack-internal:///./kotlin/kvision.js:11044:26\n@webpack-internal:///./kotlin/kvision.js:15495:10\n@webpack-internal:///./kotlin/kvision.js:15514:10\nbutton@webpack-internal:///./kotlin/kvision.js:12621:19\nApp$start$lambda/<@webpack-internal:///./kotlin/template.js:239:13\nRoot_init_$Init$@webpack-internal:///./kotlin/kvision.js:14779:11\nRoot_init_$Create$@webpack-internal:///./kotlin/kvision.js:14783:12\nroot@webpack-internal:///./kotlin/kvision.js:15262:12\n@webpack-internal:///./kotlin/template.js:250:9\n@webpack-internal:///./kotlin/kvision.js:434:10\nstartApplication$start@webpack-internal:///./kotlin/kvision.js:481:17\nstartApplication$lambda_0/<@webpack-internal:///./kotlin/kvision.js:497:25\nEventListener.handleEvent*startApplication@webpack-internal:///./kotlin/kvision.js:472:13\nmain@webpack-internal:///./kotlin/template.js:253:21\n@webpack-internal:///./kotlin/template.js:262:3\n@webpack-internal:///./kotlin/template.js:5:35\n@webpack-internal:///./kotlin/template.js:8:2\n./kotlin/template.js@http://localhost:3000/main.bundle.js:1339:1\n__webpack_require__@http://localhost:3000/main.bundle.js:1862:33\n@http://localhost:3000/main.bundle.js:2942:56\n@http://localhost:3000/main.bundle.js:2945:12\nwebpackUniversalModuleDefinition@http://localhost:3000/main.bundle.js:17:22\n@http://localhost:3000/main.bundle.js:18:3\n" }
kotlin_com_ashampoo_kim.js:739
    <anonimowa> kotlin_com_ashampoo_kim.js:739
    <anonimowa> kotlin_com_ashampoo_kim.js:670
    lambda_0 template.js:246
    lambda kvision.js:12469
    invokeHandler eventlisteners.js:4
    handleEvent eventlisteners.js:18
    handler eventlisteners.js:23
    (asynchroniczny: EventListener.handleEvent)
    updateEventListeners eventlisteners.js:66
    createElm init.js:132
    addVnodes init.js:174
    updateChildren init.js:311
    patchVnode init.js:337
    patch init.js:371
    <anonimowa> kvision.js:575
    <anonimowa> kvision.js:15207
    <anonimowa> kvision.js:11063
    <anonimowa> kvision.js:15514
    <anonimowa> kvision.js:15533
    button kvision.js:12640
    lambda template.js:261
    Root_init_$Init$ kvision.js:14798
    Root_init_$Create$ kvision.js:14802
    root kvision.js:15281
    <anonimowa> template.js:272
    <anonimowa> kvision.js:453
    startApplication$start kvision.js:500
    lambda_0 kvision.js:516
    (asynchroniczny: EventListener.handleEvent)
    startApplication kvision.js:491
    main template.js:275
    <anonimowa> template.js:284
    <anonimowa> template.js:3
    <anonimowa> template.js:30
    js main.bundle.js:1339
    __webpack_require__ main.bundle.js:1862
    <anonimowa> main.bundle.js:2942
    <anonimowa> main.bundle.js:2945
    webpackUniversalModuleDefinition main.bundle.js:17
    <anonimowa> main.bundle.js:18

[Robert Jaros]

There are no errors with your viewer.

[Stefan Oltmann]

The real exception is wrapped into the ImageReadException

For Swift/iOS I needed to have a single type of Exception declared in @Throws or else it may crash the whole app.

The next version I will include more details in the message of the wrapping exception.

[Robert Jaros]

I think this will be the wrapped exception:

SyntaxError: invalid class property name in regular expression
    Regex kotlin-kotlin-stdlib.js:12041
    Regex_init_$Init$_0 kotlin-kotlin-stdlib.js:11815
    Regex_init_$Create$_0 kotlin-kotlin-stdlib.js:11819
    PngImageParser kotlin_com_ashampoo_kim.js:7318
    PngImageParser_getInstance kotlin_com_ashampoo_kim.js:7459
    <anonymous> kotlin_com_ashampoo_kim.js:2350
    <anonymous> kotlin_com_ashampoo_kim.js:718
    <anonymous> kotlin_com_ashampoo_kim.js:670

[Stefan Oltmann]

Thanks. That's interesting.

I suspect this to be the problem:

https://github.com/Ashampoo/kim/blob/e48ed631a8815790c1c8ebb3e66a13a6c1e0cff9/src/[…]commonMain/kotlin/com/ashampoo/kim/format/png/PngImageParser.kt

[Stefan Oltmann]

Looks plausible... I think I try that

[Robert Jaros]

Kotlin/JS uses JS RegExp for regular expressions - we know that. But as you app works fine with wasmJs can we assume wasmJS uses its own regexp implementation? That's interesting.

[Stefan Oltmann]

It must be the case, because there are no errors.

[Robert Jaros]

Probably horrible thing for interop 😉

[Stefan Oltmann]

Great, kotlinx-io 0.3.2 is on it's way.
I will fix that regex in Kim and release a v0.16.1 as soon as possible.

Thank you a lot for testing my lib. 🙂

I will ask you again for v0.16.1 😉

[Robert Jaros]

No problem :)

[Stefan Oltmann]

@Robert Jaros On Maven Central v0.16.1 is available now.

Could you please test your PNG again and tell me if all errors and warnings are gone? 🙂

[Robert Jaros]

PNG files work ok now

[Robert Jaros]

Unfortunately all other errors are still there

[Robert Jaros]

pako dependency is still missing and needs to be added manually

[Robert Jaros]

and webpack still complains about node modules

[Robert Jaros]

I've checked the issue is only visible in the development mode. The production bundle works fine without any console warnings.

[Robert Jaros]

Probably the unused code is removed by DCE and everything works fine.

[Robert Jaros]

I could probably live with that if I ever need to use your lib, because I usually disable the webpack overlay error messages in my projects anyway (this mechanism effectively transforms warnings into errors and I don't like it). But in my opinion that is something kotlinx-io team should take care off (and I know it will be hard to fix because Kotlin/JS has only one JS target for both the browser and node).

[Stefan Oltmann]

Thank you for looking into that. I guess the fix on kotlinx-io side was not enough and I need to remove kotlinx-io support from the JS target completely.

[Stefan Oltmann]

Kim v0.16.2 should yield no more errors now. 🙂

[Stefan Oltmann]

The kotlinx-io team is working on a solution for the problem, but for now it seems easier to just not have kotlinx-io extensions in Kim for JS & WASM. This is completely optional.

[Robert Jaros]

I think adding browser() or node() to js / wasmJs targets will allow correct package.json generation in the klib artifact and will fix the missing pako dependency error.

[Robert Jaros]

But then the tests would be run and they are not working on js/wasm

[Stefan Oltmann]

I guess tho, but this fails locally for me, yes.

[Stefan Oltmann]

This is why I build stefan-oltmann.de/exif-viewer - to have a way to actually test the wasmJS implementation