kotlinlang #javascript

When targeting Node.js, is a duplicated execution tree a known issue? Otherwise I'm going to open a new one for this too. ~~Edit: it's not only a visual thing, tests are executed two times.~~

Edoardo Luppi

07/03/2023, 8:58 PM

Just dumping another issue here so that I remember what I was talking about. Let's say we have: `commonMain`:

Copy code

public expect fun ZSocket(charset: String): ZSocket

`jsMain`:

Copy code

@JsExport
public actual fun ZSocket(charset: String): ZSocket { ... }

Notice I'm exporting a function with same name as an

interface

. No warnings emitted. Resulting ES JS code: see screenshot. So this breaks at runtime when importing via TS declaration:

Copy code

export declare interface ZSocket {
  ...
export declare function ZSocket(charset: string): ZSocket;

👀 1

Edoardo Luppi

07/04/2023, 10:52 AM

A prerequisites I've been given to use KotlinJS is the ability to debug from an external tool with sourcemaps. In this case I'm trying to configure a VS Code extension launch configuration. In the Kotlin library side I've configured source map generation. build.gradle.kts:

Copy code

tasks.withType<Kotlin2JsCompile>().configureEach {
  kotlinOptions {
    sourceMap = true
    sourceMapEmbedSources = "always"
    sourceMapNamesPolicy = "fully-qualified-names"
  }
}

The generated source map file is as following:

Copy code

{
  "version": 3,
  "sources": [
    "../../../../../../src/commonMain/kotlin/...",
    "../../../../../../src/jsMain/kotlin/...",
    ...
  ],
  "sourcesContent": [ ... ], // here I can see my source code
  "names": [ ... ],
  "mappings": "..."
}

In the VS Code side I've configured the

launch.json

task file as following:

Copy code

{
  "name": "Run Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": [
    "--extensionDevelopmentPath=${workspaceFolder}"
  ],
  "outFiles": [
    "${workspaceFolder}/dist/**/*.js"
  ],
  "preLaunchTask": "${defaultBuildTask}",
  "sourceMaps": true,
  "pauseForSourceMap": true
}

But yet I can't get source maps to work. I still debug and see the compiled JS.

Adam S

07/04/2023, 12:47 PM

is the Atomics namespace object available in Kotlin/JS? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics

Edoardo Luppi

07/04/2023, 8:06 PM

Seems like I've ironed out most of the issues I had with KotlinJS on my POC multiplatform project. Thanks everybody for the help! I still have some usability problems to report on YouTrack tho, will do that asap. One last major gripe I have when targeting CommonJS (thanks Electron 😞), is the namespacing. I've tested developing a VS Code and a Theia extension using the compiled library, and namespacing doesn't result in a good DevEx. Since package names are mostly JVM-oriented, you end up with a lot of wrapped names. See screenshot. As I have a lot of free time (I wish), can I workaround this problem by introduced a compiler plugin? Given issues like https://youtrack.jetbrains.com/issue/KT-53993, is the JS backend usable to rename package fragments? (I think this is what I'd be looking at)

Adam S

07/04/2023, 9:07 PM

I’ve been investigating alternatives to `runBlocking {}`in Kotlin/JS, and I’m wondering something. Correct me if I’m wrong, but the restriction is basically because in JS bridging between blocking/non-blocking requires using

await

, which is only possible inside

async

functions. This is incongruous with JVM and Native, where it’s always possible to block the thread, and no

async function

keyword is required. So, I was thinking. would it be possible for a Kotlin compiler plugin to edit the Kotlin/JS compiler so it generates a

async function

instead of a regular function wherever

runBlocking {}

is used in a Kotlin/JS function?

Edoardo Luppi

07/05/2023, 1:03 PM

In our final evaluation of Kotlin MP/JS, these are the main issues we considered problematic, or impacting DevEx. Might be interesting for others too. I'll report another one but it was considered minor in our case. - https://youtrack.jetbrains.com/issue/KT-59523/ We use CommonJS modules at the moment, luckily. - https://youtrack.jetbrains.com/issue/KTIJ-22593 Workaround is to use Force Step Over. Painful for Java devs. - https://youtrack.jetbrains.com/issue/KT-51389 Workaround is to use unsigned types internally and convert to signed externally. Or use `expect class`/`actual typealias` to support unsigned types in the JS API (more work tho...). - https://youtrack.jetbrains.com/issue/KT-57192 Workaround is to return the

