Laravel Blade Anchor ⚓

Easily enable extending your application's user interface by third-party packages with anchors.

Installation

You can install the package via composer:

composer require kanuni/laravel-blade-anchor

Usage

To allow third-party packages to extend your application's UI, you need to insert anchors into your Blade template files at the points where you want to permit these extensions.

Placing anchors to enable UI extensions

In your Blade file (e.g., resources/views/welcome.blade.php), you can add an anchor directive. For this example, let's create an anchor immediately after the opening <body> tag:

...
<body>
    @anchor('begin.body')
    ...
</body>

You can name the anchor anything you like. In this example, we've named it begin.body.

Creating an extender class

Once you've positioned your anchor, you can now register an extender class that will render a string or a Laravel View at that anchor point. Ideally, you should register your anchor extenders in the boot() method of your AppServiceProvider class.

But first, let's create a new anchor extender class using the Artisan command:

php artisan make:anchor-extender WelcomePageExtender

This command generates a new extender class in app/BladeExtenders/WelcomePageExtender.php. This class should implement the __invoke() method, whose return value will be rendered at the specified anchor point.

Here's an example of our newly created class:

namespace App\BladeExtenders;

use Illuminate\Contracts\Support\Renderable;
use Kanuni\LaravelBladeAnchor\Contracts\AnchorExtender;

class WelcomePageExtender implements AnchorExtender
{
    public function __invoke(?array $variables): string|Renderable|null
    {
        return '<p>This string will be injected at anchor point.</p>';
    }
}

The __invoke() method can return a string or a View and accepts an optional array of variables available in your Blade template. If returning a Blade view, you can pass the variables to your view like this:

public function __invoke(?array $variables): string|Renderable|null
{
    return view('my-custom-blade-view', $variables);
}

It's also possible to inject any dependency classes into your extender's __construct() method:

class WelcomePageExtender implements AnchorExtender
{
    public function __construct(
        protected YourService $service
    )
    {}

    public function __invoke(?array $variables): string|Renderable|null
    {
        return "<p>This are the results of your service: {$this->service->getResults()}</p>";
    }
}

Attaching the Extender to the Anchor

Register your Blade extender in the boot() method of app/Providers/AppServiceProvider class using LaravelBladeAnchor facade. To do this, call the registerExtender method and provide the view name, anchor name, and extender class.

use Kanuni\LaravelBladeAnchor\Facades\LaravelBladeAnchor;
use App\BladeExtenders\WelcomePageExtender;

public function boot(): void
{
    LaravelBladeAnchor::registerExtender(
        view: 'welcome',
        anchor: 'begin.body',
        extenderClass: WelcomePageExtender::class,
    );
}

As demonstrated, anchor names are unique within each view. This means you can have anchors with the same name across two different views without any conflict.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

License

The MIT License (MIT). Please see License File for more information.

tjodalv / laravel-blade-anchor Goto Github PK