Hi all 👋 I am trying to build a very small KotlinJS browser app. I am using

./gradlew browserRun --continuous

to enable hot reload. The problem is, it takes some time to reflect the changes in the browser. Is there any faster way to do that?

Hey folks, Kotlin/JS bindings for PIXI.js are now published on

mavenCentral

and ready to be used ! For now it's a bit tricky to use as I don't added any builder helper and there are a lot of casts issues, but I'll fix these later, all types are updated to Pixi 6.2.2 ^^ To use it, simply add

implementation("io.github.ayfri:PIXI-Kotlin:0.1.1")

Please follow the Github Repository if you want to know where a new release comes out :)

Hi guys, I have this feature request based on my feedback from trying out

1.6.20-M1

for the kotlin team. Please upvote and lets see if we can get it on

1.6.20

it looks like they are currently focusing on

@JsExport

at the moment This is a feature request on how companion objects of classes and interfaces should behave in kotlin/js stricly when marked with

@JsExport

Current Status 1. Marking an interface that has a companion object with 

@JsExport

 fails the build. You can get it to work with 

Suppress("WRONG_EXPORTED_DECLARATION")

 but this leads to incorrect typescript definition generations (static getter on the interface) 2. Marking an external class that has a companion with 

@JsExport

 fails the build even with 

Suppress("WRONG_EXPORTED_DECLARATION")

 . I am assuming this is even why currently 

kotlin.js.Promise

 is not marked as 

@JsExport

Breakdown 1. External interfaces with companion objects do not make any sense, from Kotlin and even Typescript. So 

@JsExport

 on external interfaces should definitely not compile 2. non external interfaces that have a companion object and are marked with 

@JsExport

 should definitely compile. Because they have meaning at least in Kotlin. Especially when used in multiplatform context. As in I can create an interface in common code, have some members in its companion object then decide to export it. Many KMP devs use this pattern 3. external classes (abstract, open, final) with companion objects should definitely be compillable because they have a solid one to one correlation between Kotlin and Typescript Proposal 1. interfaces marked with 

@JsExport

 should work as they are now. Only difference is when it comes to type definitions, everything found inside and including the companion object itself should just be skipped during generation of types. 2. external classes (abstract, open, final) with companion objects should definitely be exportable. I am surprised as to why the compiler currently fails to compile them Metadata Kotlin: 1.6.20-M1 Ticket: https://youtrack.jetbrains.com/issue/KT-51292

Hi, how can I run Unit tests inside with a library that needs to be run into the browser ? I tried adding this

testImplementation(kotlin("test-js"))
testImplementation(kotlin("test-junit"))
testImplementation(kotlin("test-js-runner"))

And just using

@Test

on a method and

assertNotNull

, but when running I'm getting this error

Execution failed for task ':browserTest'.
> Cannot find node module "kotlin-test-js-runner/kotlin-test-karma-runner.js" in "C:\...\IdeaProjects\libs\PIXI-Kotlin\build\js\packages\PIXI-Kotlin-test"

I have a

SuspendWrapper<T>

class and I want to expose a

fun subscribe(onSuccess: (item: T) -> Unit, onThrow: (error: Throwable) -> Unit)

to JS If I mark it with a

@JsExport

, I’m currently getting a

Exported declaration uses non-exportable parameter type: (T) -> Unit

error Is there a way to allow this? I don’t think there’s a way to compile-time enforce that

T

is also

JsExport

-able, but it definitely is in this case… Do I just

@Supress

the warning?

Hi! Do you have any tips to handle Promise cancellation? I've suspend methods in Kotlin code calling Typescript code that I want to be able to cancel, some of this code use

fetch

and so requires AbortController/AbortSignal.

I noticed that if I use

GlobalScope.promise

and in the my Promise I reject with nothing

reject()

this is not considered as an error. I can

reject(42)

or with an explicit error, but when there is nothing, it looks similar to

resolve()

with no params (

getCompletionExceptionOrNull

returns null,

isCompleted

returns true). Is there a way to differentiate both cases? And why not considering

reject()

as failed with an unknown exception from the Kotlin side?

Hi, I posed this in the Feed, but maybe it is better here - would anyone be able to help me build a kotlin wrapper for PouchDb? I created some code using Dukat, but it's a bit messy. Be nice if that could be formalised into a proper wrapper project. Is it correct that once I do that then I can use PouchDb in the common code of a shared Kotlin KMM project?

Shouldn't a try-catch block catch the exception throw by awaiting a

Promise

?

