Hi, I recently updated my kotlin js app to a newer version of kotlin-react, but it seems now that the

useEffectWithCleanup

hook has been removed. I still need it to detach and reattach event listeners for my web page i.e.

useEffectWithCleanup(listOf(dep1)) {
  addEventListener(element...);

  return@useEffectWithCleanup removeEventListener(element...);
}

is there an alternative with the newest version of the kotlin-react library?

Hello any one found a solution to using resources from a kotlin/js library???

Hi all, is there some robust way to detect from Kotlin/JS logic if Webpack dev server is running? I want to choose between

RealBackendClient

and

MockedBackendClient

without the necessity to change code when using Webpack dev server. For now I found out that

webpackHotUpdatefrontend_react

function (my module is called

frontend-react

) is defined in

window

, but it seems hacky. Is there any more elegant way?

hi everyone :android-wave: . I’m curious how you all start a new fullstack kotlin project with react. is there a starter template that is easy to kickoff? i’d like to make it easy to just start a new project with react and have a default application that can then be added to.

Since updating to the IR compiler i’ve noticed that the

jsBrowserDevelopment

task now causes two browser reloads. When i save a file: 1. the re-compile step starts BUT at the same time it looks like the websocket for webpack gets a reload signal 2. so, the browser reloads for webpack dev server websocket signal 3. then it reloads AGAIN when the kotlin compiler finishes the

jsMainClasses

task Is anyone else seeing this and if so is there a fix?

How can I generate a .js file for IR when I specify

js(BOTH)

