Consume

[taylorotwell]

From an idea by @calebporzio ...

When building complex Blade components, it's hard / impossible to access data passed into the parent from children in the parent's slot.

For a concrete example of the problem (using a x-menu component):

Usage

<x-menu color="blue">
    <x-menu.item>Foo</x-menu.item>
    <x-menu.item>Bar</x-menu.item>
    ...
</x-menu>

Notice we are passing in a "color" attribute to the parent component. Here's the parent component definition:

x-menu

@props(['color' => 'black'])

<ul ...>
    {{ $slot }}
</ul>

Now this component has access to $color, but it doesn't actually need it. We need to access $color from each menu-item component:

x-menu.item

<li class="bg-{{ $color }}-500">
    {{ $slot }}
</li>

Can now be done via @consume directive in the child... defaults are also supported if no consumable data with the given name can be found in the parent component stack...

x-menu.item

@consume(['color', 'foo' => 'default'])

<li class="bg-{{ $color }}-500">
    {{ $slot }}
</li>

[taylorotwell]

Thought: I considered renaming @consume to @aware.

[ratatatKE]

Thought: I considered renaming @consume to @aware.

I think @consume communicates the use much clearer than @aware. Or what was your intention for considering @aware?

[taylorotwell]

@ratatatKE I just think it may have communicated what is happening a bit better? The component is simply "aware" of some contextual data that was possessed by its ancestors. It's not actually consuming or receiving anything explicitly.

[ratatatKE]

@ratatatKE I just think it may have communicated what is happening a bit better? The component is simply "aware" of some contextual data that was possessed by its ancestors. It's not actually consuming or receiving anything explicitly.

I get you @taylorotwell. However if the lifetime (the duration between allocation and deallocation of memory) of the variables are staying stagnant and not increasing/changing, wouldn't it be more fit we consider a keyword like @expose?

[inxilpro]

@taylorotwell take a look at my comments in the other PR.

With this implementation, the 3rd item is going to be red. I would expect it to be blue…

<x-menu color="blue">
    <x-menu.item>Blue 1</x-menu.item>
    <x-menu.item color="red">Red 1</x-menu.item>
    <x-menu.item>What color is this?</x-menu.item>
</x-menu>

[taylorotwell]

@inxilpro Uh oh... does your implementation pass all my other tests exactly?

[inxilpro]

Yup. I just pulled your tests over to my branch and they pass. You want me to add those tests to my PR?

[taylorotwell]

@inxilpro yes please