🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

j2ht

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

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
Weekly downloads
0
-100%
Maintainers
1
Weekly downloads
 
Created
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

Javscript
html

FAQs

Package last updated on 13 Nov 2021

Did you know?

Socket

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

Related posts