feat: Display server calls

public/script.js

@@ -0,0 +1,38 @@
+function init_sub_page(slug) {
+  console.log(`init_sub_page ${slug}`);
+  document.addEventListener("htmx:configRequest", (event) => {
+    if (!event.detail.path.startsWith(`/${slug}`)) {
+      event.detail.path = `/${slug}${event.detail.path}`;
+    }
+  });
+
+  document.addEventListener("htmx:afterRequest", (event) => {
+    let req = event.detail.requestConfig;
+    let detail = {
+      verb: req.verb,
+      path: req.path.slice(slug.length + 1),
+      parameters: Object.fromEntries(req.formData),
+      headers: req.headers,
+      response: event.detail.xhr.response,
+    };
+    window.parent.document.dispatchEvent(
+      new CustomEvent("SubappAfterRequest", { detail })
+    );
+  });
+}
+
+function init_main_page() {
+  console.log("init_main_page");
+  window.document.addEventListener(
+    "SubappAfterRequest",
+    (e) => {
+      // console.log(e);
+      htmx.ajax("PUT", "/requests", {
+        target: "#request-list",
+        values: e.detail,
+        swap: "afterbegin",
+      });
+    },
+    false
+  );
+}

src/tutorial/__init__.py

@@ -1,8 +1,9 @@
 import importlib
+from dataclasses import dataclass
 from pathlib import Path
 
 import fasthtml.common as fh
-from fasthtml.common import A, Div, Table, Tbody, Td, Th, Thead, Tr
+from fasthtml.common import H4, A, Div, Pre, Table, Tbody, Td, Th, Thead, Tr
 
 from tutorial import utils
 from tutorial.example import Example
@@ -10,27 +11,23 @@ from tutorial.example import Example
 hdrs = (
     fh.MarkdownJS(),
     utils.HighlightJS(langs=["python", "javascript", "html", "css"]),
-    *fh.Socials(
-        title="HTMX examples with FastHTML",
-        description="Reproduction of HTMX official examples with Python FastHTML",
-        site_name="phihung-htmx-examples.hf.space",
-        twitter_site="@hunglp",
-        image="/social.png",
-        url="https://phihung-htmx-examples.hf.space",
-    ),
+    utils.social_card(),
     utils.alpine(),
+    fh.Script(src="/script.js"),
+    fh.Script("init_main_page()"),
 )
 html_kv = {
-    "x-data": "{darkMode: localStorage.getItem('darkMode') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')}",
-    "x-init": "$watch('darkMode', val => localStorage.setItem('darkMode', val))",
+    "x-data": """{
+        showRequests: localStorage.getItem('showRequests') == 'true',
+        darkMode: localStorage.getItem('darkMode') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    }""",
+    "x-init": "$watch('darkMode', val => localStorage.setItem('darkMode', val));$watch('showRequests', val => localStorage.setItem('showRequests', val))",
     "x-bind:data-theme": "darkMode !== 'system'? darkMode : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')",
 }
 
 app, rt = fh.fast_app(hdrs=hdrs, static_path="public", htmlkw=html_kv, surreal=False)
 
 htmx_examples = sorted([f.stem for f in Path(__file__).parent.glob("htmx/*.py") if f.stem not in ["__init__"]])