Any?

type, but the API is not explicit anymore. - https://youtrack.jetbrains.com/issue/KT-60140 Fix the naming ourselves, just be more careful at the moment. - https://youtrack.jetbrains.com/issue/KT-60141 Can't do anything about it, but it's only inside IntelliJ IDEA, so we should be safe. - No equivalent of

@JvmStatic

, to avoid dealing with

MyObject.getInstance().MY_CONST

in TypeScript. We'd like

<http://MyObject.MY|MyObject.MY>_CONST

MyObject.myMethod()

. - https://youtrack.jetbrains.com/issue/KT-53993 We want to be able to customize the outputted JS code if necessary (especially if the Kotlin team cannot release a fix in a timeframe that works for us). Should never happen, but better safe than sorry.

👍 2

Seth Madison

07/06/2023, 6:14 AM

I’ve been trying to find ways to cut down on our bundle size and one of the thing that I noticed is that all of the data class

toString()

methods are huge and do not minify or compress well at all. Tree shaking can’t get rid of them because they’re member functions. It would be awesome if there were a compiler flag to disable

toString()

generation for production builds. I realize some code might break, but I think that by-and-large folks use the nice

toString()

methods for debugging and don’t need them in prod bundles. Anybody have any other clever ideas?

Albin Theander

07/06/2023, 11:41 AM

I was just reading about the early access 1.9.0-RC, that "Kotlin/JS: deprecated legacy backend with error,". Does anyone know if that means that the legacy backend is removed and can't be used anymore? Or if it's still possible to use it somehow? Source: https://kotlinlang.org/docs/eap.html#build-details

AndreiBogdan

07/06/2023, 2:10 PM

Hello. I have the following class. I would like to do a @JsExport on it, but unfortunately SingleWrapper from the badoo.reaktive library does not support that. I though I'd wrap this class and/or method and expose something that is compatible, but I was unable to find a reactive programming kotlin library for JS. I am unsure what the best approach for this is. How does one export a Singe or Observable or ... whatever ... to JS ? I'm using binary.library() and nodejs() ... I need to have this method be called from an existing react web app, separate from this project. Any suggestions? 😞

Copy code

class SharedBookService {

    private val bookRepository = BookRepository()

    /**
     * @return an array of book permanent ids
     */
    fun getAssignedBooks(): SingleWrapper<List<String>> {
        return singleFromCoroutine {
            bookRepository.callAssignedBooks()
        }
            .subscribeOn(ioScheduler)
            .observeOn(mainScheduler)
            .onErrorReturn { t ->
                Console.apiError.log("getAssignedBooks :: " + t.message)
                listOf()
            }
            .wrap()
    }
}

Donny

07/06/2023, 3:58 PM

I'm exporting a bunch of classes from a library using @JsExport and friends. For some reason, a private inner class in a completely separate module, that I haven't annotated to be exported in any form, is conflicting "Javascript name generated for this declaration clashes with another declaration". Any thoughts?

Donny

07/06/2023, 11:09 PM

I'm getting errors for this:

Copy code

@JsExport.Ignore
    val Double.const: KslValueFloat1
        get() = KslValueFloat1(this.toFloat())
    @JsExport.Ignore
    val Float.const: KslValueFloat1
        get() = KslValueFloat1(this)
    @JsExport.Ignore
    val Float.const2: KslValueFloat2
        get() = KslValueFloat2(this, this)
    @JsExport.Ignore
    val Float.const3: KslValueFloat3
        get() = KslValueFloat3(this, this, this)
    @JsExport.Ignore
    val Float.const4: KslValueFloat4
        get() = KslValueFloat4(this, this, this, this)

The error is "JavaScript name (<get-const>) generated for this declaration clashes with another declaration: fun Vec4i.`<get-const>`(): KslValueInt4". I've tried to ignore. How can I get past this without changing the code?

Tuna

07/07/2023, 8:22 AM

Hello, I would like to share MonoSketch, an ASCII diagram editor, which is fully rewritten in Kotlin/JS and Compose HTML. You can try at: app.monosketch.io and checkout the code at: https://github.com/tuanchauict/MonoSketch/

K 2

AndreiBogdan

