Documentation for kotlin-react

[hofi99]

Migrating kotlin-react from a lower version than pre.282 is currently quite difficult due to the lack of documentation on the new kotlin-react and also kotlin-react-dom versions with the ChildrenBuilder() and its other changes. It would be really helpful to have a demo project with functional components and especially class components as I haven't seen an updated project using these.

Currently having just the changelog doesn't seem to be sufficient for a smooth migration process. An introduction like the one from kotlin-react-legacy would help immensely in that regard.

[turansky]

Demo projects:

• https://github.com/karakum-team/kotlin-react-table-sample
• https://github.com/karakum-team/kotlin-mui-showcase

cc @SebastianAigner

[piacenti]

The examples above don't include any class components. There is still a few situations where writing a class component is more straightforward than using hooks so it would be nice to still be able to use them. It seems the new code only has a builder that is very much locked down to be used only from functional components. Might help to loosen up the restrictions a bit. Currently I can get a class component in the new code, using the new builder, by writing something rather hacky like this:

data class ThingState(var click: Boolean = false):State
class Thing : Component<Props, ThingState>() {
    init {
        state =ThingState() 
    }
    companion object{
    private val render =FC<Props> {
        button {
            +"Click Me"
            onClick = {
                setState(state.copy { click = !state.click })
            }
        }
        div {
            +state.click.toString()
        }
     }
   }
    override fun render(): ReactNode = render.create()
}

The obvious side effect of this is that if I look at React DevTools I see a Thing component followed by an Anonymous component (or whatever name I give to the inner functional component). There are potentially other ways to avoid that but they likely would rely on accessing the children of the builder which is also inaccessible.

[hofi99]

@piacenti Have a look at our project CampusQR where we use class components with the new kotlin wrappers.

[piacenti]

Looks good and looks similar to how the old wrapper is setup. I think that should be included in the new dsl so that people don't have to reimplement that same code in every project. Good use of fragment by the way, it would definitely makes my hack above much cleaner and not much of a hack at all since there would be no need for a nested FC

[hofi99]

I was thinking the same but apparently they want to push people towards using function components. Not perfect to have this code in every project, but since it only changes very rarely I guess it's not that big of a problem for us

[Martmists-GH]

I'm trying to replicate from the examples listed here, but it seems some big changes happened to the API:

[piacenti]

@Martmists-GH Make sure you have the function available. There is an FC function and FC interface. They share the same name and are in the same package. The interface is in the kotlin-react-core module while the function is in the kotlin-react module

fun <P : Props> FC(
    block: ChildrenBuilder.(props: P) -> Unit,
): FC<P> 

external interface FC<in P : Props> :
    ComponentType<P>

[santansarah]

Sort of related to documentation - I'm just getting into kotlin-emotion w/React & started to work this up:

https://github.com/santansarah/kotlin-wrappers/tree/master/kotlin-emotion

This is a work-in-progress; just a concept really. Would this be useful? Is this the right spot for it? If there's interest for me to keep going, let me know...or if you have ideas, things that should be included, etc...

[hofi99]

Love the initiative since it lowers the entry barrier! @santansarah

[santansarah]

Cool, thanks @hofi99. I made some updates & I'll continue to work on it in my free time. To all - feel free to make edits; comments, especially since I'm still getting familiar with the library.