I sometimes get

JavaScript name (foo_cbqzx6$) generated for this declaration clashes with another declaration

but I cannot really see why it happens for some functions but not for others. Could it be a bug I should report?

If we interact with TS framework, which expect that TS classes is inherited with TS

extends

, we get defective inheritance (in short, it does not work). As workaround I do such thing:

class Kotlin : TypeScript() {
    init {
        tslib.__extends(Kotlin::class.js, TypeScript::class.js)
    }
}

Can this be done somehow more elegantly / correctly? I think extending of TS class should be supported by Kotlin/JS. With annotation of external TS class or somehow else.

this::class.supertypes

is marked as supported for JS in the documentation. But in fact compiler produce error

Unsupported [This reflection API is not supported yet in JavaScript]

Anybody had a look to https://svelte.dev? I like it, and I am wondering how such approach could be implemented in Kotlin. Compiler plugin?

According to the KotlinJsDcePlugin.kt source code:

project.afterEvaluate {
            val outputDir = project.buildDir
                .resolve(DEFAULT_OUT_DIR)
                .resolve(kotlinCompilation.target.disambiguationClassifier?.let { "$it/" }.orEmpty() + kotlinCompilation.name)

            val configuration = project.configurations.getByName(kotlinCompilation.compileDependencyConfigurationName)

            with(dceTask) {
                classpath = configuration
                destinationDir = dceTask.dceOptions.outputDirectory?.let { File(it) } ?: outputDir
                source(kotlinTask.outputFile)
            }
        }

the

destinationDir

variable is not available until

afterEvaluate

. Is there a specific reason? In my build file I have this:

task assembleWeb(type: Sync) {
  configurations.compile.each { File file ->
    from(zipTree(file.absolutePath), {
      includeEmptyDirs = false
      include { fileTreeElement ->
        def path = fileTreeElement.path
        path.endsWith(".js") && (path.startsWith("META-INF/resources/") ||
            !path.startsWith("META-INF/"))
      }
    })
  }
    from compileKotlin2Js.destinationDir
    // from runDceKotlinJs.destinationDir
  into webDir.child("dynamic").child("js")
  
  dependsOn classes
}

and

compileKotlin2Js.destinationDir

is available... but if I uncomment

runDceKotlinJs.destinationDir

it is

null

unless I wrap the entire thing in

afterEvaluate{}

. That doesn't seem right...

Is there any way to use kotlin resources in webpack bundle in Kotlin/JS 1.3.40? Now there is error

ERROR in ....
  Module not found: Error: Can't resolve 'foo/bar.svg' in ...

Moreover, Kotlin's concept of suspending function provides a safer and less error-prone abstraction for asynchronous operations than futures and PROMISES. Could someone explain why this is true?

Hello everyone. I've been playing around with kotlin in browser and faced such a thing, that kotlin-js does not provide exception stacktrace. It seems a little bit strange and uncomfortable, but I guess it is because there is no standardized stacktrace feature in javascript. Haven't I missed something? May be anyone can hint some library that expose stacktrace as an extension? I didn't found any. 😞

Such code

js("{'Content-Type':'application/json'}")

Produce:

{Content-Type: 'application/json'}

Content-Type

without quotes is not valid js code. Produce error

Unexpected token

Is it compiler bug or I miss something?

Hey friends, I've been writing some Kotlin/JS code and had some questions about how to handle JS blobs in a nicer way. I noticed that if I have a method that takes in

data class Foo(val bar: Int)

as a parameter, I can call it from JS and pass in the blob

{"bar": 1}

and it will Just Work. Is this officially supported, or is it just an unreliable side-effect of how Kotlin/JS internally represents data classes? Does this work with nested classes (e.g.,

data class Foo2(val myBar: Bar)

and

data class Bar(...)

)? If I had a class that was declared as

data class Foo3(val bar: SomeEnumClass)

, is there a simple way to allow me to call it from JS using a blob with an

Int

map it to

SomeEnumClass

in Kotlin? Maybe something like an alternate constructor or property with a backing fields?

It seems that source mapping doesn't work properly for now, isn't it? Is it known problem? It seems, that it can be fixed, using

compileKotlinJs {
    kotlinOptions {
        sourceMapEmbedSources = "always"
    }
}

But I think, it should be more elegant

I've got a noob question. I have an Element and I want to attach another element (threejs canvas) to it using element size for the canvas. Then I need to resize canvas when parent element is resized. Simple

element.clientWidth

works with bootstrap columns, but if I have some kind of inner structure,

element.clientWidth

returns zero. As far as I can understand it happens because when I take the measurement, the element is not yet rendered. What is the best way to treat this problem?

SVGAnimateElement isn’t declared in Kotlin/JS stdlib. Is there any roadmap for such cases? https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimateElement

