QuickViewJS: um template engine JavaScript peso-pena · tamadeu

E aí galera. Blz?

Então, tenho trabalhado em algo que é bastante útil para iniciantes, projetos de pequeno e médio porte e apenas pessoas que estão estudando ou algo assim.

Chama-se QuickView.js
QuickView é um template engine bem leve baseado em JavaScript, projetado para renderizar páginas HTML dinamicamente. Ele oferece uma sintaxe simples para incorporar variáveis e executar instruções condicionais e loops em arquivos HTML.

Vocês podem ver o repositório aqui: https://github.com/tamadeu/QuickViewJS

Ainda há muito trabalho a fazer (como loops em for, por exemplo. Por enquanto consegui incorporar apenas o foreach). Mas você pode fazer algumas coisas por enquanto, como um loop foreach, condicionais e incluir outros arquivos html em outro.

O uso é bastante simples.
Basta adicionar ao seu arquivo html e começar suas renderizações!

Em algum arquivo javascript ou código embutido você pode simplesmente adicionar a função qv() e começar a adicionar variáveis, como:

qv({
   "siteName": "Meu Site",
   "usuarios": [
     {"nome": "Alice", "idade": 25},
     {"nome": "Bob", "idade": 30}
   ]
});

Então, no seu código HTML você pode simplesmente chamar suas variáveis. Por exemplo:

<h1>{{ siteName }}</h1>

Agora, digamos que você tenha um menu.html e queira-o em seu index.html. Tudo o que tem a fazer é:

@include('menu')

E é isso. Seu menu.html é adicionado ao seu index.html sem nenhum código extra em seu menu.html ou qualquer outro lugar.

Você pode conferir um pequeno projeto com essas funcionalidades aqui: https://tamadeu.github.io/quickview_project/

De qualquer forma, quaisquer contribuições, sugestões, críticas ou o que quer que seja são bem-vindas.