I like this approach. I am especially drawn to the idea of making custom components this way but every time I have experimented with this I get burned by the context which has to be passed down through all functions.
A jinja/django template has an implicit context but for nested functions you really have to pass that context down through every function call.
It inevitably ends up just a big dict blob.
You get some typing support in an IDE but nothing really for function parameters.
iommi is wroth mentioning here. It is different from an HTML generator, but one of the things it does is greatly reduce the amount of HTML you need write.
Yeah, I agree, I find them hard to read. JSX is the best thing I've used. Elsewhere in the thread someone mentioned Cotton which seems to strike a different balance.
To be honest my main problem with templates is they have to be one per file. In principle there's no difference between naming a new file and naming a function, but in practice it just sucks. It's a higher barrier so people are less likely to write smaller components, and refactoring support completely sucks. Even renaming a template is a massive pain whereas renaming a function with decent LSP support is easy.
JSX hits that perfect balance between readability while still being regular functions. Maybe something is possible with the new 3.13 template strings?