1 changed files with 100 additions and 1 deletions
@ -1 +1,100 @@ |
|||||
# staples |
|
||||
|
# Staples |
||||
|
|
||||
|
Staples is a minimal library that provides the power to allow you to create simple semantic templates and customize them with the addition of custom helpers. Staples is widely compatible with the basic Mustache and Handlebars models. |
||||
|
|
||||
|
|
||||
|
|
||||
|
## Installation |
||||
|
|
||||
|
```bash |
||||
|
npm i @dslak/staples |
||||
|
``` |
||||
|
|
||||
|
or, using YARN |
||||
|
|
||||
|
```bash |
||||
|
yarn add @dslak/staples |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
## Usage |
||||
|
|
||||
|
Once installed, the library must be included as well |
||||
|
|
||||
|
```javascript |
||||
|
const staples = require('@dslak/staples') |
||||
|
staples.printVersion() |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
Example of use with a basic template and a test input |
||||
|
|
||||
|
```javascript |
||||
|
const staples = require('@dslak/staples'); |
||||
|
|
||||
|
const input = { |
||||
|
"sections": [ |
||||
|
{ |
||||
|
"name": "section1", |
||||
|
"elements": { |
||||
|
"val1": "value 1", |
||||
|
"val2": "value 2", |
||||
|
"val_html": "<b class=\"aaa\">HTML</b>" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"name": "section2", |
||||
|
"elements": { |
||||
|
"if": true, |
||||
|
"unless": false |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
const template = `<span class="value">{{sections.0.elements.val1}}</span> |
||||
|
<span class="value">{{sections.0.elements.val2}}</span> |
||||
|
<div class="html">{{sections.0.elements.val_html}}</div> |
||||
|
<span class="value">{{sections.0.elements.val2}}</span> |
||||
|
{{#if sections.1.elements.if}} |
||||
|
<span class="value">{{sections.0.elements.val1}}</span> |
||||
|
{{/if}} |
||||
|
{{#unless sections.1.elements.unless}} |
||||
|
<span class="value">{{sections.0.elements.val2}}</span> |
||||
|
{{/unless}}`; |
||||
|
|
||||
|
const compiled = staples.compile(template, input); |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
## Custom helpers |
||||
|
|
||||
|
Creating custom helpers |
||||
|
|
||||
|
```javascript |
||||
|
staples.addHelper('ellipsis', (string, words = 10) => { |
||||
|
return `${string.split(' ').slice(0, words).join(' ')}...` |
||||
|
}) |
||||
|
``` |
||||
|
|
||||
|
Usage: |
||||
|
|
||||
|
```javascript |
||||
|
const staples = require('@dslak/staples'); |
||||
|
|
||||
|
staples.addHelper('ellipsis', (string, words = 10) => { |
||||
|
return `${string.split(' ').slice(0, words).join(' ')}...` |
||||
|
}); |
||||
|
|
||||
|
const input = { |
||||
|
"value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." |
||||
|
}; |
||||
|
|
||||
|
const template = `<span class="value">{{ellipsis value 5}}</span>`; |
||||
|
|
||||
|
const compiled = staples.compile(template, input); |
||||
|
``` |
||||
|
|
||||
|
Loading…
Reference in new issue