Introduce a modern, JSX-like syntax for TwigComponents #2662

Halleck45 · 2025-03-28T06:25:09Z

Q	A
Bug fix?	no
New feature?	yes
Docs?	yes
Issues
License	MIT

Hey! 👋

Following this PR, I have a small commit I'd love to discuss — I believe it goes hand-in-hand with the idea of introducing a Toolkit.

My proposal is about improving the HTML syntax used for TwigComponents, and introducing a JSX-like syntax

Currently, we write components like this:

<twig:foo xxx=""></twig:foo>

My suggestion is to allow a more modern and readable syntax:

<Foo xxx=""></Foo>

I strongly believe this new syntax would significantly improve readability.

Here’s a real-world example from one of my projects:

Before:

<twig:PageTitle title="..." />

<twig:Button small  >
    <twig:ux:icon .../>
</twig:Button>

<twig:Section mdCols="2">
    <twig:BasicCard title="...">
    </twig:BasicCard>

    <twig:BasicCard title="...">
    </twig:BasicCard>
</twig:Section>

After:

<PageTitle title="..." />

<Button small >
    <Ux:icon .../>
</Button>

<Section mdCols="2">
    <BasicCard title="...">
    </BasicCard>

    <BasicCard title="...">
    </BasicCard>
</Section>

To me, this looks cleaner, more readable, and more aligned with modern expectations (especially for developers familiar with React, etc.).

💡 Backward compatibility note:

This new syntax is entirely optional and fully backward compatible. The JSX-like tags are only interpreted as Twig components if the tag name starts with an uppercase letter. Tags starting with lowercase letters continue to behave as standard HTML or follow the current <twig:...> syntax rules.

The commit is super simple — which probably means I'm missing something 😅 — but before digging deeper, I’d love to get your thoughts on this direction.

Thanks!

smnandre · 2025-03-28T07:00:15Z

As i told you ... it's --personal stand point-- a total no-go for me before 3.0.

Regarding the "new" syntax, am i missing something or is just the prefix ignored ? I mean, are there other features ?

But I would very much use something like it -- with a couple of maybe "control" / safeguards but -- yeah the DX is better without twig:)

Kocal

Cool 👀

Kocal · 2025-03-28T06:57:54Z

src/TwigComponent/src/Twig/TwigPreLexer.php

+            $componentNames = array_map(fn ($match) => $match[1], $matches);
+            $componentNames = array_unique(array_filter($componentNames));


Instead, can we use a single array_reduce to loop over $componentNames only 1 time instead of 3 times?

Kocal · 2025-03-28T07:00:07Z

src/TwigComponent/src/Twig/TwigPreLexer.php

