[SOLVED] Compose HTML with kotlinx.html

Compose HTML with kotlinx.html

I'm trying to build html layout page usin kotlinx.html. I can create main page, but having problem breaking it to parts generated by separate functions. I don't know how to include html created in separate function into main document.

I had success with using unsafe, but i think there should be better way

my unit test look like:

import kotlinx.html.*
import kotlinx.html.stream.appendHTML
import kotlinx.html.stream.createHTML
import org.junit.jupiter.api.Test

class TestHtmlDsl {

    fun html(): String {
        val stringBuffer = StringBuffer()
        stringBuffer.appendHTML().html {
            head {
            }
            body {
                h1 { +"Head lines" }
                div {
                    id = "main div"
                    div {
                       strong {+"sub div"}
                    }
                    getDiv1()
                    getDiv2()
                }
            }
        }
        return stringBuffer.toString()
    }

    fun getDiv1(): DIV.() -> Unit {
        return {
            p { +"first try" }
        }
    }

    fun getDiv2(): String {
        return createHTML().div {
            p { +"second try" }
        }
    }

    @Test
    fun testHtml() {
        println(html())
    }
}

it produces output:

<html>
  <head></head>
  <body>
    <h1>Head lines</h1>
    <div id="main div">
      <div><strong>sub div</strong></div>
    </div>
  </body>
</html>

both divs with paragraphs are missing

I'm runnig this server side (jvm). I found some examples in js, but had no luck with them

I would love to find better docs for kotlinx somewhere

Solution

getDiv1() returns function, so you need to call it: getDiv1()()

getDiv2() returns String, so you need to append it: +getDiv2() (note that all reserved characters in HTML (like <, >) will be replaced with character entities (<, >), so this unlikely will be you choice anyway)