refactor: Use attrs-first style

src/tutorial/_01_click_to_edit.py

@@ -15,27 +15,20 @@ def page():
 
 @app.get("/contact")
 def get_contact():
-    return Div(
+    return Div(hx_target="this", hx_swap="outerHTML", cls="container")(
         Div(P(f"Name : {current.name}")),
         Div(P(f"Email : {current.email}")),
         Button("Click To Edit", hx_get=contact_edit.rt(), cls="btn primary"),
-        hx_target="this",
-        hx_swap="outerHTML",
-        cls="container",
     )
 
 
 @app.get("/contact/edit")
 def contact_edit():
-    return Form(
+    return Form(hx_put=put_contact.rt(), hx_target="this", hx_swap="outerHTML", cls="container")(
         Div(Label("Name"), Input(type="text", name="name", value=current.name)),
         Div(Label("Email"), Input(type="email", name="email", value=current.email)),
         Button("Submit", cls="btn"),
         Button("Cancel", hx_get=get_contact.rt(), cls="btn"),
-        hx_put=put_contact.rt(),
-        hx_target="this",
-        hx_swap="outerHTML",
-        cls="container",
     )
 
 
@@ -50,7 +43,7 @@ DESC = "Demonstrates inline editing of a data object"
 DOC = """
 The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.
 
- - This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from /contact/1/edit
+ - This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from /contact/edit
 
 ::get_contact::
  
@@ -58,7 +51,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
 
 ::contact_edit::
 
-The form issues a PUT back to /contact/1, following the usual REST-ful pattern.
+The form issues a PUT back to /contact, following the usual REST-ful pattern.
 
 ::put_contact::
 """

src/tutorial/_03_click_to_load.py

@@ -6,14 +6,13 @@ app, rt = fast_app()
 # fmt: off
 @app.get
 def page():
-    return Div(
+    return Div(cls="container overflow-auto")(
         Table(
             Thead(Tr(Th("Name"), Th("ID"))),
             Tbody(load_contacts(page=1)),
-        ),
-        cls="container overflow-auto",
+        )
     )
-# fmt: on
+
 
 
 @app.get("/contacts")
@@ -23,18 +22,13 @@ def load_contacts(page: int, limit: int = 5):
 
 
 def make_last_row(page):
-    return Tr(
-        Td(
-            Button(
-                "Load More Agents...",
-                hx_get=load_contacts.rt(page=page + 1),
-                hx_swap="outerHTML",
-                cls="btn primary",
-            ),
-            colspan="3",
+    return Tr(hx_target="this")(
+        Td(colspan="3")(
+            Button("Load More Agents...",
+                   hx_get=load_contacts.rt(page=page + 1), hx_swap="outerHTML", cls="btn primary"),
         ),
-        hx_target="this",
     )
+# fmt: on
 
 
 DESC = "Demonstrates clicking to load more rows in a table"

src/tutorial/_04_delete_row.py

@@ -12,10 +12,10 @@ app, rt = fast_app(hdrs=[Style(css)])
 
 @app.get
 def page():
-    return Div(
+    return Div(cls="container overflow-auto")(
         Table(
             Thead(Tr(Th("Name"), Th("Email"), Th())),
-            Tbody(
+            Tbody(hx_confirm="Are you sure?", hx_target="closest tr", hx_swap="outerHTML swap:1s")(
                 Tr(
                     Td("Joe Smith"),
                     Td("[email protected]"),
@@ -36,12 +36,8 @@ def page():
                     Td("[email protected]"),
                     Td(Button("Delete", hx_delete="/contacts/3", cls="btn secondary")),
                 ),
-                hx_confirm="Are you sure?",
-                hx_target="closest tr",
-                hx_swap="outerHTML swap:1s",
             ),
         ),
-        cls="container overflow-auto",
     )
 
 

src/tutorial/_05_edit_row.py

@@ -12,16 +12,13 @@ DATA = [
 
 @app.get
 def page():
-    return Div(
+    return Div(cls="container-fluid")(
         Table(
             Thead(Tr(Th("Name"), Th("Email"), Th())),
-            Tbody(
-                *(get_contact(i) for i in range(4)),
-                hx_target="closest tr",
-                hx_swap="outerHTML",
+            Tbody(hx_target="closest tr", hx_swap="outerHTML")(
+                tuple(get_contact(i) for i in range(4)),
             ),
         ),
-        cls="container-fluid",
     )
 
 
@@ -38,16 +35,13 @@ def get_contact(idx: int):
 @app.get("/contact/{idx}/edit")
 def edit_view(idx: int):
     name, email = DATA[idx]
-    return Tr(
+    return Tr(hx_trigger="cancel", hx_get=f"/contact/{idx}", cls="editing")(
         Td(Input(name="name", value=name)),
         Td(Input(name="email", value=email)),
         Td(
             Button("Cancel", hx_get=f"/contact/{idx}", cls="btn secondary"),
             Button("Save", hx_put=f"/contact/{idx}", hx_include="closest tr", cls="btn primary"),
         ),
-        hx_trigger="cancel",
-        hx_get=f"/contact/{idx}",
-        cls="editing",
     )
 
 

src/tutorial/_06_lazy_loading.py

@@ -16,11 +16,8 @@ app, rt = fast_app(hdrs=[Style(css)])
 
 @app.get
 def page():
-    return Div(
+    return Div(hx_get=get_content.rt(), hx_trigger="load", cls="container")(
         Img(src="/img/bars.svg", alt="Result loading...", cls="htmx-indicator", width="150"),
-        hx_get=get_content.rt(),
-        hx_trigger="load",
-        cls="container",
     )
 
 

src/tutorial/_07_inline_validation.py

@@ -16,17 +16,14 @@ app, rt = fast_app(hdrs=[Style(css)])
 
 @app.get
 def page():
-    return Div(
+    return Div(cls="container")(
         H3("Signup Form"),
-        NotStr(
-            "Enter an email into the input below and on tab out it will be validated. Only <ins>[email protected]</ins> will pass."
-        ),
+        NotStr("Enter an email and on tab out it will be validated. Only <ins>[email protected]</ins> will pass."),
         Form(
             make_email_field("", error=False, touched=False),
             Div(Label("Name"), Input(name="name")),
             Button("Submit", disabled="", cls="btn primary"),
         ),
-        cls="container",
     )
 
 
@@ -37,14 +34,12 @@ def validate_email(email: str):
 
 
 def make_email_field(value: str, error: bool, touched: bool):
-    return Div(
+    cls = "" if not touched else "error" if error else "valid"
+    return Div(hx_target="this", hx_swap="outerHTML", cls=cls)(
         Label("Email"),
         Input(name="email", hx_post=validate_email.rt(), hx_indicator="#ind", value=value),
         Img(id="ind", src="/img/bars.svg", cls="htmx-indicator"),
         Span("Please enter a valid email address", style="color:red;") if error else None,
-        hx_target="this",
-        hx_swap="outerHTML",
-        cls="" if not touched else "error" if error else "valid",
     )
 
 

src/tutorial/_08_infinite_scroll.py

@@ -6,12 +6,11 @@ app, rt = fast_app()
 # fmt: off
 @app.get
 def page():
-    return Div(
+    return Div(cls="container")(
         Table(
             Thead(Tr(Th("Name"), Th("ID"))),
             Tbody(load_contacts(page=1)),
         ),
-        cls="container",
     )
 # fmt: on
 
@@ -23,12 +22,9 @@ def load_contacts(page: int, limit: int = 5):
 
 
 def make_last_row(page, limit):
-    return Tr(
+    return Tr(hx_trigger="revealed", hx_swap="afterend", hx_get=load_contacts.rt(page=page + 1))(
         Td("Smith"),
         Td(page * limit),
-        hx_trigger="revealed",
-        hx_swap="afterend",
-        hx_get=load_contacts.rt(page=page + 1),
     )
 
 

src/tutorial/_09_active_search.py

@@ -12,19 +12,14 @@ def page():
     return Div(
         H3("Search Contacts"),
         Input(
-            type="search",
-            name="query",
-            placeholder="Begin Typing To Search Users...",
-            hx_post=search.rt(),
-            hx_trigger="input changed delay:500ms, search",
-            hx_target="#search-results",
-            hx_indicator=".htmx-indicator",
-            cls="form-control",
+            hx_post=search.rt(), hx_target="#results",
+            hx_trigger="input changed delay:500ms, search", hx_indicator=".htmx-indicator",
+            type="search", name="query", placeholder="Begin Typing To Search Users...",
         ),
         Span(Img(src="/img/bars.svg"), "Searching...", cls="htmx-indicator"),
         Table(
             Thead(Tr(Th("First Name"), Th("Last Name"), Th("Email"))),
-            Tbody(id="search-results"),
+            Tbody(id="results"),
         ),
     )
 # fmt: on

src/tutorial/_10_progress_bar.py

@@ -33,11 +33,9 @@ current = 1
 
 @app.get
 def page():
-    return Div(
+    return Div(hx_target="this", hx_swap="outerHTML")(
         H3("Start Progress"),
         Button("Start Job", hx_post=start.rt(), cls="btn primary"),
-        hx_target="this",
-        hx_swap="outerHTML",
     )
 
 
@@ -45,24 +43,16 @@ def page():
 def start():
     global current
     current = 1
-    return Div(
+    return Div(hx_trigger="done", hx_get=job_finished.rt(), hx_swap="outerHTML", hx_target="this")(
         H3("Running", role="status", id="pblabel", tabindex="-1", autofocus=""),
-        Div(
-            get_progress(),
-            hx_get=get_progress.rt(),
-            hx_trigger="every 600ms",
-            hx_target="this",
-            hx_swap="innerHTML",
+        Div(hx_get=progress_bar.rt(), hx_trigger="every 600ms", hx_target="this", hx_swap="innerHTML")(
+            progress_bar(),
         ),
-        hx_trigger="done",
-        hx_get=job_finished.rt(),
-        hx_swap="outerHTML",
-        hx_target="this",
     )
 
 
 @app.get
-def get_progress():
+def progress_bar():
     global current
     if current <= 100:
         current += 20
@@ -72,12 +62,10 @@ def get_progress():
 
 @app.get
 def job_finished():
-    return Div(
+    return Div(hx_swap="outerHTML", hx_target="this")(
         H3("Complete", role="status", id="pblabel", tabindex="-1", autofocus=""),
         Div(Div(style="width:100%", cls="progress-bar"), cls="progress"),
         Button("Restart Job", hx_post=start.rt(), cls="btn primary show"),
-        hx_swap="outerHTML",
-        hx_target="this",
     )
 
 
@@ -88,7 +76,7 @@ This example shows how to implement a smoothly scrolling progress bar.
 We start with an initial state with a button that issues a POST to /start to begin the job:
 ::page::
 This progress bar is updated every 600 milliseconds, with the “width” style attribute and aria-valuenow attributed set to current progress value. Because there is an id on the progress bar div, htmx will smoothly transition between requests by settling the style attribute into its new value. This, when coupled with CSS transitions, makes the visual transition continuous rather than jumpy.
-::start get_progress::
+::start progress_bar::
 Finally, when the process is complete, a server returns HX-Trigger: done header, which triggers an update of the UI to “Complete” state with a restart button added to the UI:
 ::job_finished::
 """

src/tutorial/_11_cascading_select.py

@@ -7,14 +7,12 @@ app, rt = fast_app()
 
 @app.get
 def page():
-    return Div(
+    return Div(cls="container")(
         H3("Pick A Make/Model"),
         Form(
             Div(
                 Label("Make"),
-                Select(
-                    name="make", hx_get=load_models.rt(sleep=1), hx_target="#models", hx_indicator=".htmx-indicator"
-                )(
+                Select(name="make", hx_get=models.rt(sleep=1), hx_target="#models", hx_indicator=".htmx-indicator")(
                     Option("Audi", value="audi"),
                     Option("Toyota", value="toyota"),
                     Option("BMW", value="bmw"),
@@ -22,16 +20,15 @@ def page():
             ),
             Div(
                 Label("Model"),
-                Select(load_models("audi"), id="models"),
+                Select(models("audi"), id="models"),
                 Img(width="20", src="/img/bars.svg", cls="htmx-indicator"),
             ),
         ),
-        cls="container",
     )
 
 
 @app.get
-def load_models(make: str, sleep: int = 0):
+def models(make: str, sleep: int = 0):
     time.sleep(sleep)
     cars = {
         "audi": ["A1", "A4", "A6"],
@@ -52,7 +49,7 @@ Here is the code:
 ::page::
 
 When a request is made to the /models end point, we return the models for that make:
-::load_models::
+::models::
 
 And they become available in the model select.
 """

src/tutorial/_13_file_upload.py

@@ -21,29 +21,23 @@ def method1():
         htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
     });
     """
-    form = Form(
+    form = Form(hx_target="#output", hx_post=upload.rt(), id="form")(
         Input(type="file", name="file"),
         Button("Upload"),
         Progress(id="progress", value="0", max="100"),
         Div(id="output"),
-        hx_target="#output",
-        hx_post=upload.rt(),
-        id="form",
     )
     return form, Script(js)
 
 
 @app.get
 def method2():
-    return Form(
+    script = "on htmx:xhr:progress(loaded, total) set #progress2.value to (loaded/total)*100"
+    return Form(_=script, hx_target="#output2", hx_post=upload.rt())(
         Input(type="file", name="file"),
         Button("Upload"),
         Progress(id="progress2", value="0", max="100"),
         Div(id="output2"),
-        hx_target="#output2",
-        hx_encoding="multipart/form-data",
-        hx_post=upload.rt(),
-        _="on htmx:xhr:progress(loaded, total) set #progress2.value to (loaded/total)*100",
     )
 
 

src/tutorial/__init__.py

@@ -50,13 +50,12 @@ The code can be found on [GitHub](https://github.com/phihung/fasthtml_examples).
 @app.get("/")
 def homepage():
     ls = [get_example(name) for name in examples]
-    return Main(
+    return Main(cls="container")(
         Div(INTRO, cls="marked"),
         Table(
             Thead(Tr(Th("Pattern"), Th("Description"))),
             Tbody(tuple(Tr(Td(A(ex.title, href="/" + ex.slug)), Td(ex.desc)) for ex in ls)),
         ),
-        cls="container",
     )
 
 
@@ -118,7 +117,7 @@ class Example:
             doc = re.sub("::([a-zA-Z_0-9\s]+)::", lambda x: code_block(module, x.group(1)), self.doc)
             content = Div(doc, cls="marked")
 
-        return Main(
+        return Main(cls="container")(
             Hgroup(H1(self.title), P(self.desc)),
             Div(
                 A("Back", href="/"),
@@ -129,12 +128,10 @@ class Example:
                 "|",
                 A("Htmx Docs", href=self.htmx_url),
             ),
-            Div(
+            Div(cls="grid")(
                 Div(content, style="height:80vh;overflow:scroll"),
                 Div(P(A("Direct url", href=self.start_url)), Iframe(src=self.start_url, height="500px", width="100%")),
-                cls="grid",
             ),
-            cls="container",
         )
 
     def _fix_url(self):