npm is now a part of GitHub
❤Nightmare Prom Memories

npm

Sign UpSign In
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

mustacher

0.2.6 • Public • Published

Mustacher Built with Grunt

MIT License NPM version NPM downloads build coverage

Designed for fit my own needs to build HTML static pages to be incorpored inside a website based on Magento, eZPublish or Drupal templates

It provide an easy way to include handlebar's partials files inside HTML template page with a minimal list of helpers like include, repeat (loop), or, and, livereload...

Install

npm install mustacher --save

Exposed helpers

inline
blocks

Examples

const fs = require('fs');
const path = require('path');
const mustacher = require('mustacher');
 
// variables at root level touched by any helper
const context = { private: 'as @root.private' };
 
// default config
const config = {
  cwd: __dirname,
  delimiter: {
    ldim: '{{',
    rdim: '}}',
  },
  partials: {
    ext: '.hbs',
    src: 'partials',
  },
};
 
const templateFile = path.join(__dirname, 'index.html');
const outputfile = path.join(__dirname, '..', 'public', 'index.html');
 
const fsOptions = { encoding: 'utf8' };
const templateContent = fs.readFileSync(templateFile, fsOptions);
const compiledOutput = mustacher(templateContent, <context>, <config>);
fs.writeFileSync(outputfile, compiledOutput, fsOptions);

inline

$include

<div class="part">
  {{$include 'relative/to/root/path/to/template'}}
</div>

$css & $js helper

<head>
  ... {{$css 'path/to/css/file'}}
  <!-- include inline -->
  {{$css '__build__/path/to/css/file' true}} ...
</head>
    <div id="main-footer">
    ...
    </div>
    {{$js 'path/to/js/file'}}
</body>

$image (default width: 300)

<div class="image">
  {{$image}}
</div>
<div class="image">
  {{$image 300}}
</div>
<div class="image">
  {{$image 300 200}}
</div>

$timestamp

<img src="my/file.png?{{$timestamp}}" alt="" title="" />
<img src="my/file.png?{{$timestamp 20}}" alt="" title="" />

$livereload

<div id="footer">
  {{$livereload 1337}}
</div>

$random

<span>
  <b>{{$random 1 31}}</b>
  <strong>Juanary</strong>
  <em>1970</em>
</span>
<span>{{$random 0 1 true}}</span>

literal

$ldim

{{$ldim}}toto {{$ldim}}toto{{$rdim}}

$rdim

toto{{$rdim}} {{$ldim}}toto{{$rdim}}

$css

{{$css 'path/to/file'}} {{$css 'path/to/file.min'}} {{$css 'path/to/file.min'
'{"media":"print,projection,screen"}'}}

$js

{{$js 'path/to/file'}} {{$js 'path/to/file.min'}} {{$js 'path/to/file.min'
'{"data-main":"main.js"}'}}

blocks

#repeat

<ul>
  {{#repeat 4}}
  <li class="{{class}}">
    <a href="" alt="{{count}} of {{of}}">item </a>
    <ul>
      {{#repeat}}
      <li class="{{#if @first}}first{{/if}}">
        <span>sub item {{@../index}}/{{@index}}</span>
      </li>
      {{/repeat}}
    </ul>
  </li>
  {{/repeat}}
</ul>

#and

{{#and true false ...}}
<span>fail</span>
{{else}}
<span>success</span>
{{/and}}

#or

{{#or true false ...}}
<span>success</span>
{{else}}
<span>fail</span>
{{/or}}

#equal

{{#equal 'toto' 'blague'}}
<span>fail</span>
{{else}}
<span>success</span>
{{/equal}}

Issues

not yet implemented

  • Lorem Ipsum

Dependents

Keywords

Install

npm i mustacher

DownloadsWeekly Downloads

25

Version

0.2.6

License

MIT

Unpacked Size

64.4 kB

Total Files

32

Homepage

github.com/sixertoy/mustacher

Repository

Gitgithub.com/sixertoy/mustacher

Last publish

Collaborators

  • avatar
Try on RunKit
Report a vulnerability