Hi, I'm trying to port some code from kotlin-react...

# react

[Jonathan Lennox]

Hi, I'm trying to port some code from kotlin-react 16.13.1-pre-110-kotlin-1.4.0 to kotlin-react 18.3.1-pre.770, and I'm very confused as to what symbols I should be using and where I should be looking where to find them.

[Jonathan Lennox]

The old code I have (one file) looked like:

import kotlinx.css.span
import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.div
import react.dom.span
import react.router.dom.hashRouter
import react.router.dom.route
import react.router.dom.routeLink
import react.router.dom.switch

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        hashRouter {
            switch {
                route("/", exact = true) {
                    div {
                        routeLink("/dump") {
                            +"Dump viewer"
                        }
                        span {
                            +" | "
                        }
                        routeLink("/live") {
                            +"Live dashboard"
                        }
                    }
                }
                route("/dump", Dump::class, exact = true)
                route("/live", LiveDashboard::class, exact = true)
            }
        }
    }
}

[Jonathan Lennox]

I'm pretty sure I need kotlin-react-legacy, but what else do I need to change? Is there a compatibility guide (or series of guides) anywhere?

[turansky]

Example with hash router

[turansky]

I'm pretty sure I need kotlin-react-legacy

You can use it as intermediate step

[turansky]

If project isn't big - use kotlin-react at start is fine

[Jonathan Lennox]

How would the example use of createHashRouter work in override fun RBuilder.render() ? All the existing code I'm modifying is based on that API

[Jonathan Lennox]

Also, I have code that looks like this:

override fun RBuilder.render() {
        console.log("graph selection rendering")
        child(Selector::class) {
            attrs {
                onSelectedKeysChange = this@ChartSelection::selectedKeysChanged
                allKeys = props.allKeys
            }
            ref {
                selector = it as? Selector
            }
        }
        child(Chart::class) {
            attrs {
                title = props.title
                enableZoom = haveStoredData()
                graphType = props.graphType ?: "line"
                startZoomSeconds = props.startZoomSeconds
            }
            ref {
                chart = it as? Chart
            }
        }
    }

And I get

Unresolved reference. None of the following candidates is applicable because of receiver type mismatch:
public open fun <T> Consumer<TypeVariable(T)>.invoke(handler: RBuilder.(TypeVariable(T)) -> Unit): Unit defined in react.RElementBuilder
public open fun <P : Props> ElementType<TypeVariable(P)>.invoke(): Unit defined in react.RElementBuilder
public open fun <P : Props> ElementType<TypeVariable(P)>.invoke(handler: RHandler<TypeVariable(P)> /* = RElementBuilder<TypeVariable(P)>.() -> Unit */): Unit defined in react.RElementBuilder
public open fun <T> Provider<TypeVariable(T)>.invoke(value: TypeVariable(T), handler: RHandler<ProviderProps<TypeVariable(T)>> /* = RElementBuilder<ProviderProps<TypeVariable(T)>>.() -> Unit */): Unit defined in react.RElementBuilder

What should I be doing instead?

[Jonathan Lennox]

I figured out the latter: I believe it's

ref = useRefCallback<Chart> {
   chart = it
}

but I still haven't figured out the hashRouter.

[Jonathan Lennox]

This code (even before I try to figure out the routes)

import react.RBuilder
import react.RComponent
import react.PropsWithChildren
import react.State
import react.router.*
import react.router.dom.createHashRouter

class App : RComponent<PropsWithChildren, State>() {
    private val hashRouter = createHashRouter(
        routes = arrayOf(
        )
    )

    override fun RBuilder.render() {
        RouterProvider {
            router = hashRouter
        }
    }
}

Gives me Unresolved reference: router for the parameter to RouterProvider, which I don't understand. What am I doing wrong?

[turansky]

RBuilder requires redundant attrs block.

[turansky]

override fun RBuilder.render() {
    RouterProvider {
        attrs {
            router = hashRouter
        }
    }
}

[Jonathan Lennox]

On the previous thing - now that I've got it running, I think I was wrong about the RefCallback. When I hit that, I'm getting

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

at runtime.

[Jonathan Lennox]

Answer: it needs to be ref = RefCallback<Chart>, not ref = useRefCallback<Chart>.

[turansky]

useRefCallback required if need memoization for callback.
Otherwise you will force redundant rerenderings.

[turansky]

useRefCallback - hook and should be called on top level of functional component