.gitignore

@@ -3,3 +3,5 @@
 
 .fake
 .ionide
+.idea
+*.user

src/ViewEngine.Htmx.Tests/Giraffe.ViewEngine.Htmx.Tests.fsproj

@@ -13,6 +13,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <PackageReference Include="Giraffe.ViewEngine" Version="1.4.0" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.11.0" />
     <PackageReference Include="xunit" Version="2.4.1" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
@@ -25,4 +26,8 @@
     </PackageReference>
   </ItemGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\ViewEngine.Htmx\Giraffe.ViewEngine.Htmx.fsproj" />
+  </ItemGroup>
+
 </Project>

src/ViewEngine.Htmx.Tests/Tests.fs

@@ -1,8 +1,125 @@
-module Tests
+module Giraffe.ViewEngine.Htmx.Tests
 
-open System
+open Giraffe.ViewEngine
 open Xunit
 
-[<Fact>]
-let ``My test`` () =
-    Assert.True(true)
+/// Tests for the HtmxAttrs module
+module Attributes =
+  
+  /// Pipe-able assertion for a rendered node 
+  let shouldRender expected node = Assert.Equal (expected, RenderView.AsString.htmlNode node)
+  
+  [<Fact>]
+  let ``_hxBoost succeeds`` () =
+    div [ _hxBoost ] [] |> shouldRender """<div hx-boost="true"></div>"""
+
+  [<Fact>]
+  let ``_hxConfirm succeeds`` () =
+    button [ _hxConfirm "REALLY?!?" ] [] |> shouldRender """<button hx-confirm="REALLY?!?"></button>"""
+
+  [<Fact>]
+  let ``_hxDelete succeeds`` () =
+    span [ _hxDelete "/this-endpoint" ] [] |> shouldRender """<span hx-delete="/this-endpoint"></span>"""
+  
+  [<Fact>]
+  let ``_hxDisable succeeds`` () =
+    p [ _hxDisable ] [] |> shouldRender """<p hx-disable></p>"""
+  
+  [<Fact>]
+  let ``_hxEncoding succeeds`` () =
+    form [ _hxEncoding "utf-7" ] [] |> shouldRender """<form hx-encoding="utf-7"></form>"""
+  
+  [<Fact>]
+  let ``_hxExt succeeds`` () =
+    section [ _hxExt "extendme" ] [] |> shouldRender """<section hx-ext="extendme"></section>"""
+  
+  [<Fact>]
+  let ``_hxGet succeeds`` () =
+    article [ _hxGet "/the-text" ] [] |> shouldRender """<article hx-get="/the-text"></article>"""
+  
+  [<Fact>]
+  let ``_hxHeaders succeeds`` () =
+    figure [ _hxHeaders """{ "X-Special-Header": "some-header" }""" ] []
+    |> shouldRender """<figure hx-headers="{ &quot;X-Special-Header&quot;: &quot;some-header&quot; }"></figure>"""
+  
+  [<Fact>]
+  let ``_hxHistoryElt succeeds`` () =
+    table [ _hxHistoryElt ] [] |> shouldRender """<table hx-history-elt></table>"""
+  
+  [<Fact>]
+  let ``_hxInclude succeeds`` () =
+    a [ _hxInclude ".extra-stuff" ] [] |> shouldRender """<a hx-include=".extra-stuff"></a>"""
+  
+  [<Fact>]
+  let ``_hxIndicator succeeds`` () =
+    aside [ _hxIndicator "#spinner" ] [] |> shouldRender """<aside hx-indicator="#spinner"></aside>"""
+  
+  [<Fact>]
+  let ``_hxNoBoost succeeds`` () =
+    td [ _hxNoBoost ] [] |> shouldRender """<td hx-boost="false"></td>"""
+  
+  [<Fact>]
+  let ``_hxParams succeeds`` () =
+    br [ _hxParams "[p1,p2]" ] |> shouldRender """<br hx-params="[p1,p2]">"""
+  
+  [<Fact>]
+  let ``_hxPatch succeeds`` () =
+    div [ _hxPatch "/arrrgh" ] [] |> shouldRender """<div hx-patch="/arrrgh"></div>"""
+  
+  [<Fact>]
+  let ``_hxPost succeeds`` () =
+    hr [ _hxPost "/hear-ye-hear-ye" ] |> shouldRender """<hr hx-post="/hear-ye-hear-ye">"""
+  
+  [<Fact>]
+  let ``_hxPreserve succeeds`` () =
+    img [ _hxPreserve ] |> shouldRender """<img hx-preserve="true">"""
+  
+  [<Fact>]
+  let ``_hxPrompt succeeds`` () =
+    strong [ _hxPrompt "Who goes there?" ] [] |> shouldRender """<strong hx-prompt="Who goes there?"></strong>"""
+  
+  [<Fact>]
+  let ``_hxPushUrl succeeds`` () =
+    dl [ _hxPushUrl ] [] |> shouldRender """<dl hx-push-url></dl>"""
+  
+  [<Fact>]
+  let ``_hxPut succeeds`` () =
+    s [ _hxPut "/take-this" ] [] |> shouldRender """<s hx-put="/take-this"></s>"""
+  
+  [<Fact>]
+  let ``_hxRequest succeeds`` () =
+    u [ _hxRequest "noHeaders" ] [] |> shouldRender """<u hx-request="noHeaders"></u>"""
+  
+  [<Fact>]
+  let ``_hxSelect succeeds`` () =
+    nav [ _hxSelect "#navbar" ] [] |> shouldRender """<nav hx-select="#navbar"></nav>"""
+  
+  [<Fact>]
+  let ``_hxSse succeeds`` () =
+    footer [ _hxSse "connect:/my-events" ] [] |> shouldRender """<footer hx-sse="connect:/my-events"></footer>"""
+  
+  [<Fact>]
+  let ``_hxSwap succeeds`` () =
+    del [ _hxSwap "innerHTML" ] [] |> shouldRender """<del hx-swap="innerHTML"></del>"""
+
+  [<Fact>]
+  let ``_hxSwapOob succeeds`` () =
+    li [ _hxSwapOob "true" ] [] |> shouldRender """<li hx-swap-oob="true"></li>"""
+  
+  [<Fact>]
+  let ``_hxTarget succeeds`` () =
+    header [ _hxTarget "#somewhereElse" ] [] |> shouldRender """<header hx-target="#somewhereElse"></header>"""
+
+  [<Fact>]  
+  let ``_hxTrigger succeeds`` () =
+    figcaption [ _hxTrigger "load" ] [] |> shouldRender """<figcaption hx-trigger="load"></figcaption>"""
+  
+  [<Fact>]
+  let ``_hxVals succeeds`` () =
+    dt [ _hxVals """{ "extra": "values" }""" ] []
+    |> shouldRender """<dt hx-vals="{ &quot;extra&quot;: &quot;values&quot; }"></dt>"""
+  
+  [<Fact>]
+  let ``_hxWs succeeds`` () =
+    ul [ _hxWs "connect:/web-socket" ] [] |> shouldRender """<ul hx-ws="connect:/web-socket"></ul>"""
+  