-
-
 INTRO = """
 # HTMX examples with FastHTML
 
@@ -62,6 +59,26 @@ def homepage():
     )
 
 
+@dataclass
+class RequestInfo:
+    verb: str
+    path: str
+    parameters: str
+    headers: str
+    response: str
+
+
+@app.put("/requests")
+def requests(r: RequestInfo):
+    return Div(**{"x-data": "{show: false}", "@click": "show = !show"})(
+        H4(x_text="(show?'▽':'▶') + ' " + r.verb.upper() + " " + r.path + "'"),
+        Div(**{"x-show": "show"})(
+            Div(Pre("Input: " + r.parameters)),
+            Div(Pre(r.response or "(empty response)"), style="max-height:150px;overflow:scroll;"),
+        ),
+    )
+
+
 def get_app():
     for name in htmx_examples:
         get_example(name).create_routes(app)

src/tutorial/example.py

@@ -6,7 +6,7 @@ from pathlib import Path
 from types import ModuleType
 
 import fasthtml.common as fh
-from fasthtml.common import H1, A, Code, Div, Hgroup, P, Pre
+from fasthtml.common import H1, H3, A, Code, Div, Hgroup, P, Pre
 
 from tutorial import utils
 
@@ -28,6 +28,10 @@ class Example:
     def doc(self):
         return self.module.DOC
 
+    @cached_property
+    def height(self):
+        return getattr(self.module, "HEIGHT", "500px")
+
     @cached_property
     def slug(self):
         return self.name.replace("_", "-")
@@ -44,9 +48,8 @@ class Example:
 
     def create_routes(self, main_app: fh.FastHTML):
         sub_app, slug = self.module.app, self.slug
-        self._fix_url()
         sub_app.htmlkw = main_app.htmlkw
-        sub_app.hdrs.append(utils.alpine())
+        sub_app.hdrs += (utils.alpine(), fh.Script(src="/script.js"), fh.Script(f"init_sub_page('{slug}')"))
         main_app.mount(f"/{slug}", sub_app)
         main_app.get(f"/{slug}")(self.main_page)
 
@@ -60,7 +63,7 @@ class Example:
             doc = _replace_code_blocks(module, self.doc)
             content = Div(doc, cls="marked")
 
-        return fh.Main(cls="container")(
+        return fh.Main(cls="container", x_cloak=True)(
             Hgroup(H1(self.title), P(self.desc)),
             Div(
                 *utils.concat(
@@ -72,24 +75,20 @@ class Example:
                 )
             ),
             Div(cls="grid")(
-                Div(content, style="height:80vh;overflow:scroll"),
+                Div(content, style="max-height:80vh;overflow:scroll"),
                 Div(
-                    fh.Iframe(src=self.start_url, height="500px", width="100%"),
+                    Div(cls="grid")(
+                        fh.Label(fh.Input(type="checkbox", role="switch", x_model="showRequests"), "Show requests"),
+                    ),
+                    Div(fh.Iframe(src=self.start_url, height=self.height, width="100%")),
+                ),
+                Div(**{"x-show": "showRequests"})(
+                    H3("Server Calls"),
+                    Div(Div(id="request-list"), style="height:80vh;overflow:scroll"),
                 ),
             ),
         )
 
-    def _fix_url(self):
-        sub_app, slug = self.module.app, self.slug
-        code = f"""
-        document.addEventListener('htmx:configRequest', (event) => {{
-            if (!event.detail.path.startsWith('/{slug}')) {{
-                event.detail.path = `/{slug}${{event.detail.path}}`
-            }}
-        }})
-        """
-        sub_app.hdrs.append(fh.Script(code))
-
 
 def _replace_code_blocks(module, doc):
     """Replace placeholders by real implementations"""

src/tutorial/htmx/_01_click_to_edit.py

@@ -18,16 +18,16 @@ def get_contact():
     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"),
+        Button("Click To Edit", hx_get=contact_edit, cls="btn primary"),
     )
 
 
 @app.get("/contact/edit")
 def contact_edit():
-    return Form(hx_put=put_contact.rt(), hx_target="this", hx_swap="outerHTML", cls="container")(
+    return Form(hx_put=put_contact, 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)),
-        Div(Button("Submit"), Button("Cancel", hx_get=get_contact.rt()), cls="grid"),
+        Div(Button("Submit"), Button("Cancel", hx_get=get_contact), cls="grid"),
     )
 
 
@@ -54,3 +54,4 @@ The form issues a PUT back to /contact, following the usual REST-ful pattern.
 
 ::put_contact::
 """
+HEIGHT = "300px"

src/tutorial/htmx/_02_bulk_update.py

@@ -18,8 +18,7 @@ app, rt = fast_app(hdrs=[Style(css)])
 
 @app.get
 def page():
