symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
827 stars 299 forks source link

Improvement suggestion: simplify component template management #1029

Open asispts opened 1 year ago

asispts commented 1 year ago

In the current implementation, the class for a Twig component is stored in /src/ directory, while its template is placed in /templates/components/. This approach can become burdensome to manage the components.

./
├─ src/
│  ├─ TwigComponent/
│  │  ├─ AComponent.php
├─ templates/
│  ├─ components/
│  │  ├─ AComponent.html.twig

A simpler and clearer alternative is to keep the component template next to its class. For instance, in the class component definition:

#[AsTwigComponent(tpl: __DIR__.'/AComponent.html.twig')]
class AComponent{}

With this approach, the directory structure would look like:

./
├─ src/
│  ├─ TwigComponent/
│  │  ├─ AComponent.php
│  │  ├─ AComponent.html.twig

Alternatively, you could use a separate folder named _tpl for templates:

#[AsTwigComponent(tpl: __DIR__.'/_tpl/AComponent.html.twig')]
class AComponent{}

With this setup, the directory structure would be:

./
├─ src/
│  ├─ TwigComponent/
│  │  ├─ _tpl/
│  │  │  ├─ AComponent.html.twig
│  │  ├─ AComponent.php
weaverryan commented 1 year ago

I don't love having templates in src/, but I agree with your feedback: it'd be great if the templates and classes could live next to each other.

Wait4Code commented 1 year ago

IMO, this is a burden because live-component is still new in the ecosystem and so IDEs don't support it well. A close example is Symfony controllers and their templates : it is not a problem because modern IDEs (and amazing plugins like idea-php-symfony2-plugin for PhpStorm) provides some quick navigation tools to ease management of controllers and templates.

I think that this problem will disappear by helping IDEs/plugins programmers. cc @Haehnchen ;)

Haehnchen commented 1 year ago

fyi: the plugin already provides some navigation between templates and components to help out ;)

image

Wait4Code commented 1 year ago

fyi: the plugin already provides some navigation between templates and components to help out ;)

image

Howww ! I completely missed that! Awesome! I see it works only for TwigComponents, can you do the same for LiveComponents ?

asispts commented 1 year ago

IMO, this is a burden because live-component is still new in the ecosystem and so IDEs don't support it well. A close example is Symfony controllers and their templates : it is not a problem because modern IDEs (and amazing plugins like idea-php-symfony2-plugin for PhpStorm) provides some quick navigation tools to ease management of controllers and templates.

I think that this problem will disappear by helping IDEs/plugins programmers.

I see. Unfortunately, not everyone uses PHPStorm. Also, I believe that the burden has nothing to do with text editors.

We can use a page template in multiple controllers. However, there is only a 1:1 relationship between a twig component template and its class. So, the analogy is a little off.

Since the class is not a part of the "core" system and is merely a UI layer, we can place it in /templates/ directory. However, the way we typically name directories inside /templates/ doesn't align with PSR-4 naming convention. Probably, we can use another directory in the project root to put the class and its template file.

carsonbot commented 5 months ago

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

carsonbot commented 4 months ago

Could I get an answer? If I do not hear anything I will assume this issue is resolved or abandoned. Please get back to me <3

carsonbot commented 4 months ago

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!