Custom Components

JavaScript
1

I’m trying to create a custom HTML component based on an existing BUTTON:

fun FlowOrInteractiveOrPhrasingContent.pfInlineButton(
    text: String? = null,
    block: PfButton.() -> Unit = {}
) = PfButton(text, "pf-m-inline", consumer).visit(block)

class PfButton(text: String? = null, modifier: String?, consumer: TagConsumer<*>) :
    BUTTON(
        attributesMapOf("class", "pf-c-button"),
        consumer
    ) {
    init {
        if (text != null) {
            +text
        }
        if (modifier != null) {
            classes += modifier
        }
    }
}

The line classes += modifier in the init block causes an IllegalStateException: Wrong current tag.

Can anybody help here? What am I missing?

Thanks in advance
Harald

2

Thank you! Failed to reproduce the problem with a dummy project. What version of Kotlin and kotlinx-html do you use? Can you attach your project?

3

My code is at GitHub - hal/halos-console: halOS Console. The custom component is Button.kt: https://github.com/hal/halos-console/blob/master/src/main/kotlin/org/patternfly/Button.kt

In the meantime I found a workaround setting the CSS classes as part of the call to the super constructor.

I’ll leave a comment in the code where it failed: https://github.com/hal/halos-console/blob/master/src/main/kotlin/org/patternfly/Button.kt#L91

Thanks Harald

4

Thank you! I failed to reproduce the exception after I uncommented the code. Then I added the code from your first message to the Button file. And still failed to get the error on building and running the project. Can you write the steps to reproduce the problem?

5

These are the steps to reproduce the error on my machine (using commit 3e7193db9846c70523a4f377e219c18b282c513d)

git clone git@github.com:hal/halos-console.git
cd halos-console
./gradlew run

When opening the browser dev tools I can see the following error in the console:

Screen Shot 2020-05-18 at 20.58.19
Screen Shot 2020-05-18 at 20.58.191602×1026 155 KB

When I comment the init block, everything works as expected.

Thanks
Harald

6

Thank you! Reproduced the problem, will investigate it.

7

I minimized the project and created an issue in kotlinx.html project - IllegalStateException: "Wrong current tag" on try to change `classes` when class inherits HTMLTag and CommonAttributeGroupFacadeFlowInteractivePhrasingContent · Issue #148 · Kotlin/kotlinx.html · GitHub

8

Thanks @ivan.kubyshkin!