Overview

BLOCS is an extension package that makes Blade of Laravel more convenient. You can describe the repetitive processes such as displaying a list of books in the Blade template as follows.

@foreach($books as $book)
    <tr>
        <td>{{ $book->id }}</td>
        <td>{{ $book->title }}</td>
        ...
        <td>
            @foreach($book->tags as $bookTag)
                <span>{{ $bookTag->name }}</span><br>
            @endforeach
        </td>
        ...
    </tr>
@endforeach

You can describe a similar process with BLOCS as follows. We are developing BLOCS with the aim of creating a template engine that can be written in a simple way, utilizing the structure of HTML without destroying it.

<tr data-loop=$books>
    <td>{{ $book->id }}</td>
    <td>{{ $book->title }}</td>
    ...
    <td>
        <span data-loop=$book->tags data-assign=$bookTag>{{ $bookTag->name }}</br></span>
    </td>
    ...
</tr>

Features

<div class="error" data-exist=$error>{{ $message }}</div>

<form method="post">
@csrf
<label for="name">Name</label>
<input type="text" id="name" name="name" data-filter="katakana" required />

<!-- data-form="name" data-validate="required" data-lang="This is a required field." -->
@error("name") <div>{{ $message }}</div> @enderror
<input type="submit" />
</form>

/routes/web.php
Line 2: Add Warning 

Route::get("/blocs", function () {
  \Blocs\Option::add("level", ["2" => "Warning"]);

  return view("example", [
    "level" => "2"
  ]);
});

/resources/views/example.blocs.html 

<html>
<form>
  <select name="level">
    <option value="">No error</option>
    <option value="1">Fatal error</option>
  </select>
</form>
</html>

http://127.0.0.1:8000/blocs 

<html>
<form>
  <select name="level">
    <option value="">No error</option>
    <option value="1">Fatal error</option>
    <option value="2" selected>Warning</option>
  </select>
</form>
</html>

Installation

Please install by composer.

laravel-app % composer require blocs/blocs    
Info from https://repo.packagist.org: #StandWithUkraine
Using version dev-main for blocs/blocs
./composer.json has been updated
Running composer update blocs/blocs
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking blocs/blocs (dev-main 1c25ad6)
Writing lock file
Installing dependencies from lock file (including require-dev)

Ststem requirements

Laravel >= 7
php >= 7.2.5

Quick guide

The file name of the BLOCS template is *.blocs.html. Data attributes data-* can be described in two ways: tag style, in which attributes are added to HTML tags, and comment style, in which attributes are described in comments. 4 types of data attributes are described in tag style and comment style to generate HTML dynamically.

Tag style

Tag style is a description method for adding data attributes to HTML tags. The data attribute added to the start tag affects even the end tag. In the example below, the value of $message replaces all content between the div. The added data attributes will be removed in the generated HTML.

/routes/web.php 

Route::get("/blocs", function () {
  return view("example", [
    "error" => true,
    "message" => "A fatal error has occurred."
  ]);
});

/resources/views/example.blocs.html
Line 2: If $error is true, $message is output. 

<html>
<div class="error" data-exist=$error data-val=$message>Message</div>
</html>

http://127.0.0.1:8000/blocs 

<html>
<div class="error">A fatal error has occurred.</div>
</html>

Comment style

Comment style is used when loading other templates or dynamically adding attributes to HTML tags. The data attribute data-attribute replaces the attribute value of the HTML tag following the comment style. In the example below, if $error is false (no error occurred), the class of the div is set to success. Tag style and comment style can be used together.

/routes/web.php 

Route::get("/blocs", function () {
  return view("example", [
    "error" => false,
    "message" => "No error has occurred."
  ]);
});

/resources/views/example.blocs.html
Line 2: If $error is false, class is replaced with success. 

<html>
<!-- data-attribute="class" data-val="success" data-none=$error -->
<div class="error" data-val=$message>Message</div>
</html>

http://127.0.0.1:8000/blocs 

<html>
<div class="success">No error has occurred.</div>
</html>