diff --git a/src/Directory.Build.props b/src/Directory.Build.props index d2579f2..5ae7a35 100644 --- a/src/Directory.Build.props +++ b/src/Directory.Build.props @@ -1,8 +1,8 @@  - 0.9.1 - Initial NuGet release + 0.9.2 + Complete view engine modules; add READMEs danieljsummers Bit Badger Solutions https://github.com/bit-badger/Giraffe.Htmx diff --git a/src/Htmx/Giraffe.Htmx.fsproj b/src/Htmx/Giraffe.Htmx.fsproj index f7c38a1..6063798 100644 --- a/src/Htmx/Giraffe.Htmx.fsproj +++ b/src/Htmx/Giraffe.Htmx.fsproj @@ -4,10 +4,12 @@ net6.0 true htmx header extensions and helpers for Giraffe + README.md + diff --git a/src/Htmx/README.md b/src/Htmx/README.md new file mode 100644 index 0000000..f4cd169 --- /dev/null +++ b/src/Htmx/README.md @@ -0,0 +1,33 @@ +## Giraffe.Htmx + +This package enables server-side support for [htmx](https://htmx.org) within [Giraffe](https://giraffe.wiki) and ASP.NET's `HttpContext`. + +### 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.HxPrompt with + | Some prompt -> ... // do something with the text the user provided + | None -> ... // no text provided +``` + +To set a response header: + +```fsharp + let myHandler : HttpHander = + fun next ctx -> + // some meaningful work + withHxPush "/some/new/url" >=> [other handlers] +``` + +### 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. \ No newline at end of file diff --git a/src/ViewEngine.Htmx/Giraffe.ViewEngine.Htmx.fsproj b/src/ViewEngine.Htmx/Giraffe.ViewEngine.Htmx.fsproj index 4517a32..784f743 100644 --- a/src/ViewEngine.Htmx/Giraffe.ViewEngine.Htmx.fsproj +++ b/src/ViewEngine.Htmx/Giraffe.ViewEngine.Htmx.fsproj @@ -4,10 +4,12 @@ net6.0 true Extensions to Giraffe View Engine to support htmx attributes and their values + README.md + diff --git a/src/ViewEngine.Htmx/README.md b/src/ViewEngine.Htmx/README.md new file mode 100644 index 0000000..cf03eae --- /dev/null +++ b/src/ViewEngine.Htmx/README.md @@ -0,0 +1,49 @@ +## Giraffe.ViewEngine.Htmx + +This package enables [htmx](https://htmx.org) support within the [Giraffe](https://giraffe.wiki) 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: + +```fsharp + 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. + +```fsharp + 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: + +```fsharp + HxTrigger.Click + |> HxTrigger.Filter.Shift + |> HxTrigger.FromDocument + |> HxTrigger.Delay "3s" + |> _hxTrigger + + // or + + (HxTrigger.Filter.Shift >> HxTrigger.FromDocument >> HxTrigger.Delay "3s") HxTrigger.Click + |> _hxTrigger +```