Kotlin / kotlin-frontend-plugin

Gradle Kotlin (http://kotlinlang.org) plugin for frontend development
Apache License 2.0
561 stars 69 forks source link

React Dev Tools Error When Inpecting Code #114

Closed piacenti closed 5 years ago

piacenti commented 5 years ago

I got a fairly simple setup that looks like this:

enum class AppOptions {
    Option1, Option2
}

interface AppState : RState {
    var options: MutableList<AppOptions>
    var selectedOption: AppOptions
}

class App : RComponent<RProps, AppState>() {
    init {
        state.options = mutableListOf(Option1, Option2)
        state.selectedOption = Option1
    }

    override fun componentDidMount() {
        setState(state)
    }

    override fun RBuilder.render() {
        listOf(nav(classes = "navbar navbar-default") {
            key = "navbar"
            div(classes = "container") {
                a(classes = "navbar-brand", href = "#") { +"Elders Quorum" }
                ul(classes = "nav navbar-nav") {
                    li(classes = if (state.selectedOption == Option1) "active" else "") {
                        a(href = "#") {
                            attrs {
                                onClickFunction = { state.selectedOption = Option1;setState(state) }
                            }
                            +"Option1"
                        }
                    }
                    li(classes = if (state.selectedOption == Option2) "active" else "") {
                        a(href = "#") {
                            attrs {
                                onClickFunction = { state.selectedOption = Option2;setState(state) }
                            }
                            +"Option2"
                        }
                    }
                }
            }
        }, div(classes = "container") {
            key = "content"
            renderTarget(this)
        })
    }

    private fun renderTarget(rdomBuilder: RDOMBuilder<DIV>): ReactElement {
        if (state.selectedOption == Option1)
            return rdomBuilder.span { +"Option1" }
        else if (this.state.selectedOption == Option2)
            return rdomBuilder.span { +"Option2" }
        return rdomBuilder.div { }
    }
}

fun RBuilder.app() = child(App::class) {}
fun main(args: Array<String>) {
    render(document.getElementById("react")) {
        app()
    }
}

It works fine. React Dev Tools give the right information for state.selectedOption. However, when trying to use it to access state.options it throws this error:

Uncaught TypeError: Cannot read property 'length' of undefined at AbstractMutableList.get (kotlin.js:23508) at backend.js:7715 at Array.forEach () at Bridge._inspectResponse (backend.js:7711) at Bridge._handleMessage (backend.js:7592) at listener (backend.js:92)

The specific portion of the code where that happens looks like this: Object.defineProperty(ArrayList.prototype, 'size', {get: function () { return this.array_hd7ov6$_0.length; }});

Anything wrong with my setup?

piacenti commented 5 years ago

wrong place for this