Components

[davegaeddert]

Would allow components to be created in a components directory, ex. components/Button.html. These could be used in any HTML or Markdown files, making it easier to re-use chunks of HTML across a project. No include paths or funky syntax — just looks like HTML (or React/jsx).

The components gets rendered using Jinja, and any attributes on the element get passed into it as variables (kinda like React props). The inner content will be passed in as a content variable.

<!-- components/Button.html -->
<button class="block text-green-500 {{ class }}">{{ content }}</button>

<!-- Usage in markdown/html -->
<Button class="text-xl">Click me</Button>

<!-- Output -->
<button class="block text-green-500 text-xl">Click me</button>

[davegaeddert]

Phoenix (or LiveView?) uses a dot prefix which is probably more obvious... not sure if I like it or not though:

<.button class="text-xl">Click me</.button>

Or you could do a prefix like this or something (lowercase, hyphenated would be the component naming convention then):

<c-button class="text-xl">Click me</c-button>

React seems to do case-sensitive as a convention though without issue, so it probably works just fine that way.