Hi team, Anyone can help me in terms of importing dependencies from

NPM

in Kotlin/JS gradle?

I tried applying Spotless through Gradle with ktlint on my compose-web Kotlin/JS project, but, Spotless doesn't seem to detect any issues. How do I set this up correctly? Do I need to tell it somehow explicitly about the jsMain and test source sets?

hey everyone, i want to expose my kmm shared module to a react application how can i get started?

@turansky what is the difference between kotlin-web and kotlin-browser and more importantly why are they separate artifacts??

Compared to the KMM case studies available at: https://kotlinlang.org/lp/mobile/case-studies/ , does anyone knows user studies for kotlin/js? We are considering compiling kotlin into javascript, and want to know which companies or products have already applied kotlin/js for online products/services.

Hi, I loaded a project that was in 1.7.10, I changed the Kotlin version to 1.7.20, and now, the editor doesn't load completely, like it I was in Syntax Highlighting mode, but I'm not. There are no build error, no dependency not found, and it's the first time that I'm getting this. I also don't have any notification about an IDE error. What do I do to have my project to load completely ?

I’ve been evaluating Kotlin/JS for usage in the Next.js project, and so far, it seems like an impossible task. Or maybe I’m not familiar with the tooling to bake it right (no experience with Kotlin yet). My current conclusion: Kotlin/JS does too many things that get in the way, like bundling and aggressive DCE. Is there an option to simply compile source files to JS, without bundling, with reasonable or no DCE, source files map 1-to-1 with compiled assets, all exports are preserved, etc. Some kind of library mode where the compiler doesn’t have an opinion on where the result will be used.

Hi. Anyone got any experience using kotlin-react-beautiful-dnd?

Hi, I'm creating typings for a group of dependencies in the namespace

pixi

and I'm facing a problem about dependency management, like

@pixi/display

uses typings from

@pixi/core

, but only typings, alias

import type

in TS, but how should I include the library in my module then ? as I have one gradle module per npm package.

Hi, I'm planning to start a small company-internal project and I'm hesitating between Kotlin/JS with React and Compose for Web. I'm curious about your hints and opinion. I have some experience with Kotlin/JS + React + MUI and I didn't fully like how the MUI wrappers work. I mean, it's getting better over time, but I thought that Compose + Material UI theme would give a more Kotlin-native feeling, without the JS part leaking into the code. On the other hand, React seems a bit more mature?

Hello, my team at Autodesk uses Kotlin Multiplatform to create a shared library that is integrated into iOS, Android, and Web apps. On web, we consume the KMP library into a Typescript-based React app. We’re currently using the JS/Legacy compiler with a hand-written Typescript wrapper file. I’m evaluating moving to the JS/IR compiler and the biggest roadblock is the lack of support for using

@JsExport

on export declarations that use

List<>

. For example, we have many data classes like this:

data class Line(val points = List<Point>)
data class Point(val x: Double, val y: Double)

It’s not possible to use

@JsExport

in this case. There seems to be no good workaround for this. Switching to

Array

causes problems for iOS because

List

gets exposed as an

NSArray

and

Array

does not, and besides it would require us to implement

hashCode()

manually for the data class. We could add an extension method to the

jsMain

source set to access the list as a JS Array, but we’d need to suppress the compiler warnings and it seems like extension methods aren’t supported well with JS/IR either. I’m wondering, would it be too difficult to add

@JsExport

to

List

and related collection methods in the standard library? It would be fine if

points

in the above example is exposed to Javascript as a

List

class transpiled from Kotlin as long as it had some basic interface available from the JS side (

size

,

get

and

toArray()

or

toJsArray()

would be fine). Just wondering if this is on the roadmap, or if it is something that could be done as an external contribution (perhaps by us)? Any other ideas of how to workaround this problem if not?

hhaving the same problem! where did you place the index.html file

Hello. Was wondering, if there is a kotlin scripting runtime that compiles into js?

Hello again, I'm curious if there's a distribution of the compiler that only has the necessary tools to compile only to JS?

Hi, what would be the way to import a library when the TS typings only use

import type

(which is a type of import that doesn't require declaring the dependency imported in

package.json

) ?

I'm writing a test that takes longer than 15 seconds to execute and I'm getting this error:

Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.

Here is my

runTest { ... }

function:

import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.CoroutineStart
import kotlinx.coroutines.MainScope
import kotlinx.coroutines.promise

val testScope = MainScope()
val testCoroutineContext = testScope.coroutineContext

actual fun runTest(
    block: suspend (scope: CoroutineScope) -> Unit
): dynamic = testScope.promise(
    start = CoroutineStart.UNDISPATCHED,
    context = testCoroutineContext,
) {
    block(this)
}

And a simple test to verify:

class SimpleTest {
    @Test fun testShortDelay() = runTest { delay(10_000) } // passes
    @Test fun testLongDelay() = runTest { delay(15_001) } // fails (I want it to pass)
}

Does anybody know what I should change in

runTest

to get

testLongDelay

and

testShortDelay

to both pass? I've tried a number of things and nothing seems to work.

Still having issues, but I have simplified the example:

