haje v0.1.1

Overview

HAJE (HTML As Javascript Engine) is the lightest rendering engine for Express or standalone use. Unlike other rendering systems, like pug or ejs, the views are written in pure javascript and compiled when launching the application server.

A simple example

 
const express=require("express")    
const haje=require('../../haje')    // First we need to include the HAJE module
eval(haje.tagFunctions())           // then bring the HTML tag functions into current module space

app=express()
  .get('/example1', function(req,res) {
    let s =  
      $document([                   // Create a top-level document objects.
        $h1("It works !")           // Then add children.
      ])
    res.end(s.toHTML())             // Finally send to the response.
  })
  .listen(3000)

En example using rendering ending interface

The server

const express=require("express")    
const haje=require('../../haje')    // First we need to include the HAJE module

example2View = require('./views/example2.js').myView

app=express()
  .use(haje.middleware)             // Using the middleware add the _render_ method to response object
  .get('/example1', function(req,res) {
    let s =  
      $document([                   // Create a top-level document objects.
        $h1("It works !")           // Then add children.
      ])
    res.end(s.toHTML())             // Finally send to the response.
  })
  .get('/example2', function(req,res) {
    res.render(example2View, {name: "Your name here"}) 
  })  
  .listen(3000)

The view

const haje=require('../..')   // Import haje module
eval(haje.tagFunctions())     // Import tag functions into this module


module.exports.myView = function(data){
  return $document([                                                    // Top level is perferably a document
      $doctype("html"),                                                 // Specify a doctype
      $head(),
      $body([                                                           // Body
        $h1({style:"border-bottom: 1px solid silver" },                 // Use of HTML attributes
                "Example2: simple view"),                                   
        $p(`This demonstrates a simple HTML page with ${data.name}`)    // Including data from the view parameters
      ])
  ])
}  

How-to

Using the rendering engine with your application server

You need to first use the middleware that will add render method to the response object:

app.use(haje.middleware)

In the file that contains your page controller, include the view (here we use the "views" folder):

example2View = require('./views/example2.js').myView

In your page you would use the view as a parameter when calling render method:

  .get('/example2', function(req,res) {
    res.render(example2View, {name: "Your name here"}) 
  })  

Finally you need to create the example2.js view file in views folder:

const haje=require('../..')   // Import haje module
eval(haje.tagFunctions())     // Import tag functions into this module


module.exports.myView = function(data){
  return $document([                                                    // Top level is perferably a document
      $doctype("html"),                                                 // Specify a doctype
      $head(),
      $body([                                                           // Body
        $h1({style:"border-bottom: 1px solid silver" },                 // Use of HTML attributes
                "Example2: simple view"),                                   
        $p(`This demonstrates a simple HTML page with ${data.name}`)    // Including data from the view parameters
      ])
  ])
}  

Pass data to the view Data can be passed to the view in the second parameter when calling render. The type must match what the view expects:

In the controller you would write (not the name passed in the data object):

  .get('/example2', function(req,res) {
    res.render(example2View, {name: "Your name here"}) 
  })  

The view is responsible for processing the data passed as a single parameter:

module.exports.myView = function(data){                                 // Don't forget the formal parameter here
  return $document([  
      $doctype("html"), 
      $head(),
      $body([ 
        $h1({style:"border-bottom: 1px solid silver" }, 
                "Example2: simple view"),                                   
        $p(`This demonstrates a simple HTML page with ${data.name}`)    // Including data from the view parameters
      ])
  ])
}