Type-Safe Hypermedia-First DSL for Reactive Backend-Driven Web Applications
This project includes a demo web application featuring examples from Data-Star, running on Ktor and using the HtmlFlow Kotlin DSL to generate HTML.
HtmlFlow DSL provides a type-safe way to define Datastar attributes in Kotlin. Next is a sample of the Counter example with a strongly typed signal and another one from Active Search using events and modifiers:
div {
val count: Signal = dataSignal("count", 0)
div {
dataInit("@get('/counter/events')")
span {
attrId("counter")
dataText(count)
}
}
} |
div {
attrId("demo")
input {
attrType(EnumTypeInputType.TEXT)
attrPlaceholder("Search...")
dataBind("search")
dataOn("input", "@get('/active-search/search')") {
debounce(200.milliseconds)
}
}
} |
Note that the count variable is of type Signal
and simply binds to the data-text in a type-safe way,
regardless of the name passed to the Signal constructor.
|
Modifiers such as debounce are added inside a lambda using
builders, following an idiomatic Kotlin style.
|
HtmlFlow DSL provides type-safe backend handlers for DataStar actions.
In the next sample, taken from the “Click to Load” DataStar example,
note how the action get is attached to the handler given by the function reference ::clickToLoadMore.
Also, HtmlFlow DSL supports strongly typed DataStar expressions,
allowing their composition with the infix operator and,
such as in the expression !fetching and get(::clickToLoadMore).
Note how the JavaScript expression for the onclick event handler (right side)
is expressed in Kotlin through HtmlFlow in a type-safe way:
button {
val fetching = dataIndicator("_fetching")
dataAttr("disabled", fetching)
dataOn("click", !fetching and get(::clickToLoadMore))
text("Load More")
} |
<button
data-indicator:_fetching
data-attr:aria-disabled="`${$_fetching}`"
data-on:click="!$_fetching && @get('/examples/click_to_load/more')"
>
Load More
</button> |
Run with: ./gradlew run and open http://localhost:8080 in your browser.
Check all examples from the index page and corresponding HtmlFlow view definitions:
- Active Search - ActiveSearch.kt
- Bulk Update - BulkUpdate.kt
- Click To Edit - ClickToEdit.kt
- Click To Load - BulkUpdate.kt
- Counter Via Signals - CounterViaSignals.kt
- DBmon - DBmon.kt
- Delete Row - DeleteRow.kt
- File Upload - FileUpload.kt
- Infinite Scroll - InfiniteScroll.kt
- Inline Validation - InlineValidation.kt