@Test
 fun testLongDelay() = kotlinx.coroutines.test.runTest(dispatchTimeoutMs = 16000) {
    withContext(Dispatchers.Default) {
        withTimeout(16000) {
            delay(15001)
        }
    }
}

This results in the following error:

Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
	at <global>.listOnTimeout(node:internal/timers:557)
	at <global>.processTimers(node:internal/timers:500)

I'm doing everything I can think of and I still can't figure out how to have a test that: 1. Bypasses the delay skipping mechanic of runTest 2. Is allowed to run for longer than 15000ms Any and all help is welcome.

Has anyone used the MUI date picker via the MUI Wrapper? It seems like a few properties are missing. The below makes something that creates a textbox, that, when clicked, will show the popup and receive selection events.

LocalizationProvider {
    dateAdapter = AdapterDateFns
    MobileDatePicker {
        componentsProps
        asDynamic().onChange = { it: Date ->
            println(it.getTime())
        }

        asDynamic().renderInput = { it: BaseTextFieldProps ->
            TextField.create {
                onClick = it.onClick
                value = it.value
                label = it.label
            }
        }
    }
}

Kotlin MUI showcase only has an inline calendar: https://karakum-team.github.io/kotlin-mui-showcase/#/pickers I want to use the MUI date pickers as per: https://mui.com/x/react-date-pickers/getting-started/ Any examples or suggestions? Sorry I'm not that familiar with the JS/React side of things. Do I need to make a new wrapper file with the actual properties, or am I missing something?

Follow-on (but distinct) Kotlin React/JS question: it seems like the spread operator is not supported ( https://discuss.kotlinlang.org/t/js-function-not-support-spread-operator/17335/10) . Is there a way to efficiently pass all props from a parent component to a child component? e.g. to avoid having to manually write out all the props here:

asDynamic().renderInput = { it: BaseTextFieldProps ->
            TextField.create {
                onClick = it.onClick
                value = it.value
                label = it.label
            }
        }

hello kotlin javascript fans

i have a quick question, i am curious when ES versions greater than 5 are on the roadmap for support? obviously the JS IR compiler lays the groundwork for this so I understand that it will take time

WorldWind Kotlin 1.1.0 released! Start your KMP map application today with the first open-source multi-platform 3D globe SDK. A bunch of stability fixes implemented. https://github.com/WorldWindEarth/WorldWindKotlin/releases/tag/v1.1.0

Am I missing something or is there no official way to access the Intl object in a typesafe manner? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

Hey Chat! I've hit a wall in this problem that i can't solve elegantly. I have a system with external definitions like this:

external fun getEntity(): Int
external fun getVehicle(): Int

external fun testEntity(e: Int)
external fun testVehicle(e: Int)

All of the integers above are sort of handles that i have no control over. Handles have inheritance, e.g. Vehicle extends Entity. My goal is to have these handles properly typed to have my own extension functions for them. I have tried using typealiases. The problem with this approach:

typealias Entity = Int
typealias Vehicle = Entity

fun Entity.test() {}  // <--
fun Vehicle.test() {} // <-- Both of these are an error because of conflicting overloads

fun Vehicle.getVelocity(): Float = ...

val entity: Entity = ...
entity.getVelocity() // <-- This works, even though it shouldn't. And is also works for every Int which is completely unacceptable

I also tried using value types. Problem: there is no inheritance. You can sort of trick them into having inheritance, but there's another problem:

interface Handle {
    val handle: Int
}

interface IEntity : Handle
interface IVehicle : IEntity

value class Entity(override val handle: Int) : IEntity
value class Vehicle(override val handle: Int) : IVehicle

external fun getEntity(): Entity
external fun getVehicle(): Vehicle

external fun testEntity(e: Entity)
external fun testVehicle(e: Vehicle)

external fun testEntity2(e: IEntity)
external fun testVehicle2(e: IVehicle)

val v = getVehicle()
    
testEntity(v) // Doesn't work! Vehicle doesn't extend from Entity
testEntity2(v) // Works, but IEntity is not value class so under the hood this boxes value of v, which is not acceptable

I could be missing something, but can't figure out a way to solve this. Thoughts?

👋 Hello all! Has anyone used DOMParser to parse an HTML string in KotlinJS/Native? This fails for me in a

commonMain

module when I use as

val parser = DOMParser()

with this error

ReferenceError: DOMParser is not defined

. I've checked the docs and it looks like DOMParser should be part of kotlin-stdlib which should automatically be included in Kotlin Multiplatform projects. What am I missing? Thanks in advance 🙇

@bashor i have some questions about writing an IR compiler plugin which produces JS, is this the right place to ask? 🙂

About invoking JS from Kotlin. Taking the example of String.prototype.charCodeAt(index). Is there a way to invoke directly from Kotlin without

js()

, avoiding the

dynamic

type? For example:

val sentence = "The quick brown fox jumps over the lazy dog"
val index = 4
val charCode = js("sentence.charCodeAt($index)")
// charCode = 113

Am having trouble with the kotlin react-beautiful-dnd wrapper. The artefacts for this in maven seem to be almost completely empty - META-INF directories but no code of any sort. I have raised a ticket, but more generally am wondering why there are so many artefacts uploaded to maven for wrappers. Also, is there any sort of quality control?