Dynamic component slot content not rendered when blaze disabled

[ghabriel25]

Describe the bug

I have this weird bug that only occured when I disabled blaze

BLAZE_ENABLED=false

The dynamic component slot's content not rendered at all. To simplify the issue, here is some screenshot of the slot layout

Blaze enabled

Blaze disabled

Component causing the issue

components

• notification
  • section
    • index.blade.php
  • unread.blade.php

livewire

• notification-section
  • unread
    • unread.blade.php
    • unread.php

pages

• notifications
  • notifications.blade.php
  • notifications.php

// page component $current = 'notification-section.unread';
<div>
    <livewire:dynamic-component :is="$current" :wire:key="$current">
        // global filter slot
    </livewire:dynamic-component>
</div>

// livewire.notification-section.unread.unread.blade.php
<x-notification.section>
    <x-slot name="filter">
        {{ $slot }} // global filter slot goes here
    </x-slot>

    <x-slot name="markButtons">
        // button slot for unread notification
    </x-slot>
</x-notification-section>

// components.notification.section.index.blade.php
@blaze(fold: true, unsafe: ['markButtons', 'filter'])

<div>
    // some default content for all types of notification

    @if ($markButtons->isNotEmpty()) 
        {{ $markButtons }} // button slot for each type of notification goes here
    @endif

    @if ($filter->isNotEmpty())
        {{ $filter }} // global filter slot goes here
    @endif

    @foreach ($this->notifications as $notification)
        <div wire:key="notification-{{ $notification->id }}">
            <x-notification :mention="$notification->mention" 
                            :notification="$notification"
                            :user="$notification->user" />
        </div>
    @endforeach
</div>

// components.notification.index.blade.php
@blaze(fold: true)

@props([
    'user' => null,
    'mention' => null,
    'notification' => null,
])

@php
    $icon = $notification->read() ? 'envelope-open' : 'envelope';
@endphp

<x-dynamic-component {{ $attributes }} 
                     :icon="$icon" 
                     component="notification.{{ $notification->read() ? 'read' : 'unread' }}">

    <x-slot name="heading">
        // heading goes here
    </x-slot>

    <x-slot name="content">
        // content goes here
    </x-slot>

</x-dynamic-component>

// components.notification.unread.blade.php
@blaze(fold: true, memo: true, safe: ['heading', 'content', 'links'])

@aware([
    'notification' => null,
])

@props([
    'icon' => 'envelope',
])

<flux:callout :icon="$icon" inline>
    <div class="flex flex-col gap-4">

        <flux:callout.heading :icon="$icon" class:icon="sm:hidden">
            {{ $heading }} // not rendered when blaze disabled
        </flux:callout.heading>

        {{ $content }} // not rendered when blaze disabled

    </div>
</flux:callout>

Expected behavior

I expect it rendered properly either Blaze is enabled or disabled

Actual behavior

It only rendered when Blaze is enabled.

Environment

• Laravel version: ^13.0
• PHP version: 8.4
• Blaze version: ^1.0

Additional context

What I have tried:

• php artisan view:clear
• php artisan:optimize:clear
• composer remove livewire/blaze

[ghabriel25]

@ganyicz This is really weird because even after I remove blaze from my project, the bug still exists.

[ganyicz]

@ghabriel25 would you be able to isolate the components and see if this is happening in a fresh Laravel installation? Blaze could be allowing some syntax that Blade doesn't support.

[ghabriel25]

@ganyicz You mean only take those components and put it into fresh laravel + livewire ?

[ganyicz]

@ghabriel25 yes

[ganyicz]

@ghabriel25 I wasn't able to reproduce this either copying your exact setup, all slots rendered.

[ghabriel25]

@ganyicz I'm not currently on my laptop but I'll try to isolate it like you said later..

[ghabriel25]

Hi, @ganyicz

First of all, I apologize that my example not quite completed. I miss the part that inside callout, there was a named slot

Not rendered

<flux:callout :icon="$icon" inline>
    <div class="flex flex-col gap-4">

        <flux:callout.heading :icon="$icon" class:icon="sm:hidden">
            {{ $heading }} // not rendered when blaze disabled
        </flux:callout.heading>

        {{ $content }} // not rendered when blaze disabled

    </div>

    <x-slot name="actions">
        // action slot
    </x-slot>
</flux:callout>

So, when I wrap it like this it rendered as expected

<flux:callout :icon="$icon" inline>

    <x-slot name="content">

        <div class="flex flex-col gap-4">
            <flux:callout.heading :icon="$icon" class:icon="sm:hidden">
                {{ $heading }}
            </flux:callout.heading>

            {{ $content }}

        </div>

    </x-slot>

    <x-slot name="actions">
        // action slot
    </x-slot>

</flux:callout>

However, the actions slot will be ignored. Only by using slot like this will fix the issue

<x-slot:actions>

</x-slot>

I wonder why <x-slot name="actions"> not working.

[ganyicz]

@ghabriel25 I'm still not able to reproduce this unfortunately.

I just added the following code to a fresh Laravel app and it renders identically with or without Blaze:

<flux:callout>
    <div class="flex flex-col gap-4">

        <flux:callout.heading>
            heading
        </flux:callout.heading>

        content

    </div>

    <x-slot name="actions">
        actions
    </x-slot>
</flux:callout>

I can see "heading", "content" and "actions" rendered in the browser in both cases.

[ghabriel25]

I'll just copy paste the full markup then

// components.notification.index.blade.php
@blaze(fold: true)

@props([
    'user' => null,
    'mention' => null,
    'notification' => null,
])

