agateemele

Agateemeéle

Dos mesmos criadores de XanaScript™.

O Agateemeéle é uma template engine server-side para Node.js + Express, feita para transformar HTML em algo muito mais engraçadoKKKKK, sem perder poder.

Arquivos .agtml são compilados para JavaScript, possuem suporte a:

• renderização server-side
• includes
• condicionais
• loops
• helpers
• filters
• expressões reais JS
• async/await
• cache automático
• source maps
• integração direta com Express

Instalação

npm install agateemele

Uso com Express

import express from "express";
import agtml from "agateemele";

const app = express();

app.engine("agtml", agtml.__express);

app.set("view engine", "agtml");
app.set("views", "./views");

app.get("/", (req, res) => {
    res.render("home", {
        nome: "flazo0",
        usuario: {
            admin: true
        }
    });
});

app.listen(3000);

Estrutura

views/
 ├── home.agtml
 ├── header.agtml
 └── footer.agtml

Sintaxe básica

Variáveis

<ego>{{ nome }}</ego>

Resultado:

<h1>Flazo</h1>

Expressões reais

Tudo dentro de {{ }} aceita JavaScript:

{{ nome.toUpperCase() }}

{{ preco * quantidade }}

{{ produtos.length }}

{{ online ? "ON" : "OFF" }}

Condicionais

@se

@se usuario.admin
   <ego>ADMIN</ego>
@fim

@senao

@se usuario.admin
   <ego>ADMIN</ego>
@senao
   <ego>USUÁRIO</ego>
@fim

Loops

@para

@para produto em produtos
   <resenha>
      {{ produto.nome }}
   </resenha>
@fim

Também aceita expressões:

@para item em produtos.filter(x => x.ativo)

Includes

@include("header")

<ego>Página</ego>

@include("footer")

Helpers

Helpers são funções globais disponíveis no template.

Registrar helper

import agtml from "agateemele";

agtml.helper("money", valor => `R$ ${valor}`);

Usar no template

{{ money(preco) }}

Filters

Filters transformam valores usando pipe.

Registrar filter

agtml.filter("upper", valor => valor.toUpperCase());

agtml.filter("lower", valor => valor.toLowerCase());

Usar

{{ nome | upper }}

{{ nome | lower }}

Com argumentos:

agtml.filter("prefix", (valor, p) => p + valor);

{{ nome | prefix("Sr. ") }}

Async / Await

Agateemeéle suporta async nativamente.

Await em expressões

{{ await buscarUsuario() }}

Await em helpers

{{ await buscarPreco() }}

Includes async

@include("header")

Tudo já suporta Promises automaticamente.

Cache automático

Templates compilados ficam em memória automaticamente.

Primeira renderização:

.agtml -> compile -> cache

Próximas:

cache -> render

Sem configuração.

Source Maps

Erros apontam para a linha real do .agtml.

Exemplo:

Erro em views/home.agtml:18

ReferenceError:
nome is not defined

Muito melhor para debug.

Tags oficiais do Agateemeéle

Estrutura

HTML	Agateemeéle
html	agateemeéle
head	celebro
body	corpinho
main	fahhh
section	area51
header	entrada_triunfal
footer	jae
nav	mapadoscria

Texto

HTML	Agateemeéle
h1	ego
h2	aura
p	resenha
span	betinha
strong	brutal
blockquote	fofoca

Containers

HTML	Agateemeéle
div	lixao
form	slk
label	olhaisso

Inputs

HTML	Agateemeéle
input	digitae
select	escolheai
option	vai_nessa_bro
button	clicaai

Mídia

HTML	Agateemeéle
img	shape
video	cineminha
audio	escutae
canvas	rabisco

Sistema

HTML	Agateemeéle
style	drip
script	xanascript
meta	hehe

Links

HTML	Agateemeéle
a	legoKKKK

Exemplo completo

<agateemeéle>
<celebro>
   <hehe charset="UTF-8">
   <ego>{{ titulo }}</ego>
</celebro>

<corpinho>
@include("header")

@se usuario.admin
   <ego>
      Bem vindo,
      {{ nome | upper }}
   </ego>
@senao
   <ego>
      Olá,
      {{ nome }}
   </ego>
@fim

@para produto em produtos
   <lixao>
      <resenha>
         {{ produto.nome }}
      </resenha>

      <resenha>
         {{ money(produto.preco) }}
      </resenha>
   </lixao>
@fim

</corpinho>
</agateemeéle>

API

helper(name, fn)

Registra helper global.

agtml.helper("money", fn);

filter(name, fn)

Registra filter global.

agtml.filter("upper", fn);

renderFile(path, data)

Renderiza manualmente.

const html =
  await agtml.renderFile("./views/home.agtml", data);

__express

Engine pronta para Express.

app.engine("agtml", agtml.__express);

Filosofia

Agateemeéle existe porque template engine não precisa ser chata.

Código precisa funcionar.

Se puder fazer isso com:

<ego>{{ nome }}</ego>

melhor ainda.

Xana Labs™

Dos mesmos criadores de XanaScript™.