kotlinlang #javascript

I'm asking that because it seems for some multiplatform frameworks suspending functions are automatically converted to functions with callbacks. So why not compiling them directly to promises?

andylamax

12/28/2020, 6:48 AM

My two cents on how

@JsExports

should work in the near future Let

@JsExport

export every thing to global namespace. Example in a module

sea

file:

sea/src/main/kotlin/com/sea/entities.kt

Copy code

package com.sea

@JsExport
class Fish(val type: String = "Tilapia")

@JsExport
class Whale(val name: String = "Deep Blue")

and to be use in typescript as

Copy code

import { Whale, Fish } from 'sea'

const whale = new Whale("Killer Whale");
const tilapia = new Fish();

However, since sometimes scoping is needed. We can pass parameters to the

@JsExport

like so

Copy code

package com.sea

@JsExport
class Fish(val type: String = "Tilapia")

@JsExport("mammals")
class Whale(val name: String = "Deep Blue")

and to be use in typescript as

Copy code

import { mammals, Fish } from 'sea'

const whale = new mammals.Whale("Killer Whale");
const tilapia = new Fish();

I know this is hard right now (due to how the Compiler build js), but the very desired sytax from the above case is

Copy code

import { Fish } from 'sea'

import { Whale } from 'sea/mammals'

const whale = new Whale("Killer Whale");
const tilapia = new Fish();

I hope this one gets some love Issue is already on YT at https://youtrack.jetbrains.com/issue/KT-37710 please give more votes

Edoardo Luppi

12/28/2020, 10:05 AM

The JS plugin allows customizing the Webpack configuration. However it doesn't allow defining multiple entry points. I suppose we are still forced to have only a single bundle, right?

Edoardo Luppi

12/28/2020, 2:34 PM

Using JS/TS I can simply

import

require

(inside a function) a JSON file. How does this translate to KotlinJS?

Edoardo Luppi

12/28/2020, 8:58 PM

What do you guys replace enums with? Simple strings?

camdenorrb

12/29/2020, 9:52 AM

What do you guys do when you have a multiple page website using Kotlin/JS, do you determine which page it's on to figure out which code to use or do you somehow make multiple scripts?

Dmitry Fedoseyev

12/30/2020, 8:52 AM

After adding types dependency like this:

Copy code

val jsMain by getting {
            dependencies {
                implementation(npm("@types/webrtc", "0.0.26", generateExternals = true))
            }
        }

I’m getting conflicting declarations errors during the build.

Copy code

Conflicting declarations: public open var latency: W3C.DoubleRange? /* = NumberRange? */, public open var latency: tsstdlib.DoubleRange?

Does anyone know how to resolve this?

Nicodemus Ojwee

12/30/2020, 11:35 AM

Has anyone ever loaded a dynamic image using require function like below? Mine throws Syntax error but works with static image.

Copy code

val imageUrl = kotlinext.js.require("./resources/images/${introSlides.image}")

The code below works.

Copy code

val imageUrl = kotlinext.js.require("./resources/images/logo.png")

Dirk Hoffmann

12/30/2020, 12:03 PM

how can I use a sass variable in kotlin react styledDiv?

Copy code

