feat: Working on route and id helpers for views.

Sources/App/Views/Users/UserDetail.swift

@@ -12,9 +12,9 @@ struct UserDetail: HTML, Sendable {
     Float(shouldDisplay: user != nil, resetURL: "/users") {
       if let user {
         form(
-          .hx.post("/users/\(user.id)"),
+          .hx.post(route: .users(.id(user.id))),
           .hx.swap(.outerHTML),
-          .hx.target("#user_\(user.id)"),
+          .hx.target(.user(.row(id: user.id))),
           .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
         ) {
           div(.class("row")) {
@@ -36,10 +36,10 @@ struct UserDetail: HTML, Sendable {
             ) { "Update" }
             Button.danger { "Delete" }
               .attributes(
-                .hx.delete("/users/\(user.id)"),
+                .hx.delete(route: .users(.id(user.id))),
                 .hx.trigger(.event(.click)),
                 .hx.swap(.outerHTML),
-                .hx.target("#user_\(user.id)"),
+                .hx.target(.user(.row(id: user.id))),
                 .hx.confirm("Are you sure you want to delete this user?"),
                 .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
               )

Sources/App/Views/Users/UserForm.swift

@@ -17,7 +17,7 @@ struct UserForm: HTML, Sendable {
 
   private func makeForm() -> some HTML {
     form(
-      .id("user-form"),
+      .id(.user(.form)),
       .class("user-form"),
       .hx.post(context.targetURL),
       .hx.pushURL(context.pushURL),
@@ -99,6 +99,7 @@ struct UserForm: HTML, Sendable {
       }
     }
 
+    // TODO: Return a route container.
     var targetURL: String {
       switch self {
       case .create:

Sources/App/Views/Users/UserTable.swift

@@ -9,7 +9,7 @@ struct UserTable: HTML {
   let users: [User]
 
   var content: some HTML {
-    table(.id("user-table")) {
+    table(.id(.user(.table()))) {
       thead {
         tr {
           th { "Username" }
@@ -17,14 +17,14 @@ struct UserTable: HTML {
           th(.style("width: 50px;")) {
             Button.add()
               .attributes(
-                .hx.get("/users/create"),
-                .hx.target("#float"),
+                .hx.get(route: .users(.create)),
+                .hx.target(.float),
                 .hx.swap(.outerHTML)
               )
           }
         }
       }
-      tbody(.id("user-table-body")) {
+      tbody(.id(.user(.table(.body)))) {
         for user in users {
           Row(user: user)
         }
@@ -40,13 +40,13 @@ struct UserTable: HTML {
     }
 
     var content: some HTML<HTMLTag.tr> {
-      tr(.id("user_\(user.id)")) {
+      tr(.id(.user(.row(id: user.id)))) {
         td { user.username }
         td { user.email }
         td {
           Button.detail().attributes(
-            .hx.get("/users/\(user.id.uuidString)"),
-            .hx.target("#float"),
+            .hx.get(route: .users(.id(user.id))),
+            .hx.target(.float),
             .hx.swap(.outerHTML),
             .hx.pushURL(true)
           )