add hx-trigger example

Author: alephao

Examples/README.md

@@ -8,3 +8,4 @@ Start the server by running `swift run App` in the project root
 
 - (HX-Location)[Sources/App/HtmxExamples/HXLocationHandlers.swift] - Do a client side redirect via `HX-Location`
 - (HX-Reswap)[Sources/App/HtmxExamples/HXReswapHandlers.swift] - Swap an element via `HX-Reswap`
+- (HX-Trigger)[Sources/App/HtmxExamples/HXTriggerHandlers.swift] - Trigger a client-side event via `HX-Trigger`

Examples/Sources/App/Application+build.swift

@@ -56,5 +56,7 @@ func buildRouter() -> Router<AppRequestContext> {
   router.on(route: .hxLocationB, use: hxLocationBHandler)
   router.on(route: .hxLocationBSubmit, use: hxLocationBSubmitHandler)
   router.on(route: .hxReswapHttp, use: hxReswapHandler)
+  router.on(route: .hxTrigger, use: hxTriggerHandler)
+  router.on(route: .hxTriggerAlert, use: hxTriggerAlertHandler)
   return router
 }

Examples/Sources/App/HtmxExamples/HXLocationHandlers.swift

@@ -32,15 +32,15 @@ extension Route {
 }
 
 @Sendable func hxLocationSubmitHandler(_ req: Request) -> Response {
-  if req.isHtmxRequest {
-    return Response(
-      status: .ok,
-      headers: HTTPFields([
-        .hxLocation(Route.hxLocationB.path)
-      ])
-    )
+  guard req.isHtmxRequest else {
+    return Response(status: .badRequest)
   }
-  return Response(status: .badRequest)
+  return Response(
+    status: .ok,
+    headers: HTTPFields([
+      .hxLocation(Route.hxLocationB.path)
+    ])
+  )
 }
 
 @Sendable func hxLocationBHandler(_ req: Request) -> Response {

Examples/Sources/App/HtmxExamples/HXTriggerHandlers.swift

@@ -0,0 +1,53 @@
+import Foundation
+import HTTPTypesHtmx
+import Hummingbird
+
+#if canImport(FoundationNetworking)
+  import FoundationNetworking
+#endif
+
+extension Route {
+  static let hxTrigger = Route(.get, "/examples/hx-trigger")
+  static let hxTriggerAlert = Route(.post, "/examples/hx-trigger")
+}
+
+@Sendable func hxTriggerHandler(_ req: Request) -> Response {
+  .html(
+    htmlLayout(
+      """
+      <div>
+        <h2>HX-Trigger Example</h2>
+        <p>This example uses HX-Trigger to trigger a client-side event that shows an alert</p>
+        <div>
+          <button
+            hx-post="\(Route.hxTriggerAlert.path)"
+            hx-swap="none"
+          >Trigger</button>
+        </div>
+        <script>
+          document.body.addEventListener("showMessage", function(evt){
+              alert(evt.detail.value);
+          })
+        </script>
+      </div>
+      """
+    )
+  )
+}
+
+@Sendable func hxTriggerAlertHandler(_ req: Request) -> Response {
+  guard req.isHtmxRequest else {
+    return Response(status: .badRequest)
+  }
+
+  return Response(
+    status: .ok,
+    headers: HTTPFields([
+      .hxTrigger(
+        event: """
+          {"showMessage":"This alert was triggered by HX-Trigger"}
+          """
+      )
+    ])
+  )
+}

Examples/Sources/App/HtmxExamples/Support/HtmlLayout.swift

@@ -16,6 +16,7 @@ func htmlLayout(_ content: String) -> String {
           <ul>
             <li><a href="\(Route.hxLocation.path)">HX-Location</a></li>
             <li><a href="\(Route.hxReswapHttp.path)">HX-Reswap</a></li>
+            <li><a href="\(Route.hxTrigger.path)">HX-Trigger</a></li>
           </ul>
         </nav>
       </header>