kotlinlang #javascript

I have a chance to contribute to a React Native mobile project written in TypeScript. If it were written in my favourite language.... :kotlin:..... then I might give it a go! I have no experience with RN/TS whatsoever, so I'd like to ask here: is there a way to add Kotlin/JS to an existing RN project? And can I then 'simply' start writing Kotlin, interacting with existing TypeScript files and the React Native SDK? Where do I get started? Do you know some good resources?

Hamza GATTAL

10/20/2020, 9:19 PM

Hi guys i have to try use Kotlin/JS + React + Firebase My question is : the Community Edition of InteliJ enough to implement all basics or the Ultimate Edition is obligated Thanks in advance

Marc Knaup

10/21/2020, 2:25 AM

Functional components with React are quite difficult. Functional components are basically top-level properties in files. Now if one component wants to extend another you unfortunately run into that issues: https://youtrack.jetbrains.com/issue/KT-25796

Marc Knaup

10/21/2020, 2:28 AM

Here’s an implementation of

val styledComponent = styled(someFunctionalComponent) { css { … } }

. Took me a few hours to figure that one out 😮

fun <P> styled(component: FunctionalComponent<P>, handler: StyledElementBuilder<P>.(props: P) -> Unit): FunctionalComponent<P> where P : RProps, P : WithClassName {
    val buildStyled = styled(component.unsafeCast<RClass<P>>())
    val styledComponent = { props: P ->
        buildElement {
            buildStyled {
                val dynamicAttrs = attrs.asDynamic()
                val dynamicProps = props.asDynamic()
                props.getOwnPropertyNames().forEach { propertyName ->
                    dynamicAttrs[propertyName] = dynamicProps[propertyName]
                }

                handler(props)
            }
        }
    }

    if (js("process.env.NODE_ENV !== 'production'") as Boolean) {
        val displayName = component.asDynamic().displayName as String?
        if (displayName != null)
            styledComponent.asDynamic().displayName = "styled.$displayName"
    }

    return styledComponent
}

Marc Knaup

10/21/2020, 10:55 AM

I’ve created an issue for major API inconsistencies in

kotlin-react

and would love to hear what you think 🙂 https://github.com/JetBrains/kotlin-wrappers/issues/358

Rasmus Plaubor

10/22/2020, 12:04 PM

Does anyone know if there is a (somewhat "supported") JS-to-KotlinJS transpiler, to ease migration to KotlinJS from pure JS?

🏳️‍🌈 1

🇳🇴 3

kartik1712

10/22/2020, 3:57 PM

Hi! How can I configure my project to output

.js

files ? So that I can include those file from in html files like

<script src="/static/kotlin.js"></script>

Hamza GATTAL

10/22/2020, 9:49 PM

KotlinJS + React + Bootstrap is possible or no

🏳️‍🌈 1

Tristan Blakers

10/23/2020, 4:52 AM

I've been able to call Kotlin/JS from the browser when the modules are set to "plain", but can't figure it out when "UMD". Can anyone point to an example?

hikamaeng

10/23/2020, 8:41 AM

Hi, how do I get .wasm in kotlin multiplatform? I had just .klib(bulid/kotlin/wasm32/main/xxx.klib)

James Mulholland

10/23/2020, 10:16 AM

Has anyone got experience building a kotlin library for an isomorphic JS environment (Next.js in our case)? We had a usable version of this previously but it was still a little hacky (we needed to separately install the

kotlin

NPM package; updates were carried out by building and then copying the output of

./build/js/packages/ThisPackage/kotlin/ThisPackage.js

into our Next.js project). However, now we have added a dependency on another internal Kotlin project, I can’t get anything build properly, even in a hacky way.

./build/distributions/ThisPackage.js

contains references to

window

(despite the fact that I have used the node.js build option in

build.gradle.kts

) and the output in

./build/js/package

does not correctly import our other package. Does anyone know how I might do the following: • Get a working amount of code exported using both of our packages (Essential) • Build a single file to copy across (Highly desirable) • Get a node_module on GitHub’s package registry (Nice to have) I’ve tried using the new IR backend which looks like it will get us to where we want to go at some point in the future but, unfortunately, it seems to be either buggy or missing features for the time being. I’ve got the current setup (with mobile config omitted).

