src/Common/Common.fs

@@ -3,7 +3,7 @@
 module Giraffe.Htmx.Common
 
 /// <summary>The version of htmx embedded in the package</summary>
-let HtmxVersion = "2.0.8"
+let HtmxVersion = "4.0.0-alpha6"
 
 /// <summary>The path for the provided htmx script</summary>
 let internal htmxLocalScript = $"/_content/Giraffe.Htmx.Common/htmx.min.js?ver={HtmxVersion}"
@@ -25,8 +25,8 @@ let internal toLowerBool (boolValue: bool) =
 
 
 /// <summary>Valid values for the <c>hx-swap</c> attribute / <c>HX-Reswap</c> header</summary>
-/// <remarks>May be combined with <c>swap</c> / <c>settle</c> / <c>scroll</c> / <c>show</c> config)</remarks>
-/// <seealso href="https://htmx.org/attributes/hx-swap/">Documentation</seealso>
+/// <remarks>May be combined with <c>swap</c> / <c>scroll</c> / <c>show</c> config)</remarks>
+/// <seealso href="https://four.htmx.org/attributes/hx-swap/">Documentation</seealso>
 [<RequireQualifiedAccess>]
 module HxSwap =
     
@@ -38,22 +38,60 @@ module HxSwap =
     [<Literal>]
     let OuterHtml = "outerHTML"
     
+    /// <summary>Morph the inner HTML of the target to the new content</summary>
+    [<Literal>]
+    let InnerMorph = "innerMorph"
+    
+    /// <summary>Morph the outer HTML of the target to the new content</summary>
+    [<Literal>]
+    let OuterMorph = "innerMorph"
+    
+    /// <summary>Replace the text content of the target without parsing the response as HTML</summary>
+    [<Literal>]
+    let TextContent = "textContent"
+    
     /// <summary>Insert the response before the target element</summary>
     [<Literal>]
-    let BeforeBegin = "beforebegin"
+    let Before = "before"
+    
+    /// <summary>Insert the response before the target element (pre-v4 name)</summary>
+    [<Literal>]
+    let BeforeBegin = Before
     
     /// <summary>Insert the response before the first child of the target element</summary>
     [<Literal>]
-    let AfterBegin = "afterbegin"
+    let Prepend = "prepend"
+    
+    /// <summary>Insert the response before the first child of the target element (pre-v4 name)</summary>
+    [<Literal>]
+    let AfterBegin = Prepend
     
     /// <summary>Insert the response after the last child of the target element</summary>
     [<Literal>]
-    let BeforeEnd = "beforeend"
+    let Append = "append"
+    
+    /// <summary>Insert the response after the last child of the target element (pre-v4 name)</summary>
+    [<Literal>]
+    let BeforeEnd = Append
     
     /// <summary>Insert the response after the target element</summary>
     [<Literal>]
-    let AfterEnd = "afterend"
+    let After = "after"
+
+    /// <summary>Insert the response after the target element (pre-v4 name)</summary>
+    [<Literal>]
+    let AfterEnd = After
     
-    /// <summary>Does not append content from response (out of band items will still be processed).</summary>
+    /// <summary>Delete the target element regardless of response</summary>
+    [<Literal>]
+    let Delete = "delete"
+
+    /// <summary>Does not append content from response (out of band items will still be processed)</summary>
     [<Literal>]
     let None = "none"
+
+    /// <summary>Update existing elements by <c>id</c> and add new ones</summary>
+    /// <remarks>This requires the <c>upsert</c> extension</remarks>
+    /// <seealso href="https://four.htmx.org/extensions/upsert">Extension</seealso>
+    [<Literal>]
+    let Upsert = "upsert"

src/Htmx/Htmx.fs

@@ -24,6 +24,7 @@ type IHeaderDictionary with
         with get () = hdr this "HX-History-Restore-Request" |> Option.map bool.Parse
     
     /// <summary>The user response to an <c>hx-prompt</c></summary>
