React Binding to ObservableState

Actually, to bind my ObservableState to a React component, I’m wrapping it into a div:

div(store) {
  react {
    awesomeExternalReactComponent {
          (...)
    }
  }
}

I tried to workaround this extra div but, unfortunately, using the builtin extension bind(store, true, factory) doesn’t quite work as expected since the React widget is not a Container and we’re ending up with duplicated react components on every state update since removeChildren is ignored:

// Homemade version, trying to skip the extra <div>
fun <S> Container.react(
        state: ObservableState<S>,
        classes: Set<String>? = null,
        className: String? = null,
        builder: RBuilder.(S) -> Unit): Widget {

    return react(classes = classes, className = className) {
        builder(state.value)
    }.bind(state, true) { // remove children *NOT* working
        react(classes = classes, className = className) {
            builder(it)
        }
    }
}

Is that the expected behavior or can it be filled as a bug?

[rjaros]

I think there is no need to use bind for React component, because it already supports state management. You just need to connect your component to your store. You can do this with a single line:

store.subscribe { react.state = it }

Or you can create a DSL builder function like this:

fun <S> Container.reactBind(      // <- we need new name to avoid conflict
    state: ObservableState<S>,
    classes: Set<String>? = null,
    className: String? = null,
    builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit
): React<S> {
    val react = React(state.getState(), classes ?: className.set, builder)
    state.subscribe { react.state = it }
    this.add(react)
    return react
}

And you can use it:

            val store = ObservableValue("Some text")
            vPanel {
                reactBind(store) { getState, _ ->
                    div {                           // <- this is ReactJS component, not KVision
                        +getState()
                    }
                }
                button("Add a dot").onClick {
                    store.value += "."
                }
            }

I’ll add this DSL function to the next KVision release.

[rjaros]

Fixed in 3.16.1