https://github.com/henryluki/bonzer
A template engine with experimentation
https://github.com/henryluki/bonzer
es6 precompile template-engine
Last synced: 28 days ago
JSON representation
A template engine with experimentation
- Host: GitHub
- URL: https://github.com/henryluki/bonzer
- Owner: henryluki
- License: mit
- Created: 2017-07-22T13:16:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-30T04:33:23.000Z (almost 9 years ago)
- Last Synced: 2025-12-28T18:09:32.147Z (7 months ago)
- Topics: es6, precompile, template-engine
- Language: JavaScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bonzer
***
A template engine with experimentation
# syntax
***
- Variable
`{{}}`
- Condition
`{if} {/if}`
- Loop
`{each} {/each}`
# Example
***
Install:
```
yarn add bonzer
```
Usage:
template:
```html
{if data.sold}
i am {{ data.name }}
{each data.items}
fruit name: {{item.name}}, fruit price: {{ item.price }}
{/each}
{/if}
```
javascript:
```javascript
var data = {
name: "Sam",
sold: true,
items: [{
price: 10,
name: "apple"
}]
}
var template = bonzer(tpl)
template.render(data)
```
output:
```html
i am Sam
fruit name: apple, fruit price: 10
```
# Structure
***
### Workflow
Overview:
```
Tokenizer Parser data
template => tokens => AST => compile => output
```
Precompoile:
```
Tokenizer Parser
template => tokens => parse => parse tree
```
### Tokenizer
Convert string to tokens
- Token types:
```
"CONDITION_START"
"CONDITION_END"
"LOOP_START"
"LOOP_END"
"VARIABLE"
"TEXT"
```
### Parser
Convet tokens to a parse tree
- Node and Leaf:
A node which has children calls `Node`.
A node which has no children calls `Leaf`.
They may look like:
```
Node: { name, type, variable, children }
Leaf: { name, type, (text or variable) }
```
- Parse Tree:
A tree is built by multiple nodes because of hierarchical relationships.
It may like this:
```
root
/
condition
/ \
loop condition
/ \ / \ \
condition variable loop text variable
/
text
```
### Compile
The parse tree run `compile` function with data (context). It's a depth-first traversal.
Every `Node` (`Leaf`) run it's `compile` function then parent merge children's compiled results.