Now that the <component interfaces are sealed> I'm running into some issues with externals for <head...

# react

[Daniel Rampelt]

Now that the component interfaces are sealed I'm running into some issues with externals for headlessui.

They have some components named Menu, Menu.Item, Menu.Button. I previously had something like this for the externals, but now using external object doesn't work since FunctionComponent is sealed:

external object Menu : FunctionComponent<...> {
    val Item: FunctionComponent<...>
    val Button: FunctionComponent<...>
}

Is there a better way to handle something like this?

[turansky]

cc @Sergei Grishchenko

[turansky]

Which module annotation do you have for Menu ?

[Daniel Rampelt]

I'm using @file:JsModule("@headlessui/react")

[turansky]

And @JsName("default") for Menu ?

[Daniel Rampelt]

Nope, no annotation on menu. I have a bunch of other components in this file as well, just importing @headlessui/react will be an object with all of the components

[Daniel Rampelt]

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

[turansky]

Will it work with suppress?

[turansky]

Also FC alias is preferable for declarations

[Daniel Rampelt]

Haven't tried, not sure what I would put in suppress - it's a compile error:

Headlessui.kt: (43, 26): Inheritance of sealed classes or interfaces from different module is prohibited

[Daniel Rampelt]

Yeah realized that after, FC has the same issue since it's just an alias though

[turansky]

@file:Suppress("SEALED_INHERITOR_IN_DIFFERENT_MODULE")

[Daniel Rampelt]

Ooh yep that works as long as I put it in the react package as well

[Daniel Rampelt]

Other option I just tried is having a separate file for the child components, not as nice but it does work as well:

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

package headlessui

import react.FunctionComponent

@JsName("Item")
external val MenuItem: FunctionComponent<MenuItemProps>

@JsName("Button")
external val MenuButton: FunctionComponent<MenuButtonProps>

@JsName("Items")
external val MenuItems: FunctionComponent<MenuItemsProps>

[Daniel Rampelt]

And then keep just external val Menu: ... in the original file

[turansky]

Suppress is preferred right now

[Daniel Rampelt]

Okay thanks for the help!

[turansky]

Because I’m not sure, that sealed will stay for FC

[turansky]

https://github.com/JetBrains/kotlin-wrappers/pull/988

[turansky]

@Daniel Rampelt Thank you for your use case

[turansky]

FYI - Next step:

@Deprecated(replaceWith="FC")
typealias FunctionComponent<P> = FC<P>

😈

[turansky]

Fix released