1.0.3 • Published 3 years ago
@crster9600/crster-html v1.0.3
Crster HTML
Crster HTML
is a template engine primarily used in expressjs
Syntax Example
<view {layout}>
<block {body}>
<p>This will be rendered inside "layout > body" block</p>
<p>{variable.name} passed from render()</p>
</block>
<!-- This is a for loop sample -->
<ul>
<for {animal of animals}>
<li>{animal}</li>
</for>
</ul>
</view>
Quick Start
nodejs
var chtml = require('crster-html');
var data = { world: "Template engine" }
var output = chtml.render('<p>Hello {world}</p>', data);
// <p>Hello Template engine</p>
express
const express = require("express")
const chtml = require("crster-html")
const app = express()
app.engine("html", chtml.expressViewEngine)
app.set("view engine", "html")
app.set("views", "./src/views")
Render Expression
<p>One + Two = {1 + 2}</p>
Render List
<for {user of users}>
<p>{user.name}</p>
</for>
Render Condition
<switch {users.length}>
<case {0}>
<p>No result found</p>
</case>
<case {1}>
<p>The choosen one</p>
</case>
<case {5}>
<p>The best five</p>
</case>
<case {}>
<p>This is switch default</p>
</case>
</switch>
Render Layout + Extending Block
Create layout.chtml
<!-- This code inside layout file -->
<html>
<head>
<block {css}>
<style>
body {
color: blue;
}
</style>
</block>
</head>
<body>
<block {body}/>
<block {script}/>
</body>
</html>
Create welcome.chtml
<view {layout}>
<block {css}>
<style>body { color: red }</style>
</block>
<block {body}>
<p>Markup goes here!</p>
</block>
</view>