use mk_getattr from fastcore to unify __getattr__ implementation

fasthtml/_modidx.py

@@ -15,7 +15,6 @@
                                      'fasthtml.components.FT.__radd__': ('api/components.html#ft.__radd__', 'fasthtml/components.py'),
                                      'fasthtml.components.FT.__str__': ('api/components.html#ft.__str__', 'fasthtml/components.py'),
                                      'fasthtml.components.File': ('api/components.html#file', 'fasthtml/components.py'),
-                                     'fasthtml.components.__getattr__': ('api/components.html#__getattr__', 'fasthtml/components.py'),
                                      'fasthtml.components._fill_item': ('api/components.html#_fill_item', 'fasthtml/components.py'),
                                      'fasthtml.components.attrmap_x': ('api/components.html#attrmap_x', 'fasthtml/components.py'),
                                      'fasthtml.components.fill_dataclass': ('api/components.html#fill_dataclass', 'fasthtml/components.py'),

fasthtml/components.py

@@ -1,6 +1,6 @@
 """`ft_html` and `ft_hx` functions to add some conveniences to `ft`, along with a full set of basic HTML components, and functions to work with forms and `FT` conversion
 
-Docs: https://www.fastht.ml/docsapi/components.html.md"""
+Docs: https://www.fastht.ml/docs/api/components.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/01_components.ipynb.
 
@@ -195,11 +195,7 @@ def find_inputs(e, tags='input', **kw):
     return inputs
 
 # %% ../nbs/api/01_components.ipynb #1d8a28b1
-def __getattr__(tag):
-    if tag.startswith('_') or tag[0].islower(): raise AttributeError
-    tag = re.sub(r'(?<=[a-z0-9])(?=[A-Z])', '-', tag.replace("_", "-")).lower()
-    def _f(*c, target_id=None, **kwargs): return ft_hx(tag, *c, target_id=target_id, **kwargs)
-    return _f
+__getattr__ = mk_getattr(ft_hx)
 
 # %% ../nbs/api/01_components.ipynb #afb0f65c
 _re_h2x_attr_key = re.compile(r'^[A-Za-z_-][\w-]*$')

fasthtml/core.py

@@ -1,6 +1,6 @@
 """The `FastHTML` subclass of `Starlette`.
 
-Docs: https://www.fastht.ml/docsapi/core.html.md"""
+Docs: https://www.fastht.ml/docs/api/core.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/00_core.ipynb.
 

fasthtml/js.py

@@ -1,6 +1,6 @@
 """Basic external Javascript lib wrappers
 
-Docs: https://www.fastht.ml/docsapi/js.html.md"""
+Docs: https://www.fastht.ml/docs/api/js.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/03_js.ipynb.
 

fasthtml/jupyter.py

@@ -1,6 +1,6 @@
 """Use FastHTML in Jupyter notebooks
 
-Docs: https://www.fastht.ml/docsapi/jupyter.html.md"""
+Docs: https://www.fastht.ml/docs/api/jupyter.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/06_jupyter.ipynb.
 

fasthtml/oauth.py

@@ -1,6 +1,6 @@
 """Basic scaffolding for handling OAuth
 
-Docs: https://www.fastht.ml/docsapi/oauth.html.md"""
+Docs: https://www.fastht.ml/docs/api/oauth.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/08_oauth.ipynb.
 

fasthtml/pico.py

@@ -1,6 +1,6 @@
 """Basic components for generating Pico CSS tags
 
-Docs: https://www.fastht.ml/docsapi/pico.html.md"""
+Docs: https://www.fastht.ml/docs/api/pico.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/04_pico.ipynb.
 

fasthtml/svg.py

@@ -1,6 +1,6 @@
 """Simple SVG FT elements
 
-Docs: https://www.fastht.ml/docsapi/svg.html.md"""
+Docs: https://www.fastht.ml/docs/api/svg.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/05_svg.ipynb.
 

fasthtml/xtend.py

