symfony / ux

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

[Feature Request] Anonymous Name Resolution Fallback #1998

Open snoweuph opened 1 month ago

snoweuph commented 1 month ago

It would be cool, if the Anonymous component with the same name as its Directory would be used as a fallback if one with an exact match isn't found

Currently, you would do: /components/Menu/Menu.html.twig <twig:Menu:Menu/>

It would be cool to be able to write: <twig:Menu/> And have it fallback to /components/Menu/Menu.html.twig in case that: /components/Menu.html.twig is not found.

Reasoning Pros ✅ Cons ❌
If Components get more complex, you tend to split them up, and organize them in subdirectories. Having the "Index" component outside its subdir only makes it more cluttered and harder to find stuff. This would fix that. This can only be a fallback, to ensure backwards compatibility and because of Name conflicts
You Don't Get Duplication in Names anymore, which make it easier to read, and more fun to write templates.
WebMamba commented 1 month ago

Yes, this is a good idea! What do you think is best: to look for an Index.html.twig as they do in some js framework or search for the same name as you propose.

this: /component/Menu/index.html.twig <twig:Menu/>

or

/components/Menu/Menu.html.twig <twig:Menu/>

smnandre commented 1 month ago

Hm... i think this is something we refused once because that would prevent someone to switch from anonymous to PHP component, but also could create conflict... as the conversion template / name would not be bidirectional.

Naive question, but why won't you put your component template in /components/Menu.html.twig ?

snoweuph commented 1 month ago

Say for example you got a quite Complex Component, (I know that a Menu might not be the most Complex, but lets just use it for this example) and it getit up. into:s to the point that you split into:

/components/Menu.html.twig
/components/Menu/UserSection.html.twig
/components/Menu/SSO.html.twig
/components/Menu/Nav.html.twig

Yes, all these Things can be just put in one Component, but it gets messy, especially when you start to use other tools, which add their own properties and stuff (Taiwlind, Swup, Stimulus).

My Personal Philosophy is that a Component should be Simple so that you can understand it on first sight, without needed to scroll. If it gets to Complex and harder to understand, split it up in sub components (kindof like you split up functions). Simple Reusable and Easy to understand Parts is why, and for what I use Components.

The Menu wasnt the Most Complex example, but its good enough to get the Point over.

I see the Concerns behind the Possible Name Collision, and thats why I suggested it as a fallback. A Compromise would be having a config Option: anonymous_name_resolution_fallback which is by default on none but can be changed to subdir_index or subdir_same

alternatively to get a somewhat nicer syntax an extra char could be added likea # meaning a subdir Index/Same Name file should be used, but here I also think that that both should be Possible and that people need to be able to change it to their preferred option in the config.

snoweuph commented 1 month ago

What you can currently do is to Name you Index just /components/Menu/.html.twig

and use it like <twig:Menu:/> but this is stupid with the tailing : and having it as a . File, which will be hidden in the Filesystem under Unix by default.

This also doesn't look like its intended and thus might break in the future

smnandre commented 1 month ago

This also doesn't look like its intended and thus might break in the future

I confirm 100% both (100% it's not intended and 100% it will be removed)

(i too found this recently by accident :) )

smnandre commented 1 month ago
/components/Menu.html.twig
/components/Menu/UserSection.html.twig
/components/Menu/SSO.html.twig
/components/Menu/Nav.html.twig

This does work when you call

<twig:Menu />

right ?

snoweuph commented 1 month ago
/components/Menu.html.twig
/components/Menu/UserSection.html.twig
/components/Menu/SSO.html.twig
/components/Menu/Nav.html.twig

This does work when you call

<twig:Menu />

right ?

And now you're back to not having all related stuff at one place, folders are typically sorted top a-Z following by files a-Z, meaning that files that are related are not at the same space. This is exactly what I don't want.

snoweuph commented 1 month ago

This also doesn't look like its intended and thus might break in the future

I confirm 100% both (100% it's not intended and 100% it will be removed)

(i too found this recently by accident :) )

Thats why im asking for the real feature xD

smnandre commented 1 month ago

This is exactly what I don't want.

Ok, i asked before you showed that example and was not sure ;) Noted!

WebMamba commented 1 month ago

I know that we already had this discussion but I am more the @snoweuph side. I think that :

prevent someone to switch from anonymous to PHP component

is not really a big deal, and people do not have to use it. This is why I propose the index.html.twig syntax to not conflict with the two approach

snoweuph commented 1 month ago

I know that we already had this discussion but I am more the @snoweuph side. I think that :

prevent someone to switch from anonymous to PHP component

is not really a big deal, and people do not have to use it. This is why I propose the index.html.twig syntax to not conflict with the two approach

you mean where # represents the Index ?

WebMamba commented 1 month ago

No I mean that:

this:

/component/Menu/index.html.twig
<twig:Menu/>

If you have an index.html.twig in a folder you can use the folder name to call your component.

Kocal commented 1 month ago

What about /component/Menu/Menu.html.twig instead?

snoweuph commented 1 month ago

Feels like a duplication to me , I would still suggest making it configurable, so people can just change it to act the way that they prefer

snoweuph commented 1 month ago

No I mean that:

this:

/component/Menu/index.html.twig
<twig:Menu/>

If you have an index.html.twig in a folder you can use the folder name to call your component.

yes, but it should be the fallback, in the case we got

/component/Menu/index.html.twig
/component/Menu.html.twig
<twig:Menu/>

should be the 2nd one, and only if it odes not exist, it should look for the Index in the folder.

but again: This is really opiniated, so there should be options

smnandre commented 1 month ago

In all manner, we will see after the import from bundles to no mix things too much at the same time..

But i'm not against having some "fallback resolution"

snoweuph commented 1 month ago

Nice.

I guess the two possible fallbacks are: /Name/Name.html.twig /Name/Index.html.twig

and the first prolly makes more sense for most Editors, especially because most by default only display the filename, and only, and in case of conflicts show the full project path, but there are some that dont.