Renderplus NPM

renderplus

Advanced renderer for Express

Install

npm install renderplus

Full example

const express = require('express')
const renderplus = require('renderplus')
const app = express()
app.use(renderplus)

let button1 = false

let options = [
	{ text: 'Zero', value: 0 },
	{ text: 'One', value: 1 },
	{ text: 'Two', value: 2 },
	{ text: 'Three', value: 3 },
	{ text: 'Four', value: 4 }
]

app.get('/', (req, res) => {
	res.render(
		['html', [
			['head', [
				['title', 'Test'],
				['meta', { charset: 'utf-8' }]
			]],
			['body', [
				//Text
				'SELECT A NUMBER:',
				['br'],
				['select', { id: 'choice', onchange: 'test()' }, [
					//List rendering
					['for', options, i => (
						['option', { value: i.value }, i.text]
					)]
				]],
				//Conditional rendering
				['if', button1, {
					then: ['button', 'Button 1'],
					else: ['button', 'Button 2']
				}]
			]]
		]]
	)
})

app.listen(8080)

It renders

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<meta charset="utf-8">
	</head>
	<body>
		SELECT A NUMBER:
		<br>
		<select id="choice" onchange="test()">
			<option value="0">zero</option>
			<option value="1">one</option>
			<option value="2">two</option>
			<option value="3">three</option>
			<option value="4">four</option>
		</select>
		<button>Button 1</button>
	</body>
</html>

Render method syntax

res.render(htmlTag)

htmlTag: array

Tag syntax

[tagName, attributes, content]

tagName: string
attributes: object
content: array (children) or string (text)

attributes and content are optional

Example

['br']

['h1', 'Hello World']

['meta', {charset: 'utf-8'}]

['div', {id: 'test'}, 'Hello World']

['div', {id: 'test'}, [
	//children here
]]

['body', [
	//children here
]]

Text

Example

['body', [
	'It is a text inside BODY',
	['br'],
	['h1', 'It is a text inside H1'],
	'Here is another text inside BODY'
]]

Conditional rendering

['if', condition, {
	then: thenContent,
	else: elseContent
}]

condition: boolean
thenContent: array (tag)
elseContent: array (tag)

elseContent is optional

List rendering

['for', list, callback]

list: array
callback: function

Callback syntax

(item, index) => content

content: array (tag)

Creating layouts and components Example

const express = require('express')
const renderplus = require("renderplus")
const app = express()
app.use(renderplus)

let layout(children) => (
	['html', [
		['head', [
			['title', 'Test'],
			['meta', {charset: 'utf-8'}]
		]],
		['body', children]
	]]
)

let customButton(label) => (
	['button', {class: 'my-custom-button'}, label]
)

app.get('/', (req, res) => {
	res.render(
		layout([
			['div', [
				customButton('Button 1'),
				customButton('Button 2'),
				['hr']
			]]
		])
	)
})

app.listen(8080)