Hi everyone, I updated to the latest version of the

kotlin-wrappers

lib and I noticed that the React wrapper has changed quite a bit and now I'm not sure how to do the following:

route("${url}/:id") { props ->
    val idParam = props.match.params.id

    ...
}

Does anyone know how to do this with the new API? @turansky you might know 🙂

Hello, when testing async functions using the karma wrapper, what's a good way to prevent the test from exiting before the async call has finished, since there's no await() and i can't have a suspend test function that can call join()?

@Test
    fun example() {

        var i = 0

        fun asyncTask() = Promise<Boolean> { resolve, _ ->
            window.setTimeout({ i = 1; resolve(true) }, 100)
        }

        asyncTask().then {
            console.log("got result")
        } // there's no await so i can't prevent it continuing

        console.log("i want this to run after we've waited for the promise")

        assertEquals(i, 1)
    }

I am getting: "'node' is not recognized as an internal or external command" error during gradle build. Kotlin 1.6.0-RC. More in thread.

Anyone have a library or snippet they use to convert `suspend fun`s to a cancelable

Promise

?

Random question : Where are the node_modules I import as dependencies installed? I can’t seem to find them anywhere. Trying to get to them to run Dukat on them

I have another question, if someone can point me the right direction that’d be amazing. In a basic kotlin js project, I imported the firebase dependency. Used Dukat to get access to the type references and juggled around to get them to compile. My kotlin compiles like a charm, however it seems to me like the bundle created by webpack does not contain the firebase library in the end. I am facing a

Uncaught ReferenceError: firebase is not defined

error in the frontend. My client is available here : https://github.com/jlengrand/kotlin-samples/blob/main/sample-firebase/src/main/kotlin/Client.kt. You can reproduce by running

./gradlew run

in the sample-firebase module

This message was deleted.

Hey guys, how do I deploy my KotlinJs + React web app? I have a KMP common module in the app. I am new to this, and there are so many tasks,

jsBrowserProductionWebpack, browserProductionWebpack

, just

build

which is mentioned in the official codealong from Jetbrains. Webpack generates tons of files, build just generates an

index.html

and a

.js

file. I am guessing that after the files are generated then it's not an entirely Kotlin related question but any pointers on where to look/ what to read, what the easiest setup to deploy the website would be appreciated. I cannot just use Heroku like in the JetBrains guide as I have some issues with that approach and I just want to get the site up and running.

When exporting a kotlin interface with suspending functions im getting the following error:

Declaration of such kind (suspend function) cant be exported to JS

How do i get around this? im currently marking my interface as external to be able to export it to JS, but how can i export a suspending function? Here is an example:

@JsExport
@JsName("CoolInterface")
external interface CoolInterface {

    @JsName("suspendingFunc")
    suspend fun suspendingFunc(root: String): String?
}

I have some common libs and business logic in Kotlin multiplatform. I implemented the Android Demo app with Jetpack compose and I now need a web counterpart. It would be nice to do it in compose web but it's still in Alpha 😞 so I am kinda scared since I use WebRTC in my app 😁. In your own personal experience/opinion, is easier to use React directly in KT or use the TS definitions and write the UI in TS?

