README

Un motor de plantillas para PHP ligero, rápido y con sintaxis inspirada en Blade. Diseñado para microframeworks, sin dependencias pesadas y con soporte nativo para Layouts y Componentes.

🚀 Características

Cero Dependencias: Funciona con PHP nativo.
Alto Rendimiento: Sistema de caché inteligente con invalidación de OPcache (solo recompila si la vista cambia).
Sintaxis Elegante: Compatible con directivas de Blade ({{ }}, @if, @foreach).
🎨 Scoped CSS & JS: Estilos y scripts encapsulados nativamente (estilo Vue/Svelte).
📦 Frontmatter Imports: Importa clases y define lógica al inicio del archivo (estilo Astro).
🧩 Componentes HTML: Sintaxis moderna <x-alerta type="error" />.
🌐 Datos Globales: Comparte variables ($user, $config) con todas las vistas fácilmente.
Seguro: Escapado automático de XSS en variables y modo @verbatim para Vue/Alpine.

📦 Instalación

Instala el paquete vía Composer:

composer require erick-arch-bit/nano-template-engine

⚙️ Configuración Rápida

use Nano\TemplateEngine\Engine;

require 'vendor/autoload.php';

// 1. Instancia el Motor
$view = new Engine(
    viewsPath: __DIR__ . '/views',
    cachePath: __DIR__ . '/cache',
    extension: '.nano' // Extensión por defecto
);

// 2. (Opcional) Compartir datos globales con todas las vistas
$view->share('siteName', 'Mi App Increíble');
$view->share('user', $_SESSION['user'] ?? null);

// 3. Renderizar
echo $view->render('home', ['titulo' => 'Bienvenido']);

📖 Guía de Uso

Frontmatter y Lógica (___)

Separa tu lógica PHP del HTML usando bloques ___ al inicio del archivo. Soporta una sintaxis limpia de importación.

___
@use { User } from 'App\Models'
@use { Str } from 'Illuminate\Support'

$user = User::find(1);
$name = Str::upper($user->name);
___

<h1>Perfil de {{ $name }}</h1>

Scoped CSS & JS (Encapsulamiento)

Define estilos y scripts que solo afectan al componente actual. Nano genera atributos únicos (data-n-xyz) y aísla el JS automáticamente.

Archivo: views/components/boton.nano

<button class="btn">
    {!! $slot !!}
</button>

<style scoped>
    .btn { background: #3490dc; color: white; padding: 10px; border-radius: 5px; }
</style>

<script scoped>
    const btn = document.querySelector('.btn');
    btn.addEventListener('click', () => console.log('Click en botón aislado'));
</script>

Componentes Modernos ()

Usa la sintaxis HTML nativa para renderizar componentes.

<x-card title="Panel de Control" :user="$user">
    Este es el contenido del slot principal.
</x-card>

Layouts y Stacks (Requerido)

Para que el CSS/JS Scoped funcione, debes agregar los stacks en tu layout maestro.

Archivo: views/layouts/app.nano

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
    @stack('nano_css')
</head>
<body>
    @yield('content')

    @stack('nano_scripts')
</body>
</html>

5. Utilidades y Helpers

Nano incluye helpers para agilizar el desarrollo:

Clases Condicionales:

    ```html
    <!DOCTYPE html>
    <html>
    <head>
        <title>@yield('title')</title>
        @stack('nano_css')
    </head>
    <body>
        @yield('content')

        @stack('nano_scripts')
    </body>
    </html>
    ```

Formularios:

    ```html
    <form method="POST">
        @csrf              @method('PUT')     <input type="checkbox" @checked($isActive)>
    </form>
    ```

Ignorar Sintaxis (Vue/Alpine):

    ```html
    @verbatim
        <div id="app">{{ message }}</div> @endverbatim
    ```

Inyección de Servicios:

    ```html
    @inject('metrics', 'App\Services\MetricsService')
    <p>Visitas: {{ $metrics->count() }}</p>
    ```

erick-arch-bit / nano-template-engine

Maintainers

Package info

Statistics

Security