@@ -1,6 +1,6 @@
 """Simple extensions to standard HTML components, such as adding sensible defaults
 
-Docs: https://www.fastht.ml/docsapi/xtend.html.md"""
+Docs: https://www.fastht.ml/docs/api/xtend.html.md"""
 
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/02_xtend.ipynb.
 

nbs/api/01_components.ipynb

@@ -79,11 +79,15 @@
        "<p id=\"sentence_id\"><strong>FastHTML is <i>Fast</i></strong></p>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<p id=\"sentence_id\">\n",
        "<strong>FastHTML is <i>Fast</i></strong></p>\n",
        "\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<p id=\"sentence_id\"><strong>FastHTML is <i>Fast</i></strong></p>"
@@ -337,9 +341,13 @@
        "<a @click.away=\"1\"></a>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<a @click.away=\"1\"></a>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<a @click.away=\"1\"></a>"
@@ -366,9 +374,13 @@
        "<a @click.away=\"1\"></a>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<a @click.away=\"1\"></a>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<a @click.away=\"1\"></a>"
@@ -395,9 +407,13 @@
        "<a @click.away=\"1\"></a>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<a @click.away=\"1\"></a>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<a @click.away=\"1\"></a>"
@@ -434,9 +450,13 @@
        "<a id=\"someid\" name=\"someid\"></a>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<a id=\"someid\" name=\"someid\"></a>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<a id=\"someid\" name=\"someid\"></a>"
@@ -479,9 +499,13 @@
        "<a hx-vals='{\"a\": 1}'></a>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<a hx-vals='{\"a\": 1}'></a>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<a hx-vals='{\"a\": 1}'></a>"
@@ -508,9 +532,13 @@
        "<a hx-target=\"#someid\"></a>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<a hx-target=\"#someid\"></a>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<a hx-target=\"#someid\"></a>"
@@ -567,9 +595,13 @@
        "<form hx-post=\"/\" hx-target=\"#tgt\" id=\"frm\" name=\"frm\"><button hx-target=\"#foo\" id=\"btn\" name=\"btn\"></button></form>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<form hx-post=\"/\" hx-target=\"#tgt\" id=\"frm\" name=\"frm\"><button hx-target=\"#foo\" id=\"btn\" name=\"btn\"></button></form>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<form hx-post=\"/\" hx-target=\"#tgt\" id=\"frm\" name=\"frm\"><button hx-target=\"#foo\" id=\"btn\" name=\"btn\"></button></form>"
@@ -610,10 +642,14 @@
        "<input name=\"nm\">"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<input name=\"nm\">\n",
        "\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<input name=\"nm\">"
@@ -641,10 +677,14 @@
        "<input name=\"nm\" hx-swap-oob=\"true\">"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<input name=\"nm\" hx-swap-oob=\"true\">\n",
        "\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<input name=\"nm\" hx-swap-oob=\"true\">"
@@ -671,10 +711,14 @@
        "<input name=\"nm\" hx-swap-oob=\"true\">"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<input name=\"nm\" hx-swap-oob=\"true\">\n",
        "\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<input name=\"nm\" hx-swap-oob=\"true\">"
@@ -920,12 +964,16 @@
        "<form><fieldset name=\"stuff\"><input value=\"Profit\" id=\"title\" class=\"char\" name=\"title\"><label class=\"px-2\"><input type=\"checkbox\" name=\"done\" data-foo=\"bar\" class=\"checkboxer\" checked=\"1\">Done</label><input type=\"hidden\" id=\"id\" name=\"id\" value=\"2\"><select name=\"opt\"><option value=\"a\"></option><option value=\"b\" selected=\"1\"></option></select><textarea id=\"details\" name=\"details\">Details</textarea><button>Save</button></fieldset></form>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<form><fieldset name=\"stuff\">    <input value=\"Profit\" id=\"title\" class=\"char\" name=\"title\">\n",
        "<label class=\"px-2\">      <input type=\"checkbox\" name=\"done\" data-foo=\"bar\" class=\"checkboxer\" checked=\"1\">\n",
        "Done</label>    <input type=\"hidden\" id=\"id\" name=\"id\" value=\"2\">\n",
        "<select name=\"opt\"><option value=\"a\"></option><option value=\"b\" selected=\"1\"></option></select><textarea id=\"details\" name=\"details\">Details</textarea><button>Save</button></fieldset></form>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<form><fieldset name=\"stuff\"><input value=\"Profit\" id=\"title\" class=\"char\" name=\"title\"><label class=\"px-2\"><input type=\"checkbox\" name=\"done\" data-foo=\"bar\" class=\"checkboxer\" checked=\"1\">Done</label><input type=\"hidden\" id=\"id\" name=\"id\" value=\"2\"><select name=\"opt\"><option value=\"a\"></option><option value=\"b\" selected=\"1\"></option></select><textarea id=\"details\" name=\"details\">Details</textarea><button>Save</button></fieldset></form>"
