README

🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷

Navalha (is a joke with "Razor" name in portuguese) is a small framework written for Laravel, which allows binding of Laravel data on the server-side to AlpineJS variables.

How to Install

Run the follow command to install Navalha.

composer require wallacemaxters/laravel-navalha

And publish assets

php artisan vendor:publish --tag=navalha-assets

Now, your need to add @navalhaStyles and @navalhaScripts in the <head> tag of your template.

Generate a Component

php artisan navalha:make-component Products

This command will generate resources/views/navalha/products.blade.php view and app/Navalha/Products.php class.

To render the component, your need to writen the follow code:

@navalha("Products")

Navalha component example

In follow example, we will paginate the data of Product Eloquent model in server-side component. In the view, the values will be convert to AlpineJs variables.

See:

namespace App\Navalha;

use App\Models\Product;
use WallaceMaxters\Navalha\Component;

class Products extends Component
{
    public function mount(): void
    {
        $this->paginate(1);
    }

    protected function data(): array
    {
        return [
            'page'     => 1,
            'products' => null,
        ];
    }

    public function paginate(int $page)
    {
        $this['products'] = Product::query()->paginate(3, page: $page);
        $this['page'] = $page;

        // or
        // $this->set('page', $page);
    }

    public function render()
    {
        return view("navalha.products");
    }
}

Code of resources/views/navalha/products.blade.php:

<div x-bind:class="{'opacity-0 duration-1000' : !$n.$busy('paginate')}">
    Carregando...
</div>
<div class="space-y-4" >
    <template x-for="item in products.data">
        <div class="bg-neutral-300 p-3 rounded-lg shadow">
            <span x-text="`this is a text ${item.name}`" />
        </div>
    </template>

    <nav class="flex gap-2">
        <template x-for="i in products.last_page">
            <a  x-bind:class="{'opacity-50' : i === products.current_page}"
                x-on:click="$n.paginate(i)"
                x-text="i"
                class="text-blue-500 cursor-pointer p-2"></a>
        </template>
    </nav>
</div>

Code of welcome.blade.php:

<html>
<head>
    @navalhaStyles
    @vite(['resources/css/app.css'])
    @navalhaScripts
</head>
<body>
    <div class="max-w-6xl mx-auto p-8">
        <h1 class="text-3xl font-bold">Navalha Example</h1>
        @navalha('Products')
    </div>
</body>
</html>

Code of route:

Route::view('/', 'welcome');

Navalha special frontend variables and methods

Variable	Type	Description
$n.$busy(String\|undefined)	Function	Indicates that an specifiy or any method is called from the server.
$n.$errors(String\|undefined)	Function	Get an or many validation errors.
$n.[method]()	Function	Call a public method of component in Laravel side.
$n	Object	This a special object from Navalha that allows make methods call like $call().

Handle Server Errors

Your can detect errors on call Navalha method with navalha-errors event.

Example:

<div x-on:navalha-error="console.log($event.detail)">
    <button x-on:click="$navalha.notExistsMethod()">Test</button>
</div>

wallacemaxters / laravel-navalha

Maintainers

Details