Can anyone explain why long math is extremely slow compared in JS compared to same code but replacing all Long/LongArrays with Double/DoubleArrays?

Hello, World! The changelog for the upcoming Kotlin 1.8 mentions the JS Legacy backend will be deprecated - and using it does trigger a warning at compilation time 👍 However it looks like the constants

LEGACY

and

BOTH

are not marked with

@Deprecated

on the 1.8 branch. Not a big deal, just wanted to mention it as it could be nicer to have the warning in the IDE when using it 🙂

Anyone else having issues with incremental compilation on 1.8.0-RC?

Is there finally a way to produce multiple JS files with a single Gradle module? Last time I tried I had to create a dozen modules, and it was a big no.

How exactly do you debug js browser tests running through karma? No matter how I change my gradle or karma config, or how I try to hit a breakpoint in the tests (either through debuggable chrome or attaching through the IDE) the browser just closes after a few seconds

had anyone tried creating project kotlin-react using next.js framework?

how to connect firebase with kotlin react js?

Hej, So we have investigated how to migrate from the legacy compiler to the IR. We’re currently only using the JS target. So to my question. We have an file that acts as our API (interface) to our consumers (we’re a library). We have annotated the the class with @jsExport and now the compiler complains (which is expected) on:

Exported declaration uses non-exportable parameter type

InteliJ identifies that some types aren’t annotated. Is there a way to use that information to automatically add the missing annotations (jsexport) to the rest of the classes. Thanks Ola

Hi does anyone know what's going on with the kotlin-react-beautiful-dnd wrapper? It seems completely empty: https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react-beautiful-dnd . It has dependencies, but no actual wrapper code (unless I'm missing something)

As a result I've been trying to create a wrapper for https://github.com/ValentinH/react-easy-sort/blob/main/src/index.tsx . The typescript has a default export and named exports. I created this following the same pattern as the MUI wrappers:

@file:JsModule("react-easy-sort")
@file:JsNonModule

package com.ustadmobile.view.components

import react.PropsWithChildren
import react.ReactNode

external interface SortableListProps: PropsWithChildren {

    var onSortEnd: (oldIndex: Int, newIndex: Int) -> Unit

    var draggedItemClassName: String?

    var lockAxis: String?

    var allowDrag: Boolean

}


external val SortableList: react.FC<SortableListProps>


//See <https://betterprogramming.pub/understanding-the-difference-between-named-and-default-exports-in-react-2d253ca9fc22>
external interface ItemProps: PropsWithChildren {
    override var children: ReactNode?
}

external val SortableItem: react.FC<ItemProps>

If I use only SortableList or SortableItem, the components seem to be found as expected. When I try to use both together, I get an exception "You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.". Is there a procedure that can allow making a wrapper for typescript where there is both a default export and named exports?

WorldWindKotlin - the first Kotlin multi-platform 3D GIS update 1.1.5 released https://github.com/WorldWindEarth/WorldWindKotlin/releases/tag/v1.1.5

botb

Hi everyone, I am having a little trouble with kotlin/js. I am trying to use decentraland sdk dependencies but decentraland doesn't support yarn so far and I can't seem to find any documentation for changing the package manager from yarn to npm for kotlin/js. Can someone guide me a little/redirect me to the link that helps?

this is the dependency that I am trying to add

implementation(npm("decentraland", ">3.12.3"))

my plugin is set to

kotlin("js") version 1.7.21

Can somebody please share to how get React-Markdown to work with remark plugins my markdown component looks like this

@file:JsModule("react-markdown")
@file:JsNonModule
package <http://components.blog|components.blog>


import react.ComponentClass
import react.Props
import react.PropsWithChildren

@JsName("default")
external val ReactMarkdown: ComponentClass<MarkdownProps>

external interface MarkdownProps : PropsWithChildren{
    var remarkPlugins : Array<dynamic> 
}

and my remark file looks like

@file:JsModule("remark-gfm")
@file:JsNonModule

package <http://components.blog|components.blog>

@JsName("default")
external val RemarkGfm: dynamic

and I hook them up as below, I get the rendered content however remark does not get applied.

ReactMarkdown {
    remarkPlugins = arrayOf(RemarkGfm)

    +content
}

With Kotlin 1.8.0 is there an option to disable the yarn lock file check by passing a parameter?

I have some isolation problems when using two generated JS files at the same time from different projects(migrating). Basically i want them both to work at the same time. They both work separately fine but using both I get ClassCastException and other exceptions using when using coroutines. Any way to fix this.

Any example how to configure a Kotlin/JS project with karma tests reporting on GitHub actions?

I have a 1.7.20 JVM + JS project. The JVM part executes fine, however the JS part fails with

TypeError: this.templates0__1.create_8m8rgm_k$ is not a function

Has anyone experienced this before?

Hi all, Does anyone know how to upload a file in a KotlinJS front-end and post it to the server? In JS this is pretty straightforwards, see for example: Pure JS file upload In that example, the key is to create a FormData object and attach the File object retrieved from the file selection event to it:

formData.append("file", fileupload.files[0]);

The problem I have is that the equivalent FormData class in KotlinJS can have a org.w3c.files.Blob attached to it, of which org.w3c.files.File is a subclass, however, the selection event returns a web.file.File object. How can I turn the web.file.File into an org.w3c.files.File so that I can attach it and post it? Thanks

I have released KVision 6.0.0. This is a major upgrade bringing a lot of significant changes and new features. Highlights of this release include: • Java 17 or greater is now required. • Upgraded dependencies (Kotlin 1.8.0, Spring Boot 3.0.1, Micronaut 3.8.0, Ktor 2.2.1, Koin 3.3.0, Vert.x 4.3.7, kotlin-wrappers 466, Chart.js 4.1.1, npm-publish 3.2.0, bootstrap-icons 1.10.3, OnsenUI 2.12.8, tempus-dominus 6.2.10, Trix 2.0.4, Electron 22.0.0, Tabulator 5.4.3) • Drop support for the deprecated legacy backend. • Direct dependency on

