add hx-location example

Author: alephao

Examples/README.md

@@ -6,4 +6,5 @@ This project provides examples of `swift-htmx` usage
 
 Start the server by running `swift run App` in the project root
 
-- (swap-http)[Sources/App/HtmxExamples/SwapHandlers.swift] - Swap an element via `HX-Retarget` and `HX-Reswap` headers (using "`HTTPTypesHtmx` for `apple/swift-http-types`)
+- (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`

Examples/Sources/App/Application+build.swift

@@ -51,6 +51,10 @@ func buildRouter() -> Router<AppRequestContext> {
   router.get("/") { _, _ -> Response in
     return .html(htmlLayout("<p>Select an example</p>"))
   }
-  registerSwapRoutes(router: router)
+  router.on(route: .hxLocation, use: hxLocationHandler)
+  router.on(route: .hxLocationSubmit, use: hxLocationSubmitHandler)
+  router.on(route: .hxLocationB, use: hxLocationBHandler)
+  router.on(route: .hxLocationBSubmit, use: hxLocationBSubmitHandler)
+  router.on(route: .hxReswapHttp, use: hxReswapHandler)
   return router
 }

Examples/Sources/App/HtmxExamples/HXLocationHandlers.swift

@@ -0,0 +1,74 @@
+import Foundation
+import HTTPTypesHtmx
+import Hummingbird
+
+#if canImport(FoundationNetworking)
+  import FoundationNetworking
+#endif
+
+extension Route {
+  static let hxLocation = Route(.get, "/examples/hx-location")
+  static let hxLocationSubmit = Route(.post, "/examples/hx-location")
+  static let hxLocationB = Route(.get, "/examples/hx-location-b")
+  static let hxLocationBSubmit = Route(.post, "/examples/hx-location-b")
+}
+
+@Sendable func hxLocationHandler(_ req: Request) -> Response {
+  .html(
+    htmlLayout(
+      """
+      <div>
+        <h2>HX-Location Example</h2>
+        <p>Pressing the button will do client-side redirection via the HX-Location header</p>
+        <div>
+          <button
+            hx-post="\(Route.hxLocationSubmit.path)"
+          >Submit</button>
+        </div>
+      </div>
+      """
+    )
+  )
+}
+
+@Sendable func hxLocationSubmitHandler(_ req: Request) -> Response {
+  if req.isHtmxRequest {
+    return Response(
+      status: .ok,
+      headers: HTTPFields([
+        .hxLocation(Route.hxLocationB.path)
+      ])
+    )
+  }
+  return Response(status: .badRequest)
+}
+
+@Sendable func hxLocationBHandler(_ req: Request) -> Response {
+  .html(
+    htmlLayout(
+      """
+      <div>
+        <h2>Redirected!</h2>
+        <p>You got redirected here via HX-Location header, click the button to be redirected back.</p>
+        <div>
+          <button
+            hx-post="\(Route.hxLocationBSubmit.path)"
+          >Submit</button>
+        </div>
+      </div>
+      """
+    )
+  )
+}
+
+@Sendable func hxLocationBSubmitHandler(_ req: Request) -> Response {
+  if req.isHtmxRequest {
+    return Response(
+      status: .ok,
+      headers: HTTPFields([
+        .hxLocation(Route.hxLocation.path)
+      ])
+    )
+  }
+  return Response(status: .badRequest)
+}

Examples/Sources/App/HtmxExamples/SwapHandlers.swift Examples/Sources/App/HtmxExamples/HXReswapHandlers.swift

@@ -7,14 +7,10 @@ import Hummingbird
 #endif
 
 extension Route {
-  static let swapHttp = Route(.get, "/examples/swap-http")
+  static let hxReswapHttp = Route(.get, "/examples/hx-reswap")
 }
 
-func registerSwapRoutes(router: Router<AppRequestContext>) {
-  router.on(route: .swapHttp, use: swapHttpHandler)
-}
-
-@Sendable func swapHttpHandler(_ req: Request) -> Response {
+@Sendable func hxReswapHandler(_ req: Request) -> Response {
   let timestamp = String(Date.now.timeIntervalSince1970)
   let inputId = "timestamp"
   let inputSelector = "#timestamp"
@@ -36,13 +32,13 @@ func registerSwapRoutes(router: Router<AppRequestContext>) {
     htmlLayout(
       """
       <div>
-        <h2>Swap via HX-Reswap and HX-Retarget headers</h2>
+        <h2>HX-Reswap Example</h2>
         <p>This example uses HX-Reswap and HX-Retarget headers to update the input with the server's current timestamp</p>
         <div>
           <button
-            hx-get="\(Route.swapHttp.path)"
+            hx-get="\(Route.hxReswapHttp.path)"
             hx-swap="none"
-          >Swap via HX-Reswap and Hx-Retarget</button>
+          >Swap via HX-Reswap and HX-Retarget</button>
           <br>
           <br>
           \(input)

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

@@ -12,8 +12,11 @@ func htmlLayout(_ content: String) -> String {
     </head>
     <body>
       <header class="container">
-        <nav style="display: flex;align-items: center;height: 64px;gap: 16px;">
-          <a href="\(Route.swapHttp.path)">swap via http headers</a>
+        <nav>
+          <ul>
+            <li><a href="\(Route.hxLocation.path)">HX-Location</a></li>
+            <li><a href="\(Route.hxReswapHttp.path)">HX-Reswap</a></li>
+          </ul>
         </nav>
       </header>
       <main class="container">