@@ -964,9 +1012,13 @@
        "<form><select multiple=\"1\" name=\"items\"><option value=\"a\" selected=\"1\">a</option><option value=\"b\">b</option><option value=\"c\" selected=\"1\">c</option></select></form>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<form><select multiple=\"1\" name=\"items\"><option value=\"a\" selected=\"1\">a</option><option value=\"b\">b</option><option value=\"c\" selected=\"1\">c</option></select></form>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<form><select multiple=\"1\" name=\"items\"><option value=\"a\" selected=\"1\">a</option><option value=\"b\">b</option><option value=\"c\" selected=\"1\">c</option></select></form>"
@@ -1003,12 +1055,16 @@
        "<form><fieldset><label><input type=\"checkbox\" name=\"items\" value=\"a\" checked=\"1\">a</label><label><input type=\"checkbox\" name=\"items\" value=\"b\">b</label><label><input type=\"checkbox\" name=\"items\" value=\"c\" checked=\"1\">c</label></fieldset></form>"
       ],
       "text/markdown": [
+       "<div class=\"prose\" markdown=\"1\">\n",
+       "\n",
        "```html\n",
        "<form><fieldset><label>      <input type=\"checkbox\" name=\"items\" value=\"a\" checked=\"1\">\n",
        "a</label><label>      <input type=\"checkbox\" name=\"items\" value=\"b\">\n",
        "b</label><label>      <input type=\"checkbox\" name=\"items\" value=\"c\" checked=\"1\">\n",
        "c</label></fieldset></form>\n",
-       "```"
+       "```\n",
+       "\n",
+       "</div>"
       ],
       "text/plain": [
        "<form><fieldset><label><input type=\"checkbox\" name=\"items\" value=\"a\" checked=\"1\">a</label><label><input type=\"checkbox\" name=\"items\" value=\"b\">b</label><label><input type=\"checkbox\" name=\"items\" value=\"c\" checked=\"1\">c</label></fieldset></form>"
@@ -1136,6 +1192,14 @@
     "test_eq(elem.xpath(\"//input[@id='title']/@value\"), ['Profit'])"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "db280a83",
+   "metadata": {},
+   "source": [
+    "Undefined exports like `MyTag` create a matching kebab-case tag (<my-tag>) via `ft_hx`. The logic lives in `fastcore.xml.mk_getattr`; here we just supply `ft_hx` as the tag factory so custom tags get htmx attribute handling."
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -1144,11 +1208,18 @@
    "outputs": [],
    "source": [
     "#| export\n",
-    "def __getattr__(tag):\n",
-    "    if tag.startswith('_') or tag[0].islower(): raise AttributeError\n",
-    "    tag = re.sub(r'(?<=[a-z0-9])(?=[A-Z])', '-', tag.replace(\"_\", \"-\")).lower()\n",
-    "    def _f(*c, target_id=None, **kwargs): return ft_hx(tag, *c, target_id=target_id, **kwargs)\n",
-    "    return _f"
+    "__getattr__ = mk_getattr(ft_hx)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "72f9f507",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from fasthtml.components import BarBaz\n",
+    "test_eq(to_xml(BarBaz(hx_get='/foo')), '<bar-baz hx-get=\"/foo\"></bar-baz>')"
    ]
   },
   {