kotlinlang #javascript

so im doing something silly, but I dont know what. trying to build my first js app but kotlin.js isnt being included in the jar, so i cant extract it and therefore use it on my page, any thoughts?

hellotimmutton

03/01/2018, 11:46 AM

ok, came back to the problem with a fresh mind. the tutorials need to be updated to say

configurations.compileClasspath

instead of

configurations.compile

to work with gradle 4

👍 1

robstoll

03/01/2018, 1:08 PM

I just started with kotlin-js and was wondering if there is an abstraction for checkbox. I found HTMLInputElement but would want something more specific. Is there something in the stdlib which I could not find?

Danilo

03/01/2018, 4:25 PM

The project starts and run ok. Its just that in Intellij the autocompletion will not work.

mmaillot

03/02/2018, 9:37 AM

Hi, I try to create a wrapper around expressjs (with enhancements). I have this code :

@JsModule("express")
external class Express {
    fun get(route: String, callback: (req: Request, res: Response) -> Unit)
    fun listen(port: Int, callback: Callback?)
}

And I create a class ExpressKt to overload express :

class ExpressKt(private val express: Express = Express()) {
    fun listen(port: Int, callback: Callback) {
        express.listen(port, callback)
    }
}

And finally the code to run :

fun main(args: Array<String>) {
    //val app = Express()
    val app = ExpressKt()
    app.listen(3000, {
        println("Listening on port 3000")
    })
}

But when i compile code, the index import the wrong library (

module.exports, require('kotlin'), require('lib'))

Leon Linhart

03/02/2018, 5:34 PM

I recently started looking at Kotlin/JS and I'm curious as to why extension functions are not translated using object prototypes. I've seen https://youtrack.jetbrains.com/issue/KT-11681 but that does not give an explanation either. Was this a deliberate design decision or has this just never been implemented?

deviant

03/03/2018, 1:11 PM

does anyone expecting this issue with

frontend

plugin?

3874 verbose stack Error: Command failed: C:\Program Files\Git\cmd\git.EXE submodule update -q --init --recursive
3874 verbose stack C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 19: .: git-sh-setup: file not found
3874 verbose stack
3874 verbose stack     at ChildProcess.exithandler (child_process.js:275:12)
3874 verbose stack     at emitTwo (events.js:126:13)
3874 verbose stack     at ChildProcess.emit (events.js:214:7)
3874 verbose stack     at maybeClose (internal/child_process.js:925:16)
3874 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
3875 verbose cwd C:\dev\git\react-tutorial-kotlin\build
3876 verbose Windows_NT 10.0.16299
3877 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\mykola\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
3878 verbose node v8.9.4
3879 verbose npm  v5.6.0

deviant

03/03/2018, 1:21 PM

and finally when i add

devDependency("webpack", "3.11.0")

kotlinFrontend.npm

section i've got:

webpack-dev-server exited with exit code 1, see C:\dev\git\react-tutorial-kotlin\build\logs\webpack-dev-server.log
C:\dev\git\react-tutorial-kotlin\build\node_modules\webpack-dev-server\lib\Server.js:71
    comp.hooks.compile.tap('webpack-dev-server', invalidPlugin);
               ^
TypeError: Cannot read property 'compile' of undefined
    at addCompilerHooks (C:\dev\git\react-tutorial-kotlin\build\node_modules\webpack-dev-server\lib\Server.js:71:16)
    at new Server (C:\dev\git\react-tutorial-kotlin\build\node_modules\webpack-dev-server\lib\Server.js:81:5)
    at Object.<anonymous> (C:\dev\git\react-tutorial-kotlin\build\webpack-dev-server-run.js:51:17)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)

✅ 1

deviant

03/03/2018, 5:15 PM

guys, can anybody explain why this works?

kotlinext.js.require("App.css")

while this doesn't:

@JsModule("App.css")
external interface AppCss

am i doing it wrong?

lukeschmidt

03/05/2018, 4:30 AM

Hello everyone! I’m trying to pass a Kotlin React Component into another function from the

react-redux

library, but I keep getting the error:

You must pass a component to the function returned by connect.

val connected = connect(
        ::mapStateToProps,
        ::mapDispatchToProps
)


fun RBuilder.AppContainer() {
    div {
        connected(App()) // Pass Component Here
    }
}

What would the correct syntax be to pass this component to the

connected

function? Note: I’m just using the App Component from the

create-kotlin-react

repo that looks like this:

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div("App-header") {
            logo()
            h2 {
                +"Welcome to React with Kotlin"
            }
        }
        p("App-intro") {
            +"To get started, edit "
            code { +"app/App.kt" }
            +" and save to reload."
        }
        p("App-ticker") {
            ticker()
        }
    }
}