styledDiv {
        css {
            height = "\$pt-navbar-height".toInt().px
        }
    ...

Dirk Hoffmann

01/02/2021, 3:08 PM

if I use dukat to convert js to kt for usage with kotlinjs and react, I get code like:

Copy code

var onItemSelect: (item: T, event: React.SyntheticEvent<HTMLElement>) -> Unit

where do I get the

React.SyntheticEvent<HTMLElement>

from? can't find it anywhere as

React

does not exist...

Jorrit

01/03/2021, 12:47 AM

So I have a pretty simple JS project, modified run task to use --continuous. The task successfully keeps running. This no longer works for some reason. I got the messages in browser console about "recompiling", but then it says "nothing changed". At first I thought it was webpack, but on closer inspection, build/js/packages/projectName/kotlin-dce-dev/projectName.js is not actually being changed. I know this can work, because it used to - I don't know what changed. I have to restart the run task completely to get my updates to the browser. Any ideas?

dasralph

01/03/2021, 11:43 AM

I want to use Kotlin JS to create a JavaScript library with TypeScript declaration files (*.d.ts). For this, I use the new IR compiler. But I’m wondering which Gradle task I should use for it. Currently, I’m using

./gradlew clean compileProductionExecutableKotlinJs

. But

compileProductionExecutableKotlinJs

does not appear in the

./gradlew tasks

list, so I assume it is not the right one. Which Gradle task should I use? Posted in #multiplatform

dasralph

01/03/2021, 11:43 AM

When I try to compile a data class with default values with the IR compiler to JavaScript, I get this error:

IllegalStateException: Can't find name for declaration FUN name:Foo_init_$Create$ visibility:public modality:FINAL <> (bar:kotlin.String?, $mask0:<http://kotlin.Int|kotlin.Int>, $marker:kotlin.js.DefaultConstructorMarker?) returnType:api.model.Foo

. I assume this is a bug but is there a small workaround for it? Or do I need to wait until it is fixed?

Copy code

@ExperimentalJsExport
@JsExport
data class Foo(
    val bar: String? = null
)

Posted in #multiplatform

Dirk Hoffmann

01/04/2021, 1:33 PM

Hi, I am trying to wrap blueprintjs to kotlinjs ... @blueprintjs/core package works fine so far, but I got stuck on the select package. I used dukat to generate all the "wrapping" parts and now try to use the select component of blueprintjs following https://codesandbox.io/s/blueprint-sandbox-et9xy?file=/src/SelectExample.tsx

Copy code

public render() {
    const buttonText = this.state.film.title;
    return (
      <Example header="Select Sandbox">
        <FilmSelect
          items={Films.TOP_100_FILMS}
          itemPredicate={Films.filterFilm}
          itemRenderer={Films.renderFilm}
          noResults={<MenuItem disabled={true} text="No results." />}
          onItemSelect={this.handleValueChange}
        >
          <Button text={buttonText} rightIcon="caret-down" />
        </FilmSelect>
      </Example>
    );
  }

my try is:

Copy code

val FilmSelect = Select.ofType<Film>()

val exampleSelect = functionalComponent <SelectExampleProps> { props ->
        val (selectExampleState, setSelectExampleState) = useState(SelectExampleState(TOP_100_FILMS[0]))

        child(genericCard("Select Sandbox")) {
            child(FilmSelect::class) {
                attrs.items =  TOP_100_FILMS
                attrs.itemPredicate = filterFilm
                attrs.itemRenderer = renderFilm
                attrs.noResults = noResultsFunc
                attrs.onItemSelect = handleValueChange
                child(Button::class) {
                    attrs.text = selectExampleState.selectedFilm.title
                    attrs.rightIcon = "caret-down"
                }
            }
        }

    val handleValueChange = { film: Film, event: SyntheticEvent__1<HTMLElement> ->
        setSelectExampleState(SelectExampleState(film))
    }
}

so itemRenderer is

Copy code

typealias ItemRenderer<T> = (item: T, itemProps: IItemRendererProps) -> ReactElement?

how can I implement such a funtion returning a ReactElement but not being "in scope" ?? my try so far is:

Copy code

val renderFilm: ItemRenderer<Film> = { film: Film, itemProps: IItemRendererProps ->
    if (!itemProps.modifiers.matchesPredicate) {
        null;
    }
    val text = "${film.rank}. ${film.title}"
    child(MenuItem::class) {
        attrs.key = film.rank
        attrs.active = itemProps.modifiers.active
        attrs.disabled = itemProps.modifiers.disabled
        attrs.label = film.year.toString()
        attrs.onClick = itemProps.handleClick
        attrs.text = highlightText(text, itemProps.query)
    }
}

val filterFilm : ItemPredicate<Film> = { query: String, film: Film, index: Number, exactMatch: Boolean ->
    "${film.rank}. ${film.title.toLowerCase()} ${film.year}".indexOf(query.toLowerCase()) >= 0
}

but obviously the lambda has no `child(

MenuItem::class

)` method I can use ... how would I implement an ItemRenderer which returns the ReactElement ??

Dirk Hoffmann

01/06/2021, 7:20 PM

is there a way to debug the kotlin to javascript generated stuff (like a react webapp?)

gaetan

01/07/2021, 12:58 PM

Hi, Is there somewhere some samples of Kotlin js with advanced webpack config (Sass, …)?

Jaroslav

01/07/2021, 3:17 PM

Hi, I am upgrading kotlin js app from 1.3 to 1.4 and I have problem with compileKotlinJs task. It seems it ignores destinationDir and outputFile atribute now and saves compiled files somewhere to build/js/... What is intended way to process compilation now? I'd like to get plain JS files. Thanx;).

🙌 1

bbaldino

01/08/2021, 6:37 PM

Is there a good way to implement a default prop for a component? (Or is that an anti-pattern?)

Lammert Westerhoff

01/10/2021, 3:25 PM

Hi. I’m developing a kotlin js react app and want to use ktor client to call me REST api. Unfortunately the calls fail in the browser, probably because of some CORS related reason but I can’t seem to find a way to fix it. When I use

window.fetch

with exactly the same url it does work. Anyone has any how to fix this?

travis

01/11/2021, 12:16 AM

Is it possible to call Kotlin from JavaScript (

LEGACY

) via generated static web page (using

./gradlew browserDistribution

and opening generated

index.html

in browser)? (looking to create a simple web page and deploy it to GitHub Pages) Kotlin (module named

webapp

)

Copy code

@JsExport
fun main() { <http://console.info|console.info>("hi") }

@JsExport
fun hello() { <http://console.info|console.info>("hi") }

JavaScript

Copy code

webapp.main() // Works when using `browserDistribution` and `browserDevelopmentRun` Gradle tasks.
webapp.hello() // Only works when using `browserDevelopmentRun` task.

Harald Pehl

01/12/2021, 7:43 AM

Hi guys, I'd like to use l10n and i18n in my Kotlin/JS library / app. Is there anything you can recommend? Thanks!

solidogen

01/12/2021, 11:43 PM

I'd like to generate something like BuildConfig on Android I need to generate API_URL variable, for example from a gradle.properties variable, so I can easily swap between dev and prod urls did anyone do anything similar, or can guide me in right direction?

Justin

01/13/2021, 4:29 PM

Given a Kotlin Multiplatform project (v1.4.21) with the following layout: -------------------------------------------- Project
• SubProjectA

_Dependencies_:

• SubProjectB

_Dependencies_:

SubProjectA
• SubProjectC

_Dependencies_:

SubProjectB
-------------------------------------------- ...I am trying to create a Javascript build of SubProjectC that can be used by a Typescript-based backend service. The goal is to be able to add the JS build of SubProjectC via yarn
(or npm
). I am able to create a JS build by adding the following in the

build.gradle.kts

of all subprojects:

Copy code

js(IR) {
    useCommonJs()

    browser {
        testTask {
           enabled = false
        }
    }

    binaries.executable()
}

But when I try to call methods on the build of SubProjectC, it says it cannot find the nested dependencies (i.e. SubProjectA/SubProjectB). Anyone know of any sample projects out there with this sort of layout?

Lammert Westerhoff

01/13/2021, 9:36 PM

Hi, I’m subscribing to Flow objects in my React Components to update state. I’m using a singleton instance of

MainScope

to launch a new coroutine in which I collect the Flow. If I leave things like that and the component gets unmounted because the user for example logs out, then the coroutine keeps running and collecting from the flow after the component is unmounted, resulting in React errors/warnings. I solved it by assigning a Job and then cancelling it in

componentWillUnmount

. This doesn’t feel right though and I’d prefer some better solution in case anyone has suggestions. I was thinking something similar as Android view models have a

viewModelScope

that automatically gets cancelled when the view model is cleared, but I can’t seem to find a way to do this.

Emmanuel Oga

01/15/2021, 4:32 AM

Hi, I see that there's typed support for Promise objects but I was wondering if there's a way to async/await promises somehow... perhaps some way to combine with coroutines? Not sure.

Hampus Londögård

01/16/2021, 1:59 AM

Hi, is the anyway to access File System API in browser mode from kotlinJS? i.e. https://web.dev/file-system-access/ It's important for me if I'm to create a PWA

genovich

01/16/2021, 10:00 AM

Hi! I cannot integrate Firebase Functions with kotlinJs. And I also can't find working guide. Can anyone help me?

spierce7

01/18/2021, 5:50 PM

So I’ve been waiting on certain bug fixes planned for Dukat 0.58 and 0.5.9. I haven’t seen any movement in these releases on the github project milestones for a while. What’s the future for dukat look like? https://github.com/Kotlin/dukat/milestone/15

➕ 1

Andrew Adams

01/19/2021, 12:21 AM

So I posted this in #general yesterday, but maybe here would be a good idea as well. I am struggling with dependencies in a multi-project, multi-platform (JS and JVM) working with intellij correctly. I have an example repo here: https://github.com/adamsar/kotlin-dependency-bug Basically I would like konform to be usable in

common/commonMain

. What I have right now will build if I include the enableFeaturePreview("GRADLE_METADATA") in

settings.gradle

but will not be detected by intellij. If I do not include it, I can not build. Apologies for the spam for those watching the other channel as well.

jessewilson

01/19/2021, 3:52 AM

Here’s a few more things I think are unnecessary but not eliminated:

STRING_CASE_INSENSITIVE_ORDER

output

UNDEFINED_RESULT

These are all defined as top-level vals. My best guess is that the dead code eliminator doesn’t know how to prune these. Is that deliberate? Any idea what a fix might look like?