Hello! Is there a way to introduce a JavaScript so...

# javascript

[gregorbg]

Hello! Is there a way to introduce a JavaScript source set in my Kotlin/JS Gradle project that Kotlin can "see"?
For example, in Kotlin/JVM if you have a folder src/main/kotlin you can simply add src/main/java and the Kotlin code will understand the Java class FooBar defined in src/main/java/FooBar.java. I understand that JS is different because of the type system (or lack thereof), but there is support for NPM packages (which are written in pure JS for the most part) as well as the external modifier which leads me to believe some feature like this must exist in the Kotlin/JS world. It would be awesome if I can gradually migrate my project that way, similar to Kotlin/JVM. Thanks 😄

[Robert Jaros]

There is an experimental tool dukat, which can automatically generate Kotlin declarations based on TypeScript definitions. But it's still immature, and works fine only for very simple npm libraries.

[gregorbg]

Alright, but that's if you want dedicated Kotlin bindings for a given piece of code. What if you are ready to accept weak typing and you just want to directly call underlying JS code?

[gregorbg]

Take the sample at https://kotlinlang.org/docs/reference/js-project-setup.html#npm-dependencies. It says that you can add npm dependencies in your Gradle build and then (quote!) "use its API in your code" through the external modifier. This means that internally, Gradle resolves and downloads the dependency to some folder where Kotlin can "see" (sorry I'm really lacking a better word to explain what I mean here) that JS code after transpiling to JS. I want to do the same with my project code - think of it as adding a dependency without going through NPM.

[gregorbg]

In the Java world I would use the term "add the dependency to the classpath", although I'm fully aware that JS doesn't work that way.

[diesieben07]

Kotlin/JS right now is unfortunately nowhere near the interop capabilities of Kotlin/JVM. And until the Kotlin compiler can read .js and .ts files like it can read .class and .java files... this won't happen.

[diesieben07]

And I honestly have a hard time understanding the route the team is taking in this regard (developing an outside tool - dukat - to generate declaration files). This would never happen in the Java world, imagine you'd have to write declaration files (or have them generate for you) for your Java libraries before using them in Kotlin.
Kotlin would never have taken off.

[Robert Jaros]

@gregorbg When you add npm dependency to your project, Gradle (by using webpack) will make that JS code from NPM available to your JS code (transpilled from Kotlin). And if you are ready to accept weak typing you can just use this code with dynamic typing. You don't have to write external declarations at all. But of course it's not perfect solution, because we always would like to have static typing in Kotlin.

[gregorbg]

@Robert Jaros Thanks, now the only thing I need to wrap my head around is that "Gradle will make that JS code from NPM available to your JS code". What if I have my own code in the project directory, where do I need to place it / link it / attach it so that it "is available" in the same fashion as the NPM deps through Gradle?

[Robert Jaros]

Kotlin/JS gradle plugin compiles your Kotlin code to JS, and creates a webpack bundle (big *.js file) with your code and any npm code declared as dependencies. You just use this bundle (e.g. by including it in a html page).

[gregorbg]

Then I guess the right question to ask is how to configure the webpack bundle to include my own JS code in addition to the Kotlin/JS compiler output.

[Robert Jaros]

I have no idea. But it's surely possible. You can use all webpack configuration options by creating configuration *.js files in webpack.config.d directory.