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.

Keywords

Javscript

html

FAQs

What is j2ht?

Is j2ht popular?

Is j2ht well maintained?

Package last updated on 13 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

j2ht

J2ht (Under Development)

Installation

Npm

Yarn

Demo

Basic Usage

For Merging Views only

Elements

Components

Keywords

Related posts

PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials

Socket Now Supports pylock.toml Files

Destructive npm Packages Disguised as Utilities Enable Remote System Wipe