Jigsaw: Add support for Blade component classes

[royvanv]

Please add support for component classes for Blade components.

[bakerkretzmar]

You can register class-based Blade components in Jigsaw with $bladeCompiler->component(). See #440.

[royvanv]

This basic example in my blade.php does not work. I have not created a view for it yet. I use <x-icon /> in my view.

use Illuminate\View\Component;

class Icon extends Component
{
    public function render()
    {
        return "Icon works!";
    }
}

$bladeCompiler->component(Icon::class);

This code results in an error when building the site:

In 05187dc394c0a6d7c726c66dad2543a3097e1c8e.php line 22:

syntax error, unexpected 'endif' (T_ENDIF), expecting end of file (View: [...]\source_layoutsmaster.blade.php) (View: [...]
\source_layoutsmaster.blade.php)

In 05187dc394c0a6d7c726c66dad2543a3097e1c8e.php line 22:

syntax error, unexpected 'endif' (T_ENDIF), expecting end of file (View: [...]\source_layoutsmaster.blade.php)

In 05187dc394c0a6d7c726c66dad2543a3097e1c8e.php line 22:

syntax error, unexpected 'endif' (T_ENDIF), expecting end of file

build [--pretty PRETTY] [-c|--cache [CACHE]] [--] []

It creates the following compiled code in the cache file:

<?php $__env->startComponent('Example', 'example', []); ?>
<?php $component->withAttributes([]); ?>
<?php if (isset($__componentOriginal0f01ed56a1e32a05e5ef96e4d779f34784af9a96)): ?>
<?php $component = $__componentOriginal0f01ed56a1e32a05e5ef96e4d779f34784af9a96; ?>
<?php unset($__componentOriginal0f01ed56a1e32a05e5ef96e4d779f34784af9a96); ?>
<?php endif; ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>

[bakerkretzmar]

@royvanv sorry for closing this prematurely, you're right, that example doesn't work. Forcing the classname of the component you're registering to include a \ appears to fix this, so for now you can:

• namespace your blade.php file (I don't think it matters what name you use, as long as there's a namespace Something; at the top of that file the build should work), or
• specify the component classname as a string with a leading slash: '\Icon' (not Icon::class) actually don't do this, it doesn't work how I thought it did

I'll try to dig deeper into this later this week.

[bakerkretzmar]

https://github.com/laravel/framework/blob/7.x/src/Illuminate/View/Compilers/Concerns/CompilesComponents.php#L32-L34

[bakerkretzmar]

Actually you can use a leading slash, I was just doing it wrong. This should work:

$bladeCompiler->component('\\Icon');
// or
$bladeCompiler->component('\\' . Icon::class);

[ryanscherler]

I just want to start by saying thanks for this update to allow class based components! One quick question - is it possible to 'inject' the current $page instance to pass into a class-based component somehow? (the following code doesn't actually work, just a proof of concept for possible dependency injection?)

Something like:

<?php

namespace Components;

use Illuminate\View\Component;
use Illuminate\Container\Container;
use TightenCo\Jigsaw\PageVariable;

class Layout extends Component
{
    public $page;

    public function __construct(PageVariable $page)
    {
        $this->page = $page;
    }

    public function render()
    {        
        return Container::getInstance()
            ->make('view')
            ->make('_components.layout');
    }
}

This would allow components access to $page so we don't have to pass in :page="$page" every time:

// source/index.blade.php

<x-layout :page="$page">
    <div class="p-8">
        <h1 class="text-3xl font-bold">Hello world!</h1>
    </div>
</x-layout>

[adrelliott]

Hey - coming across the same issue. Cannot access $page within a component.

Is there a workaround at all?

PS. Thanks for Jigsaw - I love it.

[bakerkretzmar]

I don't think that's possible currently, no, since that page data isn't bound into the container. Based on some experimenting locally I don't think it should be too hard to add support for, we'll look into it!

[adrelliott]

That would be amazing!

Components seem the be the way Blade is going, and it’s a bit of a pain to have to pass it in each time.

Thanks!!!!!

[ryanscherler]

Based on some experimenting locally I don't think it should be too hard to add support for, we'll look into it!

Thanks so much for looking into this @bakerkretzmar