[8.x] Add a BladeCompiler::renderComponent() method to render a component instance

[tobyzerner]

This PR is similar to the functionality introduced in #40425.

This new method allows you to call BladeCompiler::renderComponent($component), where $component is an instance of Illuminate\View\Component, and get the HTML of the rendered component returned. Alternatively you may call the renderComponent method from the Blade facade: Blade::renderComponent($component).

Example

class HelloComponent extends Component
{
    private $name;

    public function __construct(string $name)
    {
        $this->name = $name;
    }

    public function render()
    {
        return "Hello, $this->name";
    }
}

Blade::renderComponent(new HelloComponent('Claire'));

// Returns 'Hello, Claire'

Rationale

Components are a great way to encapsulate parts of the view. Rendering a component programatically is useful if you want to render a component's HTML directly into a response. For example, if you wanted to dynamically update a component via XMLHttpRequest.

Currently to achieve this you would need to create a new view partial to return in the response, for the sole purpose of rendering the component:

<x-hello-component :name="$name"/>

return view('partials.hello-component', ['name' => 'Claire']);

The Blade::render() function makes this a bit easier, as you could render the component as a Blade string into the response, rather than needing to resort to a partial:

return Blade::render('<x-hello-component :name="$name"/>', ['name' => 'Claire']);

However, this still doesn't have optimal ergonomics, especially with increasing numbers of properties. The renderComponent method cuts out the intermediate step and makes this simple:

return Blade::renderComponent(new HelloComponent('Claire'));

Note that if needed, attributes can be set on the component instance like so:

return Blade::renderComponent((new HelloComponent('Claire'))->withAttributes(['class' => 'red']));

Implementation

The implementation is based on the renderComponent method of the Illuminate\View\Concerns\ManagesComponents trait.

[browner12]

I'm not following how

return Blade::renderComponent(new HelloComponent('Claire'));

is better than

return Blade::render('<x-hello-component name="Claire"/>']);

---

I'm also struggling to understand how returning a component is better than returning a partial?

---

Couldn't you also just

return (new HelloComponent('Claire'))->render();

if you're going to instantiate the class anyway?

[tobyzerner]

@browner12 You can't always interpolate prop values into a template string. Imagine if one of the props the HelloComponent takes is an object, like a Model instance:

$user = User::find(1);
return Blade::render('<x-hello-component user="'.$user.'"/>'); // doesn't work!

The next best thing is to pass that data into the BladeCompiler::render method. But imagine if there are a lot of props we need to pass in:

return Blade::render('<x-hello-component :user="$user" :foo="$foo" :bar="$bar" :qux="$qux"/>', ['user' => $user, 'foo' => $foo, 'bar' => $bar, 'qux' => $qux]);

This works, but it's not very ergonomic – there's a lot of repetition. We also lose the benefit of type hinting from the component's constructor parameters. This is much nicer:

return Blade::renderComponent(new HelloComponent($user, $foo, $bar, $qux));

Regarding partials – they are a valid way to go about rendering a component. But it requires going to the effort of creating a new template file for every component you want to render, and again, the repetition of passing data into the view and then into the component.

You can't call render directly on a component instance, because it doesn't always simply return a string. It can, in fact, return any one of the following:

• A blade template string
• A View instance
• A Htmlable instance
• A closure that accepts data and returns any one of the above.

So, some logic is needed to determine what's been returned, and how to convert it into a string. This makes up the bulk of the renderComponent method.

[driesvints]

Cool, thanks @tobyzerner 👍