My company is looking to see if react kotlin/js is...

# javascript

[Scott Wilson-Billing]

My company is looking to see if react kotlin/js is a viable alternative to react/js. we built a demonstrator using react and tailwind and now the challenge is to convert to react kotlin/js. I seem to have run into a bit of a problem quite early on and I'm looking for some help please.

[Scott Wilson-Billing]

We are using the tailwind headless components to build our ui. https://github.com/tailwindlabs/headlessui

[Scott Wilson-Billing]

The first component I am trying to convert is the Switch component.

[Scott Wilson-Billing]

It also has a Switch.Label and Switch.Group which I can't expose to kotlin.

[Scott Wilson-Billing]

here's my code for the Switch

[Scott Wilson-Billing]

@file:JsModule("@headlessui/react")
@file:JsNonModule
import kotlinx.html.RP
import react.*
@JsName("Switch")
external val ReactSwitch: RClass<ReactSwitchProps>
external interface ReactSwitchProps: RProps {
    var checked: Boolean
    var className: String
    var onChange: (Boolean) -> Unit
}

[Big Chungus]

This is an example for material-ui (another react components lib) https://github.com/subroh0508/kotlin-material-ui

[Scott Wilson-Billing]

Thanks I did have a read of the material-ui but really can't figure out how to get to the internal functions which are not exported in the headlessui library

[Big Chungus]

They might not be exported directly, but must be reachable from public js domain

[Big Chungus]

Otherwise you wouldn't be able to use them in js as well 😀

[Scott Wilson-Billing]

agreed, and this is what is so frustrating. the top lvel switch works fine in kotlin, but until i can figure out how to expose the internal components then i'm a bit stuck. most of the headless-ui lib uses the same technique. export a single function, but have other functions (not exported) which are bound to the main function.

[Big Chungus]

A lot of js libs use this export pattern:

const Comp1 = ...
const Comp2 = ...

// or module.exports = {...}
export default {
 Comp1,
 Comp2,
}

Which in kotlin can be represented as this

@JsModule("mymodule")
external object AnyNameYouWant {
  val Comp1: RClass<RPRops>
  val Comp2: RClass<RProps>
}

[Scott Wilson-Billing]

at the bottom of the Switch file they do this:

Switch.Group = Group
Switch.Label = Label
Switch.Description = Description

[Scott Wilson-Billing]

and those don't seem to be exported?

[Big Chungus]

can you post a sample js code you're working with?

[Scott Wilson-Billing]

the file i want to use in kotlin is here : https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/switch/switch.tsx

[Scott Wilson-Billing]

here is what I have so far:

@file:JsModule("@headlessui/react")
@file:JsNonModule

import kotlinx.html.RP
import react.*

@JsName("Switch")
external val ReactSwitch: RClass<ReactSwitchProps>


external interface ReactSwitchProps: RProps {
    var checked: Boolean
    var className: String
    var onChange: (Boolean) -> Unit
}

[Scott Wilson-Billing]

this maps to `Switch`but I also need Switch.Label , Switch.Group and Switch.Description

[Big Chungus]

How about this the

@JsModule("mymodule")
external object Switch {
  external operator fun invoke(props: RProps): RComponent<RProps>
  val Group: RClass<RPRops>
  val Label: RClass<RProps>
  Description: RClass<RProps>
}

[Big Chungus]

Might need some adjustments, but hopefully you get the idea

[Scott Wilson-Billing]

cool, thank-you, i will give that a go 👍

[Big Chungus]

Please post back the final working solution once you get there

[Scott Wilson-Billing]

i've defined this :

@file:JsModule("@headlessui/react")
@file:JsNonModule

import react.*

external object Switch {
    operator fun invoke(props: RProps): RComponent<RProps, RState>
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Scott Wilson-Billing]

however, when I come to use it

val switch = Switch(props)

[Scott Wilson-Billing]

Uncaught TypeError: Switch.invoke is not a function

[Big Chungus]

Operator function needs to be external too

[Scott Wilson-Billing]

i get this error when I make it external

Non top-level `external` declaration

[Big Chungus]

Otherwise you could try this

external fun Switch(props: RProps): RComponent<RProps, RState>
external object Switch {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Big Chungus]

If the name clashes, then this might work

external fun Switch(props: RProps): RComponent<RProps, RState>
external interface SwitchContainer {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}
@JsName("Switch")
external val SwitchC: SwitchContainer {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Scott Wilson-Billing]

this compiles ...

@JsName("Switch")
external fun Switch(props: ReactSwitchProps): RComponent<RProps, RState>
external object Switch {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Big Chungus]