plugins {
    kotlin("multiplatform") version "1.4.0"
    `maven-publish`
    // ...mobile plugins
    id("org.jlleitschuh.gradle.ktlint") version "9.3.0"
}

repositories {
    mavenCentral()
    maven {
        url = uri("<https://maven.pkg.github.com/our/dependency>") // another internal kotlin project
        credentials(PasswordCredentials::class)
    }
}

kotlin {
    js {
        nodejs {
        }
        useCommonJs()
        binaries.executable()
    }

    // ...mobile config


    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("com.our.dependency:kotlin:0.1") // another internal kotlin project
            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test-common"))
                implementation(kotlin("test-annotations-common"))
            }
        }

        // ...mobile config

        val jsMain by getting
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }
    }
}


publishing {
    repositories {
        maven {
            setUrl("<https://maven.pkg.github.com/our/this-repository>")
            credentials {
                username = System.getenv("GITHUB_USER")
                password = System.getenv("GITHUB_TOKEN")
            }
        }
    }
}

spierce7

10/24/2020, 8:39 PM

The Kotlin compiler is smart enough to optimize away the object creation for

this in 'a'..'z' || this in 'A'..'Z' || this in '0'..'9'

in the JS compiler right?

🇳🇴 2

loke

10/25/2020, 4:54 AM

Is there a way in Gradle to inhibit browser tests without disabling the browser support altogether? In my multiplatform project, my test cases runs fine in nodejs but there are technical issues that prevents a lot of the tests from working in the browser (which is fine, because that code is never run on the web version anyway), so I just want these tests to not run at all in the browser.

Tomasz Krakowiak

10/26/2020, 10:00 AM

> Task :homepage:jsBrowserTest
SourceMap position not found for trace: Uncaught TypeError: Cannot read property 'default' of undefined
at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:230734:17>

TypeError: Cannot read property 'default' of undefined
    at Object.<anonymous> (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:230734:17>)
    at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:138144:37>
    at Object.<anonymous> (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:138147:2>)
    at Object../kotlin/boardgames-homepage-test.js (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:230761:30>)
    at __webpack_require__ (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:20:30>)
    at Object../adapter-browser.js (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:138128:18>)
    at __webpack_require__ (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:20:30>)
    at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:84:18>
    at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:87:10>
SourceMap position not found for trace: Uncaught TypeError: Cannot read property 'default' of undefined
at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:230734:17>

TypeError: Cannot read property 'default' of undefined
    at Object.<anonymous> (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:230734:17>)
    at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:138144:37>
    at Object.<anonymous> (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:138147:2>)
    at Object../kotlin/boardgames-homepage-test.js (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:230761:30>)
    at __webpack_require__ (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:20:30>)
    at Object../adapter-browser.js (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:138128:18>)
    at __webpack_require__ (<http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:20:30>)
    at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:84:18>
    at <http://localhost:9876/absoluteD:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js?6a9c7a7ceb77d7649053551ffc77e4668b658019:87:10>
  Uncaught TypeError: Cannot read property 'default' of undefined
  at d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/kotlin/boardgames-homepage-test.js:92632:1 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:230734:17
  TypeError: Cannot read property 'default' of undefined
      at Object.<anonymous> (d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/kotlin/boardgames-homepage-test.js:92632:1 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:230734:17)
      at d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/kotlin/boardgames-homepage-test.js:3:116 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:138144:37
      at Object.<anonymous> (d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/kotlin/boardgames-homepage-test.js:21:2 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:138147:2)
      at Object../kotlin/boardgames-homepage-test.js (D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:230761:30)
      at __webpack_require__ (d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/webpack/bootstrap:19:1 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:20:30)
      at Object../adapter-browser.js (d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:2:18 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:138128:18)
      at __webpack_require__ (d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/webpack/bootstrap:19:1 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:20:30)
      at d:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/webpack/bootstrap:83:1 <- D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:84:18
      at D:/work/workspace/boardgames/build/js/packages/boardgames-homepage-test/adapter-browser.js:87:10