Hi, I've been trying to stand up some tests in a project using the new browserTest task for the Koltin/JS 1.3.40 plugin and seem to be having inconsistent results with it finding test sources. Is there anything I can do to point it at the specific source set? Right now, the task runs fine but it finds nothing inside of the test source. Thanks!

Hello, do the new

org.jetbrains.kotlin.js

gradle plugin has capabilities to deploy the code as an npm module? Where can I find its documentation?

What is the way to (manually) test a Kotlin/Multiplatform library's Javascript side in an HTML page? Essentially have a frontend sub-project in which I can use the library in.

Hello, I was wondering, is there someone working a on framework for building webapps using kotlin without having to use HTML? It’s just out of curiosity. WebAssembly will (not only) bring the possibility to use alternatives to JavaScript. Maybe something similar can be thought about HTML + CSS. Flutter allow to target the web. Basically, they are rendering in a canvas. (I don’t know what will be the solutions proposed for accessibility, text editing and so on). Some people from the Swift community did something from SwiftUI (just a toy though) https://github.com/SwiftWebUI/SwiftWebUI, creating actual HTML. And recently another typescript framework has been released, with an API close to what we can find on mobile (https://typescene.dev) also creating HTML.

How can I access an

object

from Javascript`? Kotlin:

package foo.bar

object Obj {
    fun func() = 2
}

JS:

var x = foo.bar.Obj.func() // Invalid!

Hello, I wanted to try the now Kotlin/JS, especially the npm support. I create a new project in Intellij (Gradle, with Kotlin DSL, and Kotlin/Js/Browser). Running it works just fine. But I have a message when I want to edit

build.gradle.kts

,

There were some errors during scripts dependencies resolution, some resolution might be missing

. When I try to use the function

npm

it says it’s unresolved:

implementation(npm("lib", "0.0.0"))

I am using Kotlin 1.3.41

Is there an annotation/configuration that will cause Gradle to output compiled kotlin/js to a different “package”? I have a multiplatform lib that I’m building which compiles to JVM and JS, and I was hoping to not have to use the fully qualified package name to call shared code from JS-land.

Hi guys, is there a way to incrementally migrate a TS code base to Kotlin/JS? A bit of context. I have a Gradle multi-project build which consists of: - a Spring Boot server (in Kotlin) - a React app (in typescript) built using Create React App and the Gradle node plugin on top of it I have recently extracted the API client code from the TS subproject into a Kotlin common (multiplatform) subproject of its own. Now, I'd like to setup a Gradle build for the React app that can depend on the local multiplatform subproject, and that can compile the existing TS files. Is this possible? In the end, the goal is to migrate little by little the whole React app to Kotlin.

How to properly call

suspend

function from

js

site? or are we shouldn’t call at all?

This might just be me not knowing much about Webpack, but how can I call my Kotlin/JS browser code from a Webpack bundle generated with the 1.3.40 multiplatform lib? I’ve got my multiplatform lib set up, run

jsBrowserWebpack

to create the bundle, and added it to my HTML page with a

<script>

tag, but i can’t figure out how to access my module from there

Hi, Do you know a website created using Kotlin/JS?

And I have another question. Can we hide a

kotlin.js

file on website created using Kotlin/JS ? I download the kotlin.js file when I open this website(https://turanukimaru.github.io/FEHSIM/). So, I can’t find the website created by Kotlin/JS if we can hide a kotlin.js file. I saw it by network tab in chrome developer tools.

how can I use kotlin-stdlib-js dev or local SNAPSHOT by gradle kts I try this , but it can not work

I’ve been trying to specify dependencies with few different approaches:

implementation(npm("@jetbrains/kotlin-react", "16.6.0-pre.67"))
                implementation(npm("@jetbrains/kotlin-react-dom", "16.6.0-pre.67"))

in

js{}

and

js{ browser {} }

sections as well as

kotlinFrontend {
    npm {
        dependency("@jetbrains/kotlin-react")
        dependency("@jetbrains/kotlin-react-dom")

        dependency("core-js", "^2.0.0")
        dependency("react", "16.8.3")
        dependency("react-dom", "16.8.3")
    }
}

but it does not help. Posted in #react

Such code:

external interface A {
    fun foo(p1: Any)
}

fun main() {
    A::foo.name
}

produce such js code:

getCallableRef('foo', function ($receiver, p1) {
      return $receiver.foo(p1), Unit;
    }).callableName;

It looks like a lot of excess. I expect just

'foo'

.

Hey im trying to find why an unmodified brand new project made in IntelliJ from Kotlin -> JS Client and JVM server | Gradle fails to build with

C:\Users\User\IdeaProjects\TestMulti2\build\js\packages\TestMulti2\node_modules\.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
    at startup (internal/bootstrap/node.js:283:19)

FAILURE: Build failed with an exception.

Like I said, this is a project created fresh from the template with 0 modifications made. Thanks in advance.