kotlinlang #javascript

Docs

Join the conversation Join Slack

Channels

100daysofcode

androidgithubprojects

cincinnati-user-group

competitive-programming

event21-community-content

java-to-kotlin-refactoring

jvm-ir-backend-feedback

kotlin-multiplatform-contest

kotlinultimatechallenge

myndocs-oauth2-server

naming

navigation-architecture-component

practical-functional-programming

proguard

prozis-android-backup

refactoring-to-kotlin

russian-kotlinasfirst

skia-wasm-interop-temp

stayhungrystayfoolish

swagger-gradle-codegen

tricity-kotlin-user-group

javascript

Robert Jaros

12/12/2019, 11:37 AM

And another question: currently I have:

config.plugins.push(new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
}));

webpack.config.d/jquery.js

. With new Kotlin/JS plugin it fails with an error:

webpack.config.js:69
config.plugins.push(new webpack.ProvidePlugin({
                        ^
ReferenceError: webpack is not defined

Robert Jaros

12/12/2019, 2:05 PM

When running the project in dev mode, kotlin files from `src/main/kotlin' are compiled into

build/js/packages/[name]/kotlin/[name].js

but resources from

src/main/resources

are put into

build/processedResources/Js/main/

. When I try to

require

something from my code, webpack is unable to find these resources. Can it be configured somehow?

galex

12/12/2019, 2:17 PM

Is there a way to tell Kotlin/JS to keep all function names instead of adding a

@JsName

on each function?

👍 1

Robert Jaros

12/12/2019, 6:58 PM

Why are all the

*.js

files from

webpack.config.d

inlined into generated

karma.conf.js

when running

build

test

task? These files are for

webpack.config.js

and karma config is completely different .

Robert Jaros

12/12/2019, 7:01 PM

And why I've got this errors when running tests?

> Task :browserTest
12 12 2019 19:59:43.293:ERROR [preprocess]: Can not load "webpack", it is not registered!

  Perhaps you are missing some plugin?

12 12 2019 19:59:43.296:ERROR [preprocess]: Can not load "sourcemap", it is not registered!

Robert Jaros

12/12/2019, 7:02 PM

Anyone knows a project with working tests?

Robert Jaros

12/13/2019, 12:10 PM

How to make webpack use js files processed by DCE when generating final bundle?

Robert Jaros

12/13/2019, 1:57 PM

is something similar available or planned in the new plugin?

galex

12/13/2019, 6:48 PM

Does Dukat replaces the react-wrapper? Does it work already?

galex

12/14/2019, 5:06 AM

And what about https://material-ui.com/ ?

Bahaa Kallas

12/16/2019, 10:01 AM

#KotlinJS_Gradle when we do build for the first time the project compile with no issues. but when we do build again on top of the previous build everything becomes unresolved ( the code i mean ). so we clean first and then we build and everything looks fine is this the intended behaviour ? clean every time and then perform build i had to mention that after making clean all the code lines becomes unresolved until we do build again

Bahaa Kallas

12/16/2019, 10:37 AM

#KotlinJS_Gradle [SOLVED✅] we have kotlinJS project act as a library module for others kotlinJS projects we were able to migrate this project to use the KotlinJs gradle plugin by following the newly added docs and the project compiles successfully with no issues but now we are trying to use this project as a module for the other projects (which they also migrated) the problem happens in the

"ourLibraryModule":browserWebpack

task it fails for some dependencies (kotlin-react, kotlin-react-dom, kotlin-extensions, kotlinx-html-js) with the known error message “Module not found: Error: Can’t resolve etc.” we had this issue before when we tried to manage our projects using the kotlin frontend plugin but in the end we end up giving up on that some lines of code states how we doing this right now : in ourModule

build.gradle

sourceSets["main"].dependencies{
    api(npm("kotlinx-html","0.6.12"))
    api(npm("@jetbrains/kotlin-extensions","1.0.1-pre.89"))
    api(npm("@jetbrains/kotlin-react", "16.9.0-pre.83"))
    api(npm("@jetbrains/kotlin-react-dom", "16.9.0-pre.83"))
    }

in parent

build.gradle

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation(project(":ourModule"))
}

in ourModule

build.gradle

we have other dependencies but the webpack task fails only for those does anyone has this project setup and were able to do it by gradle ?

Bahaa Kallas

12/16/2019, 3:46 PM

#KotlinJS_Gradle in Kotlin frontend plugin we had this to configure the dev server but how to configure it now using kotlinJs gradle plugin ?

kotlinFrontend {
    webpackBundle {
        bundleName = "main"
        sourceMapEnabled = true | false   // enable/disable source maps 
        contentPath = file(...) // a file that represents a directory to be served by dev server)
        publicPath = "/"  // web prefix
        host = "localhost" // dev server host
        port = 8088   // dev server port
        proxyUrl = "" | "http://...."  // URL to be proxied, useful to proxy backend webserver
        stats = "errors-only"  // log level
    }
}

bjonnh

12/16/2019, 11:25 PM

https://kotlinlang.org/docs/tutorials/javascript/getting-started-gradle/getting-started-with-gradle.html this isn't up to date is it?

👍 1

bjonnh

12/16/2019, 11:55 PM

they are here in node_modules though

bjonnh

12/17/2019, 1:49 AM

Now I am struggling using my kotlin/js code from JS… do I have to declare the functions in a special way so they get recognized?

bjonnh

12/17/2019, 6:23 AM

val compileKotlin2Js by getting(org.jetbrains.kotlin.gradle.tasks.Kotlin2JsCompile::class)
compileKotlin2Js.apply { kotlinOptions.moduleKind = "commonjs" }

Egor Okhterov

12/18/2019, 10:02 AM

What is the use case for

plugins {
   kotlin("js") version "1.3.61"
}

if we can use

plugins {
   kotlin("multiplatform") version "1.3.61"
}

breandan

12/18/2019, 7:21 PM

In the KotlinConf keynote, Andrey mentioned that quick autoreload was coming soon to Kotlin/JS:

https://youtu.be/0xKTM0A8gdI?t=2076▾

~~Is this functionality currently supported? I was trying to get it running in the context of this tutorial, but so far unsuccessful:~~ https://play.kotlinlang.org/hands-on/The%20State%20of%20Kotlin%20JS/01_Introduction edit: (I have tried updating to

1.4.0-dev-74

and enabling Gradle's

--continuous

mode) edit #2: It now appears to work, updating to

1.4.0-dev-74

was not necessary. Previously was using

./gradlew run --continuous

but

./gradlew browserRun --continuous

was the correct command.

breandan

12/19/2019, 6:27 AM

Is there a list of libraries which Dukat can handle? I tried a bunch of libraries which come packaged with TypeScript declarations on NPM, but anything more complicated than

leftpad

seemed to fail with various build errors.

➕ 2

12/19/2019, 9:50 PM

is there anything in place to create an archive of the static resources and final js for deploying a webapp?

ian.shaun.thomas

12/20/2019, 6:18 AM

I needed a noise generator for a simple game I'm making and thought it would be interesting to port one to MPP and see how JS compares to the JVM when significant amounts of math ops are required. Apparently the answer is really poorly. https://github.com/ToxicBakery/Accidental-Noise-Generator If you're interested in watching your browser cry,

./gradlew :terrain-preview-web:run

. Has anyone tried anything similar for say some simple 3d backed by Kotlin JS? Wondering if you saw similar performance concerns doing quat maths or similar at higher frame rates.

Egor Okhterov

12/20/2019, 9:27 AM

How do you program moderm web apps? I am reasearching https://github.com/JetBrains/kotlinconf-app and I am scratching my head right now. There are 3 components: 1. Backend 2. Android Client 3. IOS Client Backend just responds to REST API requests and nothing more. Android and IOS client have their own Main() functions so they are fully functional applications themselves. How do you supposed to make a web client in this architecture? Is there supposed to be a second server which provides browsers with

index.html

and then javaScript in that index.html makes REST API requests to the original backend? Would you make a separate module for a web client (similar to andoid module) or you just make a

jsMain

sourceSet in the backend directory?

fkrauthan

12/21/2019, 7:55 PM

I am currently trying to setup a multiplatform project too but I am struggling with embedding the web app. It seems like

create-react-kotlin-app

is not the right choice (as that is more for standalone webapps with kotlin). The kotlin frontend plugin seem to be deprecated so I've tried it as plugin

multiplatform

and then only have

js { browser() }

configured (I assume that is currently the recommended way?). But now when I try to include the dependency to my commons library (which is also

multiplatform

and has

js()

as one of its target) I receive the error:

project ':clients:clients-common' is not configured for JS usage

any idea what I am missing or am I going completely off the rails with my setup?

👍 1

diesieben07

12/21/2019, 10:05 PM

Is there information about whether the new JS backend in 1.4 will bring better interop with the ecosystem, like we have on the JVM side? Some crucial things that are pain-points right now: • Kotlin modules are compiled into one giant .js file instead of compiling each Kotlin file into one .js file (using the module system of the underlying platform, such as commonjs or ecmascript modules). This makes it so tree-shaking and DCE needs to be re-invented from scratch instead of re-using the existing tools. • Calling Kotlin from Javascript is technically possible, but very painful, because the generated code is hard to comprehend (see point one, this would be greatly improved if there was a 1:1 mapping from .kt to .js files) • Calling Kotlin from Typescript is also technically possible, but even more painful, since you need to write declaration files for everything. • Calling Javascript from Kotlin requires writing declaration files (even if there are .d.ts files for the javascript code, see next point) • Typescript / Typescript declarations are entirely unused. The code generated by dukat never works if you have something more complex than "left-pad" (and it can't, because things like

type Foo = "foo" | "bar"

cannot be expressed in Kotlin). Another thing that I have noticed is that the kotlinx libraries (ktor, kotlinx.serialization, io) and the stdlib seem to think that they should be polyfilling things themselves if they are missing in the underlying platform. This leads to things like

<http://kotlinx.io|kotlinx.io>

requiring an outdated npm library (

text-encoding

) using dynamic calls to require (what if the underlying module system is not commonjs?) if the global

TextEncoder

API is not found. Instead it should be the user's responsibility (based on their browser support demands) to load an appropriate polyfill if required. There are great tools (babel and their preset-env) that make it so you can transpile modern Javascript code to run on older browsers and polyfill missing APIs (using core-js). Kotlin should imho use this amazing toolchain, instead of re-inventing the wheel. </rant>

👍 5

coolcat

12/22/2019, 8:24 PM

Hi all, I created a new Kotlin/JS project using the IntelliJ wizard. I created a file with a

fun main() {}

that does a simple print, and an

index.html

with

<script src="project.js"></script>

. I run the

jsBrowserRun

gradle task, and it works, I see the string printed in page console OK. But I also see

[WDS] Live Reloading enabled.

So I tried changing the printed string, and I see:

[WDS] App updated. Recompiling...
[WDS] Nothing changed.

Quitting and restarting the server makes the amended string appear. Any hints as to what I can do to make live reloading work correctly

fkrauthan

12/23/2019, 7:00 AM

I have another Kotlin JS multiplatform question. If I have a react app that uses the multiplatform plugin. Declares in the kotlin block

js { browser() }

how can I run it though the

kotlin-dce-js

plugin? Or is that at the moment not supported?

jdemeulenaere

12/23/2019, 5:49 PM

How are we supposed to use an NPM dependency using the kotlinjs plugin ? Are we supposed to import it in the html or will it be somehow automagically bundled in one big js ?

jdemeulenaere

12/23/2019, 5:50 PM

It's crazy how difficult it is to get started with KotlinJS if we want to use dependencies (e.g. PixiJS in my case)... The documentation really doesn't help at all

👍 2

Egor Okhterov

12/24/2019, 10:32 AM

Is there an RPC plugin that allows to specify interface in common code

data class User(val id: Int)

@RpcService
interface UserService {
  suspend fun getUsers(): List<User>
}

and generates client for use in Kotlin/JS

class HomeView : ReactDOMComponent<HomeView.Props, HomeView.State>() {
    prival val userService: UserService by removeServicesPlugin

    override suspend fun componentWillMount() {
        super.componentWillMount()
        state.users = userService.getUsers()
    }
}

Title

Egor Okhterov

12/24/2019, 10:32 AM

Is there an RPC plugin that allows to specify interface in common code

data class User(val id: Int)

@RpcService
interface UserService {
  suspend fun getUsers(): List<User>
}

and generates client for use in Kotlin/JS

class HomeView : ReactDOMComponent<HomeView.Props, HomeView.State>() {
    prival val userService: UserService by removeServicesPlugin

    override suspend fun componentWillMount() {
        super.componentWillMount()
        state.users = userService.getUsers()
    }
}

Robert Jaros

12/24/2019, 11:20 AM

https://github.com/rjaros/kvision allows something like this for Spring Boot, Ktor and Jooby

If you only want the rpc without the rest of KVision framework take a look here: https://kvision.gitbook.io/kvision-guide/part-3-server-side-interface/external-usage

👍 1

View count: 6