Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

j2ht

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

j2ht

Javascript to html template engine.

1.1.0
latest
Source
npm

Version published: 3 years ago

Maintainers: 1

Created: 4 years ago

Source

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.

Keywords

FAQs

What is j2ht?

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