java.lang.IllegalStateException: command 'C:\Users\Niema\.gradle\nodejs\node-v12.16.1-win-x64\node.exe' exited with errors (exit code: 1)

Patrick Doering

10/26/2020, 1:55 PM

Hey together, I have to connect to a postgres database from Kotlin/JS. I don`t find any example. Is it possible to connect via exposed?

thana

10/26/2020, 3:36 PM

ist there a better way to itereste the keys of i js object today compared to the

keys()

method described here? https://discuss.kotlinlang.org/t/js-interop-for-in-and-for-of-loop-of-dynamic-objects/7507/4

fkrauthan

10/27/2020, 3:14 AM

Ok I have a stupid question (but I can't find an answer): How can I include a custom stylesheet? I found out that with `

js("require('normalize.css/normalize.css')")

I can include a npm packaged stylesheet into my kotlinjs project. But what If I want below that import a custom stylesheet that is specific to this project? I've tried

js("require('./style.css')")

style.css

is in the

resources

folder but it complains that it can't find that file

Nikky

10/27/2020, 12:35 PM

i want to write multiplatform tests in

commonTest

and

jsTest

.. sadly i need to run suspending functions and runBlocking is not in kotlinjs and suspending test function are not allowed in kotlin-test what can i do there ?

Franco

10/28/2020, 1:16 AM

Hi everyone, I'm trying to catch an exception on Kotlin/JS but it's not working for some reason. This is my code:

try {
    val dateStr = date?.toIsoString(dateOnly = true)

    ...
} catch (e: Exception) {
    logError("Failed to parse date", cause = e)
}

public fun Date.toIsoString(dateOnly: Boolean = false): String {
    val timezoneOffset = getTimezoneOffset()
    val dateStr = Date(getTime() - (timezoneOffset * 60_000)).toISOString()

    return if (dateOnly) dateStr.split("T")[0] else dateStr
}

And this is the error I get:

Uncaught RangeError: Invalid time value
    at Date.toISOString (<anonymous>)

Any idea if I'm doing something wrong or if this error just can't be catched for whatever reason?

Tristan Blakers

10/28/2020, 6:22 AM

is there a clean way to represent a common API class that returns a js Promise in KotlinJS, and a Deferred (or equivalent) in Kotlin JVM? I tried using an expect/actual pairing as follows: common:

expect class Later<T>

JS:

actual typealias Later<T> = Promise<T>

JVM:

actual typealias Later<T> = Deferred<T>

But that doesn't seem to work because of the out variance on the Promise/Deferred, i.e. Promise<out T>. This feels like a common use-case, so wondering what the usual solution is? Would prefer not to wrap each method on each platform for maintenance reasons...

✔️ 1

Dieter Konrad

10/28/2020, 7:19 AM

Trying to integrate stylus in my KotlinJS project. Gradle:

implementation(npm("stylus", "0.54.8"))

but

resources/stylus/main.styl

file is not processed with

browserDevelopmentRun

browserDevelopmentWebpack

just copied into

build/distributions/stylus/main.styl

adding /webapack.config.d/stylus.config.js doesn’t help either. https://webpack.js.org/loaders/stylus-loader/ https://kotlinlang.org/docs/reference/js-project-setup.html#configuring-webpack-bundling Where is a proper documentation how to use webpack with KotlinJS?

Harald Pehl

10/28/2020, 10:08 AM

I have troubles to publish a Kotlin/JS library to the local maven repository. Here's my

build.gradle.kts

file:

plugins {
    kotlin("js") version "1.4.10"
    id("org.jetbrains.dokka") version "1.4.10"
    `maven-publish`
}

group = "dev.fritz2"
version = "0.8-SNAPSHOT"

repositories {
    mavenLocal()
    mavenCentral()
    maven("<https://oss.jfrog.org/artifactory/jfrog-dependencies>")
    maven("<https://oss.sonatype.org/content/repositories/snapshots/>")
    jcenter()
}

