Making UI components

[scotttrinh]

Hello, and thanks so much for both htmy and fasthx, I'm using both of them on a small exploration project at EdgeDB, integrating our authentication extension with FastAPI. I'm primarily a React/TypeScript developer and I have a few questions about how to create reusable UI components, in a similar way to something like shadcn is React/Radix components with Tailwind styling.

I've attempted to intuit this by making something like a Button class that takes some props and wraps the native html.button, but I'm finding the implementation to be a little unintuitive. I have my example app hosted in a public repo on GitHub, and https://github.com/scotttrinh/fast-jelly/blob/545a677ef22dc5e0e517b262bb030d45be70c9e7/app/ui/components.py#L59-L103 is my first take at trying to make a Button component. One struggle I'm having is related to how Optional data works in Python, so, for instance, ButtonProps.formaction, if it's None, needs to be omitted from the html.button arguments. I can keep piling on comprehensions here, but once I got to this point, I started to doubt that I was moving in the right direction here.

[volfpeter]

Hi,

Thanks for giving these projects a try! I find your feedback very interesting and useful. I'll start with my two takeaways:

• Formatter should by default skip properties whose value is None. I already prototyped the implementation, I still need to add some tests. We should create an issue for it, the feature could be included in the next release.
• It could be useful to provide a higher order component that can be used to easily add default properties to other components. Something like functools.partial. Although it's not trivial, because "_property", "property", and "property_" patterns must be treat together.

Back to your code and the original question. Since you don't use context in the component, you could simplify your Button component to something like this:

from typing import Literal

from htmy import ComponentType, PropertyValue

ButtonVariant = Literal["primary", "secondary", "link"]

_button_classes: dict[ButtonVariant, str] = {
    "primary": "...",
    "secondary": "...",
    "link": "..."
}

def button(*args: ComponentType, variant: ButtonVariant, **kwargs: PropertyValue) -> html.button:
    return html.button(*args, class_=_button_classes[variant], **kwargs)

Notes:

• def button() doesn't need to be decorated with @component, it's plain component factory.
• Technically kwargs could contain for example "class", "class_", or "_class" keys, which could cause problems. There are many ways to solve this, depending on what patterns and practices you and your team is using.

Let me know if I can help you with anything else. And I'm also curious about what you think about my thoughts at the beginning of this comment.

[volfpeter]

Well, TypeScript has a much more capable type system compared to Python, so you won't be able to carry over all TS and React practices to Python and htmy. Still, there are some ways to improve your code, the main one is to replace your props dataclasses with typed dictionaries:

from typing import TypedDict

class ButtonProps(TypedDict, total=False):
    type: str
    class_: str
    formaction: str

total=False means all keys in the dict can be missing, but with the above type hints, if they are in the dict, then they are not optional. You could then use Props with typing.Unpack to type hint keyword only component (or component factory) arguments. button from my example above would look like this: def button(*args: ComponentType, variant: ButtonVariant, **kwargs: Unpack[ButtonProps]) -> html.button: .... Then you can easily combine the button variant classes with the class_ from ButtonProps:

    class_ = _button_classes[variant]
    if "class_" in kwargs:
        class_ += f" {kwargs.pop('class_')}"

All the above assumes you're using mypy (or pyright, although it's not that good) for static code analysis. If not, then I'd use pydantic models instead of dataclasses, so you have validation and you can use model_dump() to do the model to dict (to maybe keyword argument) conversion.

I hope the tips above will help you. If you need more help, you could contact me for consulting, I could then provide more project-specific advice.

[volfpeter]

FYI: I just released version 0.4.2. Formatter in that version skips Nones by default. See #30 and #31

[scotttrinh]

I took a swing at implementing a pretty loosely typed version of this here: https://github.com/scotttrinh/fast-jelly/blob/ui-components/app/ui/components.py and, while not quite as strict or helpful as more explicit types, it does feel pretty good in use, and cleans up the pages nicely.

Still, there are some ways to improve your code, the main one is to replace your props dataclasses with typed dictionaries:

This is great! I'll try to incorporate this feedback and report back on what I find here. Once it's altogether, maybe we can collaborate on a FastAPI+fasthx+htmy example that uses these patterns in a more full-featured demo app setting than the existing examples to better demonstrate some of these patterns? Thanks again for your insightful and quick responses here.

[volfpeter]

maybe we can collaborate on a FastAPI+fasthx+htmy example that uses these patterns in a more full-featured demo app setting than the existing examples to better demonstrate some of these patterns?

That would be nice. I have it planned, I just couldn't find time for it (see #10). I'd also like to focus a bit on the Snippet and MD components in the example, those are for more advanced use-cases. If you end up creating a demo project, feel free to open a PR here or in fasthx to add a link to a docs.

[scotttrinh]

The TypedDict was a nice change. Ran into a bit of a problem with the types when trying to define the class_ in the kwargs since mypy doesn't realize that this entry was popped from the kwargs. Rather than wrangle the types more here, I just made it an optional argument.

All-in-all, I'm totally satisfied with this solution, and again, I really appreciate your quick and thorough feedback here.

If you end up creating a demo project, feel free to open a PR here or in fasthx to add a link to a docs.

Will do!