I used the "html to kotlinx.html" plugin to conver...

# kotlinx-html

[Reuben Firmin]

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?

[Reuben Firmin]

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?

[Reuben Firmin]

I ended up doing:

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 😞

[Reuben Firmin]

came back to this and got it working with:

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()

[Cies]

i was about to explain to you what you already figured out: maximum experience point reward to you by $DEITY

[Reuben Firmin]

🙂

I noticed your older threads about compile performance - did those get resolved with recent versions?

[Cies]

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.

[magnumrocha]

@Reuben Firmin I'm apply your DSL, but the SVG is not displayed, any idea? the "path" tag size on html is 0 x 0 (zero)

[magnumrocha]

see:

[Reuben Firmin]

I have a much more complete SVG tag that I use now. DM me your email address and I'll send you the file

[Dmitriy]

@Reuben Firmin Hey Reuben, could you please share the SVG wrapper on GitHub? Just a plain kt file to use or take inspiration from is good enough. Maybe someone will make a lib out of it.

Also found https://github.com/nwillc/ksvg with a standalone wrapper that can be then shoved into kotlinx.html using unsafe like your first solution.