Dagger Components: A Powerful Alternative to Laravel Blade Components

Laravel Blade components have long been a go-to solution for reusable UI elements. Still, the default component system can sometimes feel limiting, especially when dealing with deeply nested structures or heavy rendering overhead. This is where Dagger Components come in.

Dagger is a Laravel package created by John Koster that provides an alternative to Blade components. John created this package to optimize performance in projects he has worked on with many components and reduce overhead. In addition, he wanted to explore advanced compilation techniques to enable features such as Attribute Forwarding, Slot Forwarding, and the Attribute Cache.

The Dagger compiler processes component templates before runtime, integrating them directly into the final view output for better performance. As a result, Laravel's standard view events do not trigger when Dagger components are rendered.

To install Dagger, use composer:

composer require stillat/dagger

Next, run the Artisan command to scaffold the required paths:

php artisan dagger:install

This will create new directories within your application's resources directory:

resources/
  dagger/
    views/

Dagger allows you to create components the same way as you would the default Laravel components, however, it introduces a new functional approach to defining components. In this new approach, the first thing within your component definition must be a PHP block, where the component is defined.

Let's say we create a simple badge component.

@php
use function Stillat\Dagger\component;
 
component()->props([
    'type' => 'info',
    'message'
])->validateProps([
    'type' => 'required',
    'message' => 'required',
]);
@endphp
 
<span class="badge badge-{{ $type }}">{{ $message }}</span>

As you can see, we can still define props and apply validation rules.

We can then reference this component in another blade template using the <c-* prefix instead of the default <x-* prefix in Laravel. This helps to differentiate them from standard Blade components.

<c-badge type="success" message="New" />

The prefix is configurable if you prefer to use something else.

Key Features

The key features that come with Dagger are:

Access parent data: This allows accessing parent data from within a child component using Blade's @aware directive.
Prop validation: Use Laravel's built-in validation rules to validate your component props
Compiler attributes: For example, the #id attribute, which may be used to name a nested component.
Caching components: Uses Laravel's Cache feature so you can cache your components using the #cache compiler attribute.
Attribute and Prop forwarding: A powerful feature that allows you to set and override props and attributes on nested components.
Slot forwarding: Allows you to set the contents of deeply nested components.
Output Trimming: This will trim the output of a component before it is rendered on the client.
Stencils: Allows consumers of components to override named sections of a component, similar to slots, but this is done at compile time instead of at runtime.
Mixins: Allows you to inject data and common behaviors into components.