Hi, everyone. I would to get your opinions on using Kotlin/JS + Kotlin React Wrappers for enterprise grade web applications. I've been using Ktor for my server-side applications and Angular for most of my frontend apps. I believe I can benefit from a multiplatform solution using Kotlin Multiplatform. I'm thinking shared dtos, interfaces, business logic, DI, etc... for fast development and consistency in codebase. I'm also aware that JetBrains uses it internally for their apps. However I'm the only developer in the team and I have about 9 months to build a in-house solution with features like project management, CRM, ERP, User Management, Knowledge Base, Grouped Chatrooms, etc. Do you guys think it's a worthwhile investment long-term? I would like to learn from your experiences and insights. Thank you in advance 🙏🏾

Has anyone ever written a wrapper for a JS libary? I was hoping to connect with someone willing to be a mentor with on that subject.

Sharing this little news I contributed to ship: https://twitter.com/reactnative/status/1578332414145105921

I am trying to use kotlin-react-query, has anybody some kotlinJS examples? Thx in advance

Is there a way to use

styled()

from mui (https://mui.com/system/styled) using kotlin-wrappers? I tried this but it does not seem to work (I guess because the imported styled is

emotion.styled.styled

).

val MyBox = Box.styled { props, _ ->
    <http://props.sx|props.sx> {
        display = responsive(
            <http://Breakpoint.sm|Breakpoint.sm> to Display.none,
            Breakpoint.md to Display.flex,
        )
        flexGrow = responsive(
            Breakpoint.md to number(1.0),
            Breakpoint.lg to number(3.0),
        )
    }
}

I'm getting back to kotlin react wrappers after quite some time. Trying to update dependencies, I want to migrate to the new DSL and APIs (

RBuilder

->

ChildrenBuilder

), but I find no migration guide. Where can I find information apart from the very succinct summary from the

CHANGELOG.md

? For instance, how should I define the react entrypoint now? I used to use:

val store = initRedux()

render(rootElement) {
    provider(store) {
        application()
    }
}

With

application

being an extension function on

RBuilder

. However I get a deprecation warning on

render()

, but with no

ReplaceWith

nor explanation about what I should use instead. Any hints?

hello kotlin react friends

i am a big fan

i am writing a framework partially based on the wrappers libs, so i figured i would join 🙂

Why do we have

dom.html.*

external classes? Is

dom.html.HTMLDivElement

the same as

org.w3c.dom.HTMLDivElement

? Can I safely cast one to the other? @turansky

