Also fishing for advice on if anyone has a good link for instructions on how to make https://material-ui.com/ work with kjs react? it looks like i have to do some wrapping of components - i tried these but get various errors - but maybe i just need to persist 🤷‍♂️🏼sorta just looking for the right way to go ... • https://github.com/cfnz/muirwik • https://akjaw.com/kotlinjs-react-redux-with-thunk-and-material-ui/

Hello all, I am using a Webview, and I was wondering how to use 

evaluateJavascript(...)

  to set a javascript variable to a javascript object using the string parameter in the function. What I have so far:

val javascriptString = "javascript: someString = {\"key\":\"value\"}"
webView.evaluateJavascript(javascriptString, null)

This is not working. Can someone point me in the right direction?

Hi folks, I'm struggling with consuming d.ts definitions generated by

jsGenerateExternals

from within TypeScript. A minimal example: my d.ts file starts like this

type Nullable<T> = T | null | undefined
export namespace com.example.myproject {
    class CoolDto {
        constructor(isDog: string);
        readonly isDog: string;
        // ...

and in TS I import it like this:

import { com } from '../../sharedModel';

const { CoolDto } = com.example.myproject;
type CoolDto = typeof CoolDto;

and then simply use it this way:

coolDtoInstance.isDog

but IntelliJ and TS compiler are complaining:

Property 'isDog' does not exist on type 'typeof CoolDto'.  TS2339

