43 lines
2.1 KiB
Markdown
43 lines
2.1 KiB
Markdown
## Giraffe.Htmx
|
|
|
|
This package enables server-side support for [htmx](https://htmx.org) within [Giraffe](https://giraffe.wiki) and ASP.NET's `HttpContext`.
|
|
|
|
**htmx version: 4.0.0-alpha6**
|
|
|
|
_Upgrading from v2.x: the [migration guide](https://four.htmx.org/migration-guide-htmx-4/) 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 `HttpHandler`s, `open Giraffe.Htmx`.
|
|
|
|
### Use
|
|
|
|
To obtain a request header, using the `IHeaderDictionary` extension properties:
|
|
|
|
```fsharp
|
|
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:
|
|
|
|
```fsharp
|
|
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. |