This should be in Statamic core! ❤️

[adevade]

I like Antlers in general, but making small reusable UI components always felt cumbersome for me. At least compared to Blade. This package lets me do those bits with Blade components (which I love!), and the rest with Antlers (which is amazingly integrated with Statamic). Fantastic!

Thank you! ❤️

Have you considered contributing this to Statamic core?

[JohnathonKoster]

Thanks for the kind words!

I'm not opposed to this being part of Core. The only reason I didn't PR it at the moment is that it 1) includes quite a complex dependency (https://github.com/stillat/blade-parser) and 2) didn't want to add additional moving pieces to the PR list while they worked on v4 🙂

[adevade]

I like to build my Blade components like this:

@props([
    'as' => 'button',
    'style' => 'primary',
    'size' => 'md',
])

@php
    $shared = 'block font-semibold text-center shadow-sm';

    $style = match ($style) {
        'primary' => 'bg-teal-600 text-white hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 dark:bg-teal-500 dark:hover:bg-teal-400 dark:focus-visible:outline-teal-500',
        'cta' => 'bg-orange-600 text-white hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 dark:bg-orange-500 dark:hover:bg-orange-400 dark:focus-visible:outline-orange-500',
    };

    $size = match ($size) {
        'xs' => 'rounded px-2 py-1 text-xs',
        'sm' => 'rounded px-2 py-1 text-sm',
        'md' => 'rounded-md px-2.5 py-1.5 text-sm',
        'lg' => 'rounded-md px-3 py-2 text-sm',
        'xl' => 'rounded-md px-3.5 py-2.5 text-sm',
    };
@endphp

<{{ $as }}
    {{
        $attributes->class([
            $shared, $style, $size,
        ])
    }}
>{{ $slot }}</{{ $as }}>

I haven't found a good way to mimic this with just Antlers. Maybe you have some tip, seeing as you're the King of Antlers? 😁

[JohnathonKoster]

For something like that, I'd just a regular Antlers partial.

Something like:

resources/views/_component.antlers.html:

---
as: button
style: primary
size: md

shared: 'block font-semibold text-center shadow-sm'
styles:
  primary: 'bg-teal-600 text-white hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 dark:bg-teal-500 dark:hover:bg-teal-400 dark:focus-visible:outline-teal-500'
  cta: 'bg-orange-600 text-white hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 dark:bg-orange-500 dark:hover:bg-orange-400 dark:focus-visible:outline-orange-500'
sizes:
  xs: 'rounded px-2 py-1 text-xs'
  sm: 'rounded px-2 py-1 text-sm'
  md: 'rounded-md px-2.5 py-1.5 text-sm'
  lg: 'rounded-md px-3 py-2 text-sm'
  xl: 'rounded-md px-3.5 py-2.5 text-sm'

---

{{ view }}

<{{ as }}
    class="{{ class }} {{ shared }} {{ styles[style] }} {{ sizes[size] }}"
>{{ slot }}</{{ as }}>

{{ /view }}

resources/views/layout.antlers.html:

{{ partial:component as="a" }}Slot content{{ /partial:component }}
{{ partial:component as="button" size="xs" }}Slot content{{ /partial:component }}

{{# Example of being able to add custom classes using regular partials #}}
{{ partial:component as="div" style="cta" size="md" class="something extra" }}Slot content{{ /partial:component }}

The front-matter inside the partial will get added to the view array, as well as any parameters that we add to the partial. The parameters we add will override any front matter values, so we can use the front-matter to set defaults as well as hold our options. The {{ view }} {{ /view }} tag pair was just added to not have to add things like {{ view:styles[view:style] }} everywhere.

[adevade]

Hmm, interesting! I had not thought of using front-matter in the partials...

But there's no automatic $attributes variable like for Blade, right? Say for Alpine directives, how would I add them to the root element?

Thank you so much for taking of your time for this btw! ❤️ Much appreciated! I'll buy your book when it comes out!

[JohnathonKoster]

There is no automatic $attributes concept in Antlers (at least not out of the box) - do you have an example of how you would like to add the Apline directives to the root? It might trigger some ideas 🙂

[adevade]

Well, for a Blade component -- say the button above -- I would use it in my app like this:

<x-button
    as="button"
    style="cta"
    size="lg"
    type="submit"
    x-on:click="console.log('clicked')"
>Submit form</x-button>

Blade takes care of just forwarding the unknown/undefined attributes, type and x-on:click, and outputs them on the element.

[JohnathonKoster]

If you create a partial _button.antlers.html with the following content (this just builds on using the front matter to resolve/set default values):

---
props:
  - as
  - style
  - size

as: button
style: primary
size: md

shared: 'block font-semibold text-center shadow-sm'
styles:
  primary: 'bg-teal-600 text-white hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 dark:bg-teal-500 dark:hover:bg-teal-400 dark:focus-visible:outline-teal-500'
  cta: 'bg-orange-600 text-white hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 dark:bg-orange-500 dark:hover:bg-orange-400 dark:focus-visible:outline-orange-500'
sizes:
  xs: 'rounded px-2 py-1 text-xs'
  sm: 'rounded px-2 py-1 text-sm'
  md: 'rounded-md px-2.5 py-1.5 text-sm'
  lg: 'rounded-md px-3 py-2 text-sm'
  xl: 'rounded-md px-3.5 py-2.5 text-sm'
---
{{ view }}
    <{{ as }} 
        class="{{ class }} {{ shared }} {{ styles[style] }} {{ sizes[size] }}"
        {{ attributes.except(view:props) }}
    >{{ slot }}</{{ as }}>
{{ /view }}

You can include that partial using the following syntax (https://github.com/Stillat/antlers-components#antlers-components):

<a-button as="button" style="primary" size="md"
    type="submit" x-on:click="console.log('clicked')">
    The content.
</a-button>

When using this syntax we will get the attributes magic variable. However, since we still don't have anything like the @props directive, I added the known properties to the front matter and am excluding them using .except(view:props)