    73 | 
  > 74 |   const isDog = coolDtoInstance.isDog;
       |                                 ^

The funny thing is that IntelliJ hints to add this field to this d.ts file, but after adding it, it still doesn't work 😕 Any ideas?

Haven't used Kotlin/JS or IDEA for a while. Just updated everything, I get Gradle errors. What are the correct versions right now, these cannot be found?

id("org.jetbrains.kotlin.js") version "1.4.10"
    id("kotlin2js") version "1.5.0-release-760"

And where would I find this myself?

Is there a way to emit the

debugger

statement to final compiled JS code? That would help to debug the compiled code in browser dev tools tremendously..

Is there a recommended way to work with `external interface`s in common code in a multiplatform project? Maybe a sample project? Right now I find myself doing a lot of stuff like

// commonMain
interface HasFoo {
    val foo: String
}

data class HasFooMobile(override val foo: String): HasFoo

// jsMain
external interface HasFooJs {
    val foo: String
}

class HasFooJsWrapper(private val hasFooJs: HasFooJs): HasFoo {
    override val foo = hasFooJs.foo
}

Would be nice to have some ability to declare an interface as

external

in Common code and have the keyword ignored on non-JS platforms…

IR vs Legacy compile time - in my project, after a build and then browserDevelopmentRun --continuous, after any small change in Legacy and I get a rebuild time of 2-3 seconds. Changing to the IR compiler, rebuilding and running continuous, I get build times of 22-23 seconds... is that large increase when using the IR compiler normal?

How can I use something like

karma-junit-reporter

for Kotlin/JS? I assume it goes somewhere in the gradle

useKarma

method, but I can't find any examples. Apparently I just need to add

--reporters junit

to the command line.

This message was deleted.

Is there a known issue with

isLowerCase

? I converted my code to 1.5, did the migrations of deprecated functions, but that was the only one that is causing me problems at runtime:

The

lowercase()

function, also introduced in 1.5 is working fine.

is it possible to change the .js output file name without editing the gradle module name? should i write a gradle task?

When I execute tests, the main method is executed. I assume this is to test graphical components? I'm using Kotlin React, so the main method tries to find the

root

element, which doesn't exist during tests because it's not executed from the HTML file. What can I do? I'm using the legacy compiler with

binaries.executable

, if that makes a difference.

I'm not really a Gradle advanced user, so this may sound kinda dumb, but is it possible to copy the Gradle's

jsBrowserDistribution

output to another project? What I want to do is to copy the output from my

:frontend

module to the resources of my

:backend

(a ktor webserver) module

Hi! I'm working on a browser extension, and am finding that when the Promise returned by browser.tabs.executeScript fails, the exception thrown by await() just gets logged instead of being captured by a surrounding catch block. Here's a snippet:

suspend fun executeScript(frameId: Int): String {
    val result = js("browser.tabs.executeScript({ frameId: frameId, code: 'window.location.href' })") as Promise<String>
    return try {
        result.await()
    } catch (t: Throwable) {
        // Never gets invoked
        console.error("Got error in await:", t.message)
        ""
    }
}

i am trying to understand npm version declaration am i right to assume that i see people use

^1.20

instead of

1.2.0

because without

^

it would pin it and transitive dependencies cannot raise it ? is there any case where you would want to have a npm version without

^

prefixed ? context: working on adding support for npm to #gradle-refresh-versions

Hi, I'm using a gradle composite build (e.g. using includeBuild(...) in the settings.gradle.kts file), and when I build with "gradlew --continuous jsRun", it keeps rebuilding even without changes being made by me. It is detecting changes in the included build, in the package.json file within the build\js\packages folder hierarchy. Any ideas why this is occurring and how I can prevent it?

Does anyone know how to use inline styles with kotlin-html? (Currently, I am trying to move a

<div>

across the screen using

top

and

left

css properties on mousedown. Using kotlin-react and styled components takes around 1000 times longer (most of the time from recalculating styles) than a pure JS solution that simply changes the inline

<div>

style.)

In case anyone is interested, I gave a talk about KVision. The slides, sample application code and YouTube video link are available at https://github.com/rjaros/tricity-example/.

So I am posted a few days ago about webpack failing on xxx-jslegacy dependencies and thought i might try again as I am a bit stumped with trying to figure out where these dependencies are introduced. I'm wondering if someone might be able to point me to a good example of the dependencies required for a kotlin-js / react project as it look like i have gotten something wrong there. i have :

val commonMain by getting {
    dependencies {
        implementation(project(":shared"))
        implementation("org.jetbrains.kotlinx:kotlinx-datetime:$ver_kotlinx_datetime")
        implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:$ver_kotlinx_serialization_core")
        implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:$ver_kotlinx_serialization_core")
        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:$ver_coroutines_core")
        implementation("io.ktor:ktor-client-core:$ver_ktor")
        implementation("io.insert-koin:koin-core:$ver_koin")
    }
}
val jsMain by getting {
    dependencies {
        implementation("org.jetbrains:kotlin-react:$ver_kotlin_react")
        implementation("org.jetbrains:kotlin-styled:$ver_kotlin_styled")
        implementation(npm("react-youtube-lite", "1.0.1"))
        implementation(npm("react-share", "~4.2.1"))

        // todo shouldn't be need but breaks build runtime/webpack
        //implementation(npm("kotlinx-serialization-kotlinx-serialization-core-jslegacy", "1.4.2-RC1"))

        implementation("com.ccfraser.muirwik:muirwik-components:0.7.0") {
            exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-styled")
        }
        //<https://github.com/CookPete/react-player>
        //implementation(npm("react-player", "2.9.0"))
    }
    //implementation("org.jetbrains.kotlinx:kotlinx-datetime-js:$ver_kotlinx_datetime")
}

versions are

ver_kotlin_react=17.0.1-pre.148-kotlin-1.4.21
ver_kotlin_styled=5.2.1-pre.146-kotlin-1.4.30
ver_react=17.0.1
ver_styled_cmp=5.3.0
ver_kotlin=1.4.32

the errors i get are:

It looks like the error messages are telling me something is wrong but it looks like kotlin-react should use 17.0.1 So i am wondering 🤔 A) how to find out where the dependencies are introduced - on the npm side B) what a 'normal' kjs/react setup should look like this is the original question https://kotlinlang.slack.com/archives/C0B8L3U69/p1622536979228000 and if someone wants some stackoverlfow points then I have a question on the same here https://stackoverflow.com/questions/67800532/building-kotlinjs-app-on-github-actions-ci

Hi ! Is dukat abandonned ?

Hi all - i’m new to kotlin-js. Is there any good example project that showcase kotlin sources exported as a js library and consumed through npm?

Hi! I’m having trouble resolving the dependency of NPM module in my own Kotlin/JS library 😢 It worked fine up to Kotlin

1.4.32

, but when I updated to Kotlin

1.5.x

, I was unable to resolve the

@material-ui/core

dependency. You can find it in the following repository

./gradlew :sample:run

command in the following repository. Any ideas on how to fix this would be great!

Record`i am trying to write a binding for a typescript function that takes a

Record<String, Any>

, it works when i pass it a think like so :

js("{name: \"Anna\"}")

but i would really like to call it with

mapOf()

or similar any idea how i can achieve that ?

I have raised a youtrack ticket [https://youtrack.jetbrains.com/issue/KT-47200] regarding JsExport and an alternative mechanism to export. I would be grateful to anyone who can help.

I want to pass some data to my (mocha) test task from my build script, e.g. via environment variables. Is there any way to do this?

Does anyone know how I can enable

config.devServer = {
    historyApiFallback: true,
}

in my JsBrowserDevelopmentRun task? I've placed the snippet into a js file in the folder

webpack.config.d

but I can't get it to work

Jeez.... I solved it immediately:

config.devServer["historyApiFallback"] = true