kotlinlang #javascript

Hi all, I'd like to represent this external enum https://developer.chrome.com/docs/extensions/reference/tabs/#type-TabStatus. I was planning to make it a string property on the class and then make an extension to get the value as an enum. Is there a better way to be able to represent this? Something where the compiler will know how to handle the string -> enum conversion with an external class?

👀 1

Ролан

03/18/2021, 1:30 PM

Did anyone ever had a common project mixing scala.js and kotlin-js? Maybe someone could recommend an actor framework similar to Akka.js or comedy without leaving kotlin-js? Huge thanks

Jaroslav

03/18/2021, 3:33 PM

Hi, does someone develop kotlin/js at windows please? Friend of mine has a problem with compilation - compiler produces bad suffixes for overloaded non public companion methods, all are ended by _0. He even tried it at plain fresh instalation in virtual servers, got good result at linux but wrong again at win10.

Anurag Dalia

03/19/2021, 11:57 AM

keep getting this with

ktor

kotlinx serialization

kotlin coroutines

Ролан

03/21/2021, 9:58 PM

Is it possible to controle the NodeJS version (or use a local installation of NodeJS) for nodejs targets in kotlin("js")?

crummy

03/22/2021, 3:41 AM

I have a @JsExport'd class marked as @Serializable. However, when I use it in my frontend, I get this error:

Unhandled Rejection (SerializationException): Serializer for class 'NewRestaurant' is not found.
Mark the class as @Serializable or provide the serializer explicitly.

My data class:

@Serializable @JsExport data class NewRestaurant(val name: String)

Is there something I'm missing?

Ashish Kumar Joy

03/22/2021, 6:27 AM

We are trying to use kotlin multiplatform plugin in our project. We have kotlin code as follows

@JsName("Cart") class Cart(val items: List<CartItem>, val totalPayableAmount: Double) @JsName("CartItem") class CartItem(val categoryCode: String, val totalPremium: Double) class Validator(private val cart: Cart) { @JsName("isValid") fun isValid(): Boolean { return if (cart.totalPayableAmount < 5000) { cart.items.any { it.categoryCode == "abcd" } } else { false } } }

When we try to use compiled js code in html, we get error as follows

`n.iterator_24 is not a function`

which we suspect is because of `any` that we have used in kotlin. Does anyone has any idea reagarding this?

We are using IR compiler

Ролан

03/22/2021, 9:13 AM

