📜 ⬆️ ⬇️

Blade syntax extension

I want to share with the community my small library, which adds control directives to the Blade Laravel-templating syntax.

Just a small example of how it looks:

<div bd-if="$entry->active" bd-class="$entry->active ? 'active'"> <ul> <li bd-foreach="$entry->items as $item">{{{ $item }}}</li> </ul> </div> 

After exploring Angular.js, the familiar patterns began to seem illogical and inconvenient. I wanted to manage tags and attributes, and not to treat HTML as with a regular line. Blade Blade makes it easy to expand the functionality, which I used.
')

Installation


  1. Add the package "sleeping-owl / blade-extended" to your composer.json.
  2. Add a service provider to your “app / config / app.php” - 'SleepingOwl \ BladeExtended \ BladeExtendedServiceProvider'.
  3. Extended syntax is now available to you.

How it works


The library is trivially simple - all it does is convert attributes into the correct Blade syntax. So for example the code:

 <span bd-if="test()"></span> <div bd-foreach="$items as $item"><div class="title">{{{ $item }}}</div></div> 

will be reduced to:

 @if(test())<span></span>@endif @foreach($items as $item)<div><div class="title">{{{ $item }}}</div></div>@endforeach 

The situation with the tag attributes is somewhat more complicated - the helper is used here, which displays the attribute only if it contains a value.

Supported Directives


bd-foreach , bd-inner-foreach
Repeats the entire tag (bd-foreach), or the entire contents of the tag (bd-inner-foreach) in accordance with the specified values.

bd-if
Displays or not the tag depending on the condition.

bd-class
Adds one or more classes to an element; you can use conditions. If the tag has a class attribute already defined, new classes will be added to it.

 <div class="post" bd-class="$entry->active ? 'active', $entry->isInFuture() ? 'in-future' : 'in-past'"></div> 

bd-attr- <attribute name>
It works in the same way as bd-class, but does not support multiple values ​​and additions to an existing attribute.

 <div bd-attr-id="$entry->id" bd-attr-data-type="$entry->type"></div> 

bd-yield , bd-include
These directives add corresponding Blade commands to the tag body.

 <div bd-yield="'content'"></div> 

bd-section
Frames the tag in the blade section.

 <div bd-section="'content'"></div> 


Want more syntax?


The functionality of my library, which extends Blade's capabilities, can also be extended. You can register your attributes to be processed:

 BladeExtended::extend('bd-test', function (BladeExtended $bladeExtended, &$finded) { $bladeExtended->wrapOuterContent($finded, '@if(myCustomTest())', '@endif'); }); 


Sources on GitHub | Documentation and examples

Source: https://habr.com/ru/post/242715/


All Articles