Skip to content
Html templating library for kotlin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Code coverage uploading xml report generation added Nov 26, 2017
examples Added inline component example Nov 26, 2017
gradle/wrapper Init commit for this shit Nov 10, 2017
src Refactored + Docs Nov 26, 2017
.gitignore
LICENSE Initial commit Nov 11, 2017
README.md Badge updated + Added code coverage badge Nov 26, 2017
build.gradle Code coverage uploading xml report generation added Nov 26, 2017
gradlew Init commit for this shit Nov 10, 2017
gradlew.bat Init commit for this shit Nov 10, 2017
settings.gradle Compile to jar config added Nov 12, 2017

README.md

h

Build Status Codecov branch release License

Html templating library for kotlin.

Get started

Download

  • Download the latest release. (View releases)
  • Clone the repo for the source code git clone https://github.com/phenax/h.
  • Test it with ./gradlew test. Generated test report -> build/reports/tests/test.

Examples

Simple component examples in /examples

Create a component

import io.github.phenax.h.Component
import io.github.phenax.h.Layout
import io.github.phenax.h.node.DOMNode
import io.github.phenax.h.layouts.EmptyLayout

class CardComponent(val myTitle: String): Component() {

  // Layout(EmptyLayout is no wrapper. You can use a custom layout)
  override val layout = EmptyLayout()

  // This renders a div card component
  // <div class="card">
  //   <h1 class="card--title">Card title</h1>
  //   <p class="card--description">Card description</p>
  // </div>
  override fun render(): DOMNode {
    return div( mapOf( "class" to "card" ),
      listOf(
        h1( mapOf( "class" to "card--title" ), myTitle),
        p( mapOf( "class" to "card--description" ), "Card description" )
      )
    )
  }
}

val helloWorldCard = CardComponent("Hello world")

OR

import io.github.phenax.h.*

fun createCard(myTitle: String) = component {
  div( mapOf( "class" to "card" ),
    listOf(
      h1( mapOf( "class" to "card--title" ), myTitle),
      p( mapOf( "class" to "card--description" ), "Card description")
    )
  )
}

val helloWorldCard = createCard("Hello world")

Create a layout

import io.github.phenax.h.Component
import io.github.phenax.h.Layout
import io.github.phenax.h.node.DOMNode

class HtmlLayout(val title: String = "Moosic"): Layout() {
  override fun render(component: AbstractComponent): DOMNode {
    return (
      html(null, listOf(
        head(null, listOf(
          h("title", null, listOf( text(title) ) ),
          style("/css/style.css"),                               // External stylesheet
          style(null, "html, body { background-color: red; }")   // Inline style
        )),
        body(null, listOf(
          div(null, h(component)),
          script("/js/script.js", mapOf( "defer" to "defer", "async" to "async" ))
        ))
      ))
    )
  }
}

Use components inside other components

class UserCardComponent(user: User): Component() {
  override val layout = EmptyLayout()
  override fun render(): DOMNode {
    return div(null, listOf(
      div(null, listOf( text(user.name) )),
      div(null, listOf( text('@' + user.nickname) )),
    ))
  }
}

class UserListComponent(usersList: List<User>): Component() {
  override val layout = EmptyLayout()
  override fun render(): DOMNode {
    return div(null,
      usersList.map { user ->
        div(null, listOf( h(UserCardComponent(user)) ))
      }
    )
  }
}

Render to html string

val component = CardComponent()
println(component.renderToHtml())
You can’t perform that action at this time.