cross posting here cause it seems relevant

Hi all, Im trying to build ui in kotlin/js, at this moment strugling with sign up component. Im trying to use fetch() to post login&password to my API.

val post = window
.fetch(URL, RequestInit("post",HEADER,"{$bodyVar})

But its ending with error:

Failed to execude 'fetch' {...} Failed to read 'headers' from RequestInit

Already i try few types of typing header but all ends with same result. How fetch function should looks? How i can but header to IT? I want to put Content-Type and Authorization

Task

:compileDevelopmentExecutableKotlinJs

can really make your day so bad. I am currently getting this error

e: java.lang.IllegalStateException: Variable name is not found user
        at org.jetbrains.kotlin.ir.backend.js.utils.JsGenerationContext.getNameForValueDeclaration(JsGenerationContext.kt:65)
        at org.jetbrains.kotlin.ir.backend.js.transformers.irToJs.IrElementToJsExpressionTransformer.visitGetValue(IrElementToJsExpressionTransformer.kt:106)
. . .

It is a kotlin compiler error. Has anyone being getting this? It worked a few minutes ago. I ddn't change any dependencies. Using Kotlin 1.5.30

Hello I am new to build apps with Kotlij JS I want to have a suggestion for which framework to use for UI • Kotlin - react • Compose for web PS: we are going to use jetpack compose for Android and potentially Desktop But want opinions here

Hey guys, I just started working for a company that has a small tornadofx app that saves some data to a database using exposed. The tornado app will run fullscreen on a small linux computer with a touchscreen (where users fill in their data). Now they also want a web app to view the data from said database, and this web app also needs to run on the same linux computer, but I’m having trouble choosing the correct tools and have some questions: • Would ktor (with freemark) or kotlin/js(react) be better for this? • I know it’s possible to make this a multiplatform project but is it possible to put this whole project into one package (so everything is started with 1 executable)

Hi, good night! I am having some trouble compiling a Kotlin file targeting Node environment from the command line. I wrote a Stack overflow question here

Does anyone have (or is anyone working on) an efficient workflow for generating/maintaining

external interface

s for `data class`es when working in a multiplatform project with JS targets? What about generating/maintaining the methods to map between the two? Context/Problem: We've written some `external interface`s for JS interop for methods that use simpler classes, but for complicated, nested, interconnected classes, it's a lot of effort to maintain this code. We're currently using

kotlinx.serialization

and

encodeToDynamic

/`encodeFromDynamic` to handle those complicated types. The developer experience within KMP when using

kotlinx.serialization

is much nicer, but: 1. we get

dynamic

types back instead of rich

external interface

s, so we don't get typescript definitions 2. serialization's json artifact is extremely heavyweight for this on web because it pulls in full JSON support for strings and JsonElement trees when we really just need lightweight methods that create and return plain JS objects as described here Potential Solution? It seems like those two problems above might be separately solvable? 1. Could be solved with an annotation processor to generate `external interface`s for classes annotated with

@Serializable

(or some other annotation) (which we can then cast the serialization-generated `dynamic`s to/from) 2. Can maybe be solved with an alternative serialization format that is a. only usable by the

js

target, b. operates directly on JS `Object`s, and c. excludes all the heavy stuff for string or JsonElements in the official

json

format If this sounds like stuff that anyone else is working on or running up against, I'd love to chat!

I'm writing a multiplatform library and stuck with casting a

Double

. Here is an example:

val n = 1.1 as Any
if (n is Number) {
    println(n.toLong())
    println(n.toLong() == 1L)
}
if (n is Int) {
    println(n.toLong())
    println(n.toLong() == 1L)
}

Both conditions are resolved to

true

(I know that Javascript hasn't integer numbers so its ok). But what is more interesting it prints:

1
true
1
false

When I use

kotest

it fails with

expected:<1L> but was:<1.1L>

.

1.1L

looks really strange for me.

Hi all, I’m trying to export 3 very simple classes.

@JsExport
open class MyFirstClass {
    open fun myFirstClassFunction() {
        println("################ MyFirstClass")
    }
}

@JsExport
open class MySecondClass {
    open fun mySecondClassFunction(){
        println("################ MySecondClass")
    }
}

@JsExport
open class MyThirdClass {
    open fun myThirdClassFunction() {
        println("################ MyThirdClass")
    }
}

Basically, these classes are the same. After compile, a get d.ts. file and .js d.ts. file looks like:

export class MyFirstClass {
    constructor();
    myFirstClassFunction(): void;
}
export class MySecondClass {
    constructor();
    mySecondClassFunction(): void;
}
export class MyThirdClass {
    constructor();
    myThirdClassFunction(): void;
}

but, the .js file added some numbers beside the methods name

MyFirstClass.prototype.myFirstClassFunction_0 = function () {
    println('################ MyFirstClass');
  };
  MyFirstClass.$metadata$ = {
    simpleName: 'MyFirstClass',
    kind: 'class',
    interfaces: []
  };
  function MySecondClass() {
  }
  MySecondClass.prototype.mySecondClassFunction = function () {
    println('################ MySecondClass');
  };
  MySecondClass.$metadata$ = {
    simpleName: 'MySecondClass',
    kind: 'class',
    interfaces: []
  };
  function MyThirdClass() {
  }
  MyThirdClass.prototype.myThirdClassFunction_3 = function () {
    println('################ MyThirdClass');
  };
  MyThirdClass.$metadata$ = {
    simpleName: 'MyThirdClass',
    kind: 'class',
    interfaces: []
  };

After inheritance like in example

class MyFirstClassTS extends MyFirstClass {
  constructor() {
    super();
  }
  myFirstClassFunction() {
    <http://console.info|console.info>("############ MyFirstClassTS")
  }
}

class MySecondClassTS extends MySecondClass {
  constructor() {
    super();
  }
  mySecondClassFunction() {
    <http://console.info|console.info>("############ MySecondClassTS")
  }
}

class MyThirdClassTS extends MyThirdClass {
  constructor() {
    super();
  }
  myThirdClassFunction() {
    <http://console.info|console.info>("############ MyThirdClassTS")
  }
}

in console I got very different result as in picture below.

It seems once again Kotlin/JS is broken because of some new npm dependency.

Hi 👋 . I'm struggling a bit with execution environments. I just got

Please choose a JavaScript environment to build distributions and run tests.

. I understand the need to specify browser or nodejs for running tests but how does that impact building distribution? I'm building a lib and I would expect the lib to be consumed from both browser and nodejs project so it feels weird having to chose one there.

anyone else getting the webpack-cli/serve error since that dependency was updated to 1.6.0 in the background?

It seems kotlin-js pulls in the latest webpack with a new bug that is preventing

jsBrowserDevelopmentRun

from doing its thing. Is anyone else running into this? Or better still, have a workaround? Basically, started happening after I did a gradle clean on my fritz2 project. After this it pulled in the latest npm dependencies. Was working fine before the gradle clean.

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (/Volumes/SAMSUNG_2TB/git/formation/maptool/build/js/node_modules/webpack-cli/lib/webpack-cli.js:173:21)
    at ServeCommand.apply (/Volumes/SAMSUNG_2TB/git/formation/maptool/build/js/node_modules/@webpack-cli/serve/lib/index.js:41:19)
    at loadCommandByName (/Volumes/SAMSUNG_2TB/git/formation/maptool/build/js/node_modules/webpack-cli/lib/webpack-cli.js:907:35)
    at async Command.<anonymous> (/Volumes/SAMSUNG_2TB/git/formation/maptool/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1462:17)
    at async Promise.all (index 0)
    at async WebpackCLI.run (/Volumes/SAMSUNG_2TB/git/formation/maptool/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1500:9)
    at async runCLI (/Volumes/SAMSUNG_2TB/git/formation/maptool/build/js/node_modules/webpack-cli/lib/bootstrap.js:11:9)

It seems the solution is somehow downgrading webpack. https://github.com/webpack/webpack-cli/issues/2990

class TemplateParser : StreamParser {
    override fun token(stream: StringStream, state: dynamic): String? {
        console.log(stream, state)
        return null
    }
}

This gets compile to this JS:

function TemplateParser() {}
    TemplateParser.prototype.token_qt5re9_k$ = function(stream, state) {
        console.log(stream, state);
        return null;
    }
    ;
    TemplateParser.prototype.token = function(stream, state) {
        return this.token_qt5re9_k$(stream, state);
    }
    ;

Which crashes with

Uncaught TypeError: this.token_qt5re9_k$ is not a function

WTF?!

We are starting to have ES6 classes show up in our npm dependencies which breaks the generated code for super class constructor calling. I am sure it is possible to get webpack to transform it but my google-foo fails me. Can anyone help me out ?

Related, I assume that es6 output from the Kotlin compiler would fix this but progress seems very far away (https://youtrack.jetbrains.com/issue/KT-39650). Is that a fair assessment ?

anyone know if there's an equivalent to https://github.com/rickclephas/KMP-NativeCoroutines to automatically convert

suspend fun

to

Promise

?

Is there any workaround for KT-37710 aside from manually exporting all the classes? I'm trying to export definitions in the global namespace but none of the things I tried seems to work.

Hello there, is there a way to get the comments from kotlin to appear in the generated .d.ts file?? If so how??? or else, I might create an issue in YT. Just asking here for exhaustiveness

Is there a JVM implementation of the JavaScript

Number.toString()

method somewhere? (see https://youtrack.jetbrains.com/issue/KT-33358). I need to write some JVM code that maps 1:1 with some JS code.

Hi, My MPP is a lib that has JVM and JS targets. The library contains an object that launches a coroutine that polls a server on an interval while (isActive). This starts up first, but, in a JS app, it seems that it blocks the application from processing anything else in the library (or the application, for that matter). I'm assuming (and I'm not a JavaScript expert, nor do I intend to be) that the polling is blocking the main thread in Node, since when I disable that object, things seem to flow fine. Is my assessment correct? If so, what patterns/best practices can I use to solve for this? Thanks!

I get this relatively often in CI these last days:

Execution failed for task ':module:kotlinNpmInstall'.
You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
> Process 'Resolving NPM dependencies using yarn' returns 137

Anyone else noticing this? Any way to mitigate?

Hi all, When confiugring DCE in Gradle DSL, it now warns about:

This declaration is experimental and its usage should be marked with '@org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDceDsl' or '@OptIn(org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDceDsl::class)'

However, when I mark it with OptIn like so:

@OptIn(org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDceDsl::class)
dceTask {

then the above warning disappears, but I get a warning for the OptIn itself:

This class can only be used with the compiler argument '-Xopt-in=kotlin.RequiresOptIn'

I already enabled this compiler flag like so:

kotlin {
    sourceSets.all {
        languageSettings.optIn("kotlin.RequiresOptIn")
    }
}

However, this seems to enable the OptIn only for the app source code, but not for the Gradle build script itself. How can we enable @OptIn annotation for the Gradle build script itself, so we can annotate the dceTask with OptIn and not in turn get a warning for the OptIn usage?

Is there any way to get better stacktraces with IR? (screenshot in comments)

Hi. I have a KMP project with android/ios/js. What is the gradle task to export ALL (shared + js + dependencies) in one js file to use it in an electron app for example ? I don’t find much doc about that. We have tried build and jsBrowserDistribution but nothing seems to match what I need gradle js part

js(IR) {
    browser {
        commonWebpackConfig {
            cssSupport.enabled = true
        }
        binaries.executable()
    }
}

Hey everyone, a short question. I’m starting my first project in kotlin js. When typing code in my main function, I get no proposals for imports, nor any completion. I do get completion after I type ‘.’ when valid. Is that expected?

Alright, that seems to be coming from the project, though I’m not sure why. Other projects work alright. If anyone has an idea, I’m interested.

Hi, I have some experience with Kotlin Multiplatform on mobile, and recently I started getting into the JS side of things. To me, the main point of KMP was, that I can share business logic between clients on different platforms, regardless of UI framework. I was surprised to find, that the JS documentation seemed to focus heavily on creating a React App with Kotlin. I don’t want to tie myself down to React, and be at the mercy of the maintainers of the Kotlin wrapper for it. That’s why I’m looking into KMP in the first place, instead of some cross-platform UI framework. With a lot of googling (I could not find official documentation on this?), I found that it is possible to create a package with Typescript annotations when building a Multiplatform library with

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

which creates a folder inside the “build” folder called “productionLibrary”. This folder I could then import in my Angular App (or any other framework) with npm install absolutePathToProductionLibrary. I have a few questions about that: • Is this a/the recommended way to do this? • I can only find classes annotated with @JsExport in the generated Javascript/Typescript code, do I have to do that for everything? • I can’t annotate classes in the common/shared module of my Multiplatform library with @JsExport, how do I get those classes to show up in the generated JavaScript code?