JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q42007F
  • License

Perfect for templating eZPublish, Magento, Drupal... CMS models

Package Exports

  • mustacher

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mustacher) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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