07/07/2023, 10:09 AM

~~Hello.~~ ~~I'm using @JsExport. I need to export an enum, so instead of this enum:~~

Copy code

enum class QuizSearchType {
    WITH_QUIZ,
    WITH_NO_QUIZ
}

~~apparently the way to do it so you can add the annotation @JsExport is this:~~

Copy code

@Suppress("NON_EXPORTABLE_TYPE")
@JsExport
object QuizSearchTypeJs {
    val with_quiz = QuizSearchType.WITH_QUIZ
    val with_no_quiz = QuizSearchType.WITH_NO_QUIZ
}

My question is ... I have a method that i need to @JsExport which receives a list of such enums. I can't use
List<QuizSearchType>
, so I guess I'll need to use
Array<QuizSearchTypeJs>
but ... is that right ?! It's an object class with 2 fields inside it ... they're data type is not
QuizSearchTypeJs
... I'm a bit confused. ~~How should I mark the method's calling parameters so that it will be a list of such "enum" values ?~~

👀 2

Edoardo Luppi

07/07/2023, 10:25 AM

Never exported an enum before, so I've tried in my MP project. This compiles fine from

commonMain

. Weren't enum exports prohibited?

Ivan Cagle (IvanEOD)

07/07/2023, 2:27 PM

Hi this is my first time using the slack... so I'm sorry if I'm not doing it right or broke some universal slack rules.... I'm finishing up making my own TS declaration to Kt external converter... On the topic of working with Union types using Kotlin, do we think this would work, and if so, be a decent union type approach?

Copy code

external class JavascriptComponent // -- properly defined elsewhere

// declare var Root : JavascriptComponent | any;

external var Root: RootUnion

sealed external class RootUnion

fun RootUnion.asJavascriptComponent(): JavascriptComponent = asDynamic().unsafeCast<JavascriptComponent>()
fun RootUnion.asAny(): Any = asDynamic().unsafeCast<Any>()

Donny

07/07/2023, 3:16 PM

I'm getting this error while trying to compile a Kotlin / JS module that has exports in it (this did not happen before I tried to export all the classes in the library. Also, there are no warnings, only this error. Does anyone know how to track it down?

Copy code

: java.lang.NullPointerException
	at org.jetbrains.kotlin.ir.backend.js.export.ExportModelGenerator.exportClass(ExportModelGenerator.kt:449)
	at org.jetbrains.kotlin.ir.backend.js.export.ExportModelGenerator.exportOrdinaryClass(ExportModelGenerator.kt:253)
	at org.jetbrains.kotlin.ir.backend.js.export.ExportModelGenerator.exportClass(ExportModelGenerator.kt:73)
	at org.jetbrains.kotlin.ir.backend.js.export.ExportModelGenerator.exportDeclaration(ExportModelGenerator.kt:61)
	at org.jetbrains.kotlin.ir.backend.js.export.ExportModelGenerator.generateExport(ExportModelGenerator.kt:37)
	at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.IrModuleToJsTransformer.generateExportWithExternals(IrModuleToJsTransformer.kt:192)
	at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.IrModuleToJsTransformer.associateIrAndExport(IrModuleToJsTransformer.kt:123)
	at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.IrModuleToJsTransformer.makeJsCodeGenerator(IrModuleToJsTransformer.kt:168)
	at org.jetbrains.kotlin.cli.js.K2JsIrCompiler$Ir2JsTransformer.makeJsCodeGenerator(K2JsIrCompiler.kt:156)
	at org.jetbrains.kotlin.cli.js.K2JsIrCompiler$Ir2JsTransformer.compileAndTransformIrNew(K2JsIrCompiler.kt:160)
	at org.jetbrains.kotlin.cli.js.K2JsIrCompiler.doExecute(K2JsIrCompiler.kt:403)
	at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:181)
	at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:72)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:100)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:46)
	at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:101)
	at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1486)
	at java.base/jdk.internal.reflect.DirectMethodHandleAccessor.invoke(DirectMethodHandleAccessor.java:104)
	at java.base/java.lang.reflect.Method.invoke(Method.java:578)
	at java.rmi/sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:360)
	at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:200)
	at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:197)
	at java.base/java.security.AccessController.doPrivileged(AccessController.java:712)
	at java.rmi/sun.rmi.transport.Transport.serviceCall(Transport.java:196)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:598)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:844)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:721)
	at java.base/java.security.AccessController.doPrivileged(AccessController.java:399)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:720)
	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1144)
	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:642)
	at java.base/java.lang.Thread.run(Thread.java:1589)

