除了傳統的 HTML，Ktor 也在嘗試是否能和最近越來越流行的 HTMX 進行整合

如果沒聽過什麼是 HTMX，這是一個只有幾 KB 的前端 JavaScript 小型框架，它的目標是讓你用 HTML 屬性 就能完成許多原本需要寫 JavaScript 的互動效果。

它的理念是 「超能力 HTML」（Hypertext Markup eXtensions），讓 HTML 本身就能處理 AJAX 請求、CSS 過渡、WebSocket 更新、SSE（Server-Sent Events）等功能。

甚至可以用像是 hx-target="#id" 的方式，把回應更新到指定元素。

要善用這個寫法，我們可以使用Ktor 對 HTMX 的支援套件。

參考文件 https://openaidoc.org/zh-Hant/ktor/htmx-integration

首先我們安裝 HTMX 套件

implementation("io.ktor:ktor-server-htmx")
implementation("io.ktor:ktor-htmx")
implementation("io.ktor:ktor-htmx-html")

接著安裝套件

fun Application.module() {
    configureHtmx()
}

安裝好之後，由於目前對 HTMX 的支援還是實驗性的 API

所以要加上 @ExperimentalKtorApi 和 @OptIn(ExperimentalKtorApi::class) 標記

安裝好之後，我們就可以用前面說過的 DSL 方式

在 HTML

@OptIn(ExperimentalKtorApi::class)
html {
    head {
        // Include HTMX library
        script(src = "https://unpkg.com/htmx.org@1.9.10") {}
    }
    body {
        button {
            attributes.hx {
                get = "/data"
                target = "#result"
                swap = HxSwap.outerHtml
                trigger = "click"
            }
            +"Load Data"
        }
    }
}

就會生成對應的 HTMX 屬性

<button hx-get="/api/data" hx-target="#result-div" hx-swap="outerHTML" hx-trigger="click">Load Data</button>

如果要生成比較複雜的對應路由，會類似這樣

route("data") {
    // Regular request
    get {
        call.respondText("Please use HTMX to load this data")
    }

    // Any HTMX request
    hx.get {
        call.respondText("<p>Data loaded via HTMX!</p>")
    }

    // HTMX request with specific target
    hx {
        target("#result") {
            get {
                call.respondText("<p>Data specifically for #result element</p>")
            }
        }

        // HTMX request with specific trigger
        trigger("#load-button") {
            get {
                call.respondText("<p>Data loaded by #load-button</p>")
            }
        }
    }
}

hx 開頭的路由都會需要有對應的 header 才能進來，所以不會跟傳統的路由混在一起。

Ktor 背後的實作其實跟 HTML Parser 和 Route Parser是一樣的概念，都是利用 Kotlin 的 trailing lambda 所設計的函數，所以可以用一個 hx 函數將資料帶入 parser 裡面進行處理。

今天的部分就到這邊，我們明天見！