1.0.3 • Published 3 years ago

@crster9600/crster-html v1.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

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>
1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago