Web component/JSX-like syntax

[DanielJackson-Oslo]

I miss calling custom components like this:

<custom-header type="red">
   Test
</custom-header>

instead of like this:

<%= render(CustomHeaderComponent.new(text: "Test", type: :red)) %>

It feels so much cleaner, especially as you start to have nested components.

This is also the way Web Components are going: https://www.webcomponents.org/introduction

Of course, you could also do CamelCase like JSX does:

<CustomHeader type="red">
   Test
</CustomHeader>

I assume this has been discussed? Any technical reason it won't work, or is it a matter of taste?

[boardfish]

Hey Daniel! 👋 My assumptions as to why this hasn't been explored yet are that this syntax isn't close to Ruby. The ease of ViewComponent from both a development and usability standpoint are that components respond to #render_in, meaning they can be passed to Action View's render helper. I think from the beginning it's been all about bringing a component workflow to Action View, so to be honest I'm not sure if this syntax would have crossed other maintainers' minds.

It's a good thing to have raised, though - in particular, I get the feeling GitHubbers themselves would probably enjoy this as a feature. That's assuming they're still big on Catalyst, which may also interest you if you're in the Web Components realm. I'm not sure how this syntax could be implemented without extending the ERB standard, but perhaps other folks share your desire!

[DanielJackson-Oslo]

@boardfish You are probably right! It's not very ruby-ish, even though I feel it hits closer to both Ruby and Rails shared goal of keeping things beautiful, simple, and human-readable.

A change to ERB might be required for

<custom-component test="bar">
 foo
</custom-component>

Perhaps the best we could do within erb would be something like:

<%= custom_component test: "bar" do %>
 foo
<% end %>

or a "component" function:

<%= component :custom, test: "bar" do %>
 foo
<% end %>

might be nicer than having to call render and .new!

[joelhawksley]

@DanielJackson-Oslo this is something that my colleague and fellow ViewComponent maintainer @camertron has been looking into with Rux: https://github.com/camertron/rux.

While I agree that the current syntax is verbose, I do like that avoids indirection, to the point of failing if the component class name has not been defined.

[camertron]

@DanielJackson-Oslo to add to what @joelhawksley mentioned, rux works inside any Ruby file with a .rux extension, but can also be used inside your templates if you use the special .ruxt extension (i.e. component_name.html.ruxt). You still have to use the render ComponentName.new syntax outside of the component, but inside <ComponentName ...> works as expected. You could, for example, create a top-level Layout component or something, render it with the .new syntax, then use rux everywhere else. One caveat tho: rux supports the slots API, but not very nicely, so your mileage may vary.