+    [<Obsolete "hx-prompt is removed in v4">]
     member this.HxPrompt
         with get () = hdr this "HX-Prompt"
 
@@ -31,15 +32,29 @@ type IHeaderDictionary with
     member this.HxRequest
         with get () = hdr this "HX-Request" |> Option.map bool.Parse
 
+    /// <summary>The tag name (fst) and <c>id</c> attribute (snd) of the element triggering this request</summary>
+    member this.HxSource
+        with get () =
+            match hdr this "HX-Source" with
+            | Some src ->
+                let parts = src.Split "#"
+                if parts.Length = 1 then
+                    Some (parts[0], None)
+                else
+                    Some (parts[0], if parts[1] <> "" then Some parts[1] else None)
+            | None -> None
+
     /// <summary>The <c>id</c> attribute of the target element if it exists</summary>
     member this.HxTarget
         with get () = hdr this "HX-Target"
 
     /// <summary>The <c>id</c> attribute of the triggered element if it exists</summary>
+    [<Obsolete "HX-Trigger is removed in v4; use the second item of HX-Source">]
     member this.HxTrigger
         with get () = hdr this "HX-Trigger"
 
     /// <summary>The <c>name</c> attribute of the triggered element if it exists</summary>
+    [<Obsolete "HX-Trigger-Name is removed in v4; may be available via extension, but will be removed from this library">]
     member this.HxTriggerName
         with get () = hdr this "HX-Trigger-Name"
 

src/Tests/Common.fs

@@ -6,7 +6,7 @@ open Giraffe.Htmx
 /// Test to ensure the version was updated
 let version =
     test "HtmxVersion is correct" {
-        Expect.equal HtmxVersion "2.0.8" "htmx version incorrect"
+        Expect.equal HtmxVersion "4.0.0-alpha6" "htmx version incorrect"
     }
 
 /// Tests for the HxSwap module
@@ -18,21 +18,48 @@ let swap =
         test "OuterHtml is correct" {
             Expect.equal HxSwap.OuterHtml "outerHTML" "Outer HTML swap value incorrect"
         }