Tóth István Zoltán

07/08/2023, 4:08 AM

Do we really need to use two separate JS files for web workers? Wouldn't it be possible to pass the main js, check if it runs as a worker or not and act accordingly? This would reduce the Gradle magic and the loading time (only one script is downloaded). It increases the amount of memory used by the web worker (I guess).

Donny

07/09/2023, 2:05 PM

I have a Kotlin/JS application that I have configured to output a binary.executable. I want to then use that binary as a library in a Javascript project in Idea. How would I go about doing so?

AndreiBogdan

07/10/2023, 6:20 AM

Hello. I have this setup

Copy code

js(IR) {
    moduleName = "kmm-lib"
    nodejs {
        binaries.library()
    }
    useCommonJs()
    generateTypeScriptDefinitions()
}

but i'm getting

Unresolved reference: generateTypeScriptDefinitions

when compiling it. Why would that be ? 😞 Is there something else that also needs to be configured ?!

Tóth István Zoltán

07/11/2023, 4:29 AM

Is there a kind of wiki/resources page for Kotlin/JS? An edited content of this slack channel, a FAQ, something like that? There is a lot of information here that is immensely helpful, but it's not organized.

❤️ 5

👍 4

Piotr Krzemiński

07/11/2023, 7:10 PM

FYI: https://github.com/renovatebot/renovate/discussions/23309

👍 2

Eugene Maksymenko

07/11/2023, 9:39 PM

Hi all! Wellcome to contribute my multi-platform 3d map engine https://github.com/WorldWindEarth/WorldWindKotlin/releases/tag/v1.2.19

K 3

Donny

07/12/2023, 7:43 AM

I'm exporting a singleton object

Assets

that inherits from

CoroutineScope

. It has a number of suspend functions. I

@JsExport.Ignore

them. However, they appear to still be defined in the built Javascript:

Copy code

var $de = <http://_.de|_.de> || (<http://_.de|_.de> = {});
    var $de$fabmax = $de.fabmax || ($de.fabmax = {});
    var $de$fabmax$kool = $de$fabmax.kool || ($de$fabmax.kool = {});
    defineProp($de$fabmax$kool, 'Assets', Assets_getInstance, VOID);
    $de$fabmax$kool.Assets.$loadBlobAssetCOROUTINE$1 = $loadBlobAssetCOROUTINE$1;
    $de$fabmax$kool.Assets.$loadTextureDataCOROUTINE$2 = $loadTextureDataCOROUTINE$2;
    $de$fabmax$kool.Assets.$loadTextureAtlasDataCOROUTINE$3 = $loadTextureAtlasDataCOROUTINE$3;
    $de$fabmax$kool.Assets.$loadCubeMapTextureDataCOROUTINE$4 = $loadCubeMapTextureDataCOROUTINE$4;
    $de$fabmax$kool.Assets.$loadTexture1dCOROUTINE$5 = $loadTexture1dCOROUTINE$5;
    $de$fabmax$kool.Assets.$loadTexture2dCOROUTINE$6 = $loadTexture2dCOROUTINE$6;
    $de$fabmax$kool.Assets.$loadTexture2dCOROUTINE$7 = $loadTexture2dCOROUTINE$7;
    $de$fabmax$kool.Assets.$loadTexture3dCOROUTINE$8 = $loadTexture3dCOROUTINE$8;
    $de$fabmax$kool.Assets.$loadTexture3dCOROUTINE$9 = $loadTexture3dCOROUTINE$9;
    $de$fabmax$kool.Assets.$loadCubeMapCOROUTINE$10 = $loadCubeMapCOROUTINE$10;
    $de$fabmax$kool.Assets.$loadCubeMapCOROUTINE$11 = $loadCubeMapCOROUTINE$11;

Somehow, I don't know why, the first COROUTINE assignment seems to cause the Assets object to be initialized (lazy instantiation at first reference), which leads to errors for me since it expects a number of things to be defined before that initialization. Is this the expected behavior?

msoulatre

07/12/2023, 1:32 PM

