HTMLElement

divIcon

// simulate external leaflet API
object L {
    fun <E: HTMLElement> divIcon(element: E) {
        // here leaflet can do everything with the given HTMLElement
        // e.g. appending text to the given HTMLElement
        element.appendChild(document.createTextNode("Hello World!"))
    }
}

// small wrapper Component to support fritz2 HTML DSL
fun RenderContext.divIcon(content: RenderContext.() -> Unit) {
    L.divIcon(div {
       content()
    }.domNode)
}

fun main() {
    // calling the wrapped leaflet component 
    // and using a fritz2 component inside
    render {
        divIcon {
            icon { fromTheme { fritz2 } }
        }
    }
}

div()

domNode

HTMLElement

fun RenderContext.stringify(content: RenderContext.() -> Unit): String {
    return Div(job = this.job).apply {
        content()
    }.domNode.innerHTML
}

fun main() {
    render {
        pre {
            +stringify {
               icon { fromTheme { fritz2 } }
            }
        }
    }
}

test()

content

Div()

domNode

innerHTML

icon()

fun stringify(content: RenderContext.() -> Unit): String {
    return Div(job = Job(parent = null)).apply {
        content()
    }.domNode.innerHTML
}

Job()

stringify()

String

domNode