fastapp

v0.1.2

Published

2 years ago

A html template engine design to create web apps.

Downloads

0High
0Medium
0Low

axfab

html template engine web-apps apps expressjs webserver

FastApp

A html template engine design to create web apps.

Installation

npm install fastapp

Features

Complies with the Express web rooter.
Mark command tag using#{ code /}

Commands

The markup language is composed of tag of this form:

#{command first_Arg, second_Arg, ... /}

The available commands are:

set: Assign the value of the expression(2) to the variable name(1).
get: Replace this tag by the value of the expression(1).
get_if: If the condition(1) is true, replace this tag by the value of the expression(2) else by the second expression(3).
include: Insert the content of the file indicate by the value of the expression(1).
doLayout_: Insert the content of the child template.
extends_: Define the parent of this template (see extends).

#{set title,'MyPage' /}
#{set menu,'home' /}
#{extends '/model.html' /}
<div>...</div>
#{include '/menu-' + menu + '.html' /}
<p>Bienvenue sur #{get title/}</p>

Usage

You can use this script of three different ways. On command line: > node lib/fastapp.js [html_file]

On your script:

var fapp = require ('fastapp')
fapp.buildFile(path, null, function (err, data) {
 //...
});

Using Express:

var fapp = require('fastapp'),
    express = require('express'),
    app = express(),
    option = { /* ... */ }

// What's on /dist folder is freely accessible
app.get('/dist', express.static(__dirname + '/dist'));
// For the rest, we use the engine
app.get('/views', fapp.lookAt(__dirname + '/views', option));

app.listen(80);

Options

cache If true, will keep static page into memory.
params Array of values accessible via params.name
query Array of values accessible via params.query
debug Output debug information
open Open tag, defaulting to "#{
close Closing tag, defaulting to "/}"
directory Change of directory (default is ./views)

Extends

A real advantage about this template is to insert content of other pages. You have two way of doing this, the extends and include commands.

The extends allow to define a parent. This is always the last executed command on the page.

Example

./views/model.html

<html>
  <head>
    <title>#{get title/}</title>
    ...
  </head>
  <body>
    <header>
    ...
    #{include '/menu.html' /}
    </header>
    <div id="content">
    #{doLayout /}
    </div>
    <footer>...</footer>
  <body>
<html>

./views/index.html

#{set title 'MyPage' /}
#{set menu, 'home' /}
#{extends '/models.html' /}
<h1>Welcome #{get_if query.user!=null, query.user, 'new visitor'}!</h1>
<p>This is my page</p>

./views/menu.html

<ul class="nav">
  <li class="#{get_if menu=='home', 'active'/}"><a href="#">Home</a>
  <li class="#{get_if menu=='ptfl', 'active'/}"><a href="#">Portfolio</a>
  <li class="#{get_if menu=='about', 'active'/}"><a href="#">About</a>
</ul>

RENDER (indentation corrected) /index.html?user=Fab

<html>
  <head>
    <title>MyPage</title>
    ...
  </head>
  <body>
    <header>
    ...
      <ul class="nav">
        <li class="active"><a href="#">Home</a>
        <li class=""><a href="#">Portfolio</a>
        <li class=""><a href="#">About</a>
      </ul>
    </header>
    <div id="content">
      <h1>Welcome Fab!</h1>
      <p>This is my page</p>
    </div>
    <footer>...</footer>
  <body>
<html>

License

This code is under the BSD 3-Clause license.