Hello, we have such setup for a

react

project with KotlinJs. https://github.com/novoda/spikes/blob/master/game-of-life-multiplatform/web/build.gradle The below gradle script is something we copy pasted. When I upgrade to Kotlin version

1.2.21

, the task mentioned in the very bottom

copyDependenciesKotlinJs

is gone. Since I don’t understand the setup, I’m really not sure how to fix it.

task copyStatic(type: Copy) {
from "$rootDir/src/web"
into "$buildDir/web"
}

task buildBundle(type: NpmTask, dependsOn: [npmInstall, runDceKotlinJs]) {
args = ["run", "dist"]
}

task copyKotlinJs(type: Copy, dependsOn: compileKotlin2Js) {
def workDir = "$buildDir/classes/main/"
from(workDir) {
include "*.js"
include "*.js.map"
}
into "$workDir/dependencies"
}

task devBuild(dependsOn: [npmInstall, copyStatic, copyKotlinJs])

assemble.dependsOn buildBundle, copyStatic

afterEvaluate {
copyKotlinJs.dependsOn copyDependenciesKotlinJs
}

Can someone point me to an up to date

kotlin2js

example with the latest kotlin version and with

react

,

react-dom

and

kotlinx-html-js

?

Is it possible to use kotlinx.coroutine with create-react-kotlin-app?

how to show alert with kotlin js ?, I have expected that it will be easy as with console.log

there is a “kotlin way” for CSS?

Is there an easier way to debug Kotlin/JS? Currently I just use Chrome’s Dev Tools

Is it a bug ?

interface GeoJson{
    val type:String
    val coordinates:Array<*>
    
    fun asPoint() = Point(coordinates as Array<Double>)
}
data class Point(val coordinates:Array<Double>)   

fun main(args: Array<String>) {        
    val json = """{"type":"Point", "coordinates":[1.0, 2.0]}"""  
    val obj = JSON.parse<GeoJson>(json).asPoint()        
    println("${obj.coordinates}")
}

https://try.kotlinlang.org/#/UserProjects/2fobglofrrpnr9b0pru299uu31/6d1saqhqrbndev90djqurmuiv0

get a lot of these errors

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid referrer policy

What does it mean that we enable/disable sourceMaps in

kotlin-frontend-plugin

? https://github.com/Kotlin/kotlin-frontend-plugin

I am trying to define a kotlin external class for a javascript class. But how do I access its static members (the properties defined on the javascript constructor function)

One possible way to do it is this:

external class Foo {
  // instance members
}

JsName("Foo")
external object FooConstructor {
  // static members
}

Any good practices for typing option objects?

I'm trying to get started with kotlin/react. But just the first step for running the sample project fails hard. Using create-react-kotlin-app, it can't even load. I got

Kotlin.defineModule is not a function

. In the console :`Object.kt:20 Uncaught TypeError: Kotlin.defineModule is not a function`

Usually it's cured by

rm -rf node_modules/.cache

. Unfortunately we haven't found a permanent fix at the moment

I try to use kotlin-js to get data from external webservice. I try with this code :

val request = XMLHttpRequest()
request.open("GET", endpoint, false)
request.send(null)
if (request.status.toInt() == 200) {
  return JSON.parse(request.responseText)
}

And I get this error :

XMLHttpRequest is not defined

. My code run on NodeJS and NodeJS doesn't have XMLHttpRequest... Should I use another lib and wrap it ?

I'm trying to attach an intellij ultimate debugger to Chrome to debug kotlin code running in browser. I'm getting an error:

Use jsonreader.setlenient(true) to accept malformed json at line 1 column 1 path $

. Should I be using the "Attach to Node.js/Chrome" configuration, or is there a better way? I can see my kotlin sources and everything in the browser, just trying to get it to work in the IDE as well.

@albertgao This is how I debug tests: My tests are done with karma -> mocha -> qunit. When I need to do some debugging, I use this karma configuraton:

module.exports = function(config) {
    config.set({
        frameworks: ['qunit', 'browserify'],
        reporters: ['mocha'],
        files: [
            'build/classes/kotlin/main/*.js',
            'build/classes/kotlin/test/*.js',
            'build/node_modules/*.js',
            {pattern: 'build/classes/kotlin/test/*.json', watched: true, served: true, included: false}
        ],      
        colors: true,
        logLevel: config.LOG_INFO,
        browsers: [
            // 'ChromeHeadless',
            // 'PhantomJS',
            'Chrome'
        ],
        // singleRun: true,
        singleRun: false,
        autoWatch: false,
        captureTimeout: 5000,

        // singleRun: false, // Karma captures browsers, runs the tests and exits

        preprocessors: {
            '**/*.js': ['browserify']
        }
    })
};

Using Chrome instead of PhantomJS or ChromeHeadless with

singleRun: false

will launch chrome with the debug interface. You can then launch the test and use the chrome dev tools.

The other option for kotlin js test code that runs without the browser api, is to launch the test with only mocha+qunit. You can then create a mocha run configuration inside intellij and do some debug from intellij.

I'm trying to use coroutines in JS, but I'm getting an error:

Cannot find module "kotlinx-coroutines-core-js"

. How should I be packaging the coroutine library (or any library written in kotlin for that matter)? My instinct was to check npm, but didn't find anything. If I use the DCE plugin, it outputs all the JS files in one place which is nice, but how do I get the non-minified js files for kotlin-js libraries I'm using? Right now, the only thing I can think of is to check out the github.

I don't know what I'm doing with it. I'm reading the documentation but when trying to write code I'm blinded. I tried to mark a dir as a source but it asked for a Kotlin/JVM configuration. And I know that when using something like Angular requires the tool ts2ks but I'm using AngularJS so not sure how that's working out. Unless the way that writing kotlin/js code in intellij is different than write kotlin/jvm (tools-wise)

Say I have this javascript

new $.Zebra_Tooltips(elm, {});

Is the only way to call new to have a class constructor in Kotlinjs ?

Like js "delete"

Make it a

var

and set it to

null

?

I would have say some thing like

js("'undefined'")

just call

require

(i.e. clearly for side-effect) rather than assigning it to a val?

I've been seeing a lot of talk about web assembly lately. I'm sure you guys get this all the time but is it currently on the radar as compile target for Kotlin?

After the callback hell there is the js testing frameworks hell: how to find the correct configuration that works. testing coroutines works with mocha but not qunit. testing browser code needs karma. testing multi-module code needs a testing framework compatible with requirejs or commonjs or to pack modules before tests. packing modules is long karma + commonjs is fast but not working on windows. karma + browserify + qunit is slower but works also on windows (but doesn’t work with coroutines). #jsfatigue 😪

Does anyone have a solution to compiling multiple .kt files into separate independent .js files, instead of the default where multiple .kt files are compiled into one single .js file?

Did anyone have problems with

src/main/kotlin

not being marked as source folder in IntelliJ when using Gradle?

plugins {
    id("kotlin2js")
}

dependencies {
    compile(kotlin("stdlib-js"))
}