Merge branch 'develop'

Author: Lanayx

examples/Basic/Basic.fsproj

@@ -9,7 +9,7 @@
     <ItemGroup>
         <PackageReference Include="Oxpecker" Version="2.1.1" />
         <PackageReference Include="Oxpecker.OpenApi" Version="2.1.2" />
-        <PackageReference Include="Oxpecker.Htmx" Version="4.0.0-beta.5" />
+        <PackageReference Include="Oxpecker.Htmx" Version="4.0.0" />
         <PackageReference Include="FSharp.Control.TaskSeq" Version="1.1.1" />
         <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="10.0.0" />
     </ItemGroup>

examples/Basic/Program.fs

@@ -118,7 +118,7 @@ let streamingHtml1: EndpointHandler =
     fun (ctx: HttpContext) ->
         let html =
             html() {
-                head() { script(src = "https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta4") }
+                head() { script(src = "https://cdn.jsdelivr.net/npm/htmx.org@4.0.0") }
                 body(style = "width: 800px; margin: 0 auto") {
                     h1(style = "text-align: center; color: blue") { "HTML Streaming example" }
                     h2().hxGet("/streamHtml2").hxTarget(HxSelector.this').hxTrigger("load")

examples/ContactApp/ContactApp.fsproj

@@ -32,7 +32,7 @@
     <ItemGroup>
         <PackageReference Include="Oxpecker" Version="2.1.1" />
         <PackageReference Include="Oxpecker.ViewEngine" Version="2.1.0" />
-        <PackageReference Include="Oxpecker.Htmx" Version="4.0.0-beta.5" />
+        <PackageReference Include="Oxpecker.Htmx" Version="4.0.0" />
     </ItemGroup>
 
 </Project>

examples/ContactApp/templates/shared/layout.fs

@@ -14,7 +14,7 @@ module layout =
         html(lang="") {
             head() {
                 title() { "Contact App" }
-                script(src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta4",
+                script(src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0",
                     crossorigin="anonymous")
                 link(rel="stylesheet", href="/site.css")
             }

examples/WeatherApp/WeatherApp.fsproj

@@ -21,7 +21,7 @@
     <ItemGroup>
         <PackageReference Include="Oxpecker" Version="2.1.1" />
         <PackageReference Include="Oxpecker.ViewEngine" Version="2.1.0" />
-        <PackageReference Include="Oxpecker.Htmx" Version="4.0.0-beta.5" />
+        <PackageReference Include="Oxpecker.Htmx" Version="4.0.0" />
         <PackageReference Include="Oxpecker.Alpine" Version="0.3.0" />
     </ItemGroup>
 

examples/WeatherApp/templates/shared/layout.fs

@@ -83,7 +83,7 @@ module layout =
                 link(rel="stylesheet", href="/bootstrap/bootstrap.min.css")
                 link(rel="stylesheet", href="/app.css")
                 link(rel="icon", type'="image/png", href="/favicon.png")
-                script(src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta4", crossorigin="anonymous")
+                script(src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0", crossorigin="anonymous")
                 script(defer=true, src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js", crossorigin="anonymous")
             }
             body().hxBoost("true", HxModifier.inherited) {

src/Oxpecker.Htmx/Attributes.fs

@@ -27,6 +27,11 @@ type HtmxVerbExtensions =
     [<Extension>]
     static member hxDelete(this: #HtmlTag, [<StringSyntax("Uri")>] url: string | null) = this.attr("hx-delete", url)
 
+    /// Issues a QUERY to the specified URL. QUERY is a safe, idempotent method (like GET) that
+    /// sends its content in the request body (like POST).
+    [<Extension>]
+    static member hxQuery(this: #HtmlTag, [<StringSyntax("Uri")>] url: string | null) = this.attr("hx-query", url)
+
 
 /// Event handler attribute.
 type HtmxEventExtensions =
@@ -255,10 +260,19 @@ type HtmxAdditionalExtensions =
     [<Extension>]
     static member hxIgnore(this: #HtmlTag, value: bool) = this.bool("hx-ignore", value)
 
-    /// Show optimistic content during request (template id, e.g. `#my-template`).
+    /// Leaves an element untouched during a morph swap: neither its attributes nor its children
+    /// are morphed. Useful for third party widgets, web components and elements holding
+    /// client-side state or animations. Renders `hx-morph-skip` (boolean attribute) when true.
+    /// Applies to morph swaps only.
+    [<Extension>]
+    static member hxMorphSkip(this: #HtmlTag, value: bool) = this.bool("hx-morph-skip", value)
+
+    /// Morphs the attributes of an element during a morph swap, but leaves its children untouched.
+    /// Renders `hx-morph-skip-children` (boolean attribute) when true.
+    /// Applies to morph swaps only.
     [<Extension>]
-    static member hxOptimistic(this: #HtmlTag, [<StringSyntax("css")>] value: string | null) =
-        this.attr("hx-optimistic", value)
+    static member hxMorphSkipChildren(this: #HtmlTag, value: bool) =
+        this.bool("hx-morph-skip-children", value)
 
     /// Handle responses differently by status code (`hx-status:CODE`).
     /// `code` is an exact code (e.g. "404"), single-digit wildcard (e.g. "50x"),

src/Oxpecker.Htmx/Extensions.fs

@@ -33,6 +33,26 @@ module HxUpsertModifier =
     /// `key:<attr>` — sort by a different attribute than `id`.
     let key (attr: string) = $" key:%s{attr}"
 
+/// Special binding names for `hxLiveBind` (`hx-live:{name}`) provided by the `hx-live` extension.
+/// Any other name binds the attribute or property of that name.
+/// See https://four.htmx.org/extensions/hx-live
+[<RequireQualifiedAccess>]
+module HxLiveBinding =
+    /// `text` — bind the element's `textContent` to the expression.
+    [<Literal>]
+    let text = "text"
+    /// `html` — bind the element's `innerHTML` to the expression.
+    [<Literal>]
+    let html = "html"
+    /// `style` — bind inline styles; the expression returns a `"prop: value; …"` string or an object of declarations.
+    [<Literal>]
+    let style = "style"
+    /// `class` — bind classes; the expression returns a class name or an object mapping class names to booleans.
+    [<Literal>]
+    let class' = "class"
+    /// `.{name}` — toggle the single class `name` on the truthiness of the expression.
+    let inline toggleClass (name: string) = $".%s{name}"
+
 
 /// Attributes provided by the built-in htmx 4 extensions.
 /// Each extension must be loaded client-side via its own script tag.
@@ -52,6 +72,20 @@ type HtmxExtensionExtensions =
     [<Extension>]
     static member hxSseClose(this: #HtmlTag, event: string | null) = this.attr("hx-sse:close", event)
 
+    // ─── hx-multipart (multipart/mixed + multipart/parallel streaming) ───
+
+    /// `hx-multipart:connect` — open a persistent GET request that streams `multipart/mixed` parts,
+    /// reconnecting automatically. Requires the `hx-multipart` extension.
+    [<Extension>]
+    static member hxMultipartConnect(this: #HtmlTag, [<StringSyntax("Uri")>] url: string | null) =
+        this.attr("hx-multipart:connect", url)
+
+    /// `hx-multipart:close` — an `hx-trigger`-style event spec: when that event fires on the element the
+    /// persistent multipart connection is closed. The server can fire it from a part via an `HX-Trigger`
+    /// header. Requires the `hx-multipart` extension.
+    [<Extension>]
+    static member hxMultipartClose(this: #HtmlTag, event: string | null) = this.attr("hx-multipart:close", event)
+
     // ─── hx-ws (WebSockets) ───
 
     /// `hx-ws:connect` — establish a WebSocket connection to the URL.
@@ -70,6 +104,39 @@ type HtmxExtensionExtensions =
     [<Extension>]
     static member hxWsSend(this: #HtmlTag, [<StringSyntax("Uri")>] url: string | null) = this.attr("hx-ws:send", url)
 
+    // ─── hx-prompt (browser prompt before request) ───
+
+    /// `hx-prompt` — show a browser prompt before the request; the answer is sent URI-encoded as the
+    /// `HX-Prompt` request header (decode it with `Uri.UnescapeDataString`) and cancelling aborts the
+    /// request. Inheritable. Requires the `hx-prompt` extension.
+    [<Extension>]
+    static member hxPrompt(this: #HtmlTag, question: string | null) = this.attr("hx-prompt", question)
+
+    /// `hx-prompt` — show a browser prompt before the request; the answer is sent URI-encoded as the
+    /// `HX-Prompt` request header (decode it with `Uri.UnescapeDataString`) and cancelling aborts the
+    /// request. Inheritable. Requires the `hx-prompt` extension.
+    [<Extension>]
+    static member hxPrompt(this: #HtmlTag, question: string | null, modifiers: string) =
+        this.attr($"hx-prompt%s{modifiers}", question)
+
+    // ─── hx-pending (content shown while a request is in flight) ───
+
+    /// `hx-pending` — CSS selector of a `<template>` (or element) whose content is shown while the
+    /// request is in flight. The inserted wrapper gets the `hx-pending` class and a `data-*`
+    /// attribute per request parameter. Inheritable.
+    /// Requires the `hx-pending` extension.
+    [<Extension>]
+    static member hxPending(this: #HtmlTag, [<StringSyntax("css")>] value: string | null) =
+        this.attr("hx-pending", value)
+
+    /// `hx-pending` — CSS selector of a `<template>` (or element) whose content is shown while the
+    /// request is in flight. The inserted wrapper gets the `hx-pending` class and a `data-*`
+    /// attribute per request parameter. Inheritable.
+    /// Requires the `hx-pending` extension.
+    [<Extension>]
+    static member hxPending(this: #HtmlTag, [<StringSyntax("css")>] value: string | null, modifiers: string) =
+        this.attr($"hx-pending%s{modifiers}", value)
+
     // ─── hx-head (head merging) ───
 
     /// `hx-head` — control how the response `<head>` is merged (`merge`, `append`, or `re-eval`).
@@ -127,3 +194,11 @@ type HtmxExtensionExtensions =
     [<Extension>]
     static member hxLive(this: #HtmlTag, [<StringSyntax("js")>] expression: string | null) =
         this.attr("hx-live", expression)
+
+    /// `hx-live:{name}` — bind an attribute or property to a reactive JavaScript expression that is
+    /// re-evaluated whenever the DOM changes, e.g. `hxLiveBind("disabled", "!q('#name').value")`.
+    /// `name` is usually an attribute or property name; see `HxLiveBinding` for the special names
+    /// `text`, `html`, `style`, `class` and `.{class}`. Requires the `hx-live` extension.
+    [<Extension>]
+    static member hxLiveBind(this: #HtmlTag, name: string, [<StringSyntax("js")>] expression: string | null) =
+        this.attr($"hx-live:{name}", expression)

src/Oxpecker.Htmx/Headers.fs

@@ -38,9 +38,12 @@ module HxRequestHeader =
     /// `HX-PTag` — polling tag sent back to the server by the `hx-ptag` extension.
     [<Literal>]
     let PTag = "HX-PTag"
-    /// `HX-Request-ID` — unique request/response correlation id sent by the `hx-ws` extension in the message headers (echoed back by the server).
+    /// `HX-Prompt` — the user's answer to the `hx-prompt` dialog, sent URI-encoded by the `hx-prompt` extension (decode it with `Uri.UnescapeDataString`).
     [<Literal>]
-    let RequestId = "HX-Request-ID"
+    let Prompt = "HX-Prompt"
+    /// `HX-Last-Part-ID` — the `HX-Part-ID` of the last completed part, sent by the `hx-multipart` extension when reconnecting so the server can resume the stream.
+    [<Literal>]
+    let LastPartId = "HX-Last-Part-ID"
 
 [<RequireQualifiedAccess>]
 module HxResponseHeader =
@@ -78,6 +81,6 @@ module HxResponseHeader =
     /// `HX-PTag` — polling tag stored by the `hx-ptag` extension and echoed on the next request.
     [<Literal>]
     let PTag = "HX-PTag"
-    /// `HX-Request-ID` — the request/response correlation id echoed back by the server so the `hx-ws` extension can route the response to the originating element.
+    /// `HX-Part-ID` — per-part identifier set on a `multipart/mixed` part by the server, remembered by the `hx-multipart` extension and sent back as `HX-Last-Part-ID` on reconnect.
     [<Literal>]
-    let RequestId = "HX-Request-ID"
+    let PartId = "HX-Part-ID"

src/Oxpecker.Htmx/Helpers.fs

@@ -19,7 +19,7 @@ module HxModifier =
 /// Builders for extended selectors.
 /// See https://four.htmx.org/docs/features/extended-selectors
 /// Each helper returns the htmx selector string ready to pass into selector-typed attributes
-/// such as `hxTarget`, `hxSelect`, `hxSelectOob`, `hxIndicator`, `hxInclude`, `hxDisable`, `hxOptimistic`.
+/// such as `hxTarget`, `hxSelect`, `hxSelectOob`, `hxIndicator`, `hxInclude`, `hxDisable`.
 [<RequireQualifiedAccess>]
 module HxSelector =
     /// `this` — the element itself.
@@ -112,9 +112,9 @@ module HxSwapModifier =
     /// `swapMs` — adds delay before swap, in milliseconds.
     let inline swapMs value = $" swap:%i{value}ms"
     /// `settle` — adds delay between the swap and the settle phase.
-    let inline settle value = $"settle:%s{value}"
+    let inline settle value = $" settle:%s{value}"
     /// `settleMs` — adds delay between the swap and the settle phase, in milliseconds.
-    let inline settleMs value = $"settle:%i{value}ms"
+    let inline settleMs value = $" settle:%i{value}ms"
     /// `ignoreTitle` — prevents htmx from updating the document title based on the response.
     let inline ignoreTitle value = $" ignoreTitle:%b{value}"
     /// `scroll` — auto-scroll to swapped content.
@@ -129,6 +129,10 @@ module HxSwapModifier =
     let inline target value = $" target:%s{value}"
     /// `strip` — controls whether the outer element of the response content is removed before swapping.
     let inline strip value = $" strip:%b{value}"
+    /// `swapEmpty` — controls whether the main swap still runs when the response is empty after
+    /// out-of-band and partial content has been removed. Defaults to `false` when the response
+    /// contained partials.
+    let inline swapEmpty value = $" swapEmpty:%b{value}"
 
 /// Synthetic event names for `hxTrigger`, beyond the standard DOM events.
 [<RequireQualifiedAccess>]