Understanding FastHTML xtend

My early exploration of the xtend notebook in FastHTML.

Current FastHTML Pico Card: https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/xtend.py#L76

from fasthtml.common import *
Card

What interesting things can we find out about the Card function?

help(Card)
dir(Card)
import inspect

print(inspect.getsource(Card))

@delegates(xt_hx, keep=True) means it can accept and pass along any arguments that the xt_hx function accepts.

It's defined in https://github.com/fastai/fastcore/blob/005ffd986df737cfc46c7cb1eadec5d214d08da7/fastcore/meta.py#L109

Not sure what xt_hx is, probably a function that does something with the XML tree and HTMX attributes.

I'll run 02_xtend.ipynb to try and learn more.

from functools import partial
from fasthtml.components import ft_hx
my_a = partial(ft_hx, "A")
my_a
my_a()
my_a('Hi')
my_a("Hi", cls='linky')
my_b = partial(ft_hx, "B")
my_b("Hello")
C = partial(ft_hx, "C")
C("Hee hee")
Uma = partial(ft_hx, "Uma")
Uma("Hi mommy", cls='cute', mood='happy', id="UmaTheKid")
Mommy = partial(ft_hx, "Mommy")
Mommy("Hi Uma", cls='mom', hx_trigger="mouseenter", hx_get="/inbox")
Daddy = partial(ft_hx, "Daddy")
Daddy("Hi fam", cls="dad", hx_target="#UmaTheKid")
from fastcore.meta import delegates
@delegates(ft_hx, keep=True)
def Mom(*c, title, description, **kwargs) -> FT:
    print(f"Type of c: {type(c)}")
    if title: c = H1(title, 1) + list(c)
    if description: c += P(description)
    return Mommy(*c, **kwargs)
Mom("Hi Uma", title="Mother", description="Director of Motherhood", cls="ma", hx_trigger="mouseenter", hx_get="/inbox")
type(H1("Hi"))
@delegates(ft_hx, keep=True)
def Card(*c, header=None, footer=None, **kwargs) -> FT:
    "A PicoCSS Card, implemented as an Article with optional Header and Footer"
    if header:
        c = (Header(header),) + c
    if footer:
        c += (Footer(footer),)
    return Article(*c, **kwargs)
Card("Hi Uma", header="Mother", footer="Director of Motherhood", cls="ma", hx_trigger="mouseenter", hx_get="/inbox")