Dagger Components for Laravel Blade

Dagger is a component authoring library for Laravel's Blade templating engine. Dagger components are heavily inspired by Laravel's anonymous components. Dagger's differentiating features are its compiler and expanded capabilities.

The Dagger compiler works hard to inline your component's code, perform various optimizations, as well as enable powerful new features, such as the Attribute Cache, Attribute Forwarding, and Slot Forwarding. The end result is a powerful, performant component authoring library with a familiar syntax.

The main visual difference when working with Dagger components is the use of the <c- prefix instead of <x-, this is to help differentiate them from Blade components and make interoperability easier:

<!-- /resources/dagger/views/alert.blade.php -->

@props(['type' => 'info', 'message'])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

<!-- /resources/views/layout.blade.php -->

<c-alert type="error" :message="$message" class="mb-4"/>

• Frequently Asked Questions
• Installation
• Dagger Component View Paths
  • Index Components
  • Moving Dagger Component Views
• Component Syntax and the Component Builder
  • Slots
    • Named/Scoped Slots
    • Checking if Slots Exist
  • Custom PHP When Using the Component Function
  • Calling Component Builder Methods
  • Renaming the Component Variable
• Data Properties/Attributes
• Notes on Conditional aware and props Directives
• Accessing Parent Data
  • Using the aware Directive
  • Using the aware Builder Method
  • Accessing Arbitrary Parent Data
  • Aware Variables and Attributes
• Property Validation
  • Shorthand Validation Rules
• Compiler Attributes
  • Escaping Compiler Attributes
• Conditionally Rendering Components
• Rendering Components for Each Item in a List
  • Automatically Inserting Prop Values
  • Inserting the Array Element as a Prop
• Caching Components
  • Dynamic Cache Keys
  • Specifying the Cache Store
  • Stale While Revalidate/Flexible Caching
• Component Name
• Component Depth
• Attribute Forwarding
  • Nested Attribute Forwarding
  • Variable Bindings and Attribute Forwarding
• Slot Forwarding
  • Nested Slot Forwarding
• Output Trimming
• Stencils
  • Rendering Default Stencil Content
  • Additional Notes on Stencils
• Mixins
  • Mixin Methods
  • Accessing the Component Instance Inside Mixins
  • Additional Notes on Mixins
• Attribute Cache
  • Slot Variables and the Attribute Cache
  • Considerations
• Static Template Optimizations
• Dynamic Components
• Custom Component Paths and Namespaces
  • Blade Component Prefix
• Compile Time Rendering
  • Disabling Compile Time Rendering on a Component
  • Enabling/Disabling Optimizations on Classes or Methods
  • Notes on Compile Time Rendering
• Component Compiler Callbacks
  • Hanling Inner Content
  • Wildcard Component Patterns
• The View Manifest
• License

Frequently Asked Questions

• How does the Dagger compiler differ from Laravel's component compiler?
• Is an additional build step required?
• Are class-based components supported?
• Will this magically make my existing Blade components faster?
• Can I use regular Blade components with Dagger components?
• Why are there JSON files in my compiled view folder?
• Are circular component hierarchies supported?
• Why build all of this?

How does the Dagger compiler differ from Laravel's component compiler?

The Dagger compiler is a multi-stage compiler that recursively parses and compiles a component's template ahead of time. Components compiled with the Dagger compiler will become part of the view's compiled output. Because of this, Laravel's related view events will not be fired when Dagger components are loaded.

Is an additional build step required?

An additional build step is not required. Dagger components will be compiled the first time you load your views. Dynamic Components will be compiled automatically the first time they are encountered.

Are class-based components supported?

Dagger only supports anonymous components, and there are no plans to support class-based components at this time. However, you may use Mixins to gain back some of the benefits of class-based components when authoring Dagger components.

Will this magically make my existing Blade components faster?

No. The Dagger compiler only interacts with components using one of the registered component prefixes (<c-, by default). While great care has been taken to support Laravel's features, such as @props, @aware, slots, etc., certain features, such as the attribute cache, may subtly change the behavior of components if they were not designed with these features in mind.

Converting existing anonymous components to Dagger components is a relatively painless process, however.

Can I use regular Blade components with Dagger components?

Yes. You may use both Blade and Dagger components within the same project.

Dagger components are also interopable with Blade components, and will add themselves to Laravel's component stack, making it seamless to use both. Because of this, you can use features such as @props and @aware between Dagger and Blade components like normal.

Why are there JSON files in my compiled view folder?

This is due to the View Manifest. The Dagger compiler and runtime will store which component files were used to create the final output in a JSON file, which is later used for cache-invalidation. The Dagger compiler inlines component templates, which prevents typical file-based cache invalidation from working; the View Manifest solves that problem.

Why build all of this?

Because I wanted to.

But more specifically, I am working on a number of projects that involve a lot of components and wanted to reduce the amount of overhead. Additionally, I also wanted to explore what could be done with a more advanced/involved compilation step to support features like Attribute Forwarding, Slot Forwarding, and the Attribute Cache.

Installation

Dagger requires at least Laravel version 11.9 and PHP 8.2.

To install Dagger, you may run the following:

composer require stillat/dagger

Afterwards you can run the following Artisan command to scaffold the required paths if you'd like to build Dagger components within your application:

php artisan dagger:install

After running the dagger:install command, you will find new directories within your application's resources directory:

resources/
  dagger/
    views/

Dagger Component View Paths

The views for Dagger components will live in resources/dagger/views/ instead of resources/views/components. This is to help differentiate them from Blade's anonymous components. The rules for Dagger component paths are the same as those for Blade's anonymous components.

If you had defined a component at resources/dagger/views/alert.blade.php, you may render it like so:

<c-alert />

Like with Blade's anonymous components, you may use the . character to indicate if a component is contained within a sub-directory. For a component defined at resources/dagger/views/inputs/button.blade.php, you may render it like so:

<c-inputs.button />

Index Components

Dagger components follow the same rules as Laravel's Anonymous Index Components, allowing you to group components