audrey.feldroy.com

The experimental notebooks of Audrey M. Roy Greenfeld. This website and all its notebooks are open-source at github.com/audreyfeldroy/audrey.feldroy.com

# Understanding FastHTML xtend

by Audrey M. Roy Greenfeld | Tue, Jul 16, 2024

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)

['__annotations__', '__builtins__', '__call__', '__class__', '__closure__', '__code__', '__defaults__', '__delattr__', '__dict__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__get__', '__getattribute__', '__getstate__', '__globals__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__kwdefaults__', '__le__', '__lt__', '__module__', '__name__', '__ne__', '__new__', '__qualname__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__signature__', '__sizeof__', '__str__', '__subclasshook__', '__type_params__']

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

functools.partial(, 'A')

my_a()


<a></a>

['a', (), {}]

my_a('Hi')


<a>Hi</a>

['a', ('Hi',), {}]

my_a("Hi", cls='linky')


<a class="linky">Hi</a>

['a', ('Hi',), {'class': 'linky'}]

my_b = partial(ft_hx, "B")
my_b("Hello")


<b>Hello</b>

['b', ('Hello',), {}]

C = partial(ft_hx, "C")
C("Hee hee")


<c>Hee hee</c>

['c', ('Hee hee',), {}]

Uma = partial(ft_hx, "Uma")
Uma("Hi mommy", cls='cute', mood='happy', id="UmaTheKid")


<uma mood="happy" id="UmaTheKid" class="cute">Hi mommy</uma>

['uma', ('Hi mommy',), {'mood': 'happy', 'id': 'UmaTheKid', 'class': 'cute'}]

Mommy = partial(ft_hx, "Mommy")
Mommy("Hi Uma", cls='mom', hx_trigger="mouseenter", hx_get="/inbox")


<mommy hx-trigger="mouseenter" hx-get="/inbox" class="mom">Hi Uma</mommy>

['mommy', ('Hi Uma',), {'hx-trigger': 'mouseenter', 'hx-get': '/inbox', 'class': 'mom'}]

Daddy = partial(ft_hx, "Daddy")
Daddy("Hi fam", cls="dad", hx_target="#UmaTheKid")


<daddy hx-target="#UmaTheKid" class="dad">Hi fam</daddy>

['daddy', ('Hi fam',), {'hx-target': '#UmaTheKid', 'class': 'dad'}]

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")


<mommy hx-trigger="mouseenter" hx-get="/inbox" class="ma">

h1

Mother



1

{}

Hi Uma

p

Director of Motherhood

{}

</mommy>

['mommy', ('h1', ('Mother', 1), {}, 'Hi Uma', 'p', ('Director of Motherhood',), {}), {'hx-trigger': 'mouseenter', 'hx-get': '/inbox', 'class': 'ma'}]

type(H1("Hi"))

fastcore.xml.FT

@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")


<article hx-trigger="mouseenter" hx-get="/inbox" class="ma">

  <header>Mother</header>

Hi Uma

  <footer>Director of Motherhood</footer>

</article>

['article', (['header', ('Mother',), {}], 'Hi Uma', ['footer', ('Director of Motherhood',), {}]), {'hx-trigger': 'mouseenter', 'hx-get': '/inbox', 'class': 'ma'}]