try {
            val p = window.navigator.mediaDevices.asDynamic()
                .getDisplayMedia() as Promise<MediaStream>
            console.log(p)
            p.await()
        } catch (e: Exception) {
            console.error("Everything is fine")
            console.error(e)
        }

❗ Hi, everyone! I’m currently running a series of interviews with Kotlin/Js users. To be specific, I’m looking for users that learned Kotlin :kotlinnew:, and started using it for Web without Kotlin background (if you started from Multiplatform with Web target - suits my purposes as well) . If you are willing to help with my research -> let me know in DM 😒lack: Thank’s in advance every responder!

Hello everyone! 👋 I currently have a React app using typescript and I wanted to integrate a KotlinJS package. I have a KMP module which I build as a npm package using a wrapper module. KMP Core module => KMP shared-js module ( see comments for generated package.json ) When I

yarn add

the root package, it execute correctly. Now I have 2 questions… how can I set the root package.json’s version? Currently it always generate to

unspecified

. And when I try to import one of the exported class, I have this error:

Cannot find module or its corresponding type declarations.

Any tips on what I did wrong or what I could do to make it work? Thanks 🙂

Hi everyone, 👋 I'm just starting in Kotlin and this Slack, so correct me if I'm not following protocol. I'm working on pulling react-ace into a multiplatform project. I have gotten this working in a separate project based on the KotlinConf explorer tutorial, using kotlin-wrappers

0.0.1-pre.264-kotlin-1.5.31

. However, the targeted project is using

17.0.1-pre.148-kotlin-1.4.30

. Bringing the target project's dependencies up to date is the virtuous path to this, but it has thus far proved very difficult. The KotlinConf explorer GitHub has no record of any code referring to previous versions that I could reference either. The following is the import 'plumbing' that works in the newer project:

@file:JsModule("react-ace")
@file:JsNonModule

package ace

import react.*

@JsName("default")
external val aceEditor: ComponentClass<AceEditorProps>

external interface AceEditorProps : Props {
    var ref : MutableRefObject<Nothing>
    var mode: String
    var theme : String
    var annotations : Array<AceAnnotation>
    var markers : Array<AceMarker>
    var defaultValue : String?
    var value : String?
    var setOptions : AceOptions
}

Is there something simple that could be done to have this work with the older version while I try to update all the dependencies?

I remember asking something similar. But how does one run integration tests with kotlin/js? To precise, I need to run my tests after a docker container has started. How?

I have an existing KMP project, with web (using kotlin-react-wrappers), iOS and Android targets. I want to add another target that is a normal react project using TS as a module which would consume my “shared” module. Is there some sort of guide for this particular use case? Couldn’t find anything in the docs, only using Kotlin for the frontend as well 🤔

Ran into something interesting today:

fun negate(value: Any?) = when (value) {
   is Int -> {
      println(value::class.simpleName)
      -value
   }
   is Double -> -value
   else -> Double.NaN
}

Calling

negate(-5.6)

returns

-5

. It hits the

is Int

path! And the best part is, it prints "Double"

Is there something that’s like… the opposite of

@JsExport

? Like a

@JsHide

? If I have a class in a KMP project that has a

public suspend fun

that’s intentionally public for non-JS platforms. That class also has several other valid-for-export methods (including a callback-based API for said

suspend fun

), but because of that single coroutine, I can’t currently mark the class as

@JsExport

I’d love to be able to tell the compiler to export everything except that pesky

suspend fun

Is my only option right now to suppress the warning? It looks like the compiler just drops a comment into the generated

.d.ts

file, but it would be nice to tell it that I don’t want to export that method at all

@Big Chungus Has there been any changes in the npm publish plugin that would lead to publication errors?? for some reasons my CI has started throwing authentication errors. Is this something to do with npm publish plugin or npm itself? We do publish to a private vedaccio npm registry

Hi everyone, I'm having trouble getting an npm javascript module to work with kotlin/js. In my build.gradle.kts

implementation(npm("jwt-decode","3.1.2"))

In my kotlin code:

@JsModule("jwt-decode")
@JsNonModule
external fun jwt_decode(token: String): dynamic

And what I see in the console output in my browser dev tools:

GoogleAuthComponent.kt?e0b6:35 Uncaught TypeError: $module$jwt_decode is not a function

Here is the documentation of how the js library should work in vanilla javascript:

import jwt_decode from "jwt-decode";

var token = "eyJ0eXAiO.../// jwt token";
var decoded = jwt_decode(token);

