UNPKG

tarkine

Version:

Tarkine - A lightweight and high-performance template engine for Node.js, designed for speed and simplicity.

186 lines (152 loc) 3.81 kB
<p align="center"> <img src="https://raw.githubusercontent.com/madhanmaaz/tarkine/master/logo.webp" height="300"> </p> <p align="center"> Tarkine - A lightweight and high-performance template engine for Node.js, designed for speed and simplicity. </p> [![npm version](https://img.shields.io/npm/v/tarkine.svg)](https://www.npmjs.com/package/tarkine) [![Downloads](https://img.shields.io/npm/dm/tarkine.svg)](https://www.npmjs.com/package/tarkine) [![License](https://img.shields.io/npm/l/tarkine.svg)](https://github.com/madhanmaaz/tarkine/blob/master/LICENSE) [![VSCode](https://img.shields.io/badge/vscode-extension-blue?logo=visualstudiocode)](https://marketplace.visualstudio.com/items?itemName=madhanmaaz.tarkine-vscode-extension) ## Installation ```bash npm install tarkine ``` ### Usage ```js const Tarkine = require('tarkine'); Tarkine.cache.enable(true); const output = Tarkine.renderFile("./template.tark", { username: "John Doe", html: "<span>Some HTML</span>", status: true }); console.log(output); ``` ### Usage in expressjs: ```js const Tarkine = require("tarkine") // import const express = require("express") const app = express() app.set("view engine", Tarkine.ext) // .tark files app.engine(Tarkine.ext, Tarkine.renderFile) app.get("/", (req, res) => { res.render("index", { username: "tarkine" }) }) app.listen(3000) ``` ### Usage in hono: ```js import { Hono } from "hono" import { honoRenderer } from "tarkine" const app = new Hono() app.use(honoRenderer({ views: "./views" })) app.get("/", (c) => { c.render("index", { username: "tarkine" }) }) ``` ## Syntax - Comments ```js {{# This is a comment }} ``` - Expression ```js {{ variable }} // Escaped output {{- variable }} // Unescaped output ``` - Conditionals ```js <!-- condition --> {{:if status }} // content {{:else if status == 0 }} // content {{:else}} // content {{/if}} ``` - Loops ```js <!-- loops --> {{:for value, index in array }} // content {{/for}} {{:for value, key in object }} // content {{/for}} ``` - Includes ```js {{- include("./header", { links: ["home", "code", "about"] }) }} ``` - Code Execution ```js {{~ // JavaScript code here }} ``` - Conditionals Void Attributes ```js <div> <button disabled="isLoggedIn">Login</button> <button disabled="isLoggedIn === true">Login</button> </div> ``` - Macros ```js {{:macro button(text, ...classes) }} <button class="{{ classes.join(' ') }}">{{ text }}</button> {{/macro}} {{- button("Login", "btn", "is-primary") }} ``` - Layouts (Extend & Slot) - Define layout: ```html <!-- layout.tark --> <!DOCTYPE html> <html> <head>{{- head }}</head> <body>{{- body }}</body> </html> ``` - Use layout: ```html {{:extends "./layout"}} {{:slot "head"}} <title>Page Title</title> {{/slot}} {{:slot "body"}} <main><h1>Hello Layout</h1></main> {{/slot}} {{/extends}} ``` ### Add Custom Data - Global data can be registered and used across all templates: ```js const Tarkine = require('tarkine') Tarkine.store.set("default", { siteName: 'My Website', description: "...." }) ``` - Access in template: ```html <title>{{ $.default.siteName }}</title> ``` # Browser support ```html <script src="https://cdn.jsdelivr.net/npm/tarkine@latest/src/browser.min.js"></script> <script> const output = Tarkine.render("<h1>{{ name }}</h1>", { name: "Tarkine" }) console.log(output) </script> ``` # VSCode Extension Support - [Tarkine VS code extension](https://marketplace.visualstudio.com/items?itemName=madhanmaaz.tarkine-vscode-extension)