From 50c66435e8eb07eef3ed0f3f3fb9550e9877552c Mon Sep 17 00:00:00 2001 From: "Daniel J. Summers" Date: Fri, 14 Apr 2023 16:56:08 -0400 Subject: [PATCH] Add _hxOn and _hxSwapWithTransition - Update scripts and version to 1.9.0 --- .gitignore | 1 + src/Common/Common.fs | 2 +- src/Common/README.md | 2 +- src/Directory.Build.props | 4 ++-- src/Htmx/Htmx.fs | 2 +- src/Htmx/README.md | 2 +- src/Tests/ViewEngine.fs | 13 +++++++++++-- src/ViewEngine.Htmx/Htmx.fs | 15 +++++++++++---- src/ViewEngine.Htmx/README.md | 10 ++++++++-- 9 files changed, 37 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index 1592c8d..6e5b0be 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ .ionide .idea *.user +.vscode diff --git a/src/Common/Common.fs b/src/Common/Common.fs index 9a75b8c..4c523c1 100644 --- a/src/Common/Common.fs +++ b/src/Common/Common.fs @@ -1,4 +1,4 @@ -/// Common definitions shared between attribute values and response headers +/// Common definitions shared between attribute values and response headers [] module Giraffe.Htmx.Common diff --git a/src/Common/README.md b/src/Common/README.md index ce607f5..4c55b6d 100644 --- a/src/Common/README.md +++ b/src/Common/README.md @@ -2,4 +2,4 @@ This package contains common code shared between [`Giraffe.Htmx`](https://www.nuget.org/packages/Giraffe.Htmx) and [`Giraffe.ViewEngine.Htmx`](https://www.nuget.org/packages/Giraffe.ViewEngine.Htmx), and will be automatically installed when you install either one. -**htmx version: 1.8.6** +**htmx version: 1.9.0** diff --git a/src/Directory.Build.props b/src/Directory.Build.props index 99fc498..7ffb555 100644 --- a/src/Directory.Build.props +++ b/src/Directory.Build.props @@ -2,8 +2,8 @@ net6.0;net7.0 - 1.8.6 - Update script tags for htmx 1.8.6 + 1.9.0 + Add support for hx-on and CSS transitions; update script tags to pull htmx 1.9.0 danieljsummers Bit Badger Solutions https://github.com/bit-badger/Giraffe.Htmx diff --git a/src/Htmx/Htmx.fs b/src/Htmx/Htmx.fs index ff7f1e0..edfb8db 100644 --- a/src/Htmx/Htmx.fs +++ b/src/Htmx/Htmx.fs @@ -1,4 +1,4 @@ -module Giraffe.Htmx +module Giraffe.Htmx open Microsoft.AspNetCore.Http open Microsoft.Extensions.Primitives diff --git a/src/Htmx/README.md b/src/Htmx/README.md index f3101c9..3a38ef9 100644 --- a/src/Htmx/README.md +++ b/src/Htmx/README.md @@ -2,7 +2,7 @@ This package enables server-side support for [htmx](https://htmx.org) within [Giraffe](https://giraffe.wiki) and ASP.NET's `HttpContext`. -**htmx version: 1.8.6** +**htmx version: 1.9.0** ### Setup diff --git a/src/Tests/ViewEngine.fs b/src/Tests/ViewEngine.fs index 1db9a61..d632377 100644 --- a/src/Tests/ViewEngine.fs +++ b/src/Tests/ViewEngine.fs @@ -344,6 +344,11 @@ let attributes = test "_hxNoBoost succeeds" { td [ _hxNoBoost ] [] |> shouldRender """""" } + test "_hxOn succeeds" { + let newLine = "\n" + strong [ _hxOn "submit: alert('oops')\nclick: alert('howdy!')" ] [] + |> shouldRender $"""""" + } test "_hxParams succeeds" { br [ _hxParams "[p1,p2]" ] |> shouldRender """
""" } @@ -385,6 +390,10 @@ let attributes = test "_hxSwap succeeds" { del [ _hxSwap "innerHTML" ] [] |> shouldRender """""" } + test "_hxSwapWithTransition succeeds" { + del [ _hxSwapWithTransition "innerHTML" ] [] + |> shouldRender """""" + } test "_hxSwapOob succeeds" { li [ _hxSwapOob "true" ] [] |> shouldRender """
  • """ } @@ -413,14 +422,14 @@ let script = let html = RenderView.AsString.htmlNode Script.minified Expect.equal html - """""" + """""" "Minified script tag is incorrect" } test "unminified succeeds" { let html = RenderView.AsString.htmlNode Script.unminified Expect.equal html - """""" + """""" "Unminified script tag is incorrect" } ] diff --git a/src/ViewEngine.Htmx/Htmx.fs b/src/ViewEngine.Htmx/Htmx.fs index ea7d07a..e06eb01 100644 --- a/src/ViewEngine.Htmx/Htmx.fs +++ b/src/ViewEngine.Htmx/Htmx.fs @@ -223,6 +223,9 @@ module HtmxAttrs = /// Overrides a previous `hx-boost` let _hxNoBoost = attr "hx-boost" "false" + /// Attach an event handler for DOM or htmx events + let _hxOn = attr "hx-on" + /// Filters the parameters that will be submitted with a request let _hxParams = attr "hx-params" @@ -262,6 +265,10 @@ module HtmxAttrs = /// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd') let _hxSwap = attr "hx-swap" + /// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd'), enabling CSS + /// transitions + let _hxSwapWithTransition = sprintf "%s transition:true" >> _hxSwap + /// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target let _hxSwapOob = attr "hx-swap-oob" @@ -289,14 +296,14 @@ module Script = /// Script tag to load the minified version from unpkg.com let minified = - script [ _src "https://unpkg.com/htmx.org@1.8.6" - _integrity "sha384-Bj8qm/6B+71E6FQSySofJOUjA/gq330vEqjFx9LakWybUySyI1IQHwPtbTU7bNwx" + script [ _src "https://unpkg.com/htmx.org@1.9.0" + _integrity "sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" _crossorigin "anonymous" ] [] /// Script tag to load the unminified version from unpkg.com let unminified = - script [ _src "https://unpkg.com/htmx.org@1.8.6/dist/htmx.js" - _integrity "sha384-denUmZOxhLrCvV+ej1uWe4EXwjmJtWzbg0sjv6YfuHhUAP0CEVIArcYjlUbJHh87" + script [ _src "https://unpkg.com/htmx.org@1.9.0/dist/htmx.js" + _integrity "sha384-zeiPGhU5MGHaNAV6/ti/m1CChQCUxkLGY/3GVEVPGowI7V2AhfwLDg/zkXjRywCO" _crossorigin "anonymous" ] [] diff --git a/src/ViewEngine.Htmx/README.md b/src/ViewEngine.Htmx/README.md index 06b365e..fa61e93 100644 --- a/src/ViewEngine.Htmx/README.md +++ b/src/ViewEngine.Htmx/README.md @@ -2,7 +2,7 @@ This package enables [htmx](https://htmx.org) support within the [Giraffe](https://giraffe.wiki) view engine. -**htmx version: 1.8.6** +**htmx version: 1.9.0** ### Setup @@ -33,7 +33,13 @@ This also supports [fragment rendering](https://bitbadger.solutions/blog/2022/fr ### 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: +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. ```fsharp