Whitespace control when using twig components?

[nicolas-grekas]

I'm using a twig component like:

<twig:Turbo:Stream:Append target="#some-id">
    <div>Append this</div>
</twig:Turbo:Stream:Append>

But the whitespace around the div is noise (but still nice for formatting).
Is there a way to ask twig to remove it?
Using the non-HTML-like syntax, I can by using -%} / {%-, but what about the html-like syntax?
Is there some twig:trim="before/after/true/both" that I could use for that? Or that could be added if that looks like a good idea?

<twig:Turbo:Stream:Append target="#some-id" twig:trim="true">
    <div>Append this</div>
</twig:Turbo:Stream:Append>

[Kocal]

Hi Nicolas,

But the whitespace around the div is noise

What do you mean about "noise"? is it blocking Turbo or equivalent? or is it "purely visual" ?

When I look at the examples they have spaces around the first element, and it seems to be working well. IIUC Turbo will find the first <template> element inside <turbo-stream>, so whitespaces does not matter here.

Is there some twig:trim="before/after/true/both" that I could use for that?

For the moment no, it's not possible to control whitespaces for the component HTML syntax.

Or that could be added if that looks like a good idea?

It can yes, I think there's surely a use case where it would be desirable to control blanks, to avoid the following problem:

About the implementation, maybe twig:trim can be added yes, but this attribute should be intercepted and removed from the attributes passed to the Component instance.
I've also thought about <twig:Foo-> and <-/twig:Foo>, it definitely looks weird, but it can remind you about Twig -%} and {%-.

[nicolas-grekas]

Most of the time it doesn't matter, sometimes it does :) eg the :empty pseudo-CSS class requires no spaces.
Maybe there is nothing to do and ppl should use either the non-html syntax or remove the whitespace themselves.

[Kocal]

Ah, yeah, didn't think about :empty pseudo-selector, you're right!

I also thought about globally configure this behaviour, like vue-template-compiler used to do with Vue 2 and the compiler option whitespace, but it looks like it has been removed with Vue 3 and @vue/compiler-sfc.
It looks like such an option does not exist with React and Svelte, but it does on Angular 18

Some folks in sveltejs/svelte#3080 suggested about a :trim attribute, maybe that's the best option.

[nicolas-grekas]

:trim could be nice as a generic Twig feature on its own!

[smnandre]

This should be dealt with in Twig i think.

But you can already enforce it inside your component i suppose ?

{# index.html.twig  #}

<twig:Acme:Alert>
    
    
    
    Hahaa
    
</twig:Acme:Alert>

{# Acme:Alert.html.twig #}
<div{{ attributes }}>



{%- block content '' -%}

</div>

Should render <div>Hahaa</div> no ?

In general i'm seeing TwigComponent as "blocks" more than "elements", and so internal whitespace should not be something to consider too much, but i'm open to any change if that is something people want/need.

Just: no new exotic syntax for now please ^^

[smnandre]

@Kocal

span { display: inline; }

[carsonbot]

Thank you for this suggestion.
There has not been a lot of activity here for a while. Would you still like to see this feature?
Every feature is developed by the community.
Perhaps someone would like to try?
You can read how to contribute to get started.

[carsonbot]

Friendly reminder that this issue exists. If I don't hear anything I'll close this.

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!