Use Emmet Style Abbreviation for Laravel Blade Components

Laravel Blade Emerald is a package by Aqua that utilize emmet style abbreviation to generate and wrap Laravel Blade Component with markup.

Features

• Generate HTML in a Blade file via package provided component: x-markup make=“div.col>span#alert”
• Emmet style syntax to produce nested markup
• Wrap around any content / another component with markup
• Make any Blade Component accept abbreviation to wrap itself with markup ( doesn’t work for Anonymous Components )

Installation

You can install this package via composer:

composer require aqua/blade-emerald

Usage

The package provides a Blade Component
x-emerald-markup, This component can be used like x-markup as an alias. The component support one prop named make which accept the abbreviation

Generate static nested markup

<x-markup make="div.card[style='color:green;'] > div.card-body#box" />

Produced HTML

<div class="card" style="color:green;">
    <div class="card-body" id="box"></div>
</div>

Wrap Some Content

<x-markup make="div.col>div.alert.alert-success[role=alert]">
    <strong>Success !</strong> give it a click if you like.
</x-markup>

Produced HTML

<div class="col">
    <div class="alert alert-success" role="alert">
        <strong>Success !</strong> give it a click if you like.
    </div>
</div>

Accept abbreviation in your Blade Component

This feature doesn’t support Anonymous Components

1. Use Aqua\Emerald\Traits\Markup trait in your Component Class

class YourComponent extends Component {
    use Markup;
    ...

2. The Markup trait assumes the prop name to be a wrap, so let’s add this as a class property & instantiate.

public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion
read more about constructor property promotion

3. Accept Abbreviation

<x-your-component wrap=".card.bg-dark.pt-2 > .card-body.text-danger" />

Produced HTML

<div class="card bg-dark pt-2">
    <div class="card-body text-danger">
        <!-- actual content of your-component -->
        <p>Laravel... The PHP Framework for Web Artisans</p>
        <!-- actual content of your-component -->
    </div>
</div>

4. Accept abbreviation using the prop of your choice to customize the prop name that receives the abbreviation create a static property $wrapby and set its value to your prop name.

class YourComponent extends Component {
    use Markup;

    protected static $wrapby = 'markup'; 

    public function __construct(public $markup, ...) {
                                        
    }
    ...

<x-your-component markup=".card.bg-dark.pt-2 > .card-body.text-danger" />              

For more details, You can visit its complete documentation and source code on Github.