But does it work? 😄

[Scott Wilson-Billing]

but doesn't produce the react component when i use it

[Scott Wilson-Billing]

Switch.Group {
                Switch.Label {
                    +"Switch Label"
                }
                Switch(props)
            }

[Scott Wilson-Billing]

the complete function is

[Scott Wilson-Billing]

val todoCard = functionalComponent<TodoCardProps> { props ->

    val (checked, setChecked) = useState(false)

    div("rounded overflow-hidden h-auto sm:h-96 border-solid border border-blue-900") {
        div("px-2 py-3 bg-skin-fill-primary h-auto lg:h-16 sm:flex items-center justify-between") {
            p("text-white text-2xl leading-7.5 text-left sm:uppercase sm:font-bold") {
                +"Todo for ${props.name}"
            }
        }
        val switchColor = if (checked) "bg-blue-600" else "bg-gray-200"
        val switchClass = "$switchColor relative inline-flex items-center h-6 rounded-full w-11"
        var switchButtonClass= if (checked) "translate-x-6 inline-block w-4 h-4 transform bg-white rounded-full" else "translate-x-1 inline-block w-4 h-4 transform bg-white rounded-full"
        div("p-10") {

            var props: ReactSwitchProps = jsObject {
                this.checked = checked
                this.className = className
                this.onChange = { setChecked(!checked) }
            }

            Switch.Group {
                Switch.Label {
                    +"Switch Label"
                }
                Switch(props)
            }
        }

        println(Switch)
        println(Switch.Description)
        println(Switch.Group)
        println(Switch.Label)

    }
}

[Big Chungus]

