Giraffe.Htmx/src/Htmx

Giraffe.Htmx

This package enables server-side support for htmx within Giraffe and ASP.NET's HttpContext.

htmx version: 4.0.0-alpha6

Upgrading from v2.x: the migration guide lists changes for v4. For this package, the HX-Trigger and HX-Trigger-Name headers are marked obsolete. They are replaced by HX-Source, which provides the triggering tag name and id attribute. The HX-Prompt header has also been marked as obsolete, as the hx-prompt attribute which generated its content has been removed.

Obsolete elements will be removed in the first production v4 release.

Setup

1. Install the package.
2. Prior to using the request header extension properties or the header-setting HttpHandlers, open Giraffe.Htmx.

Use

To obtain a request header, using the IHeaderDictionary extension properties:

let myHandler : HttpHander =
    fun next ctx ->
        match ctx.Target with
        | Some elt -> ... // do something with id of the target element
        | None -> ... // no target element provided

To set a response header:

let myHandler : HttpHander =
    fun next ctx ->
        // some meaningful work
        withHxPushUrl "/some/new/url" >=> [other handlers]

The HxSwap module has constants to use for the HX-Reswap header. These may be extended with settle, show, and other qualifiers; see the htmx documentation for the hx-swap attribute for more information.

To load the package-provided htmx library without using Giraffe.ViewEngine, use HtmxScript.local.

Learn

The naming conventions of this library were selected to mirror those provided by htmx. The header properties become Hx* on the ctx.Request.Headers object, and the response handlers are withHx* based on the header being set. The only part that does not line up is withHxTrigger* and withHxTriggerMany; the former set work with a single string (to trigger a single event with no arguments), while the latter set supports both arguments and multiple events.