fasthtml: use attribute generators in examples (#29)

* fasthtml: use attribute generators in examples

Author: axelknock

examples/fasthtml/advanced.py

@@ -22,6 +22,7 @@
 from great_tables import GT
 from great_tables.data import reactions
 
+from datastar_py import attribute_generator as data
 from datastar_py.fasthtml import DatastarResponse, ServerSentEventGenerator
 
 ######################################################################################################
@@ -42,7 +43,7 @@
 app, rt = fast_app(
     htmx=False,
     surreal=False,
-    live=True,
+    live=False,
     hdrs=(
         Script(
             type="module",
@@ -133,14 +134,12 @@ def index():
                     ),
                 ),
                 # When the below request is in flight, $filtering becomes true, setting the aria-busy attribute
-                Label({"data-attr:aria-busy": "$filtering"}, fr="filter")("Filter Compound"),
+                Label(data.attr({"aria-busy": "$filtering"}), fr="filter")("Filter Compound"),
                 # Bind the 'filter' signal to the value of this input, debouncing using Datastar modifier
                 Input(
-                    {
-                        "data-on:input__debounce.250ms": f"@post('{table}')",
-                        "data-bind:filter": True,
-                        "data-indicator:filtering": True,
-                    },
+                    data.on("input", f"@post('{table}')").debounce("250ms"),
+                    data.bind("filter"),
+                    data.indicator("filtering"),
                     id="filter",
                     name="filter",
                 ),
@@ -177,12 +176,11 @@ async def _():
 async def reset():
     reset_and_hello = Div(id="myElement")(
         Button(
-            {
-                "data-on:click": f"@get('{hello}')",
-                "data-indicator:resetting": True,
-                "data-attr:aria-busy": "$resetting",
-                "data-attr:disabled": "$resetting",
-            },
+            # Attributes can either be defined using the Datastar SDK's
+            # attribute_generator or with dicts as in HELLO_BUTTON below
+            data.on("click", f"@get('{hello}')"),
+            data.indicator("resetting"),
+            data.attr({"aria-busy": "$resetting", "disabled": "$resetting"}),
             type="reset",
         )("Reset"),
         Div("Hello!"),
@@ -200,7 +198,7 @@ async def _():
     Button(
         {
             "data-on:click": f"@get('{reset}')",
-            "data-indicator:loading": True,
+            "data-indicator": "loading",
             "data-attr:aria-busy": "$loading",
             "data-attr:disabled": "$loading",
         }

examples/fasthtml/simple.py

@@ -8,18 +8,18 @@
 # datastar-py = { path = "../../" }
 # ///
 import asyncio
-import json
 from datetime import datetime
 
 # ruff: noqa: F403, F405
 from fasthtml.common import *
 
+from datastar_py import attribute_generator as data
 from datastar_py.fasthtml import DatastarResponse, ServerSentEventGenerator, read_signals
 
 app, rt = fast_app(
     htmx=False,
     surreal=False,
-    live=True,
+    live=False,
     hdrs=(
         Script(
             type="module",
@@ -39,15 +39,15 @@ async def index():
     return Titled(
         "Datastar FastHTML example",
         example_style,
-        Body(data_signals=json.dumps({"currentTime": now}))(
+        Body(data.signals({"currentTime": now}))(
             Div(cls="container")(
-                Div(data_init="@get('/updates')", cls="time")(
+                Div(data.init("@get('/updates')"), cls="time")(
                     "Current time from element: ",
                     Span(id="currentTime")(now),
                 ),
                 Div(cls="time")(
                     "Current time from signal: ",
-                    Span(data_text="$currentTime")(now),
+                    Span(data.text("$currentTime"))(now),
                 ),
             ),
         ),