Could anyone please drop a link to examples with the recommended approach to create, publish & re-use nodejs (npm/yarn) packages via kotlinjs (gradle)? I find a lot of information about the browser targets in the official documentation, but not much for nodejs ((. Huge thanks!

willyrs

03/25/2021, 8:18 PM

Hi all, I have a multiplatform project with the js { browser { useCommonJS() } } target. Everything works, but now I'm trying to make it a library by changing the target to

js("js", IR) {
    binaries.library()
    browser()
}

but i have this compilation error:

Could not determine the dependencies of task ':shared:jsPackageJson'.
> Could not resolve all dependencies for configuration ':shared:jsNpm'.
   > Could not resolve co.touchlab:kermit:0.1.8.
     Required by:
         project :shared
      > No matching variant of co.touchlab:kermit:0.1.8 was found. The consumer was configured to find a usage of 'kotlin-runtime' of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js', attribute 'org.jetbrains.kotlin.js.compiler' with value 'ir' but:
          - Variant 'android-debugApiElements' capability co.touchlab:kermit:0.1.8:
              - Incompatible because this component declares an API of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a usage of 'kotlin-runtime' of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js'
              - Other compatible attribute:
                  - Doesn't say anything about org.jetbrains.kotlin.js.compiler (required 'ir')

Does this mean the library is not compatible with the IR compiler? If that's the case, how can I know it beforehand or find the correct version?

Nicolas Acart

03/25/2021, 9:29 PM

Hi, I am trying to wrap a simple library : https://www.npmjs.com/package/react-katex in kotlin/js, I have no problem to wrap the React component but I have no idea of how to import the css needed by the component. How do I do

*import* 'katex/dist/katex.min.css';

in kotlin/js ? I already have :

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

package fr.jeanjacquelin.adminmc.front.component.wrapper.katex

import react.Component
import react.RProps
import react.RState
import react.ReactElement

external interface InlineMathProps : RProps {
    var math: String?
}

@JsName("InlineMath")
external class InlineMathComponent : Component<InlineMathProps, RState> {
    override fun render(): ReactElement?
}

(I also did the dsl function to call it) It works but the css is not loaded

Robert Jaros

03/26/2021, 11:43 PM

Something is broken with

kotlin-test-js-runner

. Without any code changes one of my tests in KVision started failing with strange error:

> Task :kvision-modules:kvision-react:legacyBrowserTest
UncaughtException:: Cannot read property 'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined
    at KarmaKotlinReporter.specFailure (/home/runner/work/kvision/kvision/build/js/node_modules/kotlin-test-js-runner/karma-kotlin-reporter.js:218:88)

Here is a link to the github actions failure with full error message: https://github.com/rjaros/kvision/runs/2205736268 It fails only on legacy backend test, with ChromeHeadless, Chrome and Firefox runners with very similar message. The problem is somehow connected to react or kotlin-react, because only kvision-react module is affected. Anyone has any idea what could be the cause of this?

Nick

03/27/2021, 4:22 AM

Is anyone else seeing a high frequency of runtime errors when building w/ IR? I get the following on every other build attempt (subsequent build usually works fine). I'm actually reverting back to JS Legacy for dev to avoid the churn.

Nick

03/27/2021, 4:22 AM

e: java.lang.IllegalStateException: Unsupported operation
	at org.jetbrains.kotlin.backend.common.serialization.IrModuleDeserializer.referenceSimpleFunctionByLocalSignature(IrModuleDeserializer.kt:37)
	at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.tryReferencingSimpleFunctionByLocalSignature(KotlinIrLinker.kt:604)
	at org.jetbrains.kotlin.backend.common.overrides.FakeOverrideBuilder.declareFunctionFakeOverride(FakeOverrides.kt:144)
	at org.jetbrains.kotlin.backend.common.overrides.FakeOverrideBuilder.linkFunctionFakeOverride(FakeOverrides.kt:106)
	at org.jetbrains.kotlin.ir.overrides.FakeOverrideBuilderStrategy.linkFakeOverride(IrOverridingUtil.kt:56)
	at org.jetbrains.kotlin.ir.overrides.IrOverridingUtil.createAndBindFakeOverride(IrOverridingUtil.kt:402)
	at org.jetbrains.kotlin.ir.overrides.IrOverridingUtil.createAndBindFakeOverrides(IrOverridingUtil.kt:257)
	at org.jetbrains.kotlin.ir.overrides.IrOverridingUtil.generateOverridesInFunctionGroup(IrOverridingUtil.kt:206)
	at org.jetbrains.kotlin.ir.overrides.IrOverridingUtil.buildFakeOverridesForClass(IrOverridingUtil.kt:134)
	at org.jetbrains.kotlin.backend.common.overrides.FakeOverrideBuilder.buildFakeOverrideChainsForClass(FakeOverrides.kt:101)
	at org.jetbrains.kotlin.backend.common.overrides.FakeOverrideBuilder.provideFakeOverrides(FakeOverrides.kt:163)
	at org.jetbrains.kotlin.backend.common.overrides.FakeOverrideBuilder.provideFakeOverrides(FakeOverrides.kt:172)
	at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.postProcess(KotlinIrLinker.kt:632)
	at org.jetbrains.kotlin.psi2ir.Psi2IrTranslator.generateModuleFragment(Psi2IrTranslator.kt:88)
	at org.jetbrains.kotlin.ir.backend.js.KlibKt.generateModuleFragmentWithPlugins(klib.kt:344)
	at org.jetbrains.kotlin.ir.backend.js.KlibKt.generateKLib(klib.kt:170)
	at org.jetbrains.kotlin.cli.js.K2JsIrCompiler.doExecute(K2JsIrCompiler.kt:194)
	at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:181)
	at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:74)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:88)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:44)
	at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:98)
	at org.jetbrains.kotlin.incremental.IncrementalJsCompilerRunner.runCompiler(IncrementalJsCompilerRunner.kt:178)
	at org.jetbrains.kotlin.incremental.IncrementalJsCompilerRunner.runCompiler(IncrementalJsCompilerRunner.kt:75)
	at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileIncrementally(IncrementalCompilerRunner.kt:286)
	at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileImpl(IncrementalCompilerRunner.kt:111)
	at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compile(IncrementalCompilerRunner.kt:74)
	at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compile$default(IncrementalCompilerRunner.kt:65)
	at org.jetbrains.kotlin.daemon.CompileServiceImplBase.execJsIncrementalCompiler(CompileServiceImpl.kt:550)
	at org.jetbrains.kotlin.daemon.CompileServiceImplBase.access$execJsIncrementalCompiler(CompileServiceImpl.kt:96)
	at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1747)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:357)
	at sun.rmi.transport.Transport$1.run(Transport.java:200)
	at sun.rmi.transport.Transport$1.run(Transport.java:197)
	at java.security.AccessController.doPrivileged(Native Method)
	at sun.rmi.transport.Transport.serviceCall(Transport.java:196)
	at sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:573)
	at sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:834)
	at sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:688)
	at java.security.AccessController.doPrivileged(Native Method)
	at sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:687)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
	at java.lang.Thread.run(Thread.java:748)

crummy

03/27/2021, 5:05 AM

is the only way to call Kotlin code from JS to use @JsExport, which requires IR?

Eduardo Zuza

03/27/2021, 2:41 PM

Hello guys, I would like an example on git of how to use kotlinJS with modules, not multi-platform, only modules for kotlinJS using Gradle if possible. I have been trying to put together an example for 3 days, but I have difficulties with the gradle, if anyone can take a look, I am grateful. https://github.com/zuza07/kotlinJS.git

Animesh Sahu

03/28/2021, 12:35 PM

Is there any way to export kotlin enums? Specially in Kt/Multiplatform, should we create js-specific wrapper class for function accepting enum as string, or any better (hacky 😜) way?