+            $componentNames = array_map(fn ($match) => $match[1], $matches);
+            $componentNames = array_unique(array_filter($componentNames));
+
+            // To simplify things in the rest of the class, we replace the component name with twig:<componentName>
+            foreach ($componentNames as $componentName) {


Or maybe better, 1 loop instead of 4?

Suggested change

$componentNames = array_map(fn ($match) => $match[1], $matches);

$componentNames = array_unique(array_filter($componentNames));

// To simplify things in the rest of the class, we replace the component name with twig:<componentName>

foreach ($componentNames as $componentName) {

// To simplify things in the rest of the class, we replace the component name with twig:<componentName>

foreach ($matches as $match) {

if (!isset($componentName = $match[1])) {

continue;

}

I think it would be even easier in the other way.... not sure we need the 2step PATH

For me, changing the code might actually make it slower. Your solution helps reduce iterations if all the nodes are unique.

But if a page contains the same node multiple times, it will trigger multiple preg_replace calls - which are much more expensive than a simple array iteration.

I think it's better to first reduce the array to a unique list, then perform the minimal number of preg_replace calls.

That said, happy to discuss it of course!

smnandre · 2025-03-28T07:17:59Z

This new syntax is entirely optional and fully backward compatible.

No it is sadly not (at all).

When Twig HTML syntax was added, no one (we can bet on this) ths followinh thing in their templates:

<twig:A

(Openin tag, followed by "twig"; follwed by colon, followed by letters)

Here it will have incidence on a lot of people, so yeah we cannot push it everywhere for everyone like that.

As you said, we can and should offer a flag/toggler/etc in the first time... But then we must not update already the documentation, 🤷‍♂️ .

So i'm still on the same mood: I know and agree it's cool §told you I already did it..) But here it's not the part where the questions are. ALmost the oppostie, eve. not a technical problem in usage, it's in term of impact, in clarity, in future rebustness and

Kheuval · 2025-03-28T07:41:13Z

Hello, I like this idea a lot !

In Vue there is this eslint rule, I believe it would be nice to promote multi-words component names to improve readability even more and distinguish at a glance what is HTML and what is user-created.
This could take the form of some kind of warning triggered if a component is named using a single word.
In your example, Foo would become AppFoo for example.

What do you think ?

Kocal · 2025-03-28T08:20:04Z

src/TwigComponent/src/Twig/TwigPreLexer.php

+        // - jsx: <ComponentName> (with a capital letter)
+
+        $isClassical = str_contains($input, '<twig:');
+        $isJsx = preg_match_all('/<([A-Z][a-zA-Z0-9_:-]+)([^>]*)>/', $input, $matches, \PREG_SET_ORDER);


I don't think if we can really qualify it as JSX, the properties and spread syntaxes are different and here only the naming case is the same.
What about "$isShort" and "$isLong"?

can it be both? Then has is better as is: https://3v4l.org/Wln8L

Thanks! To me, it doesn't seem relevant to use a has naming here. The goal is to detect which syntax is being used, not whether both are present.

If we ever introduce support for mixing syntaxes or handling them differently in the same input, then switching to a hasShortSyntax / hasLongSyntax style might make sense. But for now, a simple $isShort better reflects the current logic and avoids overcomplicating things prematurely.

alexander-schranz · 2025-03-28T12:00:41Z

Just as here are some discussion about only add this to a new major. It could be possible to optin into this via something like:

{% twig_component_mode 'experimental:short' %}

Inspired by the trans_default_domain.

weaverryan · 2025-03-28T12:33:01Z

I like the idea of making this "opt in" for now. That would allow people to start playing with this.
Personally I'd rather have a global config vs declaring at the top of the template

Halleck45 · 2025-03-29T06:10:04Z

Hi! I’ve made the syntax disabled by default and added a global short_syntax option.

I also took the liberty of enhancing the debug:twig-component command while I was at it - in case we get any user feedback, I thought it would make it easier to help them debug the issue.

yguedidi

small remarks from me :)

yguedidi · 2025-03-29T12:07:53Z

src/TwigComponent/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG

+## 2.21.0
+
+-  Introduce an experimental JSX-like syntax for TwigComponents, making `<twig:` prefix optional


Suggested change

- Introduce an experimental JSX-like syntax for TwigComponents, making `<twig:` prefix optional

- Introduce an experimental JSX-like syntax for TwigComponents, making `twig:` prefix optional

yguedidi · 2025-03-29T12:08:03Z

src/TwigComponent/doc/index.rst

+
+An experimental short syntax is available for components, and has been introduced in 2.21.
+
+This mode allows you to omit the `<twig:` prefix and reference components directly by their name,


Suggested change

This mode allows you to omit the `<twig:` prefix and reference components directly by their name,

This mode allows you to omit the `twig:` prefix and reference components directly by their name,

yguedidi · 2025-03-29T12:08:31Z

src/TwigComponent/src/Command/TwigComponentDebugCommand.php

@@ -85,6 +87,7 @@ protected function execute(InputInterface $input, OutputInterface $output): int

        $components = $this->findComponents();
        $this->displayComponentsTable($io, $components);
+        $this->displayDetailsAboutConfiguration($io);


shouldn't the configuration appear first, above components?

btw, worth being a separate PR IMO (without the new setting of course), may get merged faster than this one

Yes it will be better if you can split this @Halleck45 thx!

yguedidi · 2025-03-29T12:10:26Z

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -217,6 +229,10 @@ public function getConfigTreeBuilder(): TreeBuilder
                    ->info('Enables the profiler for Twig Component (in debug mode)')
                    ->defaultValue('%kernel.debug%')
                ->end()
+                ->booleanNode('short_syntax')
+                    ->info('Enables the short syntax for Twig Components (the <twig: prefix is optional)')


Suggested change

->info('Enables the short syntax for Twig Components (the <twig: prefix is optional)')

->info('Enables the short syntax for Twig Components (the `twig:` prefix is optional)')

yguedidi · 2025-03-29T12:13:46Z

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -129,18 +129,30 @@ static function (ChildDefinition $definition, AsTwigComponent $attribute) {
        ;

        $container->register('ux.twig_component.twig.lexer', ComponentLexer::class);
+        $container->getDefinition('ux.twig_component.twig.lexer')
+            ->addMethodCall('enableShortSyntax', [$config['short_syntax']]);


to me:

either call the method enableShortSyntax but with no parameter, and have the addMethodCall wrapped by an if using the config value

either call the method setShortSyntax and keep the parameter

I'd favor the first personally

yguedidi · 2025-03-29T12:16:31Z

src/TwigComponent/src/Twig/ComponentLexer.php

@@ -26,9 +26,11 @@
 */
 class ComponentLexer extends Lexer
 {
+    private $withShortSyntax = false;


Suggested change

private $withShortSyntax = false;

private $allowingShortSyntax = false;

sounds better IMO

yguedidi · 2025-03-29T12:18:06Z

src/TwigComponent/src/Twig/TwigPreLexer.php

-        if (!str_contains($input, '<twig:')) {
+        // tag may be:
+        // - long: <twig:componentName>
+        // - short (jsx like): <ComponentName> (with a capital letter)


Suggested change

// - short (jsx like): <ComponentName> (with a capital letter)

// - short (JSX-like): <ComponentName> (with a capital first letter)

yguedidi · 2025-03-29T12:20:56Z

src/TwigComponent/src/Twig/TwigPreLexer.php

+            $componentNames = array_map(fn ($match) => $match[1], $matches);
+            $componentNames = array_unique(array_filter($componentNames));
+
+            // To simplify things in the rest of the class, we replace the component name with twig:<componentName>


Suggested change

// To simplify things in the rest of the class, we replace the component name with twig:<componentName>

// To simplify things in the rest of the class, we replace the component name with <twig:componentName>

smnandre · 2025-03-30T07:28:14Z

I'd rather have a global config vs declaring at the top of the template

So if there is a problem with only one file from a distant bundle resource, it would prevent to use the short syntax anywhere ?

smnandre · 2025-03-30T07:33:01Z

src/TwigComponent/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG

+## 2.21.0


Suggested change

## 2.21.0

## 2.21.0

2.24 i think ? (feel free to create a new section here)

smnandre · 2025-03-30T07:33:29Z

src/TwigComponent/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG

+## 2.21.0
+
+-  Introduce an experimental JSX-like syntax for TwigComponents, making `<twig:` prefix optional


Suggested change

- Introduce an experimental JSX-like syntax for TwigComponents, making `<twig:` prefix optional

- Add experimental support for prefix-less tags in HTML Syntax (`<FooBar />` instead of `<twig:FooBar />`)

smnandre · 2025-03-30T07:34:32Z

src/TwigComponent/doc/index.rst

+Short Syntax
+------------
+
+An experimental short syntax is available for components, and has been introduced in 2.21.


Let's use a "versionadded" for this

smnandre · 2025-03-30T07:36:52Z

src/TwigComponent/doc/index.rst

@@ -1719,6 +1719,36 @@ Pass the name of some component as an argument to print its details:
    |                                                   | int $min = 10                     |
    +---------------------------------------------------+-----------------------------------+

+Short Syntax


This is not a new syntax.

We really should be precise on this :) Having two syntaxes is already something that did create its fair share of frustrations, documetation problems, tests, etc etc .. let's not frighten or confuse anyone with no reason here :)

smnandre · 2025-03-30T07:37:55Z

src/TwigComponent/doc/index.rst

+
+    # config/packages/twig_component.yaml
+    twig_component:
+        short_syntax: true


prefixless_tags or short_tags ?

smnandre · 2025-03-30T07:40:43Z

src/TwigComponent/src/Command/TwigComponentDebugCommand.php

+    private function displayDetailsAboutConfiguration(SymfonyStyle $io): void
+    {
+        $io->section('Configuration of TwigComponent');
+        $io->table(
+            ['Configuration', 'Current value'],
+            [
+                ['anonymous_template_directory', $this->anonymousDirectory],
+                ['short_syntax', $this->withShortSyntax ? 'enabled' : 'disabled'],
+                ['profiler',  $this->withProfiler ? 'enabled' : 'disabled'],
+            ]
+        );
+    }


Not 100% sure this will bring more value than the debug:config command (a bit more complete / with examples, etc...)

smnandre · 2025-03-30T07:42:44Z

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

+        // So we add setters for our required options
+        // This should be improved in the future : currently, some parameters of the ComponentLexer are not settable
+        $container->getDefinition('ux.twig_component.twig.environment_configurator')
+            ->addMethodCall('enabledShortSyntax', [$config['short_syntax']]);


Configurator should not have itself a setter, let's inject value IF we need to.

smnandre · 2025-03-30T07:45:39Z

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -217,6 +229,10 @@ public function getConfigTreeBuilder(): TreeBuilder
                    ->info('Enables the profiler for Twig Component (in debug mode)')
                    ->defaultValue('%kernel.debug%')
                ->end()
+                ->booleanNode('short_syntax')


Suggested change

->booleanNode('short_syntax')

->booleanNode('short_tags')

More accurate than "syntax", which was a bit of a stretch (same thing to do in the otheer changes -- open to another naming idea)

smnandre · 2025-03-30T07:50:36Z

src/TwigComponent/tests/Unit/TwigPreLexerTest.php

@@ -437,4 +452,79 @@ public static function getLexTests(): iterable
            TWIG,
        ];
    }
+
+    public function getLexTestsWhithShortOptions()


Suggested change

public function getLexTestsWhithShortOptions()

public static function getLexTestsWhithShortOptions()

smnandre · 2025-03-30T08:11:17Z

I have real valid reason to not want this to be released right now. Sorry it has absolutely nothing to do with you @Halleck45 (or even the feature in itself).

But let's ignore them as the rest of the team decided.

Focusing on the PR content.. good to me overall... i'd like to make a final review when suggested changes are done (it will be easier to focus on things)

Documentation/wording

remove "JSX" mention (this syntax is in fact.... PascalCase HTML ^^)
replace "new syntax" with one of the alternatives

Clean

extract debug changes in another PR

And....

add a lot more tests (using both <twig:Foo and <Foo in templates, usage of ":", comments, attribute names, JSON content, etc etc)

Feel free if you need a hand on anything here 👍

carsonbot added Feature New Feature Status: Needs Review Needs to be reviewed labels Mar 28, 2025

Halleck45 force-pushed the twig_tag branch 2 times, most recently from f1f107e to 0c7f729 Compare March 28, 2025 06:33

Kocal reviewed Mar 28, 2025

View reviewed changes

Halleck45 force-pushed the twig_tag branch from 0c7f729 to 30e84bb Compare March 29, 2025 06:05

Halleck45 force-pushed the twig_tag branch from 30e84bb to 6d83471 Compare March 29, 2025 06:12

Introduce a modern, JSX-like syntax for TwigComponents

ebb3a0f

Halleck45 force-pushed the twig_tag branch from 6d83471 to ebb3a0f Compare March 29, 2025 06:15

yguedidi suggested changes Mar 29, 2025

View reviewed changes

carsonbot added Status: Needs Work Additional work is needed and removed Status: Needs Review Needs to be reviewed labels Mar 29, 2025

smnandre reviewed Mar 30, 2025

View reviewed changes

		$componentNames = array_map(fn ($match) => $match[1], $matches);
		$componentNames = array_unique(array_filter($componentNames));

	- Introduce an experimental JSX-like syntax for TwigComponents, making `<twig:` prefix optional
	- Introduce an experimental JSX-like syntax for TwigComponents, making `twig:` prefix optional


		An experimental short syntax is available for components, and has been introduced in 2.21.

		This mode allows you to omit the `<twig:` prefix and reference components directly by their name,

	This mode allows you to omit the `<twig:` prefix and reference components directly by their name,
	This mode allows you to omit the `twig:` prefix and reference components directly by their name,

	->info('Enables the short syntax for Twig Components (the <twig: prefix is optional)')
	->info('Enables the short syntax for Twig Components (the `twig:` prefix is optional)')

	private $withShortSyntax = false;
	private $allowingShortSyntax = false;

	// - short (jsx like): <ComponentName> (with a capital letter)
	// - short (JSX-like): <ComponentName> (with a capital first letter)

	// To simplify things in the rest of the class, we replace the component name with twig:<componentName>
	// To simplify things in the rest of the class, we replace the component name with <twig:componentName>

	- Introduce an experimental JSX-like syntax for TwigComponents, making `<twig:` prefix optional
	- Add experimental support for prefix-less tags in HTML Syntax (`<FooBar />` instead of `<twig:FooBar />`)

	public function getLexTestsWhithShortOptions()
	public static function getLexTestsWhithShortOptions()

Introduce a modern, JSX-like syntax for TwigComponents #2662

Are you sure you want to change the base?

Introduce a modern, JSX-like syntax for TwigComponents #2662

Conversation

Halleck45 commented Mar 28, 2025

smnandre commented Mar 28, 2025

Kocal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smnandre commented Mar 28, 2025

Kheuval commented Mar 28, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Halleck45 Mar 29, 2025 • edited Loading

Choose a reason for hiding this comment

alexander-schranz commented Mar 28, 2025

weaverryan commented Mar 28, 2025

Halleck45 commented Mar 29, 2025

yguedidi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smnandre commented Mar 30, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smnandre commented Mar 30, 2025

Halleck45 Mar 29, 2025 •

edited

Loading