? ("Can't use

executable()

with 'both' compiler type")

why does

jsTest

run

main()

? none of the other targets have this behavior, but with

// commonMain
fun main() {
    println("Hello, world!")
}

running

./gradlew allTests

prints out

> Task :jsNodeTest
Hello, world!

sample project attached

I'm facing the same problem that was described in https://kotlinlang.slack.com/archives/C0B8L3U69/p1583764679215200, that is: I cannot run unit tests because my Jenkins says

[2021-12-10T10:37:29.209Z] > Task :frontend-react:browserTest
[2021-12-10T10:37:29.209Z] Cannot start ChromeHeadless
[2021-12-10T10:37:29.209Z] 	[1210/103728.346077:ERROR:<http://zygote_host_impl_linux.cc|zygote_host_impl_linux.cc>(90)] Running as root without --no-sandbox is not supported. See <https://crbug.com/638180>.
[2021-12-10T10:37:29.209Z] ChromeHeadless stdout:
[2021-12-10T10:37:29.209Z] ChromeHeadless stderr: [1210/103728.346077:ERROR:<http://zygote_host_impl_linux.cc|zygote_host_impl_linux.cc>(90)] Running as root without --no-sandbox is not supported. See <https://crbug.com/638180>.

I told Gradle plugin to look into `karma.config.d`:

testTask {
    useKarma {
        useConfigDirectory("karma.config.d")
    }
}

and there I have

module.exports = function(config) {
    config.set({
        browsers: ['ChromeHeadlessNoSandbox'],

        // you can define custom flags
        customLaunchers: {
            ChromeHeadlessNoSandbox: {
                base: 'ChromeHeadless',
                flags: ['--no-sandbox']
            }
        }
    })
}

but I'm not even sure if this config is picked up. Too bad Kotlin/JS's Gradle plugin does't allow building on top of available configs. E.g. if I could define:

fun useChromeHeadlessNoSandbox() {
        config.customLaunchers["ChromeHeadlessNoSandbox"] = CustomLauncher("ChromeHeadless").apply {
            flags.add("--no-sandbox")
        }
        useChromeLike("ChromeHeadlessNoSandbox")
    }

it could work fine and without defining any extra files. Unfortunately,

config

is private now

Hello! Is there a way to extend

State

. I want to create function which changes state in different Component classes.

// external interface as example, but it will not work
external interface StateWithError: State {
  var error: Throwable?
}

fun <S : StateWithError> Component<*, S>.someFunction(){
  setState { 
    error = Throwable("Some msg")
  }
}

I tried to use

external interface

and

abstract class

(even with

@JsName("error")

), but always getting name mangling. Is there a way to create such function?

Also I'm trying to create wrapper for such case github link . How to wrap such case?

<ForceGraph2D
          ...
          nodePointerAreaPaint={(node, color, ctx) => {
            ...
            // this case
            bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
          }}
        />

How to wrap

bckgDimensions && ctx.fillRect(...)

?

bckgDimension

is array of 2 Numbers.

message has been deleted

Anyone have dealt with "Cannot run program "/home/gradle/.gradle/nodejs/node-v14.17.0-linux-x64/bin/node" (in directory "/builds/mensapl/skill-matrix/skillmatrix-frontend-ci/skillmatrix-frontend/build/js"): error=2, No such file or directory"?

Hello, World! I have made a Chrome plugin using Kotlin/JS a while ago, and I'm in the process of maintaining/adding a feature. My first step was to update the dependencies, and while I'm at it, I've also switched to the

IR

compiler - and unfortunately I experience some errors at runtime. Calling some APIs result in "No matching signature" errors

TypeError: Error in invocation of bookmarks.create(bookmarks.CreateDetails bookmark, optional function callback): No matching signature.

I know

IR

is still beta but wondering if that rings a bell to anyone. (Not sure how easy it would be for me to create a simple repo project)

I am trying to create a new project to test out Kotlin/JS, but I cant event get a new demo project to build and compile

I know it’s not related to Kotlin, but can somebody recommend me a nice desktop app for live streaming feeds from webcam and external camera sources. I know there is OBS but i need to launch, configure input url and start streaming from a python or js script.

Hello all, We have a KMM project which contains web (React) components built using Kotlin (compiled to js using Kolin/JS of course). We created the web app using the ‘New Application’ > ‘Kotlin’ > ‘React Application’ from IntelliJ. All works okay but with every change we make in the web app the build kicks off and takes around 30 seconds to complete before doing a complete page refresh. This of course does not keep state so aside from the build time means we have to re-navigate/recreate the state from scratch manually to dev/test. We have tried many different solutions to get react ‘hot reload’ or react ‘fast refresh’ working using various configurations - quite a few from the discussions in this channel - but have hit a brick wall and nothing we try seems to work (possibly because Kotlin/JS has moved on quite a bit in the past year). Has anyone managed to get either react ‘hot reload’ or react ‘fast refresh’ working (when writing react components in Kotlin) recently using the IR compiler and if so what settings/code did you use please e.g. in webpack and in

main

or components in your kotlin code. Many thanks!

I've upgraded to 1.6.10 and now I have

kotlin-js-store

directory in the root dir of my every project. It's probably related to

KT-34014

, but shouldn't it be optional?

EDIT: Before using this fix, be aware of the risks - see links in thread for details. passing this along, since I had to dig through things to figure it out for myself - the 1.6.10 kotlin js plugin automatically defaults to “yarn --ignoreScripts=true”, which can break js libraries that depends on install scripts (I ran into this with an image processing library called sharp) You can turn it off again by putting

yarn.ignoreScripts = false

in your build.gradle.kts file

Anyone has sample how to package and publish to maven node.js script generated by kotlin? To be more precis - for direct execution on node js, not as a library.

Hello once again, I think I found a compiler bug PROBLEM So, I have a sealed class like so

package pimonitor.evaluation.businesses

sealed class BusinessesIntent {
    object LoadBusinesses : BusinessesIntent()
    object ShowCreateBusinessForm : BusinessesIntent()
    object ExitDialog : BusinessesIntent()
    data class ShowInviteToShareReportsForm(val monitored: MonitoredBusiness) : BusinessesIntent()
}

whose generated .d.ts looks like this

export namespace pimonitor.evaluation.businesses {
    class BusinessesIntent {
        private constructor();
        readonly LoadBusinesses: {
        } & pimonitor.evaluation.businesses.BusinessesIntent;
        readonly ShowCreateBusinessForm: {
        } & pimonitor.evaluation.businesses.BusinessesIntent;
        readonly ExitDialog: {
        } & pimonitor.evaluation.businesses.BusinessesIntent;
    }
    namespace BusinessesIntent {
        class ShowInviteToShareReportsForm extends pimonitor.evaluation.businesses.BusinessesIntent {
            constructor(monitored: pimonitor.monitored.MonitoredBusiness);
            readonly monitored: pimonitor.monitored.MonitoredBusiness;
        }
    }
}

The class has been compiled inside a nested namespace which makes it so easy to use. However the objects which are now readonly members of BusinessIntent can never be used at all. It is impossible to even instance check

import { SDK } from "path-to-out-published-lib"

const Intent = SDK.pimonitor.pimonitor.evaluation.businesses.BusinessIntent;

const intent : BusinessIntent = getBusinessIntent()

if(intent instaceof Intent.ShowInviteToShareReportsForm) { // works like charm

} 

if (intent instanceof Intent.LoadBusinesses) { // tsc won't even compile

}

cosole.log(intent == intent.LoadBusinesses) // prints false
console.log(intent) // shows it is an instance of LoadBusinesses, prints: LoadBusinesses_1
console.log(intent.LoadBusinesses) // prints: undefined

This whole shenanigan makes using sealed classes with objects unusable from the js/ts side. Expected behaviour

if (intent instanceof Intent.LoadBusinesses) { // tsc should be able to compile

}

I am currently on Kotlin 1.5.31, and yes this is a KMP project. Anyone seen this before? Is there a ticket associated with this? if not I will have to create on and would ask you guys to help me up vote it

Hello, I'm looking to create a personal website with kotlin serverside using ktor as well as Kotlin/JS. For this, I want to use minimal javascript for the website and instead server nearly entirely js-free webpages. But, there is also some (very minimal) dynamic content on the pages. For this, I'm using pebble templates with ktor, so ktor will process the templates and chuck out the html for the browser to read. This is done server side instead of client side. I want to keep this. Now, the problem I'm facing is this: I would like to also include some kotlin/js in the website, as well as bundle & process some other assets (like my style sheets which use SASS/SCSS, or a bunch of icons/images I want to minify & include) But to do this, I'm currently hard coding a name for the resulting javascript file and doing a bunch of

require

calls at the start of the kotlin main function. But, I want to add more assets as well as pages to the website. For this, I don't want to have to keep adding

require

calls to the start of my main

.kt

file. Instead, I'd like if webpack took my pebble template as input and used that to resolve assets. (But, there are some other assets, eg. icons, which must be processed even if not included in the source) What's the best way to go about this? I've had quite the difficulty in figuring out how I should do it. Also, I'm fine with moving to another templating language, but the templates need to be rendered server side and not by the javascript. I want clients that can't run javascript to be able to view a fully functioning page.

I am doing a multi-platform project with reactJs on front and Ktor in the back.. There seems to be an receieving data on the reactJs side.. I can hit the server with a rest client (insomnia) and I am getting the expected data but when I try to make a call from

jsonClient.get(endpoint + "/")

I am getting a NoTransformationFoundException .. I noticed that the content type is text/html but not sure if that is the cause of the issue.. any help would be appreciated.. also I configured my httpClient like this

val jsonClient = HttpClient {
  install(JsonFeature) { serializer = KotlinxSerializer() }
  followRedirects = true

}

Hey guys, how can I get this to work, I am again getting confused by ReactNode and Elements. I have this attribute on a wrapper ComponentClass

var renderCustomHeader: (Date, (Int) -> Unit, (Int) -> Unit,
                         () -> Unit, () -> Unit,
                         Boolean,
                         Boolean) -> ReactNode?

And I use it like so

attrs.renderCustomHeader = {
                date,
                changeYear,
                changeMonth,
                decreaseMonth,
                increaseMonth,
                prevMonthButtonDisabled,
                nextMonthButtonDisabled,
            ->
                div {
                     //other stuff
                 }
}

I tried using createElement, but then the

changeYear, changeMonth

aren't usable

Uncaught TypeError: this._$changeMonth is not a function

Hello Guys, how do you build you docker images for node.js?

Trying to use spread from JS on a Kotlin JS (IR) class object, but it’ll use the mangled fields. Are there any issues/design notes on this?

@JsExport
data class Shape(val type: String, val sides: Int)

const a = new Shape("square", 4)
const obj = {...a}

Expected:

{ type: "square", sides: 4 }

Actual:

{ _type_1: "square", _sides: 4 }

I'm running into an error when running

jsBrowserWebpack

which just says "See log for details", but I don't see any webpack output in the log. Is there some other log to check? I was able to figure out that the error was caused by a webpack config error through other means, but I'm still confused why there was no errors in the log output. Stacktrace:

Caused by: java.lang.IllegalStateException: Error occurred. See log for details.
	at org.jetbrains.kotlin.gradle.internal.ExecKt$execWithErrorLogger$1.invoke(exec.kt:83)
	at org.jetbrains.kotlin.gradle.internal.ExecKt$execWithErrorLogger$1.invoke(exec.kt:76)
	at org.jetbrains.kotlin.gradle.internal.ProgressKt.operation(progress.kt:21)
	at org.jetbrains.kotlin.gradle.internal.ProgressKt.operation$default(progress.kt:12)
	at org.jetbrains.kotlin.gradle.internal.ExecKt.execWithErrorLogger(exec.kt:76)
	at org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackRunner.execute(KotlinWebpackRunner.kt:31)
	at org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack.doExecute(KotlinWebpack.kt:287)

Is it correct that the IR bundle size is around 4000 lines or am I missing a DCE flag? (

jsBrowserProductionWebpack

) There are 22 lines in the bundle which are actually related to

Shape

which on their own just work as expected (47kB vs 600 byte)

@JsExport
data class Shape(val type: String, val sides: Int)

Hey guys ! I'm working on kotlin multiplatform with IR js compiler and I wonder some few things about the ability of using kotlin collections in js. I have created a stack-overflow post about it : https://stackoverflow.com/questions/70437501/kotlin-multiplatform-ir-js-how-to-simply-use-kotlinx-collections-from-js-m Hope someone know a bit about this issue ! (We can talk about it here (not necessarily on stack))

how do you import a NPM package which exports a function, not a module? e.g. the JS looks like

module.exports = function...