Feplet adheres to the Mustache spec, as per the original Ruby implementation, with the following addition:
- Feplet allows the passing of data parameters per template.
Any valid JSON5 string (minus the
outermost curly braces) can be passed. Be sure that consecutive JSON5 curly
braces are separated with space to avoid being parsed as a stash }}
. Similarly,
space curly braces if they need to be submitted literally as parameter values
(to be printed as JavaScript or CSS code), or else, encode them as HTML entities
({
or }
).
One thing to note is that the data passed in this example will apply only to the partial named "partial_tpl", and not to any partials nested further within.
CLI:
npm install feplet
JS:
const Feplet = require('feplet');
const text = 'Hello {{place}}';
const context = {
place: 'World'
};
// These are references to Hogan.js methods:
const template = Feplet.compile(text);
const output = template.render(context); // Hello World
// These are also references to Hogan.js methods:
const scanned = Feplet.scan(text);
const parsed = Feplet.parse(scanned, text);
const generation = Feplet.generate(parsed, text);
const output1 = generation.render(context); // Hello World
// This is a Feplet implementation:
const partialTxt = '{{#nest}}{{#egg}}{{yolk}} {{place}}{{/egg}}{{/nest}}';
const partials = {
partial_tpl: partialTxt
};
const includer = '{{> partial_tpl(nest: { egg: { yolk: "Yellow" } }) }}';
const output2 = Feplet.render(
includer,
context,
partials
); // Yellow World
// Feplet.render() does not require the `partials` argument. You can just
// submit Feplet.render(templateTxt, context) if you have no partials to
// render.
// If you do have partials, you might want to instantiate the Feplet class
// to cache the context data if you need to use them more than once.
// Then, register partials so they get preprocessed with the context data
// cached within the feplet object.
// Then, render accordingly:
const feplet = new Feplet(context);
feplet.registerPartial('partial_tpl', partialTxt);
const output3 = feplet.render(includer); // Yellow World
For Node.js:
const Feplet = require('feplet')
For browsers (ES6):
<script type="module">
import Feplet from 'feplet/dist/feplet.browser.es6.min.js';
</script>
Also for browsers (ES5):
<script src="feplet/dist/feplet.browser.min.js"></script>
<script>
var Feplet = window.Feplet;
</script>
Feplet is the spelled-out sound of a contraction of "Fepper template." (Fepper is a contraction of "front end prototyper.") It could also be the diminutive of "Fepper." It is very much the engine that drives Fepper.