Hey folks, We've got an Android & iOS app using KMM. We're looking to make the common code compile to a library usable in a web project (we don't want to use the kotlin/js wrappers) But there seems very little info on the kotlin docs on how to go about this - are there any links to example projects which achieve something similar? We'd be looking to create a similar workflow to Andorid/iOS where: • All projects exist in the same repo • The common code gets packaged as a JS library • Our web developer can use their own IDE of choice and import the JS library • The web IDE can hook into the shared code build process in a similar way to

packForXcode

Also, is there any interoperability guide similar to kotlin/native? Thanks!

I just started seeing this in my build logs for a Kotlin Multiplatform project that’s compiled to Javascript

> Task :kotlinNpmInstall
warning workspace-aggregator-107d151b-247f-41fa-81dd-c9032d26021f > Project-lib-test > karma > ua-parser-js@0.7.29: this package has been hijacked

It looks like this is due to having karma used for my tests, e.g.

js(IR) {
    browser {
        testTask {
            useKarma {
                useChromeHeadless()
                ...

It sounds like this is a security issue, but what’s the solution to either force the karma or ua-parser-js implicit dependency version?

Hello everyone, trying to pass

--env

args to my webpack, for some reason

--env.value=value

nor

--env value=value

don't work. One approach is from older versions, the other from the newest (For some reason I am using newest possible webpack)

rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.apply{
        webpack.version = "5.59.0"
        webpackCli.version = "4.9.1"
        webpackDevServer.version = "4.3.1"
    }
...
     val envTargetWebpackArgs = listOf("--env envTarget=$envTarget")
     webpackTask { args.plusAssign(envTargetWebpackArgs) }
     runTask { args.plusAssign(envTargetWebpackArgs) }
    }

Any input on this? I should probably downgrade my versions, but it seems that all works properly except this

[webpack-cli] Error: Unknown option '--env envTarget=DEV'
[webpack-cli] Run 'webpack --help' to see available commands and options

@turansky how does one use the popper wrapper? I encountered issue of not knowing how to apply styles properly and how to work with modifiers in this setup. No errors no crashing, my website just becomes blank when I add this code

val referenceElement = useRef<HTMLElement>(null);
    val popperElement = useRef<HTMLElement>(null);
    val arrowElement = useRef<HTMLElement>(null);
    val popper = usePopper(referenceElement.current,
        popperElement.current,
        object : UsePopperOptions<dynamic> {
            override var modifiers: ReadonlyArray<Modifier<dynamic>> = arrayOf(js(
                "{ name : 'arrow', options: {element: arrowElement}}"
            ))
            override var onFirstUpdate: (State) -> Unit = {}
            override var placement: Placement = Placement.auto
            override var strategy: PositioningStrategy = PositioningStrategy.absolute

        })
....
          div("bg-blue-500 text-white font-bold") {
                        attrs.id = "tooltip"
                        attrs.role = "tooltip"
                        attrs.style = popper.styles["popper"].toString()
                        +"Test tooltip"

                        div {
                            attrs.id = "arrow"
                            this.ref = arrowElement
                            attrs.style = popper.styles["arrow"].toString()
                        }
                    }

When will Kotlin/JS have the RTCPeerConnection classes and functions available?

I’m using kotlin js in a node environment (aws lambda), in that env i specify a location where the code is and register a handler which is exported from the js. I currently have this configured with a bit of js boilerplate for each function

const listDiscountController = new ListDiscountsController();

exports.handler = async (event, context, callback) => {
    return listDiscountController.handle(event, context, callback);
};

The way I have this setup is with the constructor defined outside of the handler function to ensure asnyc init operations are only performed on a cold start and not each time the function is called. I’m trying to refactor this to be defined in kotlin (the below code works)

private val listDiscountsController = ListDiscountsController()

@JsExport
fun listDiscountsHandler(event: Any, eventContext: Context, callback: Any): Any {
    return listDiscountsController.handleEvent(event, eventContext, callback)
}

the problem I have is that even if i define the entrypoints in separate kotlin files, if they are in the same gradle project they still get compiled down into the same js file. Is there a way to get kotlin (legacy not IR) gradle plugin to create multiple js files for a project (ideally 1 per kotlin file)?

❗❗Quick reminder❗❗ For the best experience with IR backend, we are running a series of questions regarding per module generation. Please, don’t hesitate, follow the link and answer the questions, which will help us to make it better for you

Hey guys, is there any reason kotlinext is not available in a kotlin multiplatfom JS project? I am trying to use the regular require method inside the share (common) folder and thought I would get this out the box. Is there a library I have to provide in the build gradle to support this?

👋 I'm trying to decide when it's preferable to use an

external interface

vs a regular

interface

- does anyone have any thoughts on this?

Hello everyone. I am currently experiencing problems using

List<T>

on my

@JsExport

models. Not only the fields mangled but it almost unusable in

kotlin/js

. At the moment I am exporting every

List<T>

propery with a field that exposes an array, like so

class Person(val names: List<String> = listOf("John","Doe")) {
  val namesArray get() = names.toTypedArray()
}

but that is now becoming tedious. So, any one experiencing this? I wouldn't want my properties to not be Lists, but would need them to easily be consumable from the JS side when we export our library I have a feeling if the kotlin-stdlib-js could export type bindings for all collections, List, Map, Set e.t.c, It could have been of much help. But I wanna know how others are tackling this. Thoughs?

🚨 We have published an additional follow-up post on how to use yarn.lock with Kotlin/JS, and disable Yarn’s lifecycle scripts. The solutions outlined in the blog post are workarounds, and we’re working on providing direct support for persistent 

yarn.lock

 files and fine-grained control over Yarn’s lifecycle scripts in Kotlin/JS and Kotlin Multiplatform projects directly. https://blog.jetbrains.com/kotlin/2021/10/control-over-npm-dependencies-in-kotlin-js/

JSON.stringify(data class)

adds

_

underscore to parameters. is there a way to avoid that?

data class Test(val email: String)
val test = Test("<mailto:abc@x.com|abc@x.com>")
val json = JSON.stringify(test)

resulting json is

{"_email":"<mailto:abc@x.com|abc@x.com>"}

why is there an

underscore

before

email

?

Hello all, We have a very simple repo for Js/iOS/Android in KMM. For JS we of course use Kotlin/JS and we pull in the following

kotlin-wrapper

modules:

kotlin-react
kotlin-react-dom
kotlin-styled
kotlin-react-router-dom

We had done this originally using

x.x.x-pre.206-kotlin-1.5.10

versions (as this was the code created by latest IntelliJ Community Edition when we created the web project). When trying to update to

x.x.x-pre.261-kotlin-1.5.31

versions we got the following error:

> Task :jsApp:compileDevelopmentExecutableKotlinJs FAILED
e: java.lang.AssertionError: Assertion failed
        at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.JsAstUtilsKt.translateCallArguments(jsAstUtils.kt:341)
        at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.JsAstUtilsKt.translateCall(jsAstUtils.kt:109)
        at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.IrElementToJsExpressionTransformer.visitCall(IrElementToJsExpressionTransformer.kt:219)
        at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.IrElementToJsExpressionTransformer.visitCall(IrElementToJsExpressionTransformer.kt:23)
        at org.jetbrains.kotlin.ir.expressions.impl.IrCallImpl.accept(IrCallImpl.kt:47)
        ... etc

Turns out we needed to change a coding pattern we had used (which seems valid and the IDE does not complain about). It seems the compiler no longer supports using

fun

and then passing the function reference as a prop?

-    fun handleLoginPressed() {
+    val handleLoginPressed = {
         loginController.handleLoginPressed()
     }

@@ -49,7 +49,7 @@
         child(Welcome::class){
             attrs {
                 welcomeString = platform.platform
-                goToLogin = ::handleLoginPressed
+                goToLogin = handleLoginPressed
             }
         }
     }

Lines starting with

-

cause the above error. Lines starting with

+

fix it and the code compiles successfully. So the question we have is: Was this an intended change to the compiler? Or might this be a regression? Happy to share more code/info if it helps. Many thanks!

Hi, Im looking for an example of a js kotlin-js hybrid project to understand how to set up a kotlin-multiplatform project that where there is js code and kotlin-js code that interoperates.

Is there anyway to manually set the version of hardcoded Kotlin/JS dependencies such as Webpack CLI? I'd like to set it to a more recent version to get a fix for a bug I'm experiencing, but I have no idea on how to do that. Adding an explicit dependency on webpack-cli in my build.gradle leads to the following error:

There is already declared version of 'webpack-cli' with version '^4.9.0' which does not intersects with another declared version '4.7.1'

Hi, everyone! We have finally created our own page with samples in the documentation! 🎉 For now it contains samples created with the help of Kotlin/JS engineers, but in the future we are planning to expend it with community driven samples. So don’t hesitate to share your work here (or in direct messages with me here). We are also happy to see any feedback you have regarding our samples, as well as pull requests, issues on GitHub, if you have any concerns or thoughts about the samples.

Hi, is there a way to skip npm/webpack when building kotlin/js? We don't use any npm dependencies and I really liked how kotlin2js used to work, where it generated one js file for each module. Is it still possible to generate javascript output in this way?

Hi everyone, Some days ago I've found this issue with Kotlin/JS https://kotlinlang.slack.com/archives/C0B8L3U69/p1635017816059300 I've used Slack, StackOverflow, reddit and attempted to reach Sebastian Aigner on twitter to see how may I workaround the issue with no luck finding any solutions: Now, where can I file a bug/feature request?

Hi, I have a multiplatform project that uses the noarg gradle plugin which I actually need for the JVM part. However, the JS IR compiler fails when this plugin is in the project configuration. I've opened an issue about this (https://youtrack.jetbrains.com/issue/KT-46793) but seems like it is low priority (open since May). Any workarounds for this problem? Thank you for your help,