A simple package that let's you to convert Object into HTML!
OTHER License
require("object.tohtml");
const fs = require("fs");
let obj = {
html: {
head: {
title: 'Hello world!'
},
body: {
h1: 'Hello world!'
}
}
}
obj.toHtml().pipe(fs.createWriteStream("index.html"));
// <!doctype html><html><head><title>Hello world!</title></head><body><h1>Hello world!</h1></body></html>
attrOnly
attrOnly
is used to adding a Attribute into a tag like meta
or img
. Mostly used for Filling all required Attribute in meta
or img
tag.
{
"meta": {
"attrOnly": true,
"name": "description",
"content": "My website!"
}
}
Writes:
<meta name="description" content="My website!">
{
"img": {
"attrOnly": true,
"src": "..."
}
}
Writes:
<img src="...">
attr
attr
is a object that used to adding a Attribute into a element
{
"div": {
"attr": {
"class": "element"
},
"h1": "Hello World!"
}
}
Writes:
<div class="element"><h1>Hello World!</h1></div>
We aren't only giving a trick like that, We're also doing HTML Attribute Mode
on this package!
{
"div id='box'": {
....
}
}
Writes:
<div id='box'> ..... </div>
br
element, It writes 1 Only!!In Object()
, When you write a prototype that already Exist, It'll overwrite it. To bypass this, Object.toHtml has Array Method, Which let's developer to create a multiple element without overwritting another element (Added in v2.0.0):
[
"br",
"br"
]
Writes:
<br><br>
This can also done inside non-array Object
{
"div": [
"br",
"br"
]
}
Writes:
<div><br><br></div>
Unfortunately, This is way more worse, Because we can't making 2 div
element.
{
"div": [
"br",
"br"
],
"div": [
"br",
"br"
]
}
Writes:
<div><br><br></div>
Because of that, We're doing the 2nd Method. Writting a Array. Fortunately, This method is completely Works as well:
[
"html",
{ "h1": "Hello World", "p": "It's nice to see you there!" },
"br",
{
"h1": "This is the 2nd h1!",
"p": "See? The Array Method works as well!"
},
"/html"
]
Writes:
<!DOCTYPE html><html><h1>Hello World</h1><p>It's nice to see you there!</p><br><h1>This is the 2nd h1!</h1><p>See? The Array Method works as well!</p></html>
Add attr
{
"div": {
"attr": {
"class": "navbar-top"
},
"....": "...."
}
}
Writes:
<div class="navbar-top"><....>....</....></div>
meta
,img
and some tag like that in JSON?First off, We need to set attrOnly
as true
.
{
"meta": {
"attrOnly": true,
"name": "viewport",
"content": "width:device-width, initial-scale=1"
}
}
Writes:
<meta name="viewport" content="width:device-width, initial-scale=1">
Just do a thing like Object does
[
{
"div": {
"attr": {
"class": "element1"
}
}
},
{
"div": {
"attr": {
"class": "element2"
}
}
}
]
Writes:
<div class="element1"></div><div class="element2"></div>
Of course. Doing a thing like HTML does is still Looking Fine as well.
[
"div align='center'"",
"/div"
]
Writes:
<div align="center"></div>
Yes. You can still do this:
SomeObject.toHtml(process.stdout);
or this:
SomeObject.toHtml().pipe(process.stdout);
Even you can extend the passthrough to other:
const StreamCache = require("stream-cache");
SomeObject.toHtml(new StreamCache()).pipe(process.stdout);
// Or
SomeObject.toHtml().pipe(new StreamCache()).pipe(process.stdout);
const render = require("object.tohtml");
render({
"html": {
"body": {
"h1": "Hello World"
}
}
}).pipe(process.stdout);
Any question? Ask in our Discord Server/Telegram Group!