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

Stefan Oltmann

03/18/2024, 8:03 AM
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.
1
r

Robert Jaros

03/18/2024, 9:01 AM
Unfortunately it doesn't work for me. The bundling task for browser target fails with this error:
Copy code
Module not found: Error: Can't resolve 'pako'
I suppose it could work in nodeJS but that is a major limitation.
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.
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.
kim.png
s

Stefan Oltmann

03/18/2024, 9:11 AM
Interesting. My exif viewer in wasmJS also needed the extra addition of pako.
r

Robert Jaros

03/18/2024, 9:13 AM
Even more strange you wasmJS project works in the browser and my js project does not.
s

Stefan Oltmann

03/18/2024, 9:14 AM
Looks like it fails on the kotlinx-io dependency. Something that kotlinx-io supports for WASM, but not for pure JS.
r

Robert Jaros

03/18/2024, 9:16 AM
For js it just requires node modules.
And try/catch won't help - webpack will complain.
s

Stefan Oltmann

03/18/2024, 9:17 AM
And for wasmJS not?
r

Robert Jaros

03/18/2024, 9:18 AM
The same file for wasmJs is a bit different
s

Stefan Oltmann

03/18/2024, 9:18 AM
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
r

Robert Jaros

03/18/2024, 9:19 AM
For wasm I think it loads modules dynamically, so they are not loaded when unused (I'm not 100% sure)
You would have to try removing kotlinx-io dependencies, because most of them are targeting nodejs (similar to okio).
s

Stefan Oltmann

03/18/2024, 9:23 AM
Ok, thank you. I will do that.
r

Robert Jaros

03/18/2024, 9:25 AM
There is a fresh but already closed issue for that problem https://github.com/Kotlin/kotlinx-io/issues/265
👍 1
s

Stefan Oltmann

03/18/2024, 9:26 AM
Ok, so a kotlinx-io release could also help.
r

Robert Jaros

03/18/2024, 9:27 AM
Indeed these errors are skippable. I can close this giant error message and my app seems to work.
You might be interested the library works fine for some jpg files I've tested.
But I have some strange problems with png files.
s

Stefan Oltmann

03/18/2024, 9:32 AM
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
Yes, please tell me about the PNG issues 🙂
r

Robert Jaros

03/18/2024, 9:32 AM
Most of them fail on the first try, but work on the second.
s

Stefan Oltmann

03/18/2024, 9:33 AM
For PNG the pako lib is used when they have zlib compressed TXT chunks.
I can imagine problems around that. Do you have a stack trace for me?
r

Robert Jaros

03/18/2024, 9:34 AM
The first call after the app is loaded ends with this:
Copy code
ImageReadException: Failed to read image.
But the stacktrace is useless because of coroutines
s

Stefan Oltmann

03/18/2024, 9:35 AM
I think I should improve my error handling 😄
Does your PNG work if dropped into https://stefan-oltmann.de/exif-viewer/ ?
r

Robert Jaros

03/18/2024, 9:38 AM
The stacktrace without coroutines
Copy code
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
There are no errors with your viewer.
s

Stefan Oltmann

03/18/2024, 9:41 AM
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.
r

Robert Jaros

03/18/2024, 9:44 AM
I think this will be the wrapped exception:
Copy code
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
Looks plausible... I think I try that
r

Robert Jaros

03/18/2024, 9:51 AM
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.
s

Stefan Oltmann

03/18/2024, 9:52 AM
It must be the case, because there are no errors.
r

Robert Jaros

03/18/2024, 9:52 AM
Probably horrible thing for interop 😉
s

Stefan Oltmann

03/18/2024, 9:53 AM
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 😉
r

Robert Jaros

03/18/2024, 9:54 AM
No problem :)
🙂 1
s

Stefan Oltmann

03/18/2024, 4:12 PM
@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? 🙂
r

Robert Jaros

03/18/2024, 5:05 PM
PNG files work ok now
🙂 1
Unfortunately all other errors are still there
pako dependency is still missing and needs to be added manually
and webpack still complains about node modules
I've checked the issue is only visible in the development mode. The production bundle works fine without any console warnings.
👍 1
Probably the unused code is removed by DCE and everything works fine.
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).
👍 1
s

Stefan Oltmann

03/18/2024, 7:22 PM
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.
Kim v0.16.2 should yield no more errors now. 🙂
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.
r

Robert Jaros

03/19/2024, 1:09 PM
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.
👍 1
But then the tests would be run and they are not working on js/wasm
s

Stefan Oltmann

03/19/2024, 1:10 PM
I guess tho, but this fails locally for me, yes.
This is why I build stefan-oltmann.de/exif-viewer - to have a way to actually test the wasmJS implementation