👍 1

➕ 3

archana 0623

03/28/2021, 3:51 PM

How can we add media queries using kotlin-wrappers/kotlin-styled?

Mateusz Mańka

03/29/2021, 8:00 AM

Hi guys, Have a quick question for you, can I add kotlinJs to the existing React project? In a way that I will have both typescript and Kotlin components in it?

andrewreitz

03/29/2021, 4:57 PM

Is there any way to load a kotlin script at runtime with kotlin-js?

Alexey Artemiev

03/29/2021, 5:54 PM

Hello! I am Kotlin/JS newbie. I am trying to use a PNG as element background. In TS/React I just put the image near my module, reference it in module's CSS by its relative path (e.g.

background-image: url('./icons/smth.png');

), import the CSS to TSX module (e.g.

import './smth.css';

), and set

className

on my component. In Kotlin/JS, following the examples, I have created an object

object SmthStyles : StyleSheet("SmthStyles", isStatic = true) {
    val smth by css {
        backgroundImage = Image("???")
    }
}

but I cannot figure out how to set my image by its relative path in the source tree. Neither JsModule annotation, nor require function didn't help (I might misuse them), the image is not found at runtime. There seems to be a special directory for resources (src/main/resources), but that didn't help also. Could you please explain, how to do it? Google seems to know little useful about such things yet. I use

kotlin("js") version "1.4.31"

and

org.jetbrains:kotlin-styled:1.0.0-pre.113-kotlin-1.4.0

Ilya Goncharov [JB]

03/30/2021, 1:39 PM

❗Hi everyone, This is just a friendly reminder that

org.jetbrains.kotlin.frontend

(https://github.com/Kotlin/kotlin-frontend-plugin) is now deprecated. You can use the standard Kotlin/JS plugin

org.jetbrains.kotlin.js

instead. Please note that the Frontend plugin is hosted on Bintray in

kotlin-eap

, and the repository will be deleted with the Bintray Sunset on May 1st, 2021. We have no plans to move the Frontend plugin, so please be sure to migrate to the standard Kotlin/JS plugin. More details about setup here

🚀 2

👍 2

🔥 3

Alexey Artemiev

03/30/2021, 8:26 PM

With kotlin-styled the following

val x by css {
  backgroundImage = require("src/main/resources/image.png")
}

gives an error

Module 'src/main/resources/image.png' not found

Moving file to main/kotlin/... and changing to relative path from the source file dir gives the same "not found" error. Using JsModule gives the same error too. Where should resources be placed, and how to reference them by relative path in kotlin/js react app? Please, help! Google gives only 2-year (and more) old advices which don't help, because kotlin/js seems to have changed much recently.

Franco

03/30/2021, 11:35 PM

Hi everyone, I'd like to implement the

history.listen()

(see https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#historylistenlistener-listener) function to contribute it to the

kotlin-wrappers

project but I can't figure out how to do this using functions instead of interfaces. Has anyone done this before or know how to do it?

Wolf Logan

03/31/2021, 1:04 AM

Is it possible to get Kotlin/JS to use Webpack 5?

Justin Tullgren

03/31/2021, 9:07 PM

Hi, when using the kotlin react hook

functionalComponent (props: P) -> dynamic

and configuring a subtype of

props using a dsl should the compiler error if none of the members in the subtype are set? I see it producing undefined errors when running in the browser

Joel

04/02/2021, 1:51 AM

Is there an easy way to output a valid npm module from the JS IR compiler?

js(IR) {
    moduleName = project.name
    nodejs()
    binaries.executable()
}

The only relevant documentation I can find are here and here. There also appears to be a bug when the module name includes a group resulting in an invalid package main path:

Romaric Tanguy BANGA

04/02/2021, 8:32 AM

Hi everyone, I am Kotlin/JS newbie. I am trying to import external library Material Box in this component, but it doesn't work. the error message is materialbox() is not a function thanks

Wolf Logan

04/06/2021, 1:41 AM

Is it possible to debug Kotlin/JS running in the browser from within IntelliJ Ultimate? I can debug my code in the browser debugger with proper mapping to my Kotlin source, but if I try using the IntelliJ debugger (via the JavaScript Debug configuration) it seems to only want to deal with the JavaScript code. "Visualise Source Map" works, though, so I'm convinced the map is there

Hyugga

04/06/2021, 3:31 AM

I'm trying to build kotlin per its instructions, but it seems to require environment variables for 4 Java versions. Why is this?

spand

04/07/2021, 7:54 AM

Is it possible to configure webpack per source set ? I think I want multiple js sourcesets to get multiple bundled files and avoid having a module for each entry point. I seem to recall seeing that one could have multiple sourcesets with different configurations (ie. a shared java sourceset for both an Android and a Jvm sourceset)

Title

spand

04/07/2021, 7:54 AM

Big Chungus

04/07/2021, 8:16 AM

Not yet, but it's coming

Unless you create multiple js targets

What are you trying to build, exactly? Is it an executable or a lib?

spand

04/08/2021, 6:15 AM

I really just wanted a quick way to split out the javascript for our admin pages without going down the rabbit hole of code splitting

View count: 7