Using uppercase tags for components

[steerio]

This issue is an idea for a feature, and it's in a really crude phase intended to trigger a discussion.

I use the ViewComponent library a lot - it is very useful, but I've found that rendering them is pretty cumbersome and it pollutes templates a lot. I also use JSX, and its approach gave me an idea: Slim could, in an opt-in fashion, also make use of the fact that HTML tags are usually lowercase, so uppercase tags offer a new, vacant namespace.

So what we write now like this:

section
  = render FoobarComponent.new title: "Hello", pages: page_count do |foobar|
    h3 Abcd
    = render BazComponent.new param: foobar.something, class: "emphasized"
    = render ThirdComponent.new id: "constant_id"

could be written like this:

section
  Foobar title="Hello" pages=page_count |foobar|
    h3 Abcd
    Baz.emphasized param=foobar.something
    Third#constant_id

As is evident even from this small example, there would have to be a syntax addition for the block parameter. Other approaches are possible for this, including:

Foobar title="Hello" pages=page_count &foobar
Foobar title="Hello" pages=page_count as foobar
Foobar@foobar title="Hello" pages=page_count

An ideal implementation wouldn't hardcode ViewComponent as an optional dependency, but would rather allow the user to define a handler (or override the default one) for uppercase tags, should they opt to switch on the feature.

[minad]

Slim uses a flexible transformation pipeline, see https://github.com/slim-template/slim/blob/main/lib/slim/engine.rb. So it would be possible to add a custom filter which performs the transformation you have in mind.