Upgrading to kotlin 1.9.0 seems to have broken a hacky workaround that I've been using to force change the project name and version in the output

package.json

of my multiplatform project with

compilations["main"].packageJson

. Not sure if this should be considered a bug and if there are alternatives. More details in thread. edit: turned out to be an issue with gradle caching/serialization so some data was not available in the packageJson closure, see thread.

✅ 1

Donny

07/12/2023, 8:53 PM

I believe I've discovered a bug in the Kotlin/JS IR compiler (or at least some undefined or problematic behavior). If you have the following class (first code block), generate the javascript from the class, and then use that Javascript in the browser (second code block) the result is that despite there not being a reference to SingletonWithCoroutine it is instantiated nonetheless. An object singleton that does not use a CompleteableDeferred does not have this problem and will only instantiate the first time the singleton is referenced. Any thoughts?

Copy code

import kotlinx.coroutines.*
import kotlin.coroutines.CoroutineContext
import kotlin.js.JsExport

sealed class DeferredClass(val successful: Boolean)

@JsExport
object SingletonWithCoroutine : CoroutineScope {

    @JsExport.Ignore
    internal val job = Job()

    @JsExport.Ignore
    private const val NUM_LOAD_WORKERS = 8


    @JsExport.Ignore
    override val coroutineContext: CoroutineContext
        get() = job

    @JsExport.Ignore
    suspend fun testSuspend(assetPath: String): Unit {
        val deferred = Deferred()
        val loaded = deferred.awaiting.await()
    }

    @JsExport.Ignore
    private class Deferred(val awaiting: CompletableDeferred<DeferredClass> = CompletableDeferred(job))

    @JsExport.Ignore
    var test = myFun()

    private fun myFun() {
        throw Exception("This should only be thrown the first time this is referenced")
    }
}

Copy code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/singleton/kotlin-kotlin-stdlib-js-ir.js"></script>
    <script src="node_modules/singleton/88b0986a7186d029-atomicfu-js-ir.js"></script>
    <script src="node_modules/singleton/kotlinx.coroutines-kotlinx-coroutines-core-js-ir.js"></script>
    <script src="node_modules/singleton/singleton.js"></script>
</head>
<body>

</body>
</html>

manoj s

07/14/2023, 12:01 PM

https://discuss.kotlinlang.org/t/is-kotlin-react-discontinued/27075 Could someone form the team clarify please?

Pavel Pristalov

07/14/2023, 3:59 PM

Hi! Sorry for dumb question, but I googled really a lot and with no luck. I’m trying to create a simple app with React and Emotion with 2 FC that must be placed in a row: second FC must be at the right of first one. I tried to do it with divs, but it just does not work for me. Could you help?

Copy code

div {
        css {
            margin = 30.px
            display = Display.inlineBlock 
        }

        div {
            // first component
        }

        div {
            // second component
        }
    }

georgi

07/14/2023, 11:01 PM

👋 Heya! I'm working with Google PubSub and have the following external declarations

Copy code

@file:JsModule("@google-cloud/pubsub")
@file:JsNonModule

@JsName("PubSub")
external class GoogleCloudPubSub {
    fun topic(name: String): GoogleCloudPubSubTopic
}

external class GoogleCloudPubSubTopic {
    fun exists(): Promise<Boolean>
}

Elsewhere I'm using this as

Copy code

launch {
    val topic = GoogleCloudPubSub().topic("blah-blah")
    val result = topic.exists().await()
    println(result)
    if (result) { println("Exists") } else { println("Doesn't exist") }
}

The first print correctly shows

true

false

for the result of

exists()

. However, the

if

statement never runs even if

result

true

- if I do something like this

val result = topic.exists().await().toString()._toBoolean_()

it works fine. Any ideas as to why it's happening? Thanks in advance 🙏

✅ 2

Ahmed na

07/15/2023, 3:58 AM

Hi ! I'm trying to migrate to kotlin 1.9 , but faced this issue with JS target ,

Copy code

* What went wrong:
Failed to query the value of task ':annotations:jsPackageJson' property 'npmResolutionManager'.
> Could not isolate value org.jetbrains.kotlin.gradle.targets.js.npm.KotlinNpmResolutionManager$Parameters_Decorated@64029766 of type KotlinNpmResolutionManager.Parameters
   > Could not serialize value of type Build_gradle...