Add _hxOn and _hxSwapWithTransition
- Update scripts and version to 1.9.0
This commit is contained in:
parent
5b3a1be87e
commit
50c66435e8
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -5,3 +5,4 @@
|
||||||
.ionide
|
.ionide
|
||||||
.idea
|
.idea
|
||||||
*.user
|
*.user
|
||||||
|
.vscode
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/// Common definitions shared between attribute values and response headers
|
/// Common definitions shared between attribute values and response headers
|
||||||
[<AutoOpen>]
|
[<AutoOpen>]
|
||||||
module Giraffe.Htmx.Common
|
module Giraffe.Htmx.Common
|
||||||
|
|
||||||
|
|
|
@ -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.
|
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**
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
|
<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
|
||||||
<PropertyGroup>
|
<PropertyGroup>
|
||||||
<TargetFrameworks>net6.0;net7.0</TargetFrameworks>
|
<TargetFrameworks>net6.0;net7.0</TargetFrameworks>
|
||||||
<VersionPrefix>1.8.6</VersionPrefix>
|
<VersionPrefix>1.9.0</VersionPrefix>
|
||||||
<PackageReleaseNotes>Update script tags for htmx 1.8.6</PackageReleaseNotes>
|
<PackageReleaseNotes>Add support for hx-on and CSS transitions; update script tags to pull htmx 1.9.0</PackageReleaseNotes>
|
||||||
<Authors>danieljsummers</Authors>
|
<Authors>danieljsummers</Authors>
|
||||||
<Company>Bit Badger Solutions</Company>
|
<Company>Bit Badger Solutions</Company>
|
||||||
<PackageProjectUrl>https://github.com/bit-badger/Giraffe.Htmx</PackageProjectUrl>
|
<PackageProjectUrl>https://github.com/bit-badger/Giraffe.Htmx</PackageProjectUrl>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
module Giraffe.Htmx
|
module Giraffe.Htmx
|
||||||
|
|
||||||
open Microsoft.AspNetCore.Http
|
open Microsoft.AspNetCore.Http
|
||||||
open Microsoft.Extensions.Primitives
|
open Microsoft.Extensions.Primitives
|
||||||
|
|
|
@ -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`.
|
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
|
### Setup
|
||||||
|
|
||||||
|
|
|
@ -344,6 +344,11 @@ let attributes =
|
||||||
test "_hxNoBoost succeeds" {
|
test "_hxNoBoost succeeds" {
|
||||||
td [ _hxNoBoost ] [] |> shouldRender """<td hx-boost="false"></td>"""
|
td [ _hxNoBoost ] [] |> shouldRender """<td hx-boost="false"></td>"""
|
||||||
}
|
}
|
||||||
|
test "_hxOn succeeds" {
|
||||||
|
let newLine = "\n"
|
||||||
|
strong [ _hxOn "submit: alert('oops')\nclick: alert('howdy!')" ] []
|
||||||
|
|> shouldRender $"""<strong hx-on="submit: alert('oops'){newLine}click: alert('howdy!')"></strong>"""
|
||||||
|
}
|
||||||
test "_hxParams succeeds" {
|
test "_hxParams succeeds" {
|
||||||
br [ _hxParams "[p1,p2]" ] |> shouldRender """<br hx-params="[p1,p2]">"""
|
br [ _hxParams "[p1,p2]" ] |> shouldRender """<br hx-params="[p1,p2]">"""
|
||||||
}
|
}
|
||||||
|
@ -385,6 +390,10 @@ let attributes =
|
||||||
test "_hxSwap succeeds" {
|
test "_hxSwap succeeds" {
|
||||||
del [ _hxSwap "innerHTML" ] [] |> shouldRender """<del hx-swap="innerHTML"></del>"""
|
del [ _hxSwap "innerHTML" ] [] |> shouldRender """<del hx-swap="innerHTML"></del>"""
|
||||||
}
|
}
|
||||||
|
test "_hxSwapWithTransition succeeds" {
|
||||||
|
del [ _hxSwapWithTransition "innerHTML" ] []
|
||||||
|
|> shouldRender """<del hx-swap="innerHTML transition:true"></del>"""
|
||||||
|
}
|
||||||
test "_hxSwapOob succeeds" {
|
test "_hxSwapOob succeeds" {
|
||||||
li [ _hxSwapOob "true" ] [] |> shouldRender """<li hx-swap-oob="true"></li>"""
|
li [ _hxSwapOob "true" ] [] |> shouldRender """<li hx-swap-oob="true"></li>"""
|
||||||
}
|
}
|
||||||
|
@ -413,14 +422,14 @@ let script =
|
||||||
let html = RenderView.AsString.htmlNode Script.minified
|
let html = RenderView.AsString.htmlNode Script.minified
|
||||||
Expect.equal
|
Expect.equal
|
||||||
html
|
html
|
||||||
"""<script src="https://unpkg.com/htmx.org@1.8.6" integrity="sha384-Bj8qm/6B+71E6FQSySofJOUjA/gq330vEqjFx9LakWybUySyI1IQHwPtbTU7bNwx" crossorigin="anonymous"></script>"""
|
"""<script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script>"""
|
||||||
"Minified script tag is incorrect"
|
"Minified script tag is incorrect"
|
||||||
}
|
}
|
||||||
test "unminified succeeds" {
|
test "unminified succeeds" {
|
||||||
let html = RenderView.AsString.htmlNode Script.unminified
|
let html = RenderView.AsString.htmlNode Script.unminified
|
||||||
Expect.equal
|
Expect.equal
|
||||||
html
|
html
|
||||||
"""<script src="https://unpkg.com/htmx.org@1.8.6/dist/htmx.js" integrity="sha384-denUmZOxhLrCvV+ej1uWe4EXwjmJtWzbg0sjv6YfuHhUAP0CEVIArcYjlUbJHh87" crossorigin="anonymous"></script>"""
|
"""<script src="https://unpkg.com/htmx.org@1.9.0/dist/htmx.js" integrity="sha384-zeiPGhU5MGHaNAV6/ti/m1CChQCUxkLGY/3GVEVPGowI7V2AhfwLDg/zkXjRywCO" crossorigin="anonymous"></script>"""
|
||||||
"Unminified script tag is incorrect"
|
"Unminified script tag is incorrect"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -223,6 +223,9 @@ module HtmxAttrs =
|
||||||
/// Overrides a previous `hx-boost`
|
/// Overrides a previous `hx-boost`
|
||||||
let _hxNoBoost = attr "hx-boost" "false"
|
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
|
/// Filters the parameters that will be submitted with a request
|
||||||
let _hxParams = attr "hx-params"
|
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')
|
/// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
|
||||||
let _hxSwap = attr "hx-swap"
|
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
|
/// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
|
||||||
let _hxSwapOob = attr "hx-swap-oob"
|
let _hxSwapOob = attr "hx-swap-oob"
|
||||||
|
|
||||||
|
@ -289,14 +296,14 @@ module Script =
|
||||||
|
|
||||||
/// Script tag to load the minified version from unpkg.com
|
/// Script tag to load the minified version from unpkg.com
|
||||||
let minified =
|
let minified =
|
||||||
script [ _src "https://unpkg.com/htmx.org@1.8.6"
|
script [ _src "https://unpkg.com/htmx.org@1.9.0"
|
||||||
_integrity "sha384-Bj8qm/6B+71E6FQSySofJOUjA/gq330vEqjFx9LakWybUySyI1IQHwPtbTU7bNwx"
|
_integrity "sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls"
|
||||||
_crossorigin "anonymous" ] []
|
_crossorigin "anonymous" ] []
|
||||||
|
|
||||||
/// Script tag to load the unminified version from unpkg.com
|
/// Script tag to load the unminified version from unpkg.com
|
||||||
let unminified =
|
let unminified =
|
||||||
script [ _src "https://unpkg.com/htmx.org@1.8.6/dist/htmx.js"
|
script [ _src "https://unpkg.com/htmx.org@1.9.0/dist/htmx.js"
|
||||||
_integrity "sha384-denUmZOxhLrCvV+ej1uWe4EXwjmJtWzbg0sjv6YfuHhUAP0CEVIArcYjlUbJHh87"
|
_integrity "sha384-zeiPGhU5MGHaNAV6/ti/m1CChQCUxkLGY/3GVEVPGowI7V2AhfwLDg/zkXjRywCO"
|
||||||
_crossorigin "anonymous" ] []
|
_crossorigin "anonymous" ] []
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
This package enables [htmx](https://htmx.org) support within the [Giraffe](https://giraffe.wiki) view engine.
|
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
|
### Setup
|
||||||
|
|
||||||
|
@ -33,7 +33,13 @@ This also supports [fragment rendering](https://bitbadger.solutions/blog/2022/fr
|
||||||
|
|
||||||
### Learn
|
### 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.
|
- `HxRequest` has a `Configure` function, which takes a list of strings; the other functions in the module allow for configuring the request.
|
||||||
|
|
||||||
```fsharp
|
```fsharp
|
||||||
|
|
Loading…
Reference in New Issue
Block a user