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

sunnat629

03/03/2024, 10:09 PM
Hi everyone, I'm new to Kotlin/JS and don't have much experience with JS. Currently, I'm exploring Kotlin Multiplatform (1.9.22) and attempting to work with Kotlin/JS as well. My main goal is to utilize the converted JS file from an existing JS file. If anyone could provide a simple example, that would be fantastic. I've gone through the documentation, but I might have missed something. (Codes have been moved to the thread) Could anyone help me understand where I might have gone wrong or offer any feedback? Also, are there any sample codes I could review? Best regards...
I have a Kotlin class in
shared
module
Copy code
@OptIn(ExperimentalJsExport::class)
@JsExport
class MathOp {
    fun add(a: Int, b: Int): Int = a + b
    fun sub(a: Int, b: Int): Int = a - b
}
build gradle shared module
Copy code
js(IR) {
        moduleName = "shared"
        browser {
            webpackTask {
            }
            testTask {
                useKarma {
                    useSafari()
                    useFirefox()
                    useChrome()
                    useChromeCanary()
                    useChromeHeadless()
                    webpackConfig.cssSupport { enabled.set(true) }
                }
            }
        }
        binaries.executable()
    }
in
jsMain>kotlin>App.js
is working
Copy code
fun main() {
...
val timelineElement = document.getElementById("timeline")
    timelineElement?.textContent = result
...
}
I want to use the converted function in
jsMain>resources>main.js
and execute in
index.html
. But somehow I can connect my
shared.js
?
t

turansky

03/03/2024, 11:48 PM
You can build ES module With ES modules:
Copy code
<script type="module">
    import { MathOp } from './shared.mjs'

    MathOp.add(...)
<script>
👍 1
a

Artem Kobzar

03/04/2024, 9:33 AM
Also, I have a repo with an example of sharing different parts between Kotlin applications (Ktor and Jetpack Compose) and JavaScript. You can jump in between the branches to see different levels of the code-sharing.