fun RBuilder.app() = child(App::class) {}

araqnid

03/05/2018, 5:32 PM

I was just trying to add it to a small project built with create-react-kotlin-app (which I despise while finding useful)

araqnid

03/05/2018, 5:43 PM

I changed

-js.js

to just

.js

in the

main

entry in

kolinx-couroutines-core/package.json

and it compiles now, so I'm continuing on

araqnid

03/05/2018, 5:52 PM

now getting just a

TypeError: Cannot read property 'facade' of undefined

when using

suspendCancellableCoroutine

with a stack trace that is mixing function names in my code with filenames from library code; fun times!

lewik

03/06/2018, 9:32 AM

How to use kotlin frontend plugin with dce to get directory with "clean compiled site with html, css and all deps"? Should I enable dce in plugin? How?

Talon

03/07/2018, 6:20 PM

Is there an error class that works cross platform?

Filipp Riabchun

03/09/2018, 3:41 PM

external interface AttachmentOptions: {
  val data: File,
  val filename: String
}

@JsModule("mailgun-js")
external object mailgun {
  class Attachment(options: AttachmentOptions)
}

mailgun.Attachment(object: AttachmentOptions {
  override val data = file
  override val filename = filename
})

mmaillot

03/09/2018, 4:03 PM

Thank you @Filipp Riabchun

external interface AttachmentOptions: {
  val data: File,
  val filename: String
}

runjorel

03/09/2018, 9:52 PM

When building a kotlinJS app, is it recommended to use gradle or go with something else? Main reason I ask is I see a lot of blogs using gradle, but if I create a Kotlin/JS app from the IDE no

build.gradle

is generated there.

jonathan

03/11/2018, 10:52 AM

When using the

kotlin-frontend-plugin

, how can I minify the output bundle? The example on the project's GitHub is outdated and causes a crash with the latest webpack:

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead

gildor

03/12/2018, 7:50 AM

with coroutines it would be much more pleasant

robstoll

03/12/2018, 8:04 AM

I was not aware of that coroutines work for JS, that's great 🙂 Following my initial example in pure JS:

new Promise(function(resolve, reject) {
	resolve({
		ok: true, 
		text: function() {
			return new Promise(function(resolve, reject){ resolve("{json: 'body'}") })
		}
	})
}).then(function(response) {
	return response.text().then(function(text) {
		if (!response.ok) {
			reject('response was not ok...')
		}
		return text
	})
}).then(function(body){
	alert(body)
})

body isn't a promise in the last

then

but the string resolved from text()

robstoll

03/12/2018, 8:11 AM

hm... what is necessary to get the

await

function? It seems it is not enough to depend on

org.jetbrains.kotlinx:kotlinx-coroutines-core-js

runjorel

03/13/2018, 2:43 AM

Alright, figured out what I was trying to do. Will leave here for future. Was trying to create a facade/extern object to interface with

express.js

. The fun part is that the express module is exported as a function that also has properties/other functions. https://github.com/expressjs/express/blob/master/lib/express.js#L28 So it was difficult to mimic the api as it is used in javascript as so (just as an example):

let router = express.Router()
let app = express()

😱 1

👍 1

runjorel

03/13/2018, 2:44 AM

to mimic that same behavior in kotlinjs:

@JsModule("express")
external object express {
    @JsName("call")
    operator fun invoke(): Application

    fun Router(): Router
}

allows you to do this in kotlinjs:

val router = express.Router()
val app = express()

👍 3

gaetan

03/13/2018, 11:44 AM

Apparently, nobody succeeded. I already spend a couple of hours on it without success so I keep my gradle

populateNodeModules

task. But I think I miss something. See https://youtrack.jetbrains.com/issue/KT-20210

chadmorrow

03/14/2018, 8:35 PM

when i debug my code, i can only get it to go through the javascript code. I can’t get the sourcemaps to work that would let me step through the kotlin code i wrote that got compiled to js

mmaillot

03/15/2018, 1:41 PM

I want to do this code with kotlinJS :

const point = new lib.Point(x, y)

I tried :

val lib = require("lib")
val point = lib.Point(x, y)

I got an error because KotlinJS generate this :

const point = lib.Point(x, y)

How to force a new ?

Adam Risberg

03/15/2018, 4:02 PM

Has anyone dared to use Kotlin/JS in production yet?

🍿 1

03/15/2018, 4:26 PM

yep. works fine.

Danilo

03/15/2018, 8:12 PM

I tried to use the debugger, just for simple tests, my debugger works and the code works too, but the strange thing is following the classes, imports isn't working in IntelliJ with the create-react-kotlin-app. This was possible when using the gradle version. Is this still possible?