Support for Twig Component HTML Syntax

[weaverryan]

Hi!

Thank you 💯 for this plugin. This is just a request that I would personally LOVE, in case you're interested and able to add it.

In Symfony UX 2.8, we've added a new HTML-style Twig syntax: https://symfony.com/bundles/ux-twig-component/current/index.html#component-html-syntax

The syntax is pretty straightforward, though I have no idea how hard it would be to support it. Ideas include:

A) When you type <twig: you get an auto-complete from available components. Components all have, in practice, an AsTwigComponent attribute (or its sub-class AsLiveComponent). There is an optional name arg, which defines the name. Else we use the short class name (i.e. class name without the namespace).

B) Currently, PHPStorm complains that the twig namespace is not bound. It'd be awesome if that could just go away.

C) When typing an attribute, it would be cool to auto-complete from public properties on the component class, as that's the most common things you'll pass in - e.g. <twig:Alert ty would autocomplete type if there is a public $type property. This would also work if you had an attribute prefixed with a : - like :ty.

D) When typing an attribute that starts with a :, it would be awesome if it then entered "Twig" mode - basically highlighting what's inside as if you were "inside" of Twig - e.g. currently:

But in theory, the inside of :type would look like:

Again, thanks for your work - no expectations on this - just something I'd love personally.

Cheers!

[kbond]

Also along this line, auto-completion within a twig component's template would be nice as well.

#[AsTwigComponent]
class Alert
{
    public string $type = 'success';
    public string $message;

    public function someMethod() {}
}

{# templates/components/Alert.html.twig #}
<div class="alert alert-{{ type }}"> {# autocomplete "type", "this.type" #}
    {{ message }} {# autocomplete "message", "this.message" #}
    {{ this.someMethod }} {# autocomplete "this.someMethod" #}
</div>

Thanks for this plugin - as Ryan said, no expectations :)

[Haehnchen]

yeah, watching the symfony ux with interest.

Its an area that will get some love. So feel free to throw in ideas :)

[dirkjf]

Not ideal, but you can disable the inspection for XML > Unbound namespace prefix

[althaus]

Would be really nice, if the plugin could somehow register twig as an XML namespace. Don't know if this is possible at all, but getting rid of the errors without disabling the inspection at all would be nice.

For the time: Highly appretiate the current state of support of Twig Components. It's pure joy!

[andyexeter]

Another idea to throw into the mix: It'd be great to be able to Ctrl + Click through to either the component class and/or template :)

[ker0x]

Another idea to throw into the mix: It'd be great to be able to Ctrl + Click through to either the component class and/or template :)

This is already possible, at least for defined components (components with a class). It would be great to do the same for anonymous components !

[andyexeter]

@ker0x it doesn't seem to work for me:

Screencast.from.14-12-23.17.26.06.webm

Which versions of PhpStorm and the plugin are you using? I'm on PhpStorm 2023.3.1 and 2022.1.261 of the plugin (premium version if that matters).

[ker0x]

@andyexeter Same version as yours for PHPStorm and the plugin

guestspot.check.html.twig.2023-12-14.18-46-18.mp4

[andyexeter]

@ker0x how odd. Only difference I can see is that your component is namespaced.

Which version of Symfony and the Twig UX component is that on? I tested on Symfony v6.4.1 and v2.13.3 of symfony/ux-twig-component

[Haehnchen]

Ctrl + Click through to either the component class and/or template

✔️

anonymous components

✔️ via #2264

The ux component itself add some changes related to namespaces, the next plugin update will support it more fluently.

thanks to @weaverryan for this SymfonyCon coding talks, there is now a list of todos :)

[yched]

@ker0x curious to know how you're able to ctrl-click to the template ?
ctrl-click takes me straight to the PHP class, but I see no option to go to the template instead ?

[ker0x]

@yched For an anonymous component it will take you straight to the template. However with a defined components (components with a class) it show me a dropdown with component class and template and i can choose where i want to go.

My PHPStorm version is 2024.1 EAP and the Symfony plugins is 2024.1.274

[yched]

Thanls @ker0x . That does work indeed for components defined in the top-level app codebase.

That doesn't work however for components defined in a bundle, ctrl-click only brings me to the class but doesn't seem to ctach the template. I'll try to decribe that better i a separate issue.

[yched]

That doesn't work however for components defined in a bundle, ctrl-click only brings me to the class but doesn't seem to ctach the template. I'll try to decribe that better i a separate issue.

That seems related to the use of name_prefix : i opened #2382 about it