https://github.com/trapcodeio/j2ht
A javascript to html Template Engine
https://github.com/trapcodeio/j2ht
Last synced: 8 months ago
JSON representation
A javascript to html Template Engine
- Host: GitHub
- URL: https://github.com/trapcodeio/j2ht
- Owner: trapcodeio
- Created: 2020-09-01T15:55:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-13T19:44:44.000Z (about 4 years ago)
- Last Synced: 2025-04-17T13:08:46.069Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 36.1 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# J2ht (Under Development)
J2ht is a **Javascript to html template Engine**
The idea came when I stumbled upon this library [html-creator](https://www.npmjs.com/package/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
```shell script
npm i j2ht
```
### Yarn
```shell script
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](https://www.npmjs.com/package/xpresser)
* `npm run test:merge` - An example showing how to import views and merge them.
## Basic Usage
```javascript
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(`
A message from RawHtml
`),
// Conditional views.
user === 'paul' ?
H5('Hey Paul 👋') : H5('Hey unknown user! 😏')
),
)
)
console.log(pretty(template));
```
This will return
```html
My First App
Hello World
A message from RawHtml
Hey Paul 👋
```
### For Merging Views only
File Structure
```
-html
-footer.html
-header.html
-Home.html
app.js
```
**app.js**
```javascript
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 `
` was created using the following line
```javascript
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
```javascript
const {Div, H1} = require('j2ht/js/elements');
const component = Div(H1('Hello World'))
console.log(component.render());
```
Calling `.render()` will render and return
```html
Hello World
```
## Components
j2ht being javascript can be easily extendable.
Lets make a bulma buttons component `bulma-buttons.js`
```javascript
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.
```javascript
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.
```javascript
Div([
PrimaryButton('Save'),
SuccessButton('Cancel')
])
```
Both will render
```html
Save
Cancel
```
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.