j2ht

v1.1.0

Published

4 years ago

Javascript to html template engine.

0High
0Medium
0Low

trapcode

Javscript html

J2ht (Under Development)

J2ht is a Javascript to html template Engine

The idea came when I stumbled upon this library html-creator, and before then i have always wanted to extend html without using any template engine just some codes, and I ended up with a template engine lol.

It may feel weird when you think about it but I find it kinda fun and hope you do too.

Installation

Npm

npm i j2ht

Yarn

yarn add j2ht

Demo

If you clone this repo there are some examples you can examine using your I.D.E

npm run test:basic - A basic console example
npm run test:server - A server example using Xpresser
npm run test:merge - An example showing how to import views and merge them.

Basic Usage

const {pretty, RawHtml, Elements} = require('j2ht');
const {Doctype, Html, Head, Title, Body, H2, H5} = require('j2ht/js/elements');

const user = 'paul';

const template = Elements(
    Doctype(),
    Html(
        Head(Title('My First App')),
        Body(
            H2('Hello World'),
            RawHtml(`<h5>A message from RawHtml</h5>`),
            
            // Conditional views. 
            user === 'paul' ?
                H5('Hey Paul 👋') : H5('Hey unknown user! 😏')
        ),
    )
)

console.log(pretty(template));

This will return

<!DOCTYPE html>
<html>
  <head>
    <title>My First App</title>
  </head>

  <body>
    <h2>Hello World</h2>
    <h5>A message from RawHtml</h5>
    <h5>Hey Paul 👋</h5>
  </body>

</html>

For Merging Views only

File Structure

-html
    -footer.html
    -header.html
    -Home.html
app.js

app.js

const {pretty, Elements, FromFile} = require('j2ht');

const template2 = Elements(
    FromFile(__dirname + '/html/header.html'),
    FromFile(__dirname + '/html/Home.html'),
    FromFile(__dirname + '/html/footer.html'),
)

console.log(pretty(template2));

Elements

For now only few html elements are out of the box. i will add new ones in the near future. But adding yours is not difficult.

if you take a look at the elements.ts file you can see how default elements are created. For example <div> was created using the following line

const {HtmlElement} = require('j2ht');
exports.Div = (...contents) => new HtmlElement('div').content(contents);

// To create a table element
exports.Table = (...contents) => new HtmlElement('table').content(contents);

Every HtmlElement instance has a render() method that builds it and returns html data

const {Div, H1} = require('j2ht/js/elements');

const component = Div(H1('Hello World'))

console.log(component.render());

Calling .render() will render and return


<div><h1>Hello World</h1></div>

Components

j2ht being javascript can be easily extendable.

Lets make a bulma buttons component bulma-buttons.js

const {Button} = require('j2ht/js/elements');

exports.PrimaryButton = (...content) => Button(...content).class('button is-primary');
exports.SuccessButton = (...content) => Button(...content).class('button is-success');

Notice how we always use spread operators? this is because of the syntax concept where Elements are functions, and their arguments are child contents.

const {Div} = require('j2ht/js/elements');
const {PrimaryButton, SuccessButton} = require('./bulma-buttons');

Div(
    PrimaryButton('Save'),
    SuccessButton('Cancel')
)

Div is a function while it's children are arguments. you can also pass them as an array.

Div([
    PrimaryButton('Save'),
    SuccessButton('Cancel')
])

Both will render

<div>
    <button class="button is-primary">Save</button>
    <button class="button is-danger">Cancel</button>
</div>

I will keep adding more features and maybe along the line i will find more use for it. Feel free to contribute if you like this project.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme