https://kotlinlang.org logo
Join Slack
Powered by
<https://dev.to/touchlab/different-ways-to-distrib...
# javascript
s
https://dev.to/touchlab/different-ways-to-distribute-and-integrate-kotlinjs-library-1hg3 seems to be outdated. Can anyone tell me what steps I need to take to get a JS file that normal JavaScript users can use out of my Kotlin Multiplatform library? I already tried several things, but nothing had the expected result.
✅ 1
a
It doesn't seem outdated. Right now, there are also a few new experimental modes that can be used to make this integration smoother, but they are still experimental today.
s
Some of the Gradle commands mentioned in the examples do not exist, so I assumed it to be outdated.
jsBrowserDistribution
for example
And the result of jsBrowserProductionLibraryDistribution looks wrong to me... It's only a short JS file, nothing I could load and use in a JavaScript project
👀 1
Ah, webpackTask brings "browserDistribution"
Also I got the hint that the articles mixes up 
executable
and 
library
So I'm looking for a newer/better article or an sample project that creates a JS file out of a KMP lib and uses that in pure JavaScript
Or someone tells me that this isn't actually possible with Kotlin J/S.
s
@Stefan Oltmann I wrote that blog post that you shared originally. Are you still having issues?
This is also a reminder that I should update that blog post with Kotlin 2.x in mind
s
@shaktiman_droid Thanks for reaching out. Yeah, I don't know how to use the created JS file. It looks wrong to me - see my screenshot above.
s
you want to have browser distribution webpack bundle. That will give you one file. Let me check what command is changed with 2.x. I'll get back to you shortly
s
Yeah, would be great if you could test on my project if your guide still works.
Maybe I have the wrong expectations 🤷‍♂️
s
when you say 
normal JavaScript users
, what do you mean and how are you expecting them to use your library? I'm asking because depending on that, your output would change. Do you want to provide it as a NPM module? Do you want to provide a single JS file that user can for example use in their 
react
app?
s
Yes, a single JS file that can be used like normal libraries in browser. For more background: The project https://github.com/ente-io/ente uses https://github.com/mattiasw/ExifReader right now because they are lacking a proper JavaScript exif library. I think my lib is more powerful. I want to create a JS lib, craft a usage sample and offer them using my lib instead.
s
did you try
Copy code
js {
        browser()
        binaries.executable()
    }
and then calling 
jsBrowserDevelopmentExecutableDistribution
task? That would give a webpack bundle file
then you may follow the example I gave for 
using webpack
on my blog post https://dev.to/touchlab/different-ways-to-distribute-and-integrate-kotlinjs-library-1hg3#webpack-executable
I've html and react app examples there
s
Yes, jsBrowserDevelopmentExecutableDistribution looks better. But "Development" sounds wrong. I guess I want a "release"/"distribution" bundle
But just that looks strange
s
Screenshot 2024-11-22 at 12.43.46 PM.png
production task is available as well
just 
jsBrowserDistribution
would production I think
s
Yes, please execute that and see what it creates...
How should I use that? Why is it so strange?
I'm so confused.
s
it's just js bundled code with minification I think. That's why there is a 
map
file.
Did you check 
how to use
on my blog post? Wouldn't that work for you?
s
But both are soo short, there doesn't seem to be any logic in it
a
@Ilya Goncharov [JB] ^^
s
That might a bug
s
I followed your blog post, but it confused me. 
jsBrowserDistribution
creates the production thing that has no logic in it.
And I believe you mixed up library and executable
s
have you tried any other version of Kotlin? Maybe it's a bug.
s
Could you try https://github.com/ashampoo/kim ? It should be already configured correctly... just unexpected results
Or you might spot what I configured wrongly
have you tried any other version of Kotlin? Maybe it's a bug.
Nope, not yet.
But I don't know what to expect as a result. You gave no sample in your blog post.
s
what about 
jsBrowserProductionWebpack
task?
👀 1
yeah I can try to create a sample project and see what's going on. trying out on your project might take more time as I would need to understand the code/context first
➕ 1
s
Having a working sample using the current version where I can copy from would be great 🙂
👍🏽 1
I don't have a task 
jsBrowserProductionWebpack
, but that may due to my config.
I'll wait for your sample. 🙂
s
JsPlayground.zip
JsPlayground.zip
s
That was quick 😄
s
Run
Copy code
./gradlew :shared:jsBrowserProductionWebpack
./gradlew :shared:jsBrowserDevelopmentExecutableDistribution
these two would create two different folders
go to 
test.html
file and comment/uncomment the code depending on which file you're using
open the 
html
file in browser and check 
console
you should see 
Hello, JS!
printed
both minified and non-minified file works
s
Ah.... I guess I come closer to my issue... I apparently need to mark everything with @JsExport ?
s
oh yes. That's something I have covered in the second blog post of my JS series.
s
Ooops, that's a three part guide.
s
Screenshot 2024-11-22 at 1.21.04 PM.png
s
I found the third part using Google and was assuming everything would be exported 😅
s
🙂
s
Damn. 🤦‍♂️
I wonder why there is absolutely no warning like "Hey, got zero JSExports"
It just exports something useless
s
Maybe because it's mainly domain/business logic in terms of what can be exported and what not.
but yeah a warning in zero case might be helpful
s
Thank you.
s
Glad you're unblocked now
I'l try to update all 3 blog posts with latest version in mind. One of the good things with kotlin 2.x is that now collections API is supported so some pressing issues are resolved now
👍 1
s
Haha, most of the libs API doesn't take the @JsExport due to it's limitations. Looks like I need to write a new API especially for JS that avoids interfaces, Longs and all the other things JS won't support.
I'll take the time and read your 3 blog posts as a whole from start to end. Thanks for writing that stuff up. 🙏
a
I hope that it will be supported (and I hope soon). At least I have drafts of implementing Kotlin interfaces from the TS side and representing Longs as BigInt.
❤️ 2
👍 2
s
yes, it needs some proper thinking and planning to introduce JS side of things in an existing KMP project
Also keep in mind that dependencies would bring in a huge size impact on the bundle size. For example, in one of our project, we couldn't use 
ktor
and 
kotlinx.serialization
due to sizing issues. So we parse manually on JS side and use 
fetch api
instead of 
ktor
just for JS. That also means creating some new classes with interface or actual/expect to allow using ktor on 
mobile side
and no ktor on js side
👀 1
Similarly as you mentioned, the limitations around 
JsExport
would cause you to re-think your public APIs
s
I am pretty satisfied with my API. I guess I need to craft a second one that’s less nice for JS 😄
👍🏽 1
7 Views
Open in Slack
PreviousNext
Powered by