Skip to content

A Mustache-compatible template engine. Powerful under the hood. Simple behind the wheel.

License

Notifications You must be signed in to change notification settings

electric-eloquence/feplet

Repository files navigation

Feplet: a Mustache-compatible template engine.

Known Vulnerabilities Linux Build Status Mac Build Status Windows Build Status Coverage Status License

Powerful under the hood. Simple behind the wheel.

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.
{{> partial_tpl(place: 'World') }}

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 }).

{{> partial_tpl(nest: { egg: { yolk: 'Yellow' } }) }}

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.

Use

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>

Where does the name come from?

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.