src/ViewEngine.Htmx/Htmx.fs

@@ -50,8 +50,8 @@ module HxTrigger =
     match trigger.Contains "[" with
     | true ->
         let parts = trigger.Split ('[', ']')
-        sprintf "%s[%s&&%s]" parts.[0] parts.[1] filter
-    | false -> sprintf "%s[%s]" trigger filter
+        $"{parts.[0]}[{parts.[1]}&&{filter}]"
+    | false -> $"{trigger}[{filter}]"
   /// Trigger the event on a click
   let Click = "click"
   /// Trigger the event on page load
@@ -81,9 +81,9 @@ module HxTrigger =
 /// Attributes and flags for HTMX
 [<AutoOpen>]
 module HtmxAttrs =
-  /// Progressively enhances anchors and forms to use AJAX requests
+  /// Progressively enhances anchors and forms to use AJAX requests (use `_hxNoBoost` to set to false)
   let _hxBoost      = attr "hx-boost" "true"
-  /// Shows a confim() dialog before issuing a request
+  /// Shows a confirm() dialog before issuing a request
   let _hxConfirm    = attr "hx-confirm"
   /// Issues a DELETE to the specified URL
   let _hxDelete     = attr "hx-delete"
@@ -103,6 +103,8 @@ module HtmxAttrs =
   let _hxInclude    = attr "hx-include"
   /// The element to put the htmx-request class on during the AJAX request
   let _hxIndicator  = attr "hx-indicator"
+  /// Overrides a previous `hx-boost`
+  let _hxNoBoost    = attr "hx-boost" "false"
   /// Filters the parameters that will be submitted with a request
   let _hxParams     = attr "hx-params"
   /// Issues a PATCH to the specified URL
@@ -123,10 +125,10 @@ module HtmxAttrs =
   let _hxSelect     = attr "hx-select"
   /// Establishes and listens to Server Sent Event (SSE) sources for events
   let _hxSse        = attr "hx-sse"
-  /// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
-  let _hxSwapOob    = attr "hx-swap-oob"
   /// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
   let _hxSwap       = attr "hx-swap"
+  /// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
+  let _hxSwapOob    = attr "hx-swap-oob"
   /// Specifies the target element to be swapped
   let _hxTarget     = attr "hx-target"
   /// Specifies the event that triggers the request