Merge pull request #704 from AnswerDotAI/fix-toast-insertion

inserts toasts at top of the page

Author: jph00

fasthtml/toaster.py

@@ -35,24 +35,22 @@
 
 def Toast(message: str, typ: str = "info", dismiss: bool = False, duration:int=5000):
     x_btn = Button('x', cls="fh-toast-dismiss", onclick="htmx.remove(this?.parentElement);") if dismiss else None
-    return Div(Div(Span(message), x_btn, cls=f"fh-toast fh-toast-{typ}", hx_on_transitionend="setTimeout(() => this?.remove(), %d);" % duration), hx_swap_oob=f"afterbegin:#{tcid}")
+    return Div(Span(message), x_btn, cls=f"fh-toast fh-toast-{typ}", hx_on_transitionend="setTimeout(() => this?.remove(), %d);" % duration)
 
 def add_toast(sess, message: str, typ: str = "info", dismiss: bool = False):
     assert typ in ("info", "success", "warning", "error"), '`typ` not in ("info", "success", "warning", "error")'
     sess.setdefault(sk, []).append((message, typ, dismiss))
 
 def render_toasts(sess):
-    toasts = [Toast(msg, typ, dismiss, sess['toast_duration']) 
-              for msg, typ, dismiss in sess.pop(sk, [])]
-    return Div(*toasts)
+    toasts = [Toast(msg, typ, dismiss, sess['toast_duration']) for msg, typ, dismiss in sess.pop(sk, [])]
+    return Div(*toasts, id=tcid, hx_swap_oob='afterbegin')
 
 def toast_after(resp, req, sess):
     if sk in sess and (not resp or isinstance(resp, (tuple,FT,FtResponse))):
         sess['toast_duration'] = req.app.state.toast_duration
         req.injects.append(render_toasts(sess))
 
-js = Script("htmx.onLoad(() => {if (!document.querySelector('#%s')){const elm = document.createElement('div'); elm.id='%s'; document.body.prepend(elm);}})" % (tcid, tcid))
 def setup_toasts(app, duration=5000):
     app.state.toast_duration = duration
-    app.hdrs += [Style(toast_css), js]
-    app.after.append(toast_after)
+    app.hdrs += [Style(toast_css)]
+    app.after.append(toast_after)

nbs/tutorials/quickstart_for_web_devs.ipynb

@@ -1282,7 +1282,9 @@
     "2. Toasts require sessions\n",
     "3. Views with Toasts must return FT or FtResponse components.\n",
     "\n",
-    "💡 `setup_toasts` takes a `duration` input that allows you to specify how long a toast will be visible before disappearing. For example `setup_toasts(duration=5)` sets the toasts duration to 5 seconds. By default toasts disappear after 10 seconds."
+    "💡 `setup_toasts` takes a `duration` input that allows you to specify how long a toast will be visible before disappearing. For example `setup_toasts(duration=5)` sets the toasts duration to 5 seconds. By default toasts disappear after 10 seconds.\n",
+    "\n",
+    "⚠️ Toasts don't work with SPA like navigation that replaces the entire body such as this navigation trigger `A('About', hx_get=\"/about\", hx_swap=\"outerHTML\", hx_push_url=\"true\", hx_target=\"body\")`. As an alternative, wrap the content of your route in an element containing an id and set this id as the target for your navigation trigger (i.e. `hx_target='#container_id'`). "
    ]
   },
   {
@@ -1633,9 +1635,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "python3",
+   "display_name": "python",
    "language": "python",
-   "name": "python3"
+   "name": "python"
   }
  },
  "nbformat": 4,

tests/test_toaster.py

@@ -52,7 +52,12 @@ def test_get_toaster_with_typehint():
     res = cli.get('/see-toast-with-typehint', follow_redirects=True)
     assert 'Toast get' in res.text
 
+def test_toast_container_in_response():
+    # toasts will not render correctly if the toast container isn't rendered.
+    res = cli.get('/see-toast-ft-response')
+    assert 'id="fh-toast-container"' in res.text
+
 test_get_toaster()
 test_post_toaster()
 test_ft_response()
-
+test_toast_container_in_response()