Shortcut syntax for rending components

[svoop]

Bridgetown components are great for building self-contained content blocks (e.g. with Tailwind and AlpineJS). However, templates sometimes looks like this:

<%= render Separator::Plain.new(color: 'zinc-300') do %>
  <%= render Prose.new do %>
    <%= content %>
  <% end %>
<% end %>

Instantiation with new could quite easily be eliminated (for those who want) to make the templates a little less verbose such as:

<%= render Separator::Plain[color: 'zinc-300'] do %>
  <%= render Prose do %>
    <%= content %>
  <% end %>
<% end %>

Personally, I like the shorter versions, however, I'm not sure whether this kind of syntactical sugar would be appreciated by others as well. And I'm not really a fan of monkey patching such things for individual projects.

• For render Separator::Plain[color: 'zinc-300'] (a shorthand syntax borrowed from stdlib Pathname) it only takes a simple alias_method :[], :new in the Components class.
• For render Prose, the render method has to instantiate the passed object if it is a Class instance.

What do you think, too much bling-bling or worth the extra code?

/cc @jaredcwhite

[jaredcwhite]

I like the render Prose do sort of format, no need for an empty .new if we can help it, but I'm not a fan of the aesthetics of render Component[arg: "…"]. I don't see how that's more readable than render Component.new(arg: "…").

Serbea has the {%@ Component arg: "…" %} shorthand syntax for this reason, but of course that's not ERB.

[svoop]

Maybe I have to give Serbea a shot. The curly invasion somewhat triggered unhappy memories so far. 😉 But such shortcuts and frontmatter support in templates are a selling point.

[jaredcwhite]

A related discussion along these lines: ViewComponent/view_component#1293 (comment)

[goulvench]

For the moment, I add a plugin with an easy-to-type name which renders the component to turn <%= render MyComponent.new %> into the more readable <%= my_component %>.

Would it be possible to allow components to register helper tag (or tags)?

Here's the syntax I'd love to use:

class Separator::Plain
  # By default, the underscored class name is automatically added
  view_tag :separator_plain # automatically added

  # A custom name can also be added (to call a component with default values, for instance)
  view_tag :plain_separator

  # The default view_tag could also be prevented
  view_tag false
end

[jaredcwhite]

@goulvench I do like this idea quite a bit. There are a few implementation details to consider (for example, Separator::Plain might need to be separator__plain by default, otherwise it would conflict with the separator_plain helper produced by a SeparatorPlain. And we'd have to eager load all components by default rather than lazy autoload (there are other reasons to do this though, so maybe we should switch to eager loading anyway). And if a component name were to conflict with an existing helper, that too could be problematic. But all that aside, I'd be interested in investigating this further.