@php
    $icon = $notification->read() ? 'envelope-open' : 'envelope';
@endphp

<x-dynamic-component :icon="$icon"
                     {{ $attributes }}
                     component="notification.{{ $notification->read() ? 'read' : 'unread' }}">

    <x-slot name="heading">
        <flux:link href="{{ route('users.show', $user, false) }}"
                   variant="ghost"
                   wire:navigate>
            {{ $user->username }}
        </flux:link>
        {{ $notification->message }}
        <flux:text class="max-md:hidden">{{ $notification->displayed_created_at }}</flux:text>
    </x-slot>

    <x-slot name="content">
        @if ($notification->content)
            <flux:text>
                <code>
                    @if ($mention)
                        <flux:link href="{{ route('users.show', $mention, false) }}"
                                   variant="ghost"
                                   wire:navigate>
                            {{ '@' . $mention->username }}
                        </flux:link>
                    @endif
                    {{ $notification->content }}
                </code>
            </flux:text>
        @endif

        <flux:callout.text class="@max-md:hidden">
            @if ($notification->isLikePostNotification())
                <flux:callout.link href="#"
                                   wire:click.prevent="goToPost('{{ $notification->id }}', '{{ $notification->post_id }}')">
                    Show post
                </flux:callout.link>
            @else
                <flux:callout.link href="#"
                                   wire:click.prevent="goToComment('{{ $notification->id }}', '{{ $notification->comment_id }}')">
                    Show comment
                </flux:callout.link>
            @endif
        </flux:callout.text>
    </x-slot>

    <x-slot name="links">
        <flux:callout.text class="@md:hidden">
            @if ($notification->isLikePostNotification())
                <flux:callout.link href="#"
                                   wire:click.prevent="goToPost('{{ $notification->id }}', '{{ $notification->post_id }}')">
                    Show post
                </flux:callout.link>
            @else
                <flux:callout.link href="#"
                                   wire:click.prevent="goToComment('{{ $notification->id }}', '{{ $notification->comment_id }}')">
                    Show comment
                </flux:callout.link>
            @endif
        </flux:callout.text>
    </x-slot>
</x-dynamic-component>

// components.notification.unread.blade.php
@blaze(fold: true, memo: true, safe: ['heading', 'content', 'links'])

@aware([
    'notification' => null,
])

@props([
    'icon' => 'envelope',
])

<flux:callout :icon="$icon"
              {{ $attributes->merge(['class' => 'transition-all duration-300']) }}
              class:icon="max-sm:hidden"
              color="indigo"
              inline>

    <div class="flex flex-col gap-4">
        <flux:callout.heading :icon="$icon" class:icon="sm:hidden">
            {{ $heading }}
        </flux:callout.heading>

        {{ $content }}
    </div>

    // this will make $heading and $content not rendered, change to x-slot:actions fix the issue
    <x-slot name="actions"
            class="@max-md:gap-2"
            x-cloak
            x-show="!$wire.bulk"
            x-transition.duration.300ms>

        {{ $links }}

        <flux:button class="@max-md:hidden"
                     wire:click="markAsRead('{{ $notification->id }}')"
                     wire:target="markAsRead('{{ $notification->id }}')">
            Mark as read
        </flux:button>

        <flux:callout.text class="@md:hidden">
            <flux:callout.link href="#"
                               wire:click.prevent="markAsRead('{{ $notification->id }}')"
                               wire:target="markAsRead('{{ $notification->id }}')">
                Mark as read
            </flux:callout.link>
        </flux:callout.text>
    </x-slot>
</flux:callout>

[ghabriel25]

I think Blade compiler prevent something being rendered while Blaze (enabled) allowing it.

[ganyicz]

@ghabriel25 would you be able to provide minimal code snippet that I can copy into a fresh Laravel app without setting up any Laravel models, without any extra components, that only focuses on the issue?

[ghabriel25]

@ganyicz Sure

pages/notifications.blade.php

<div>
    <livewire:dynamic-component is="notification-section.unread" wire:key="notification-section.unread">
        Global slot
    </livewire:dynamic-component>
</div>

livewire/notification-section/unread/unread.blade.php

<x-notification.section>
    <x-slot name="filter">
        {{ $slot }}
    </x-slot>

    <x-slot name="markButtons">
        Mark Buttons
    </x-slot>
</x-notification.section>

components/notification/section/index.blade.php

@blaze(fold: true, unsafe: ['markButtons', 'filter'])

<div>
    <div>
        @if ($markButtons->isNotEmpty())
            {{ $markButtons }}
        @endif
    </div>

    <div>
        @if ($filter->isNotEmpty())
            {{ $filter }}
        @endif
    </div>
    
    <div>
        @foreach(range(1,5) as $item)
            <x-notification wire:key="notification-{{ $item }}" />
        @endforeach
    </div>
</div>

components/notification/index.blade.php

@blaze(fold: true)

<x-dynamic-component component="notification.unread" {{ $attributes }}>
    <x-slot name="heading">
        Heading
    </x-slot>

    <x-slot name="content">
        Content
    </x-slot>

    <x-slot name="links">
        Link
    </x-slot>
</x-dynamic-component>

components/notification/unread.blade.php

@blaze(fold: true, memo: true, safe: ['heading', 'content', 'links'])

<flux:callout inline>

    <div>
        <flux:callout.heading>
            {{ $heading }}
        </flux:callout.heading>

        {{ $content }}
    </div>

    // fix: use x-slot:actions
    <x-slot name="actions"> // this will cause $heading and $content not being rendered

        {{ $links }}

        Other content
    </x-slot>
</flux:callout>