https://github.com/samuelnovaes/renderplus
Render advanced HTML pages with JavaScript
https://github.com/samuelnovaes/renderplus
Last synced: 3 months ago
JSON representation
Render advanced HTML pages with JavaScript
- Host: GitHub
- URL: https://github.com/samuelnovaes/renderplus
- Owner: samuelnovaes
- License: bsd-3-clause
- Created: 2017-01-17T22:44:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-22T07:24:59.000Z (over 6 years ago)
- Last Synced: 2024-10-16T08:30:58.485Z (7 months ago)
- Language: JavaScript
- Size: 39.1 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# renderplus
Advanced renderer for Express
[](https://nodei.co/npm/renderplus/)
# Install
```bash
npm install renderplus
```
# Full example
```javascript
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**
```html
Test
SELECT A NUMBER:
zero
one
two
three
four
Button 1
```
# Render method syntax
```javascript
res.render(htmlTag)
```
- `htmlTag`: array
# Tag syntax
```javascript
[tagName, attributes, content]
```
- `tagName`: string
- `attributes`: object
- `content`: array (children) or string (text)
> `attributes` and `content` are optional
### Example
```javascript
['br']
```
```javascript
['h1', 'Hello World']
```
```javascript
['meta', {charset: 'utf-8'}]
```
```javascript
['div', {id: 'test'}, 'Hello World']
```
```javascript
['div', {id: 'test'}, [
//children here
]]
```
```javascript
['body', [
//children here
]]
```
# Text
### Example
```javascript
['body', [
'It is a text inside BODY',
['br'],
['h1', 'It is a text inside H1'],
'Here is another text inside BODY'
]]
```
# Conditional rendering
```javascript
['if', condition, {
then: thenContent,
else: elseContent
}]
```
- `condition`: boolean
- `thenContent`: array (tag)
- `elseContent`: array (tag)
> `elseContent` is optional
# List rendering
```javascript
['for', list, callback]
```
- `list`: array
- `callback`: function
### Callback syntax
```javascript
(item, index) => content
```
- `content`: array (tag)
# Creating layouts and components Example
```javascript
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)
```