How are these kind of imports translated to Kotlin...

# javascript

[Nikola Milovic]

How are these kind of imports translated to Kotlin?

import { Transition } from '@headlessui/react'

 <Transition.Child />

OR 
<motion.div

As JsName doesn't accept . , tried some shenanginas with extension functions but cannot get it to work

[Big Chungus]

@JsModule("@headlessui/react")
external object HeadlessUI {
 class Transition {
    class Child
  }
}

// Usage

HeadlessUI.Transition.Child

[Big Chungus]

Alternatively, to avoid object wrapping

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

class Transition {
  class Child
}

// Usage

Transition.Child

[Nikola Milovic]

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

external class Transition: ComponentClass<TransitionProps> {
    class Child : ComponentClass<TransitionChildProps> {}
}

external interface TransitionProps : Props {
}

Something along these lines? But now I have to implement the Component Class

Tried FC<P> instead of ComponentClass but I lose the ability for this kind of syntax

Transition.Child {
        attrs. ... = ...
}

[andylamax]

I would be going for TransitionChild syntax instead of Transition.Child

[Nikola Milovic]

@andylamax how can I achieve that? I don't mind either

[andylamax]

@JsModule("@headlessui/react")
external val Transition : ComponentType<TransitionProps>

val TransitionChild : ComponentType<TransitionChildProps> = Transition.asDynamic().Child

[turansky]

@Daniel Rampelt do you have open wrappers for headlessui ?

[Daniel Rampelt]

No sorry, just have them as part of my project for now

[Big Chungus]

Might still be worth sharing it here for copy/paste at least

[Daniel Rampelt]

https://gist.github.com/drampelt/7856234a2bac6b0b5e337c1fd197d196

Discussed a while back in this thread
https://kotlinlang.slack.com/archives/C5ZTZ6ER0/p1637961054032000