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.
npm i j2htyarn add j2htIf 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.
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>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));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>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.