Giraffe.Htmx/src/ViewEngine.Htmx

Giraffe.ViewEngine.Htmx

This package enables htmx support within the Giraffe view engine.

htmx version: 2.0.10

Upgrading from v1.x: see the migration guide for changes

Setup

1. Install the package.
2. Prior to using the attribute or support modules, open Giraffe.ViewEngine.Htmx.

Use

Following Giraffe View Engine's lead, there are a set of attribute functions for htmx; for many of the attributes, there are also helper modules to assist with typing the values. The example below utilizes both:

let autoload =
    div [ _hxGet "/this/data"; _hxTrigger HxTrigger.Load ] [ str "Loading..." ]

Support modules include:

• HxEncoding
• HxHeaders
• HxParams
• HxRequest
• HxSwap (requires open Giraffe.Htmx)
• HxTrigger
• HxVals

Htmx.Script.local creates an XmlNode to load the package-provided htmx library. There are also two XmlNodes that will load the htmx script from jsdelivr; Htmx.Script.cdnMinified loads the minified version, and Htmx.Script.cdnUnminified loads the unminified version (useful for debugging). When using the CDN nodes and a Content Security Policy (CSP) header, cdn.jsdelivr.net needs to be listed as an allowable script-src.

This also supports fragment rendering, providing the flexibility to render an entire template, or only a portion of it (based on the element's id attribute).

Learn

htmx's attributes and these attribute functions map one-to-one. There are two exceptions:

• _hxBoost implies true; use _hxNoBoost to set it to false.
• _hxSwapWithTransition renders the standard hx-swap attribute and appends transition:true to the specified swap value.

The htmx hx-on attribute supports multiple events if they are separated with a newline (\n) character. The value provided to this attribute will be attribute-escaped, but in testing, it was interpreted correctly.

The support modules contain named properties for known values (as illustrated with HxTrigger.Load above). A few of the modules are more than collections of names, though:

• HxRequest has a Configure function, which takes a list of strings; the other functions in the module allow for configuring the request.

HxRequest.Configure [ HxRequest.Timeout 500 ] |> _hxRequest 

• HxTrigger is (by far) the most complex of these modules. Most uses won't need that complexity; however, complex triggers can be defined by piping into or composing with other functions. For example, to define an event that responds to a shift-click anywhere on the document, with a delay of 3 seconds before firing:

HxTrigger.Click
|> HxTrigger.Filter.Shift
|> HxTrigger.FromDocument
|> HxTrigger.Delay "3s"
|> _hxTrigger

// or

(HxTrigger.Filter.Shift >> HxTrigger.FromDocument >> HxTrigger.Delay "3s") HxTrigger.Click
|> _hxTrigger