Support @if for attributes to render blade components

[stebers]

Hi,

I am not sure if this is a bug or feature request.

In blade such a syntax ist possible:

<div class="some-classes"
@if(true)
  x-data="{alpine: 'credit'}"
@endif
>

do something

</div>

However doing the same with a blade component is not possible and results in an syntax error, unexpected token "endif"

<x-post class="some-classes"
@if(true)
  x-data="{alpine: 'credit'}"
@endif
>

do something

</x-post>

It would be nice if something like this would be possible.

I know that something like this works

<x-post class="some-classes" :x-data="$isTrue ? '{alpine: \'credit\'}' : ''">

do something

</x-post>

However if there are a couple attributes there are a lot of if clauses to check...

What do you think?

Cheers

[shaedrich]

Otherwise, something like conditional classes but for attributes would be nice:

<div class="some-classes"
@attributes([
    'x-data' => [ true, "{alpine: 'credit'}" ]
])
>

do something

</div>

[Sophist-UK]

@if(true)
<x-post class="some-classes"  x-data="{alpine: 'credit'}">
@else
<x-post class="some-classes">
@endif

do something

</x-post>

??

[stebers]

Same error result syntax error, unexpected token "endif"

[stebers]

This would be possible, but results in code overhead:

@if(true)
<x-post class="some-classes"  x-data="{alpine: 'credit'}">
do something
</x-post>
@else
<x-post class="some-classes">
do something
</x-post>
@endif

[Sophist-UK]

Yes - in this simple example, it does not impact readability, but it is easy to imagine more complex examples where there would be substantial code duplication.

[stebers]

Yes - code duplication is the reason for my request.

Using blade's include directive will also not be the solution to avoid code duplication if the blade component uses named slots.

This for example results in an error:

@if(true)
<x-post class="some-classes"  x-data="{alpine: 'credit'}">
  @include('post-content')
</x-post>
@else
<x-post class="some-classes">
  @include('post-content')
</x-post>
@endif

where post-content.blade.php looks like:

<x-slot:title>
   Server Error
</x-slot>
 
<strong>Whoops!</strong> Something went wrong!

[stebers]

I realized that my request is not that easy to implement.
Hence, I would like to propose something more realistic in my point of view.

What do you think about adding a tag similar to <x-slot> and <x-dynamic-component> to enable dynamic attribute setting outside of the blade component itself?

Here an example:

<x-post class="some-classes">
  <x-dynamic-attributes :if="$variable == 'use feature 1'" x-data="{alpine: 'credit'}" @click="alert('feature 1 is active')" />
  <x-dynamic-attributes :if="$variable == 'use feature 2'" x-data="{alpine: 'credit'}" @click="alert('feature 2 is active')" />
  do something
</x-post>

Idea behind this:
If the condition in :if is true, all attribute in <x-dynamic-attributes> will be added to the attribute bag of blade component "post".

[stebers]

Other solution to this by adding the following to method __toString of Illuminate\View\ComponentAttributeBag

if ($key === 'x-dynamic-attributes') {
  if (!is_array($value)) continue;

  $string .= new self(array_map(fn($v) => str_replace('"', "'", $v), $value));

  continue;
}

Here the full method with this change:

     /**
     * Implode the attributes into a single HTML ready string.
     *
     * @return string
     */
    public function __toString()
    {
        $string = '';

        foreach ($this->attributes as $key => $value) {
            if ($value === false || is_null($value)) {
                continue;
            }

            if ($value === true) {
                // Exception for Alpine...
                $value = $key === 'x-data' ? '' : $key;
            }

            // Support for dynamic attributes
            if ($key === 'x-dynamic-attributes') {
                if (!is_array($value)) continue;

                $string .= new self(array_map(fn($v) => str_replace('"', "'", $v), $value));

                continue;
            }

            $string .= ' '.$key.'="'.str_replace('"', '\\"', trim($value)).'"';
        }

        return trim($string);
    }

Here the example what this does:

@php($attributesFeatureA = [
  'x-data' => '{alpine: "credit"}',
  '@click' => 'alert("feature A is active")',
  ':comments' => $comments
])
@php($attributesFeatureB = [
  'x-data' => '{alpine: "credit"}',
  '@click' => 'alert("feature B is active")',
])
<x-post class="some-classes" :x-dynamic-attributes="$feature === 'featureA' ? $attributesFeatureA : $attributesFeatureB">
  do something
</x-post>

This was tested and works fine.
What does the community think about this approach?