You can always do this then (although it's ugly)

import react.*

@JsModule("@headlessui/react")
@JsNonModule
external object Switch: RClass<RProps> {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Scott Wilson-Billing]

thanks, i did try that as one of my earlier attempts but got this error

[Scott Wilson-Billing]

Object 'Switch' is not abstract and does not implement abstract member

[Big Chungus]

add external

[Scott Wilson-Billing]

sorry, this is what i have giving that error

[Scott Wilson-Billing]

import react.*
@JsModule("@headlessui/react")
@JsNonModule
external object Switch: RClass<RProps> {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Big Chungus]

Ok, how's this then?

import react.*
@JsModule("@headlessui/react")
@JsNonModule
external object Switch {
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

operator fun Switch.invoke(props: RProps): RComponent<RProps, RState> = Switch.asDynamic()(props)

[Scott Wilson-Billing]

getting a different error now ...

[Scott Wilson-Billing]

with this:

println(Switch)
println(Switch.Description)
println(Switch.Group)
println(Switch.Label)

[Scott Wilson-Billing]

console displays:

[Scott Wilson-Billing]

[object module]
undefined
undefined
undefined

[Scott Wilson-Billing]

the closest so far is this

@file:JsModule("@headlessui/react")
@file:JsNonModule

import react.*

external object Switch {
    operator fun invoke(props: RProps): RComponent<RProps, RState>
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Big Chungus]

Does that one have Group, Label & Description as defined?

[Scott Wilson-Billing]

which with the console I get
function Switch(props)
function Description(props)
function Group$2(props)
function Label$1(props)

[Scott Wilson-Billing]

yep, all four defined 👍

[Scott Wilson-Billing]

and

Switch.Label {
//
}
Switch.Group {
//
}}

[Scott Wilson-Billing]

work as expected

[Scott Wilson-Billing]

but can't get

Switch {
}

[Scott Wilson-Billing]

to compile

[Big Chungus]

Are you sure marking Switch itself as RClass<RProps> doesn't work?

@file:JsModule("@headlessui/react")
@file:JsNonModule
import react.*
external object Switch: RClass<RProps> {
    operator fun invoke(props: RProps): RComponent<RProps, RState>
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Scott Wilson-Billing]

it comes back to a compile error
Object 'Switch' is not abstract and does not implement abstract member public abstract var contextType: RContext<Any>? defined in react.RClass

[Big Chungus]

Have you tried this already

@file:JsModule("@headlessui/react")
@file:JsNonModule
import react.*

external val Switch: RClass<RProps>
external object Switch {
    operator fun invoke(props: RProps): RComponent<RProps, RState>
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Big Chungus]

Might have to play around with @JsName if kotlin complains about duplicate names

[Big Chungus]

@file:JsModule("@headlessui/react")
@file:JsNonModule
import react.*

external val Switch: RClass<RProps>

@JsName("Switch")
external object SwitchEx {
    operator fun invoke(props: RProps): RComponent<RProps, RState>
    val Group: RClass<RProps>
    val Label: RClass<RProps>
    val Description: RClass<RProps>
}

[Big Chungus]

Wait, this should work

import react.*
@JsModule("@headlessui/react")
@JsNonModule
external object HeadlessUI {
  external object Switch {
      val Group: RClass<RProps>
      val Label: RClass<RProps>
      val Description: RClass<RProps>
  }
}
operator fun HeadlessUI.Switch.invoke(props: RProps): RComponent<RProps, RState> = Switch.asDynamic()(props)

[Scott Wilson-Billing]

ok, your last snippet was looking promising as well

[Big Chungus]

Yeah, both should work

[Big Chungus]

when you use @file:JsModule, it maps files 1 to 1 (flattens), but when you use @JsModule on value or object, it maps it to that value or object (thus the need for extra nesting)

[Scott Wilson-Billing]

got to jump on a meeting, but this looks good. will update after meeting. many thanks 👍

[Big Chungus]

good luck

[Scott Wilson-Billing]

had to make a slight tweak

import react.*
@JsModule("@headlessui/react")
@JsNonModule
external object HeadlessUI {
    object Switch {
        val Group: RClass<RProps>
        val Label: RClass<RProps>
        val Description: RClass<RProps>
    }
}
operator fun HeadlessUI.Switch.invoke(props: RProps): RComponent<RProps, RState> = HeadlessUI.Switch.asDynamic()(props)

[Scott Wilson-Billing]

all the functions are defined 👍

[Scott Wilson-Billing]

but ... i can't get the call site to work 😞

[Scott Wilson-Billing]

HeadlessUI.Switch.Group {
                HeadlessUI.Switch.Label {
                    + "Switch Label"
                }
                HeadlessUI.Switch() {

                }
            }

[Scott Wilson-Billing]

i get an unresolved reference for HeadlessUI.Switch

[Big Chungus]

Didn't the first option work (with @file:JsModule)

[Big Chungus]

Otherwise you could try this

fun Switch(props: RProps): RComponent<RProps, RState> = HeadlessUI.asDynamic().Switch(props)

[Big Chungus]

Or even making everything shut up

import react.*
@JsModule("@headlessui/react")
@JsNonModule
internal external val HeadlessUI: dynamic
val Switch: RClass<RProps> = HeadlessUI.Switch
val SwitchGroup: RClass<RProps> = HeadlessUI.Switch.Group
// etc...

[Scott Wilson-Billing]

🎉

[Scott Wilson-Billing]

here's the code ...

SwitchGroup {
                div("flex items-center") {
                    Switch {
                        attrs.checked = checked
                        attrs.className = switchClass
                        attrs.onChange = { setChecked(!checked) }
                        span(switchButtonClass) {}
                    }
                    SwitchLabel {
                        span("ml-4") {
                            + "This is a switch"
                        }

                    }
                }
            }

[Scott Wilson-Billing]

and the wrapper:

import react.*
@JsModule("@headlessui/react")
@JsNonModule
internal external val HeadlessUI: dynamic
val Switch: RClass<ReactSwitchProps> = HeadlessUI.Switch
val SwitchGroup: RClass<RProps> = HeadlessUI.Switch.Group
val SwitchLabel: RClass<RProps> = HeadlessUI.Switch.Label

[Scott Wilson-Billing]

you've been a brilliant help ⭐

[Scott Wilson-Billing]

is there anyway i can buy you a beer or 2 through paypal?

[Big Chungus]

Man I'm just as happy to get this solved! Always enjoy a good challenge 😄

[Scott Wilson-Billing]

thank-you - I'll be back 🤣 - you might regret it 😄

[Big Chungus]

I've been thinking of creating a gist where I'd put all the million ways you can export js code and wrap that in kotlin (each case is different I've found...), but never got to it 😄

[Scott Wilson-Billing]

yeah, i'm finding the kotlin docs really hard. my developer skills are iOS / Swift and many years ago Java

[Big Chungus]

I found that you need to know a lot more about js internals to do kotlin.js as compared to plain js 😄

[Scott Wilson-Billing]

you think we could get a tool that we can run against the JS lib and have the wrappers auto-generated

[Big Chungus]

Have you heard of dukat? It's not perfect, but works in some cases

[Big Chungus]

Although it will not link to other kotlin.js wrappers, but i usually use it as a starting point for hand-crafted declarations

[Scott Wilson-Billing]

yeah, i tried that but it didn't help 😞