Hi, I am doing a multiplatform-full-stack-app tutorial (https://kotlinlang.org/docs/multiplatform-full-stack-app.html#build-the-user-interface). And I would like to add fancy icons. I usually use Font Awesome for icons on static HTML, and I am wondering if it's possible to add Font-Awesome icons to the code below. I am assuming we can implement it by adding the class attribute to an i tag, like this:

i("fa-light fa-trash-can"){}

as we implement it on static HTML by

<i class="fa-light fa-trash-can"></i>

. However, this doesn't work since it seems like the way I added the class attribute doesn't work. I would like to know how you usually add fancy icons and class attributes on kotlin react.

import react.*
import kotlinx.coroutines.*
import react.dom.html.ReactHTML.h1
import <http://react.dom.html.ReactHTML.li|react.dom.html.ReactHTML.li>
import react.dom.html.ReactHTML.ul



val App = FC<Props> {

    h1 {
        +"Full-Stack Shopping List"
    }
}

I'm stuck on this problem. Can anyone help? Before clicking, After Clicking, Code Snippet. (utilizing mui)

I’m getting:

Type mismatch: inferred type is org.w3c.dom.Element but dom.Element was expected

with this code:

fun main() {
    createRoot(document.createElement("div").also { document.body!!.appendChild(it) })
        .render(App.create())
}

when bumping from kotlin-wrappers pre.430 to pre.431. What’s the new API? could you update kotlin-mui-showcase?

Hi, can someone please tell me how to deploy my app in prod using kubernetes? I’ve added the tasks for creating

browserProductionWebpack

, but not able to figure out how to start the app.

Does anyone have an experience in implementation of

React.lazy

in kotlin/JS? Thank you for any advise and providing reference.

I'm attempting to convert some React JS code to Kotlin/JS and, being inexperienced with React, I'm having issues figuring out how to do so. Does anyone know how to convert this kind of

div

to Kotlin React? I can post the package.json dependencies if needed as well

return (
    <div
      style={
        isDraggedOver
          ? {
              border: "dashed 2px #abcdef",
              borderRadius: "5px",
              minHeight: "5rem",
              boxSizing: "border-box",
              gridColumn: `span ${size}`
            }
          : { gridColumn: `span ${size}` }
      }
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      onDragOver={(e) => e.preventDefault()}
    >
      {!isDraggedOver && children}
    </div>
  );

Does anyone know what the Kotlin analog to these

react-icon

components is?

import { AiOutlineClose } from "react-icons/ai";
import { FiMinimize2 } from "react-icons/fi";

<FiMinimize2 className="rounded-circle hand-style" color="white" onClick={() => { handleTriggerClick(index) }} />
<AiOutlineClose className="rounded-circle" color="white" />

Perhaps using MUI?

is there some work planned around [KT-49610] KJS: Allow unit-testing React components ? I pretty much like using Kotlin/JS + React, but no ability to test the components is a major disadvantage when trying to convince my colleagues to actually use it wider in the company

Hello, I have a NavigationBar component and a Control Center page, my Control Center has the NavBar imported. How do I adjust the content of the window to adjust when the nav bar is open?

I am now trying to integrate the

react-redux

wrapper for my project. I am referring this example project. But in the

main.kt

file, I noticed that the

provider

component is

RBuilder

. But I am using

react.FC

component from

kotlin-react

wrapper. Can anyone please let me know how to place

provider

component with my

store

prop inside

createRoot(container).render(//root FC component)

?

import browser.document
import react.create
import react.dom.client.createRoot

fun main() {
    val container = document.getElementById("root") ?: error("Couldn't find root container!")
    createRoot(container).render(AppRouter.create{})
}

My

main.kt

file looks like this But I couldn’t put

provider

component..

Hi, Does anybody know how to get React-Markdown to work with remark plugins ? my markdown component looks like this, and it works np

@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 (but won't get picked up by react-markdown)

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

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

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

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

ReactMarkdown {
    remarkPlugins = arrayOf(RemarkGfm)

    +content
}

Hello :kotlin: 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

:kotlin-intensifies-purple: 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. • :gradle: 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, :kotlin-intensifies-purple: sam Posted in #feed

My team has recently made the jump from using typescript for our node.js servers to instead using Kotlin, and it's been a hit so far, so now we're investigating the tradeoffs of using Kotlin also for our web UI layer. Can anyone speak to the trade-offs of using Kotlin + React for Web UI vs just using typescript?

I have a problem and am not entirely sure what my options are to solve it. I have a Kotlin/JS react project and am trying to use a library that defines a particular component. This library has an @types/lib type declaration package, but dukat fails to generate the externals due to a StackOverflowError. Downloading the index.d.ts and running dukat via the cli doesnt give this error, but it doesnt understand how to handle the react bindings and generates externals with wrong type names. Defining the definitions myself is very difficult as it is a very big library. (index.d.ts is roughly 5000 lines long) What I think I want is some way to make dukat work, or have some js/ts source code that acts as a bridge between the kotlin and external js code, where I can define a small type definition only for my purposes

Hi everyone, we want to create a React SPA in Kotlin and want to use the Antd components. Has anyone created wrappers for this for the current version already?

data classes on kotlin/js work upto a point. If all you do is access the properties, then you will generally get away with a lot. Once you start calling methods (i.e. copy, componentN, toString) on them, you'll start getting a lot of undefined. In all fairness, it is bad practice anyway for state values to have methods. All in all, if you are using data classes just for that holding data (which is what they are for), you do not need to go for interfaces, Unless you are doing class based components

After upgrading to Kotlin 1.8.0 (together with kotlin-wrappers), I get the following errors:

Module not found: Error: Can't resolve '@mui/system' in '/Users/luc/kotlin/macrofocus/build/js/node_modules/@mui/x-date-pickers/MonthPicker'

Module not found: Error: Can't resolve '@mui/system/Box' in '/Users/luc/kotlin/macrofocus/build/js/packages/macrofocus-eflux-app/kotlin'

Any idea what could be the cause and a possible fix?!?

Hi everyone, I am trying to implement mui table and my page has now 500 lines of code, the page is very slow, inspection sometimes block my IDE, red warnings are staying even if I have corrected them for enough seconds(more than 30 to 40 and sometimes more), compilation time is in minutes after every change, the pages which do not use mui table seems to work fine for now, is anyone facing this issue?

Hello I seem to have a problem understanding the state hook. See the following screenshot: I have a state variable fachgutachterListen that is set after an API call under 1. The components is re-rendered with the new data. Data changes are transmitted from the server via websocket (3). When a changed data set is sent, the lambda for the data change in 2 is called. Now I have the problem that the state here is zero again as it was initially and does not have the current state, which is also displayed in the component. It is not clear to me where my error lies here, so that the current data can also be queried in 2, so that this can then be synchronised with the server change. Can anyone give me a hint as to where my error lies?