Am I missing some step? I can see the jwt-decode libary got pulled into my build node_modules directory. But it doesn't appear to be packaged up with my projects js file, and it doesn't appear to get pulled down via any other network requests from my page. Do I need to add a script tag to pull the js file down myself? And if so, is there some path at which all the node modules are available? Is there any more in-depth documentation than this? https://kotlinlang.org/docs/using-packages-from-npm.html

During my research for some open source projects using the IR compiler I stumbled upon the kotlin-full-stack-application-demo and noticed that the project diverges from the IR compiler migration guide in some points: Example from Post.kt view: • Booleans are not nullable in

PostState

although the migration guide lists this as a migration step • Initialization of the

PostState

is done by assigning an

object

derived from

PostState

to the

state

in the

init

block, but IntelliJ shows a warning that this

object

should be an

external interface

to tell the compiler that this is no Kotlin object as described in the migration guide Are there other open source JetBrains projects (or just other projects in general) that already use the IR compiler to get some insights on how this more restrictive design is handled in these projects?

somehow in our project kotlinx-serialization-json resolves to its jvm variant dependecies task spits out this snippet:

jsCompileClasspath - Compile classpath for compilation 'main' (target js (js)).
+--- org.jetbrains.kotlin:kotlin-stdlib:1.6.10
|    \--- org.jetbrains:annotations:13.0
+--- org.jetbrains.kotlinx:kotlinx-serialization-json:{require 1.3.2; reject _} -> 1.3.2
|    \--- org.jetbrains.kotlinx:kotlinx-serialization-json-jvm:1.3.2

anyone ran into this or got a idea how to figure out whats causing it ?

Hello! I have created a simple interface in Kotlin that I want to export to typescript.

@JsExport
interface IAddress {
  var id: String
}

What is exported in the

.d.ts

file is this:

interface IAddress {
        id: string;
        readonly __doNotUseIt: __doNotImplementIt;
    }

There is the

__doNotUseIt

property that is added. How can I have this not added to the typed definition file. I’m using Kotlin 1.6.20-M1 Thanks! 🙂

Is there any reason that the

kotlin.js.Promise

class isn’t exported as a real JS

Promise

? Feels pretty important and I haven’t seen much info about that

@Big Chungus hey there, thanks for the response on Github. Here is my repository. The issue is, as described, that the code in main() is executed twice which is weird. Here is the link to repo and the code is on develop branch https://github.com/LukasAnda/Transkribe

So it looks like Kotlin/JS IR doesn't do DCE when we call

binaries.library()

- is this on the horizon?

Hi, Was upgrading muirwik library to

0.10.1

and kotlin multiplatform to

1.6.10

ran into this build issue. Does someone run into something similar?

Could not determine the dependencies of task ':jsPackageJson'.

> Could not resolve all dependencies for configuration ':jsNpm'.

> Could not resolve com.ccfraser.muirwik:muirwik-components:0.10.1.

Required by:

project :

> No matching variant of com.ccfraser.muirwik:muirwik-components:0.10.1 was found. The consumer was configured to find a usage of 'kotlin-runtime' of a library, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js', attribute 'org.jetbrains.kotlin.js.compiler' with value 'ir' but:

I’m new to MUI 5 and the sx prop: How would one go about selecting a pseudo class like hover? I’m using the kotlin-mui wrapper Edit: See issue

Hi, is there a way to un-obfuscate an inner function in Kotlin/JS ? Like I have two a JS library that lets me execute one time per framerate a lambda, with

ticker.add { code }

, but to remove it I have to have the same lambda,

ticker.remove { code }

, but in Kotlin is just doesn't work as a JS function is generated for both but has a different name, so it just doesn't work My code

fun onKeep(callback: (KeyboardEvent) -> Unit) {
	fun test(keyboardEvent: KeyboardEvent) {
		if (enabled) callback(keyboardEvent)
	}
	onPress {
		ticker.add { test(it) } // correctly add the function
	}
	onRelease {
		ticker.remove { test(it) } // can't remove function as JS result is not the same
	}
}

But this very code works if translated to JS and directly run in JS, so it's a Kotlin problem

I seem to not have the option to use

--continuous

or

-t

as a flag when running the kotlin browser through gradle. This makes it quite challenging to get quick feedback loops when changing (especially trivial) code. Has anyone else come across this problem?

Hi all. Did anyone manage to write an

external

declaration for this uuid npm package? I tried

@JsModule("uuid")
@JsName("v4")
external fun uuidv4(): String

but getting

Uncaught TypeError: v4 is not a function

on the console