[TwigComponent] Support ...spread operator with html syntax #1023
Conversation
norkunas
force-pushed
the
spread
branch
2 times, most recently
from
73e24aa
to
5a781d4
Compare
| @@ -216,5 +216,31 @@ public function getLexTests(): iterable | |||
| '{% verbatim %}<twig:Alert/>{% endverbatim %}', | |||
| '{% verbatim %}<twig:Alert/>{% endverbatim %}', | |||
| ]; | |||
|
|
|||
| yield 'component_attr_spreading_self_closing' => [ | |||
| '<twig:foobar bar="baz"{{...attr}}/>', | |||
There was a problem hiding this comment.
Instead of having ... between {{ why not just do:
<twig:foobar bar="baz" ...attr />There was a problem hiding this comment.
For me eyes it's easier to find that it's a variable like in twig
There was a problem hiding this comment.
A little funky looking but what about <twig:foobar bar="baz" :...attr />? (in addition to {{). This sort of lines up with dynamic attribute values: https://symfony.com/bundles/ux-twig-component/current/index.html#passing-props-as-html-attributes
There was a problem hiding this comment.
My proposed solution is already in our prod and working, so I'd prefer as is 😁
There was a problem hiding this comment.
Looking at React:
<button className={className} {...other} />And Vue:
<button :className="className" v-bind="other">
Given these, the logical options are:
<twig:Button className={{ className }} {{...other}} />
or
<twig:Button live-bind="other">
And that live-bind thing looks silly :). So I agree with the proposed syntax.
There was a problem hiding this comment.
Note that JSX for Vue.js also use {... } syntax.
{{... }} is nice because the two brackets reminds us about Twig
| @@ -201,6 +203,15 @@ private function consumeAttributes(string $componentName): string | |||
| break; | |||
| } | |||
|
|
|||
| if ($this->check('{{...') || $this->check('{{ ...')) { | |||
There was a problem hiding this comment.
I think you should consume the whitespace before doing this check, tab, or multiples tab can be valid syntax too.
There was a problem hiding this comment.
It is consumed 4 lines before, isn't it?
There was a problem hiding this comment.
Wow! Fast turn-around on this :). We also need a mention in the docs - probably one example at the bottom of https://github.com/symfony/ux/blob/2.x/src/TwigComponent/doc/index.rst#passing-props-as-html-attributes would do it
Added |
|
Thank you Tomas! |
I think that's a new feature like in twig.