dependencies {
    implementation("dev.fritz2:core:0.8-SNAPSHOT")
}

kotlin {
    explicitApi()
    js {
        browser {
            testTask {
                useKarma {
                    useChromeHeadless()
                }
            }
        }
    }
}

If I execute

gradle publishToMavenLocal

nothing gets published to my local maven repo. I remember this worked sometime ago. Does anybody else facing the same issue? The code / project is also available on GitHub: https://github.com/hpehl/fritz2-elemento

James Mulholland

10/28/2020, 5:38 PM

Does anyone know why I can’t import the interfaces from the .d.ts file built from the IR backend?

Anthony Pages

10/29/2020, 11:11 AM

Hi everyone, I'm investigating the Kotlin MPP technology for my company to see if it could be a good solution to develop library for our Android, iOS and web (front) Application. I have done some test using simple things like serialization and injection and after a few adaptation, it works on all 3 platforms. I have only one problem on the web side: The size of the library! My project count less than 250 lines of code and use juste one external library (

kotlinx.serialization

) and the generate bundle, once imported, is over 280KB (I have used

source-map-explorer

to analyze it). Am I missing something ? a configuration or something. I have read some stuff around DCE but it seems to be already active in my project.

Marc Knaup

10/30/2020, 12:44 AM

Did anyone find an easy way to add an inline SVG to Kotlin React?

hallvard

10/30/2020, 8:07 AM

Been looking around on kotlinlang.org to know where gradle will output different files when compiling/building, but can't see it specified anywhere. After a build, the

build/

folder has .js files all over the place. Can anyone point me to a readable table that specifies which files are where after a build? There seems to be "raw" js files and DCE'ed js files, of course, but alas, several of them and in different sub folders. Some may be only drafts while others (hopefully only one of each) are the final compiled .js files ...

Daan

10/31/2020, 9:07 AM

Has anyone been able to figure out a workaround for this issue: https://youtrack.jetbrains.com/issue/KT-42923? I've tried a bunch of things with the webpack and karma config, but I can't get it to work.

napperley

11/02/2020, 12:28 AM

Is it possible to have continuous loading working in a Kotlin web stack project (Fritz2 + Ktor Server)?

Norbi

11/02/2020, 5:08 PM

Which Javascript framework would you choose for a new project? KVision/Fritz2/React/something else? Thanks,

hallvard

11/02/2020, 8:15 PM

This webpage talks about

browserDevelopmentWebpack

and

browserProductionWebpack

gradle tasks: https://kotlinlang.org/docs/reference/js-project-setup.html, but I can't customize them. Can anyone tell me how to add a simple

doFirst

doLast

in there? The only thing I get from Gradle, is «Unresolved reference: browserDevelopmentWebpack» ...

Title

hallvard

11/02/2020, 8:15 PM

This webpage talks about

browserDevelopmentWebpack

and

browserProductionWebpack

gradle tasks: https://kotlinlang.org/docs/reference/js-project-setup.html, but I can't customize them. Can anyone tell me how to add a simple

doFirst

doLast

in there? The only thing I get from Gradle, is «Unresolved reference: browserDevelopmentWebpack» ...

altavir

11/02/2020, 8:27 PM

You really do think that pinning your questions is a good way to attract positive emotions?

Vampire

11/02/2020, 10:41 PM

I guess those tasks are dynamically created later than when you try to access them. If you want to configure all such tasks, you can go by type, or otherwise you could do something like

tasks.matching { it.name == 'browserDevelopmentWebpack' }.configure { ... }

or so.

hallvard

11/03/2020, 7:13 AM

Sorry about the pinning, @altavir, @kqr and everyone else, I thought I was just following the question! (I have previously experienced that I ask something and miss the answers because the question flies off of the screen when other conversations appear).

altavir

11/03/2020, 7:14 AM

Ok then. You can mark it as saved (flag mark), then it will be pinned only for you.

hallvard

11/03/2020, 7:19 AM

Thanks, @Vampire, that might work!

View count: 11