Jigsaw: Is there support for anonymous blade components?

[nathangross]

I noticed that #440 included support for blade components—but I couldn't tell if this included the anonymous variety. Further, can you pass data through as props?

Or would the best way to do this be via @include('_partials.header', ['page_title' => 'My Amazing Site'])?

I was hoping to do something like below but was getting errors.

<x-nav.item title="Awesome Title" href="/awesome-title" />

@props(['title', 'href'])
<a title="{{ $page->siteName }} {{ $title }}" href="{{ $href }}"
   class="ml-6 text-gray-700 hover:text-green-600 {{ $page->isActive($href) ? 'active text-green-600' : '' }}">
    {{ $title }}
</a>

Thanks!

[nathangross]

Ok, anonymous components seem to work just fine. It appears my error is passing $href to $page->isActive($href). So, it's still a question I would love some guidance on, but definitely out of scope from the original question. Feel free to delete or close.

[bakerkretzmar]

What exactly is the error you're getting? Does the $page variable not exist? If that's the case it's because components, unlike includes, _don't_ inherit the parent scope. You could add an active prop and pass it $page->isActive('/awesome-title'), so that that call happens outside of the component itself, or you could even pass the whole $page into each nav item if necessary.

[nathangross]

Yep—it appears the $page var was not available. Error:

Call to a member function isActive() on null

But like you suggested, passing in an active prop for $page fixes my issue. Thanks you!