https://kotlinlang.org logo
#kotlinx-html
Title
# kotlinx-html
r

Reuben Firmin

10/26/2023, 7:58 PM
I used the "html to kotlinx.html" plugin to convert some flowbite html markup into kotlinx.html. worked great, except that svg properties and tabIndex aren't working. are these known issues? are there workarounds?
looks like it should be
tabIndex
. as for svg, i can make the first three properties attributes["x"], but what about path? how would i model that?
I ended up doing:
Copy code
unsafe {
                                    raw(
                                        """<path fill-rule="evenodd" 
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" 
                    clip-rule="evenodd"></path>"""
                                    )
                                }
that's pretty unsatisfying 😞
came back to this and got it working with:
Copy code
package org.example.application

import kotlinx.html.*
import kotlinx.html.attributes.Attribute
import kotlinx.html.attributes.StringAttribute

inline fun FlowContent.svg(classes: String, crossinline block : SvgTag.() -> Unit = {}) =
    SvgTag(classes, consumer).visit(block)

class SvgTag(classes: String, consumer: TagConsumer<*>) : HTMLTag("svg", consumer, attributesMapOf("class", classes),
    inlineTag = false, emptyTag = false) {

    var fill: String
        get()  = stringAttr[this, "fill"]
        set(newValue) {
            stringAttr[this, "fill"] = newValue
        }

    var viewbox: String
        get()  = stringAttr[this, "viewbox"]
        set(newValue) {
            stringAttr[this, "viewbox"] = newValue
        }

    var xmlns: String
        get()  = stringAttr.get(this, "xmlns")
        set(newValue) {
            stringAttr[this, "xmlns"] = newValue
        }
}

inline fun SvgTag.path(crossinline block : SvgPath.() -> Unit = {}) =
    SvgPath(consumer).visit(block)


class SvgPath(consumer: TagConsumer<*>): HTMLTag("path", consumer, emptyMap(), inlineTag = false, emptyTag = false) {
    var fillRule: String
        get() = stringAttr[this, "fill-rule"]
        set(newValue) {
            stringAttr[this, "fill-rule"] = newValue
        }

    var clipRule: String
        get() = stringAttr[this, "clip-rule"]
        set(newValue) {
            stringAttr[this, "clip-rule"] = newValue
        }

    var d: String
        get()  = stringAttr.get(this, "d")
        set(newValue) {
            stringAttr[this, "d"] = newValue
        }
}

internal val stringAttr : Attribute<String> = StringAttribute()
c

Cies

10/27/2023, 11:18 AM
i was about to explain to you what you already figured out: maximum experience point reward to you by $DEITY
r

Reuben Firmin

10/27/2023, 11:18 AM
🙂 I noticed your older threads about compile performance - did those get resolved with recent versions?
c

Cies

11/02/2023, 4:30 PM
Much better but "likely still slower than other Kotlin code". I quote that since it is impossible to know the compile time of a certain file or package. We're not sure how to get better compile perf and we are super happy with the typesafety/debugability/hackability of kotlinx.html code compared to the Groovy Templates we used before.