-        test "BeforeBegin is correct" {
-            Expect.equal HxSwap.BeforeBegin "beforebegin" "Before Begin swap value incorrect"
+        test "InnerMorph is correct" {
+            Expect.equal HxSwap.InnerMorph "innerMorph" "Inner Morph swap value incorrect"
         }
-        test "BeforeEnd is correct" {
-            Expect.equal HxSwap.BeforeEnd "beforeend" "Before End swap value incorrect"
+        test "OuterMorph is correct" {
+            Expect.equal HxSwap.OuterMorph "innerMorph" "Outer Morph swap value incorrect"
+        }
+        test "TextContent is correct" {
+            Expect.equal HxSwap.TextContent "textContent" "Text Content swap value incorrect"
+        }
+        test "Before is correct" {
+            Expect.equal HxSwap.Before "before" "Before swap value incorrect"
+        }
+        test "BeforeBegin is correct" {
+            Expect.equal HxSwap.BeforeBegin HxSwap.Before "Before Begin swap value incorrect"
+        }
+        test "Prepend is correct" {
+            Expect.equal HxSwap.Prepend "prepend" "Prepend swap value incorrect"
         }
         test "AfterBegin is correct" {
-            Expect.equal HxSwap.AfterBegin "afterbegin" "After Begin swap value incorrect"
+            Expect.equal HxSwap.AfterBegin HxSwap.Prepend "Prepend swap value incorrect"
+        }
+        test "Append is correct" {
+            Expect.equal HxSwap.Append "append" "Append swap value incorrect"
+        }
+        test "BeforeEnd is correct" {
+            Expect.equal HxSwap.BeforeEnd HxSwap.Append "Before End swap value incorrect"
+        }
+        test "After is correct" {
+            Expect.equal HxSwap.After "after" "After swap value incorrect"
         }
         test "AfterEnd is correct" {
-            Expect.equal HxSwap.AfterEnd "afterend" "After End swap value incorrect"
+            Expect.equal HxSwap.AfterEnd HxSwap.After "After End swap value incorrect"
+        }
+        test "Delete is correct" {
+            Expect.equal HxSwap.Delete "delete" "Delete swap value incorrect"
         }
         test "None is correct" {
             Expect.equal HxSwap.None "none" "None swap value incorrect"
         }
+        test "Upsert is correct" {
+            Expect.equal HxSwap.Upsert "upsert" "Upsert swap value incorrect"
+        }
     ]
 
 /// All tests for this module

src/ViewEngine.Htmx/Htmx.fs

@@ -1,6 +1,8 @@
 /// <summary>Types and functions supporting htmx attributes in Giraffe View Engine</summary>
 module Giraffe.ViewEngine.Htmx
 
+open System.Net.Http
+
 /// <summary>Valid values for the <c>hx-encoding</c> attribute</summary>
 [<RequireQualifiedAccess>]
 module HxEncoding =
@@ -21,17 +23,20 @@ type HxEvent =
     /// <summary>Send this event to an element to abort a request</summary>
     | Abort
     
+    /// <summary>Triggered after a request has initialized</summary>
+    | AfterInit
+    
     /// <summary>Triggered after an AJAX request has completed processing a successful response</summary>
-    | AfterOnLoad
+    | [<System.Obsolete "Removed in v4; use AfterInit">] AfterOnLoad
     
     /// <summary>Triggered after htmx has initialized a node</summary>
-    | AfterProcessNode
+    | [<System.Obsolete "Removed in v4; use AfterInit">] AfterProcessNode
     
     /// <summary>Triggered after an AJAX request has completed</summary>
     | AfterRequest
     
     /// <summary>Triggered after the DOM has settled</summary>
-    | AfterSettle
+    | [<System.Obsolete "Removed in v4; use AfterSwap">] AfterSettle
     
     /// <summary>Triggered after new content has been swapped in</summary>
     | AfterSwap
@@ -39,20 +44,32 @@ type HxEvent =
     /// <summary>Triggered before htmx disables an element or removes it from the DOM</summary>
     | BeforeCleanupElement
     
+    /// <summary>Triggered before content is saved to the history cache</summary>
+    | [<System.Obsolete "Removed in v4; use BeforeHistoryUpdate">] BeforeHistorySave
+    
+    /// <summary>Triggered before content is saved to the history cache</summary>
+    | BeforeHistoryUpdate
+    
+    /// <summary>Triggered before htmx initializes a node</summary>
+    | BeforeInit
+    
     /// <summary>Triggered before any response processing occurs</summary>
-    | BeforeOnLoad
+    | [<System.Obsolete "Removed in v4; use BeforeInit">] BeforeOnLoad
     
     /// <summary>Triggered before htmx initializes a node</summary>
     | BeforeProcessNode
     
-    /// <summary>Triggered before an AJAX request is made</summary>
+    /// <summary>Triggered before an HTTP request is made</summary>
     | BeforeRequest
     
+    /// <summary>Triggered just before an ajax request is sent</summary>
+    | [<System.Obsolete "Removed in v4; use BeforeRequest">] BeforeSend
+    
     /// <summary>Triggered before a swap is done, allows you to configure the swap</summary>
     | BeforeSwap
     
-    /// <summary>Triggered just before an ajax request is sent</summary>
-    | BeforeSend
+    /// <summary>Triggered before a CSS view transition starts</summary>
+    | BeforeTransition
     
     /// <summary>Triggered before the request, allows you to customize parameters, headers</summary>
     | ConfigRequest
@@ -77,9 +94,6 @@ type HxEvent =
     /// <summary>Triggered when htmx handles a history restoration action</summary>
     | HistoryRestore
     
-    /// <summary>Triggered before content is saved to the history cache</summary>
-    | BeforeHistorySave
-    
     /// <summary>Triggered when new content is added to the DOM</summary>
     | Load
     
@@ -151,25 +165,29 @@ type HxEvent =
     /// The htmx event name (fst) and kebab-case name (snd, for use with hx-on)
     static member private Values = Map [
         Abort, ("abort", "abort")
-        AfterOnLoad, ("afterOnLoad", "after-on-load")
-        AfterProcessNode, ("afterProcessNode", "after-process-node")
-        AfterRequest, ("afterRequest", "after-request")
-        AfterSettle, ("afterSettle", "after-settle")
-        AfterSwap, ("afterSwap", "after-swap")
-        BeforeCleanupElement, ("beforeCleanupElement", "before-cleanup-element")
-        BeforeOnLoad, ("beforeOnLoad", "before-on-load")
-        BeforeProcessNode, ("beforeProcessNode", "before-process-node")
-        BeforeRequest, ("beforeRequest", "before-request")
-        BeforeSwap, ("beforeSwap", "before-swap")
-        BeforeSend, ("beforeSend", "before-send")
-        ConfigRequest, ("configRequest", "config-request")
+        AfterInit, ("afterInit", "after:init")
+        AfterOnLoad, ("afterOnLoad", "after:init")
+        AfterProcessNode, ("afterProcessNode", "after:init")
+        AfterRequest, ("afterRequest", "after:request")
+        AfterSettle, ("afterSettle", "after:swap")
+        AfterSwap, ("afterSwap", "after:swap")
+        BeforeCleanupElement, ("beforeCleanupElement", "before:cleanup:element")
+        BeforeHistorySave, ("beforeHistorySave", "before:history:update")
+        BeforeHistoryUpdate, ("beforeHistoryUpdate", "before:history:update")
+        BeforeInit, ("beforeInit", "before:init")
+        BeforeOnLoad, ("beforeOnLoad", "before:init")
+        BeforeProcessNode, ("beforeProcessNode", "before:process")
+        BeforeRequest, ("beforeRequest", "before:request")
+        BeforeSend, ("beforeSend", "before:send")
+        BeforeSwap, ("beforeSwap", "before:swap")
+        BeforeTransition, ("beforeTransition", "before:viewTransition")
+        ConfigRequest, ("configRequest", "config:request")
         Confirm, ("confirm", "confirm")
         HistoryCacheError, ("historyCacheError", "history-cache-error")
         HistoryCacheMiss, ("historyCacheMiss", "history-cache-miss")
         HistoryCacheMissError, ("historyCacheMissError", "history-cache-miss-error")
         HistoryCacheMissLoad, ("historyCacheMissLoad", "history-cache-miss-load")
         HistoryRestore, ("historyRestore", "history-restore")
-        BeforeHistorySave, ("beforeHistorySave", "before-history-save")
         Load, ("load", "load")
         NoSseSourceError, ("noSSESourceError", "no-sse-source-error")
         OnLoadError, ("onLoadError", "on-load-error")
@@ -493,11 +511,23 @@ open Giraffe.Htmx
 [<AutoOpen>]
 module HtmxAttrs =
     
+    /// <summary>The URL which will receive the request (use with <c>_hxMethod</c>)</summary>
+    /// <param name="url">The URL for the attribute</param>
+    /// <seealso href="https://four.htmx.org/attributes/hx-action/">Documentation</seealso>
+    let _hxAction url = attr "hx-action" url
+    
     /// <summary>Progressively enhances anchors and forms to use AJAX requests</summary>
     /// <remarks>Use <c>_hxNoBoost</c> to set to false</remarks>
     /// <seealso href="https://htmx.org/attributes/hx-boost/">Documentation</seealso>
     let _hxBoost = attr "hx-boost" "true"
     
+    /// <summary>Configure request behavior</summary>
+    /// <param name="config">The configuration parameters to use for the request</param>
+    /// <returns>A configured <c>hx-config</c> attribute</returns>
+    /// <seealso cref="https://four.htmx.org/attributes/hx-config/">Documentation</seealso>
+    let _hxConfig config =
+        attr "hx-config" (toJson config)
+    
     /// <summary>Shows a <c>confirm()</c> dialog before issuing a request</summary>
     /// <param name="prompt">The prompt to present to the user when seeking their confirmation</param>
     /// <returns>A configured <c>hx-confirm</c> attribute</returns>
@@ -512,14 +542,23 @@ module HtmxAttrs =
     let _hxDelete url =
         attr "hx-delete" url
     
-    /// <summary>Disables htmx processing for the given node and any children nodes</summary>
-    /// <seealso href="https://htmx.org/attributes/hx-disable/">Documentation</seealso>
-    let _hxDisable = flag "hx-disable"
+    /// <summary>Specifies elements that should be disabled when an htmx request is in flight</summary>
+    /// <param name="elt">The element to disable when an htmx request is in flight</param>
+    /// <returns>A configured <c>hx-disable</c> attribute</returns>
+    /// <remarks>This behavior changed in v4
+    /// <ul><li>For the v2 behavior of <c>hx-disable</c> (which will manifest as compile errors), change instances to
+    /// <c>_hxIgnore</c></li>
+    /// <li>For v4 behavior, changing <c>_hxDisabledElt</c> to <c>_hxDisable</c> should be sufficient</li></ul>
+    /// </remarks>
+    /// <seealso href="https://four.htmx.org/attributes/hx-disable/">Documentation</seealso>
+    let _hxDisable elt =
+        attr "hx-disable" elt
     
     /// <summary>Specifies elements that should be disabled when an htmx request is in flight</summary>
     /// <param name="elt">The element to disable when an htmx request is in flight</param>
     /// <returns>A configured <c>hx-disabled-elt</c> attribute</returns>
     /// <seealso href="https://htmx.org/attributes/hx-disabled-elt/">Documentation</seealso>
+    [<System.Obsolete "hx-disabled-elt has become hx-disable in v4">]
     let _hxDisabledElt elt =
         attr "hx-disabled-elt" elt
 
@@ -527,6 +566,7 @@ module HtmxAttrs =
     /// <param name="hxAttrs">The htmx attributes to disinherit (should start with "hx-")</param>
     /// <returns>A configured <c>hx-disinherit</c> attribute</returns>
     /// <seealso href="https://htmx.org/attributes/hx-disinherit/">Documentation</seealso>
+    [<System.Obsolete "hx-disinherit removed in v4; use explicit inheritance">]
     let _hxDisinherit hxAttrs =
         attr "hx-disinherit" hxAttrs
     
@@ -542,6 +582,7 @@ module HtmxAttrs =
     /// <param name="exts">A list of extensions to apply to this element</param>
     /// <returns>A configured <c>hx-ext</c> attribute</returns>
     /// <seealso href="https://htmx.org/attributes/hx-ext/">Documentation</seealso>
+    [<System.Obsolete "hx-ext removed in v4; extensions register via JavaScript">]
     let _hxExt exts =
         attr "hx-ext" exts
     
@@ -565,14 +606,21 @@ module HtmxAttrs =
     /// <param name="shouldStore">Whether the page should be stored in the history cache</param>
     /// <returns>A configured <c>hx-history</c> attribute</returns>
     /// <seealso href="https://htmx.org/attributes/hx-history/">Documentation</seealso>
+    [<System.Obsolete "hx-history removed in v4; history does not use localStorage">]
     let _hxHistory shouldStore =
         attr "hx-history" (toLowerBool shouldStore)
     
     /// <summary>The element to snapshot and restore during history navigation</summary>
     /// <seealso href="https://htmx.org/attributes/hx-history-elt/">Documentation</seealso>
+    [<System.Obsolete "hx-history-elt removed in v4; history based on target element">]
     let _hxHistoryElt =
         flag "hx-history-elt"
     
+    /// <summary>Disables htmx processing for the given node and any children nodes</summary>
+    /// <seealso href="https://four.htmx.org/attributes/hx-ignore/">Documentation</seealso>
+    let _hxIgnore =
+        flag "hx-ignore"
+    
     /// <summary>Includes additional data in AJAX requests</summary>
     /// <param name="spec">The specification of what should be included in the request</param>
     /// <returns>A configured <c>hx-include</c> attribute</returns>
@@ -587,6 +635,12 @@ module HtmxAttrs =
     let _hxIndicator selector =
         attr "hx-indicator" selector
     
+    /// <summary>The HTTP method to use for the request(use with <c>_hxAction</c>)</summary>
+    /// <param name="method">The method to use</param>
+    /// <seealso href="https://four.htmx.org/attributes/hx-method/">Documentation</seealso>
+    let _hxMethod (method: HttpMethod) =
+        attr "hx-method" (method.Method.ToLowerInvariant())
+    
     /// <summary>Overrides a previous <c>hx-boost</c> (hx-boost="false")</summary>
     /// <seealso href="https://htmx.org/attributes/hx-boost/">Documentation</seealso>
     let _hxNoBoost =
@@ -614,6 +668,7 @@ module HtmxAttrs =
     /// <returns>A configured <c>hx-params</c> attribute</returns>
     /// <seealso cref="HxParams" />
     /// <seealso href="https://htmx.org/attributes/hx-params/">Documentation</seealso>
+    [<System.Obsolete "hx-params removed in v4; use htmx:config:request to filter parameter">]
     let _hxParams toInclude =
         attr "hx-params" toInclude
     
@@ -641,6 +696,7 @@ module HtmxAttrs =
     /// <returns>A configured <c>hx-prompt</c> attribute</returns>
     /// <remarks>The value provided will be in the <c>HX-Prompt</c> request header</remarks>
     /// <seealso href="https://htmx.org/attributes/hx-prompt/">Documentation</seealso>
+    [<System.Obsolete "hx-prompt removed in v4; use hx-confirm with async JavaScript function">]
     let _hxPrompt text =
         attr "hx-prompt" text
     
@@ -682,6 +738,7 @@ module HtmxAttrs =
     /// <returns>A configured <c>hx-request</c> attribute</returns>
     /// <seealso cref="HxRequest.Configure" />
     /// <seealso href="https://htmx.org/attributes/hx-request/">Documentation</seealso>
+    [<System.Obsolete "hx-request removed in v4; use hx-config instead">]
     let _hxRequest spec =
         attr "hx-request" spec
     
@@ -785,6 +842,35 @@ module HtmxAttrs =
         attr "sse-swap" messages
 
 
+/// <summary>Modifiers for htmx attributes</summary>
+[<AutoOpen>]
+module HxModifiers =
+    
+    /// <summary>Append this value to any inherited value of the attribute</summary>
+    /// <param name="attrib">The attribute to which <c>:append</c> should be applied</param>
+    /// <returns>The given attribute with <c>:append</c> applied</returns>
+    let hxAppend attrib =
+        match attrib with
+        | KeyValue (name, value) -> attr $"{name}:append" value
+        | Boolean name -> flag $"{name}:append"
+    
+    /// <summary>Explicity inherit the value for this attribute</summary>
+    /// <param name="attrib">The attribute whose value should be inherited</param>
+    /// <returns>The given attribute with <c>:inherited</c> applied</returns>
+    let hxInherit attrib =
+        match attrib with
+        | KeyValue (name, value) -> attr $"{name}:inherited" value
+        | Boolean name -> flag $"{name}:inherited"
+
+
+/// <summary>htmx-specific HTML tags</summary>
+[<AutoOpen>]
+module HxTags =
+    
+    /// <summary>An <c>hx-partial</c> tag</summary>
+    let hxPartial = tag "hx-partial"
+
+
 /// <summary>Script tags to pull htmx into a web page</summary>
 module Script =