# haje

> HTML As Javascript for Express. A view engine.

Latest version **0.1.1** (published 2022-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install haje
pnpm add haje
yarn add haje
bun add haje
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-04-12 |
| First published | 2022-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Stephane Potelle |
| Maintainers | stefpo |
| Keywords | express, view, javascript, html |

## Links

- npm: https://www.npmjs.com/package/haje
- Repository: https://github.com/stefpo/haje
- Homepage: https://github.com/stefpo/haje#readme
- Issues: https://github.com/stefpo/haje/issues
- npm.io page: https://npm.io/package/haje

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2022-04-12
- 0.1.0 — 2022-04-10

## README

# 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**
```javascript
 
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
```javascript

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
```javascript
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:
```javascript
app.use(haje.middleware)
```

In the file that contains your page controller, include the view (here we use the "views" folder):
```javascript
example2View = require('./views/example2.js').myView
```
In your page you would use the view as a parameter when calling _render_ method:
```javascript
  .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:
```javascript
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):
```javascript
  .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:
```javascript
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
      ])
  ])
}  
```

---
_Source: https://npm.io/package/haje · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._