Giraffe.Htmx/src/ViewEngine.Htmx/README.md

Giraffe.ViewEngine.Htmx

This package enables htmx support within the Giraffe view engine.

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
• HxTrigger
• HxVals

Learn

htmx's attributes and these attribute functions map one-to-one. The lone exception is _hxBoost, which implies true; use _hxNoBoost to set it to false. 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