kotlinx.coroutines

library. • Support for returning

Result<T>

from fullstack remote methods. • Add new `Upload`/`UploadInput` components based on browser file input API. • New `Numeric`/`NumericInput` and `ImaskNumeric`/`ImaskNumericInput` components for handling decimal numbers. • New

kvision-ballast

and

kvision-routing-ballast

modules integrating with Ballast state management framework. For more details about this release see the changelog https://github.com/rjaros/kvision/releases/tag/6.0.0 and the dedicated migration guide https://kvision.gitbook.io/kvision-guide/migration/migration-from-5.x-to-6.x As always, any feedback is appreciated! 🙂 Posted in #feed

Hello K friends, What if Node were more than just JS? To celebrate the new year, I am pleased to share a new project called Elide, a new server runtime, like Node or Deno, but polyglot, written in Kotlin and based on GraalVM. We are in alpha and very open to early feedback and contributions for anyone interested, over in #framework-elide 🥳 You can do wild things with it, like fast React SSR in Micronaut or Spring. Guest language support is starting with JS, but there are plans to integrate other languages like Python, Ruby, and Rust/Go/etc. via LLVM. Of course,

native-image

is supported out of the box. • 🚀 Trying it out

curl -sSL --tlsv1.2 dl.elide.dev/cli/install.sh | bash -s -

👆 the one liner works on Darwin (amd64/arm64), and Linux (amd64) so far.

If you prefer NPX:

npx @elide-dev/elide@alpha shell

K Building Kotlin apps with it • Elide can be used as a plain library with a regular Micronaut server, and Ktor support is on the way. There are Maven artifacts in a custom repository which is easy to use during the alpha; you can see a sample here. • G Gradle plugin You can easily install the Gradle plugin to build your frontend assets and your Kotlin/JS, and package it into your server binary. It will handle building for SSR and CSR both, so you can easily switch between browser rendering modes. Check it out here. Maven and Bazel support are planned. • 🖥️ Using the shell

elide shell

drops you into a shell just like Node (see attached screenshot), the difference being the

URL

class we're using here is implemented in Kotlin, backed by the road-tested power of Micronaut, KotlinX, Netty, and the Java standard library. It has simply been adapted for use in JavaScript, according to the WhatWG URL Spec. • js Use Kotlin/JS or regular Node stack Elide packages and consumes your JS/TS with built-in support for

esbuild

, so you can use a standard Node toolchain or the Kotlin/JS stack. • 💨 Super fast React SSR Because Elide is basically Kotlin with a super-fast JS runtime attached, it can do JS SSR without leaving the JVM. This can soon be drop-in compatible with many React apps. You can see a live sample here to confirm it is fast and server-rendered. The code for that sample is pasted below to show how simple it is to call back and forth between Kotlin and your React app:

@Page class Index : PageWithProps<YourProps>(YourProps.serializer()) {

    // Serve React SSR.
    @Get("/") suspend fun indexPage(request: HttpRequest<*>) = ssr(request) {    // 1: tell the server we're going to do SSR for this request
      head {
        title { +"Hello, Elide!" }
        stylesheet("/styles/base.css")
        stylesheet("/styles/main.css")
        script("/scripts/ui.js", defer = true)   // <-- 2: serve the CSR bundle so it can hydrate the react SSR response
      }
      body {
        injectSSR(this@Index, request)    // <-- 3: execute the JS VM to produce the SSR response, and splice it into the server response
      }
    }

}

• 🐙 Contributors needed The future of software is much more polyglot than today's paradigm: developers love to fight about frameworks, but at the end of the day, we're all writing code, and eliminating barriers between languages means easier collaboration and more value for all of us. It shouldn't be a Node vs. The World or a Rust vs. The World argument; we should get to pick and pull the best code we want from anywhere and use it to build our apps, especially from a multi-platform language like Kotlin. This runtime and framework are designed for that future. *If you agree, join us and make a dent in the universe*; you'll have a chance to be impactful and shape a brave new idea from the ground up. • 🙏 Thank you We chose Kotlin because of the fantastic community. 2023 will be a massive year for Kotlin, and we think that betting the farm on it is reasonable and smart. We are super excited about what JetBrains and Kotlin have in store for us with K2, context receivers, value classes... just so much to look forward to. Cheers and happy new year, Kotlin devs, K sam Posted in #feed

Someone mentioned Kotlin JS and ES6 in another channel, and I found the ticket for it - https://youtrack.jetbrains.com/issue/KT-8373 What are the benefits that will come from supporting ES6 directly?

Hi guys does anyone here have converted xterm js to use in kotlin?, so far I'm able to write things(I've converted typescript definition by Using dukat and manually modified things ), but I need to use key events too. could you provide onKey: event example?

Hey! is there an alternative deserialization library with less size than kotlinx for js? I would go for a super simple JSON.parse in an expect/actual function, but I need to remap some field names because in the json they have a $ inside.. Some ideas before going string.replace("$", "__") before deserializing? :)

in kotlin kmm i am running my compose ui but it is not becoming full screen. How can i Change

<div>
    <canvas id="ComposeTarget" width="600" height="600"></canvas>
</div>

to full screen

Can please someone help me to use firebase with kotlin js?

Why do kotlin wrappers for mui put an annotation

@JsName

with name "default" for all component declarations? For example there are two components from `kotlin-mui`: Tab and Button. They both have

@JsName("default")

. Why do we need to mark these declarations with the annotation and the name?