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

hfhbd

03/25/2024, 5:55 PM
How does the new distribution dsl work? I set a custom folder but the folder is empty. I also don't see any related task like
createDistribution
or similar:
Copy code
js {
  binaries.executable()
  useEsModules()
  nodejs {
    distribution {
      distributionName.set("myFile.mjs")
      outputDirectory.set(layout.projectDirectory.dir("myDist"))
    }
  }
}
e

Edoardo Luppi

03/25/2024, 6:06 PM
@hfhbd which task are you invoking? You should work with
jsNodeProductionLibraryDistribution
, for example
Ah wait, you're creating an executable
Executables don't output to a distribution IIRC, at least I've never seen them do it.
h

hfhbd

03/25/2024, 6:09 PM
Okay, but how do I get an (fat) executable? Maybe I still don't understand the JS ecosystem 😄 I just want to create an executable GitHub JS action with all npm dependencies too.
e

Edoardo Luppi

03/25/2024, 6:12 PM
executable()
is correct. Running the typical Gradle
build
will invoke
jsProductionExecutableCompileSync
, which will output:
You can use with the
whole-program
granularity to get a single JS file I suppose.
h

hfhbd

03/25/2024, 6:16 PM
Yes, but
whole-program
should only merge all
.mjs
(from productionExecutable) into one big
.mjs
, right? It still does not merge npm dependencies?
At least with or without
whole-program
I still get
import com_github_actions_github_y1dwzy from '@actions/github';
resulting into a runtime error due unresolved files.
e

Edoardo Luppi

03/25/2024, 6:18 PM
But will
@actions/github
be available where you deploy the JS code?
I mean, I'm not familiar with GH Actions, but where do they run? In a Node.js environment right?
If it's a yes, than that dependency should be available at runtime
h

hfhbd

03/25/2024, 6:24 PM
yes, in node.js, but after looking at the doc again, its not available 🤦🏻‍♂️https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action#commit-tag-and-push-your-action-to-github They workaround is checking in the node_modules folder or using https://github.com/vercel/ncc.
Okay, how do I integrate ncc with Kotlin/JS?
r

Robert Jaros

03/25/2024, 6:26 PM
Why don't you use webpack task? It can create a bundle for node as well.
e

Edoardo Luppi

03/25/2024, 6:26 PM
@Robert Jaros are we sure the Webpack task is registered for Node.js? IIRC it's only for browser
r

Robert Jaros

03/25/2024, 6:27 PM
It's not. But you can use the browser version or register your own.
e

Edoardo Luppi

03/25/2024, 6:27 PM
Register a custom Webpack task? Like what you did a while ago?
r

Robert Jaros

03/25/2024, 6:28 PM
Yes.
All you need is this line in webpack.config.d to make webpack create nodejs bundle: https://github.com/rjaros/kilua/blob/main/examples/ssr-ktor/webpack.config.ssr.d/webpack.js#L39
e

Edoardo Luppi

03/25/2024, 6:33 PM
That should work, yeah. If you find you're bundling too much, use Webpack
externals
to remove modules.
You might also find this useful https://github.com/rnett/kotlin-js-action
h

hfhbd

03/25/2024, 8:18 PM
Thank you, web pack works, except ES modules support.
And do you really say Ryan already did implement my idea? 😐
e

Edoardo Luppi

03/25/2024, 8:19 PM
What do you mean with ES support?
Well the linked repo hasn't been updated for 2 years, so there is that!
h

hfhbd

03/25/2024, 8:21 PM
Yeah, and Ryan does not use ES modules. But it works 😄
e

Edoardo Luppi

03/25/2024, 8:23 PM
Have you looked it up on Google? It seems unrelated to Kotlin. You might have to thinker with Webpack
h

hfhbd

03/25/2024, 8:23 PM
What do you think I did in the last 2h? 😄
😂 1
Yes, but every change/usage of web pack is one step forward and two back 😄
e

Edoardo Luppi

03/25/2024, 8:25 PM
Difficult to say what's going wrong. I'd first check the outputted ESM code locally, to verify everything looks good. I'd then run Webpack manually instead of using your custom task, and verify if the same error reproduces
Did you verify package.json contains type = module?
Or do you deploy without package.json since it's an executable?
h

hfhbd

03/25/2024, 9:38 PM
Yes it contains
type = module
which also causes problems with the generated webpack config file because this config isn't ES compatible. And I can't hack it, this needs some changes in KGP. Will create an issue tomorrow.
e

Edoardo Luppi

03/25/2024, 10:02 PM
Can't you place a JS file under
webpack.config.d
to modify the config object?
h

hfhbd

03/26/2024, 9:19 AM
No KGP creates the merged js file automatically and uses it in the same task, so you can't intercept it. (Ideally, there should be two tasks but anyway). https://youtrack.jetbrains.com/issue/KT-66934/KGP-JS-Merged-Webpack-webpack.config.js-support-ES-module-remove-require-in-KotlinWebpackConfig
e

Edoardo Luppi

03/26/2024, 9:32 AM
I'll follow the issue then, thanks!
2 Views