-    # Bug with default enctype: multipart/form-data
-    return Form(enctype="", hx_post=update.rt(), hx_swap="outerHTML settle:3s", hx_target="#toast", cls="container")(
+    return Form(hx_post=update, hx_swap="outerHTML settle:3s", hx_target="#toast", cls="container")(
         Table(
             Thead(Tr(Th("Name"), Th("Email"), Th("Active"))),
             Tbody(
@@ -51,3 +50,4 @@ The cool thing is that, because HTML form inputs already manage their own state,
 You can see a working example of this code below.
 ::page update::
 """
+HEIGHT = "300px"

src/tutorial/htmx/_04_delete_row.py

@@ -74,3 +74,4 @@ Tr(
 )
 ```
 """
+HEIGHT = "350px"

src/tutorial/htmx/_05_edit_row.py

@@ -38,7 +38,7 @@ def edit_view(idx: int):
     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(
+        Td(cls="grid")(
             Button("Cancel", hx_get=f"/contact/{idx}", cls="btn secondary"),
             Button("Save", hx_put=f"/contact/{idx}", hx_include="closest tr", cls="btn primary"),
         ),

src/tutorial/htmx/_06_lazy_loading.py

@@ -16,17 +16,17 @@ app, rt = fast_app(hdrs=[Style(css)])
 
 @app.get
 def page():
-    return Div(hx_get=get_content.rt(), hx_trigger="load", cls="container")(
+    return Div(hx_get=get_content, hx_trigger="load", cls="container")(
         Img(src="/img/bars.svg", alt="Result loading...", cls="htmx-indicator", width="150"),
     )
 
 
 @app.get
 def get_content():
-    time.sleep(3)
+    time.sleep(2)
     return Div(
-        NotStr("<ins>This simple text takes 3s to load!</ins>"),
-        Button("Reload", hx_target="body", hx_get="/page"),
+        NotStr("<ins>This simple text takes 2s to load!</ins>"),
+        Button("Reload", hx_target="body", hx_get=page),
     )
 
 
@@ -38,3 +38,4 @@ This example shows how to lazily load an element on a page. We start with an ini
 Which shows a progress indicator as we are loading the graph. The graph is then loaded and faded gently into view via a settling CSS transition:
 ::css::
 """
+HEIGHT = "200px"

src/tutorial/htmx/_07_inline_validation.py

@@ -29,7 +29,7 @@ def page():
 
 @app.post("/contact/email")
 def validate_email(email: str):
-    time.sleep(2)
+    time.sleep(1)
     return make_email_field(email, email != "[email protected]", True)
 
 
@@ -37,7 +37,7 @@ def make_email_field(value: str, error: bool, touched: bool):
     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),
+        Input(name="email", hx_post=validate_email, 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,
     )
@@ -57,3 +57,4 @@ When a request occurs, it will return a partial to replace the outer div. It mig
 This form can be lightly styled with this CSS to give better visual feedback.
 ::css::
 """
+HEIGHT = "400px"

src/tutorial/htmx/_09_active_search.py

@@ -12,7 +12,7 @@ def page():
     return Div(
         H3("Search Contacts"),
         Input(
-            hx_post=search.rt(), hx_target="#results",
+            hx_post=search, hx_target="#results",
             hx_trigger="input changed delay:500ms, search", hx_indicator=".htmx-indicator",
             type="search", name="query", placeholder="Begin Typing To Search Users...",
         ),

src/tutorial/htmx/_10_progress_bar.py

@@ -35,7 +35,7 @@ current = 1
 def page():
     return Div(hx_target="this", hx_swap="outerHTML")(
         H3("Start Progress"),
-        Button("Start Job", hx_post=start.rt(), cls="btn primary"),
+        Button("Start Job", hx_post=start, cls="btn primary"),
     )
 
 
@@ -43,9 +43,9 @@ def page():
 def start():
     global current
     current = 1
-    return Div(hx_trigger="done", hx_get=job_finished.rt(), hx_swap="outerHTML", hx_target="this")(
+    return Div(hx_trigger="done", hx_get=job_finished, hx_swap="outerHTML", hx_target="this")(
         H3("Running", role="status", id="pblabel", tabindex="-1", autofocus=""),
-        Div(hx_get=progress_bar.rt(), hx_trigger="every 600ms", hx_target="this", hx_swap="innerHTML")(
+        Div(hx_get=progress_bar, hx_trigger="every 600ms", hx_target="this", hx_swap="innerHTML")(
             progress_bar(),
         ),
     )
@@ -67,7 +67,7 @@ def job_finished():
     return Div(hx_swap="outerHTML", hx_target="this")(
         H3("Complete", role="status", id="pblabel", tabindex="-1", autofocus=""),
         Div(Div(style="width:100%", id="THIS_ID_IS_INDISPENSIBLE", cls="progressbar"), cls="progress"),
-        Button("Restart Job", hx_post=start.rt(), cls="btn primary show"),
+        Button("Restart Job", hx_post=start, cls="btn primary show"),
     )
 
 
@@ -82,3 +82,4 @@ This progress bar is updated every 600 milliseconds, with the “width” style
 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::
 """
+HEIGHT = "200px"

src/tutorial/htmx/_11_cascading_select.py

@@ -53,3 +53,4 @@ When a request is made to the /models end point, we return the models for that m
 
 And they become available in the model select.
 """
+HEIGHT = "300px"

src/tutorial/htmx/_12_animations.py

@@ -80,7 +80,7 @@ def demo1(idx: int = 0):
 
 @app.get
 def demo2():
-    return Button("Fade Me Out", cls="fade-me-out", hx_delete=demo2_delete.rt(), hx_swap="outerHTML swap:2s")
+    return Button("Fade Me Out", cls="fade-me-out", hx_delete=demo2_delete, hx_swap="outerHTML swap:2s")
 
 
 @app.delete
@@ -90,12 +90,12 @@ def demo2_delete():
 
 @app.get
 def demo3():
-    return Button("Fade Me In", hx_get=demo3.rt(), hx_swap="outerHTML settle:1s", id="demo3")
+    return Button("Fade Me In", hx_get=demo3, hx_swap="outerHTML settle:1s", id="demo3")
 
 
 @app.get
 def demo4():
-    return Form(hx_post=demo4_form.rt(), hx_swap="outerHTML")(
+    return Form(hx_post=demo4_form, hx_swap="outerHTML")(
         Input(name="name", placeholder="Your name here..."), Button("Submit", cls="btn primary")
     )
 
@@ -164,3 +164,4 @@ TODO
 ### Conclusion
 You can use the techniques above to create quite a few interesting and pleasing effects with plain old HTML while using htmx.
 """
+HEIGHT = "300px"

src/tutorial/htmx/_13_file_upload.py

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

src/tutorial/utils.py

@@ -1,5 +1,5 @@
 import fasthtml.common as fh
-from fasthtml.js import Script, jsd, light_media
+from fasthtml.js import Script, jsd
 
 
 def HighlightJS(
@@ -11,13 +11,13 @@ def HighlightJS(
     "Implements browser-based syntax highlighting. Usage example [here](/tutorials/quickstart_for_web_devs.html#code-highlighting)."
     src = (
         """
-hljs.addPlugin(new CopyButtonPlugin());
+// hljs.addPlugin(new CopyButtonPlugin());
 hljs.configure({'cssSelector': '%s'});
 htmx.onLoad(hljs.highlightAll);"""
         % sel
     )
     hjs = "highlightjs", "cdn-release", "build"
-    hjc = "arronhunt", "highlightjs-copy", "dist"
+    # hjc = "arronhunt", "highlightjs-copy", "dist"
     if isinstance(langs, str):
         langs = [langs]
     langjs = [jsd(*hjs, f"languages/{lang}.min.js") for lang in langs]
@@ -25,16 +25,30 @@ htmx.onLoad(hljs.highlightAll);"""
         jsd(*hjs, f"styles/{dark}.css", typ="css", **{"x-bind:disabled": "darkMode !== 'dark'"}),
         jsd(*hjs, f"styles/{light}.css", typ="css", **{"x-bind:disabled": "darkMode !== 'light'"}),
         jsd(*hjs, "highlight.min.js"),
-        jsd(*hjc, "highlightjs-copy.min.js"),
-        jsd(*hjc, "highlightjs-copy.min.css", typ="css"),
-        light_media(".hljs-copy-button {background-color: #2d2b57;}"),
+        # jsd(*hjc, "highlightjs-copy.min.js"),
+        # jsd(*hjc, "highlightjs-copy.min.css", typ="css"),
+        # fh.Style(".hljs-copy-button {background-color: #2d2b57;}", **{"x-bind:disabled": "darkMode !== 'light'"}),
         *langjs,
         Script(src, type="module"),
     ]
 
 
 def alpine():
-    return fh.Script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js", defer=True)
+    return (
+        fh.Script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js", defer=True),
+        fh.Style("[x-cloak] {\n display: none !important; \n}"),
+    )
+
+
+def social_card():
+    return fh.Socials(
+        title="HTMX examples with FastHTML",
+        description="Reproduction of HTMX official examples with Python FastHTML",
+        site_name="phihung-htmx-examples.hf.space",
+        twitter_site="@hunglp",
+        image="/social.png",
+        url="https://phihung-htmx-examples.hf.space",
+    )
 
 
 def concat(*elts, sep=" | "):