Hi there! Is there a thorough documentation somewhere on how to use Kotlin MPP with a Javascript bro...

# javascript

[addamsson]

Hi there! Is there a thorough documentation somewhere on how to use Kotlin MPP with a Javascript browser target? I've been struggling for hours to get it working but no luck so far. I have a simple function:

fun main() {
    document.addEventListener("DOMContentLoaded", object : EventListener {
        override fun handleEvent(event: Event) {
            println("Foobar")
        }
    })
}

and the corresponding Gradle setup:

plugins {
    kotlinMultiplatform
}

kotlin {

    js {
        browser()
    }
}

but I can't see "Foobar" printed and if I just copy the generated code into my browser's console it says Error loading module 'mymodule'. Its dependency 'kotlin' was not found . Can someone point me to the docs so I can figure out how to get this working (and also solve a bunch of other issues like how to rename my module and how to run it in dev mode)?

[addamsson]

After debugging it a bit: I created a KotlinJS client + KotlinJVM server sample project in IDEA and I can see that this part is what does the magic:

jvmJar {
    dependsOn(jsBrowserWebpack)
    from(new File(jsBrowserWebpack.entry.name, jsBrowserWebpack.outputPath))
}

[addamsson]

but I can't get this to work with the Kotlin build dsl

[addamsson]

when I tried this:

[addamsson]

tasks {
    named<Jar>("jvmJar") {
        dependsOn(withType(KotlinWebpack::class.java))
    }
}

It created the distributions folder but got stuck at running my code in the browser during the build (why???)

[Ilya Goncharov [JB]]

This guide https://kotlinlang.org/docs/reference/js-project-setup.html
You can run task browserRun -t and it will open browser with js application
If you run build task, in distributions folder you can get your final application bundle

[addamsson]

I checked that but it is of no help

[addamsson]

if i run gradle clean build my build folder is just deleted and there is no distributions folder

[addamsson]

the docs page you linked doesn't work with MPP

[Ilya Goncharov [JB]]

Do you use parallel build? There is some issues related with gradle, that clean can be run after build
You can try separately run these commands

[addamsson]

i do, wait a moment

[addamsson]

i'm gonna try it

[addamsson]

so do you have docs for kotlin.js (the new one) somewhere?

[addamsson]

I saw the talk on Kotlinconf and I'm eager to jump in 😄

[Ilya Goncharov [JB]]

We are updating docs now, for setup there is guide above, and it is actual
If you use for mpp, you only need to replace plugin on “multiplatform” and “target” word in kotlin extension on “js” word as you did

[addamsson]

ok I ran it without the parallel flag but I still see no distributions folder

[addamsson]

I think it is because of the missing dependsOn I talk about above ☝️

[Ilya Goncharov [JB]]

Hmm, maybe yes, dependsOn can be missed, what version do you use?
You can try 1.3.70-eap-42, and check if it helps

[addamsson]

i think the only thing which is missing is

jvmJar {
    dependsOn(jsBrowserWebpack)
    from(new File(jsBrowserWebpack.entry.name, jsBrowserWebpack.outputPath))
}

[addamsson]

I just don't know how to translate this to kts

[addamsson]

ok now i switched my kts with the code from the sample project which IDEA generates and now I can confirm that this was because of the missing jvmJar block

[addamsson]

and also I needed to use --no-parallel

[addamsson]

is this going to get a fix in the future?

[addamsson]

also can you point me to the relevant docs on how to translate the jvmJar block to kts?

[addamsson]

this whole thing doesn't work at all

[addamsson]

even if I copy out the generated webpack-built js file

[addamsson]

and including it in a html file

[addamsson]

it is not doing anything at all

[addamsson]

where can I get help?

[addamsson]

how am i supposed to use kotlin.js in an mpp environment?

[addamsson]

why there are no docs/tutorials?

[Ilya Goncharov [JB]]

You can show your build script
And generated project worked for you?

[addamsson]

the generated project worked but now with --continuous which was in this talk

https://www.youtube.com/watch?v=L4DRD9eWKXo&feature=emb_title▾

[addamsson]

--continuous is not doing anything and the generated javascript file is 12MB in size not the promised 30KB from the talk

[addamsson]

the problem is that the generated project is single-module

[addamsson]

my project is multi-module so this part doesn't work

[addamsson]

jvmJar {
    dependsOn(jsBrowserWebpack)
    println("entry name: ${jsBrowserWebpack.entry.name} output: ${jsBrowserWebpack.outputPath}")
    from(new File(jsBrowserWebpack.entry.name, jsBrowserWebpack.outputPath))
}

[addamsson]

the jsBrowserWebpack.entry.name doesn't have the same file name as jsBrowserWebpack.outputPath

[addamsson]

one includes the root module the other one does not

[addamsson]

so I had to hardcode the file name into it

[addamsson]

now it works, but I still don't know what is the supposed way of doing this since I can't find any documentation on this think

[addamsson]

and I also can't go into production with a 12MB js file

[addamsson]

I also don't know how to translate this into `kts`:

jvmJar {
    dependsOn(jsBrowserWebpack)
    println("entry name: ${jsBrowserWebpack.entry.name} output: ${jsBrowserWebpack.outputPath}")
    from(new File(jsBrowserWebpack.entry.name, jsBrowserWebpack.outputPath))
}

task run(type: JavaExec, dependsOn: [jvmJar]) {
    group = "application"
    main = "MyServerKt"
    classpath(configurations.jvmRuntimeClasspath, jvmJar)
    args = []
}

[addamsson]

I tried it but it didn't work (see above)

[Ivan Kubyshkin [JetBrains]]

@addamsson Can you please create an issue here http://kotl.in/issue and attach your project?

[Sebastian Aigner]

@addamsson at least regarding your issue with the 12MB JS file; starting with 1.3.70 we have DCE enabled by default. This will bring you down to the kilobyte range 🙂