[11.x] allow guessing of nested component #52669

browner12 · 2024-09-06T03:32:30Z

sometimes components will be part of a larger component grouping, and you may wish to group those components in a folder.

as a simple example we'll use the classic "Card" component, which may be organized as such:

App\View\Components\Card\Card
App\View\Components\Card\Header
App\View\Components\Card\Body

to utilize these in your Blade file you would:

<x-card.card>
    <x-card.header>Title</x-card.header>
    <x-card.body>lorem ipsum</x-card.body>
</x-card.card>

while this is fine, it doesn't read as nice as it could. with this commit, we can now omit the trailing duplicated word, as long as the class name matches the folder name.

<x-card>
    <x-card.header>Title</x-card.header>
    <x-card.body>lorem ipsum</x-card.body>
</x-card>

we do something similar with Anonymous components

If a component at the root level exists with the same name as the folder, it will take precedence.

Tried to write a test for this, but was honestly a little lost.

sometimes components will be part of a larger component grouping, and you may wish to group those components in a folder. as a simple example we'll use the classic "Card" component, which may be organized as such: - `App\View\Components\Card\Card` - `App\View\Components\Card\Header` - `App\View\Components\Card\Body` to utilize these in your Blade file you would: ```blade <x-card.card> <x-card.header>Title</x-card.header> <x-card.body>lorem ipsum</x-card.body> </x-card.card> ``` while this is fine, it doesn't read as nice as it could. with this commit, we can now omit the trailing duplicated word, as long as the class name matches the folder name. ```blade <x-card> <x-card.header>Title</x-card.header> <x-card.body>lorem ipsum</x-card.body> </x-card> ``` we do something similar with [Anonymous components](https://laravel.com/docs/11.x/blade#anonymous-index-components)

bert-w · 2024-09-07T11:42:02Z

This feels like magic; how about creating App\View\Component\Card.php so you dont have this issue?

browner12 · 2024-09-07T15:20:09Z

@bert-w the point of this is to avoid that, and be able to group you components appropriately. it's the same as what we do with anonymous components.

bert-w · 2024-09-07T20:24:42Z

hm this does introduce a conflict however if you have both App\View\Component\Card.php and App\View\Component\Card\Card.php defined.

taylorotwell · 2024-09-09T14:25:34Z

Think we would probably want a test here.

browner12 · 2024-09-09T20:35:33Z

@bert-w correct. I addressed that in my original comment.

someone please check my work on this test. I was not able to figure out how to get it to work with the aliases

devajmeireles · 2024-09-10T01:14:35Z

@browner12, I have a sincere question! Won't we have some kind of "conflict" with this PR? I mean, your example:

<x-card>
    <x-card.header>Title</x-card.header>
    <x-card.body>lorem ipsum</x-card.body>
</x-card>

... won't it result in the component being understood as anonymous, possibly invoking card/index.blade.php if exists?

browner12 · 2024-09-10T03:10:11Z

From how I'm reading the class, the anonymous check happens after my check, and all the other class based checks.

Let me know if you're reading it differently.

However, you might be able to consider this a BC break (?) under the following scenario:

/App/View/Components/Card/Card.php
/resources/views/components/card/index.blade.php
/resources/views/components/card/header.blade.php
/resources/views/components/card/body.blade.php
/resources/views/components/card/card.blade.php

Prior to the change if you included <x-card></x-card>, it would anonymously render the index.blade.php view. After the change, it would use the Card.php class.

Although that seems like a very unlikely contrived example. I'll leave it to @taylorotwell to judge if that justifies pushing to 12.x

taylorotwell · 2024-09-16T19:42:42Z

@browner12 do you think it's possible to make anonymous components consistent? Right now we require the anon component to be named index instead of the name of the folder. Could we support the folder name convention for anon components too or does that have bigger BC implications?

browner12 · 2024-09-18T17:49:14Z

@taylorotwell it definitely looks possible to support the folder name convention for anonymous components. I believe we would just need to adjust the guessAnonymousComponentUsingNamespaces and guessAnonymousComponentUsingPaths methods.

It seem unlikely, and very odd that someone would intentionally use both the "index" and "folder" name in their view folder for anonymous components as it doesn't make a ton of sense semantically.

/resources/views/components/card/index.blade.php
/resources/views/components/card/card.blade.php
/resources/views/components/card/header.blade.php
/resources/views/components/card/body.blade.php

However, I believe we would still be okay as long as we give the index view higher priority than the card view in the compiler. This would cause the <x-card> component to still render the index.blade.php view if it exists, and only render the card.blade.php view when the index.blade.php doesn't exist.

I will say I don't use the alias feature for 3rd party custom components, so I'm not sure if that would be affected any differently.

I would propose we add this feature in a separate PR if you'd like to go forward with it.

taylorotwell · 2024-09-19T11:20:42Z

I think I would rather see it in this PR if that's alright - since I wouldn't merge this one without the other change because of the inconsistency.

browner12 · 2024-09-19T16:02:18Z

gotcha, fair. I'll work on that.

@taylorotwell

per @taylorotwell s request, allow users to name their root components with `index.blade.php` OR the name of the component folder.

the code changes add an extra `exists()` call, so we'll adjust our numbers here.

these are copy/paste adjustments of the existing "index" tests.

browner12 · 2024-10-10T17:01:22Z

@taylorotwell the anonymous components now support using the folder name instead of index.blade.php. so you could structure your accordion like

/accordion/accordion.blade.php
/accordion/accordion-item.blade.php

and then use it like this still:

<x-accordion>
    <x-accordion.item>Item 1</x-accordion.item>
    <x-accordion.item>Item 2</x-accordion.item>
    <x-accordion.item>Item 3</x-accordion.item>
</x-accordion>

the index.blade.php view will still take precedence if it is present, and we'll only use the folder name if the index is missing.

taylorotwell · 2024-10-11T15:12:57Z

Thanks!

@taylorotwell

* allow guessing of nested component sometimes components will be part of a larger component grouping, and you may wish to group those components in a folder. as a simple example we'll use the classic "Card" component, which may be organized as such: - `App\View\Components\Card\Card` - `App\View\Components\Card\Header` - `App\View\Components\Card\Body` to utilize these in your Blade file you would: ```blade <x-card.card> <x-card.header>Title</x-card.header> <x-card.body>lorem ipsum</x-card.body> </x-card.card> ``` while this is fine, it doesn't read as nice as it could. with this commit, we can now omit the trailing duplicated word, as long as the class name matches the folder name. ```blade <x-card> <x-card.header>Title</x-card.header> <x-card.body>lorem ipsum</x-card.body> </x-card> ``` we do something similar with [Anonymous components](https://laravel.com/docs/11.x/blade#anonymous-index-components) * minor formatting * add test for nested default component parsing * minor formatting * allow using folder name for anonymous index components per @taylorotwell s request, allow users to name their root components with `index.blade.php` OR the name of the component folder. * fix tests the code changes add an extra `exists()` call, so we'll adjust our numbers here. * add some tests these are copy/paste adjustments of the existing "index" tests.

royduin · 2024-10-16T06:59:26Z

This doesn't seem to work with correctly with vendor prefixes, when I've <x-prefix::input> it's working fine with vendorpackage/resources/components/input/index.blade.php but it doesn't resolve vendorpackage/resources/components/input/input.blade.php. When I add some dumps it should end up with: prefix::components.input.input but comes with prefix::components.input.prefix::input

More info: rapidez/blade-components#6

browner12 · 2024-10-16T14:28:58Z

thanks for catching that @royduin . I was curious how the vendor prefixes would do with this. Luckily it looks like it doesn't break any existing behavior, so we just need to fix it for the new behavior.

royduin · 2024-10-23T11:22:59Z

Hey @browner12, do we needs some docs on this? Currently it's undocumented.

browner12 · 2024-10-23T14:32:07Z

Hey @browner12, do we needs some docs on this? Currently it's undocumented.

yup, was just thinking about that today. i'll get on it

we can now use either `index.blade.php` or `{directory}.blade.php` for our anonymous index components. laravel/framework#52669

laravel/framework#52669

* new allowed filename for anonymous index components we can now use either `index.blade.php` or `{directory}.blade.php` for our anonymous index components. laravel/framework#52669 * Update blade.md --------- Co-authored-by: Taylor Otwell <taylor@laravel.com>

* document "index" class components laravel/framework#52669 * formatting --------- Co-authored-by: Taylor Otwell <taylor@laravel.com>

browner12 added 2 commits September 5, 2024 22:29

minor formatting

f80d303

taylorotwell marked this pull request as draft September 9, 2024 14:25

add test for nested default component parsing

1eb1646

minor formatting

a662c24

browner12 marked this pull request as ready for review September 9, 2024 20:40

taylorotwell marked this pull request as draft September 18, 2024 17:30

browner12 marked this pull request as ready for review September 18, 2024 17:49

taylorotwell marked this pull request as draft September 19, 2024 11:20

browner12 added 3 commits October 10, 2024 11:38

allow using folder name for anonymous index components

1939a3a

per @taylorotwell s request, allow users to name their root components with `index.blade.php` OR the name of the component folder.

fix tests

9d90ad3

the code changes add an extra `exists()` call, so we'll adjust our numbers here.

add some tests

e071c3d

these are copy/paste adjustments of the existing "index" tests.

browner12 marked this pull request as ready for review October 10, 2024 16:57

taylorotwell merged commit 3c501ee into laravel:11.x Oct 11, 2024
31 checks passed

browner12 deleted the AB-class-component-default branch October 11, 2024 15:15

royduin mentioned this pull request Oct 16, 2024

Component name guessing rapidez/blade-components#6

Merged

royduin mentioned this pull request Oct 16, 2024

[11.x] Component name guessing with prefix #53183

Merged

browner12 added a commit to browner12/docs that referenced this pull request Oct 23, 2024

new allowed filename for anonymous index components

4054318

we can now use either `index.blade.php` or `{directory}.blade.php` for our anonymous index components. laravel/framework#52669

browner12 mentioned this pull request Oct 23, 2024

[11.x] new allowed filename for anonymous index components laravel/docs#9984

Merged

browner12 added a commit to browner12/docs that referenced this pull request Oct 23, 2024

document "index" class components

dee20a2

laravel/framework#52669

browner12 mentioned this pull request Oct 23, 2024

[11.x] document "index" class components laravel/docs#9985

Merged

taylorotwell added a commit to laravel/docs that referenced this pull request Oct 24, 2024

[11.x] document "index" class components (#9985)

724c31c

* document "index" class components laravel/framework#52669 * formatting --------- Co-authored-by: Taylor Otwell <taylor@laravel.com>

renovate bot mentioned this pull request Nov 25, 2024

Update all minor dependencies tvup/poweruse#287

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[11.x] allow guessing of nested component #52669

[11.x] allow guessing of nested component #52669

browner12 commented Sep 6, 2024

bert-w commented Sep 7, 2024

browner12 commented Sep 7, 2024

bert-w commented Sep 7, 2024

taylorotwell commented Sep 9, 2024

browner12 commented Sep 9, 2024

devajmeireles commented Sep 10, 2024

browner12 commented Sep 10, 2024

taylorotwell commented Sep 16, 2024

browner12 commented Sep 18, 2024

taylorotwell commented Sep 19, 2024

browner12 commented Sep 19, 2024

browner12 commented Oct 10, 2024

taylorotwell commented Oct 11, 2024

royduin commented Oct 16, 2024

browner12 commented Oct 16, 2024

royduin commented Oct 23, 2024

browner12 commented Oct 23, 2024

[11.x] allow guessing of nested component #52669

[11.x] allow guessing of nested component #52669

Conversation

browner12 commented Sep 6, 2024

bert-w commented Sep 7, 2024

browner12 commented Sep 7, 2024

bert-w commented Sep 7, 2024

taylorotwell commented Sep 9, 2024

browner12 commented Sep 9, 2024

devajmeireles commented Sep 10, 2024

browner12 commented Sep 10, 2024

taylorotwell commented Sep 16, 2024

browner12 commented Sep 18, 2024

taylorotwell commented Sep 19, 2024

browner12 commented Sep 19, 2024

browner12 commented Oct 10, 2024

taylorotwell commented Oct 11, 2024

royduin commented Oct 16, 2024

browner12 commented Oct 16, 2024

royduin commented Oct 23, 2024

browner12 commented Oct 23, 2024