Htmx v1.9.6

samples/HelloWorld/Program.fs

@@ -46,7 +46,7 @@ let handleHtml : HttpHandler =
         Templates.html5 "en"
             [
                 Elem.link [ Attr.href "style.css"; Attr.rel "stylesheet" ]
-                Elem.script [ Attr.src "https://unpkg.com/htmx.org@1.8.0"] []
+                Elem.script [ Attr.src Script.src ] []
             ]
             [
                 Elem.h1 [] [

src/Falco.Htmx/Extensions.fs

@@ -22,6 +22,11 @@ type HtmxRequestHeaders =
       /// The id of the triggered element if it exists
       HxTrigger : string option }
 
+/// Value for the HX-Trigger Response Header
+type HxTriggerResponse =
+    | Events of string list
+    | DetailedEvents of (string * obj) list
+
 [<RequireQualifiedAccess>]
 module Request =
     let getHtmxHeaders (ctx : HttpContext) : HtmxRequestHeaders =
@@ -100,17 +105,15 @@ module Response =
         Response.withHeaders [ "HX-Retarget", TargetOption.AsString option ]
 
     // Allows you to trigger client side events, see the documentation for more info
-    let withHxTrigger<'T>(event: string, detail : 'T option) : HttpResponseModifier =
+    let withHxTrigger<'T>(triggerResponse: HxTriggerResponse) : HttpResponseModifier =
         let headerValue =
-            match detail with
-            | Some detail' ->
-                [ event, detail ]
+            match triggerResponse with
+            | Events events -> events |> String.concat ", "
+            | DetailedEvents events ->
+                events
                 |> Map.ofList
                 |> fun x -> JsonSerializer.Serialize(x, Json.defaultSerializerOptions)
 
-            | None ->
-                event
-
         Response.withHeaders [ "HX-Trigger", headerValue ]
 
     // Allows you to trigger client side events, see the documentation for more info
@@ -119,4 +122,9 @@ module Response =
 
     // Allows you to trigger client side events, see the documentation for more info
     let withHxTriggerAfterSwap : HttpResponseModifier =
-        Response.withHeaders [ "HX-Trigger-After-Swap", _trueValue ]
+        Response.withHeaders [ "HX-Trigger-After-Swap", _trueValue ]
+
+    /// A CSS selector that allows you to choose which part of the response is used to be swapped in.
+    /// see the documentation for more info
+    let withHxReselect (selector: string) : HttpResponseModifier =
+        Response.withHeaders [ "HX-Reselect", selector ]

src/Falco.Htmx/Htmx.fs

@@ -201,3 +201,7 @@ type DisinheritOption =
         | AllAttributes -> "*"
         | ExcludeAttributes [] -> "*"
         | ExcludeAttributes names -> String.Join(" ", names)
+
+module Script =
+    /// The script of the version of HTMX this library is written for.
+    let src = "https://unpkg.com/htmx.org@1.9.6"

src/Falco.Htmx/Hx.fs

@@ -200,4 +200,17 @@ let sync (targetOption : TargetOption, syncOption : SyncOption option) =
         | Some sync' -> String.Concat([ target'; ":"; SyncOption.AsString sync' ])
         | None -> target'
 
-    Attr.create "hx-sync" attrValue
+    Attr.create "hx-sync" attrValue
+
+/// Whether to force elements to validate themselves before a request
+let validate (value: bool) = Attr.create "hx-validate" (string value)
+
+/// Whether to save sensitive data to the history cache
+let history (value: bool) = Attr.create "hx-history" (string value)
+
+/// Handle any event with a script inline
+let on eventName = Attr.create $"hx-on:{eventName}"
+
+/// adds the `disabled` attribute to the specified elements while a request is in flight
+let disabledElement (targetOption: TargetOption) =
+    Attr.create "hx-disabled-elt" (TargetOption.AsString targetOption)