renderplus
v2.2.0
Published
Advanced renderer for Express
Downloads
13
Maintainers
samuelnovaesReadme
renderplus
Advanced renderer for Express
Install
npm install renderplusFull 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: stringattributes: objectcontent: array (children) or string (text)
attributesandcontentare 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: booleanthenContent: array (tag)elseContent: array (tag)
elseContentis optional
List rendering
['for', list, callback]list: arraycallback: function
Callback syntax
(item, index) => contentcontent: 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)