twigify-patternlab

twigify-patternlab is a Browserify transform for creating modules of pre-compiled Twig.js templates. This module is a fork of twigify wich support Pattern Lab include syntax [patternType]-[patternName]

Installation

With npm as a local development dependency:

npm install --save-dev twigify-patternlab

Usage

In patterns/00-atoms/00-globals/title.twig:

<h1>{{ title }}</h1>

In title.js:

var template = require('./patterns/00-atoms/00-globals/title.twig');
var body = template.render({
  title: 'Main Page'
});
$('body').html(body);

Including sub templates:

In patterns/00-molecules/01-alert/warning.twig:

<h1>{{ title }}</h1>
{% include 'atoms-title' %}

In warning.js:

// need to require() this so that it is available for warning.twig
require('./patterns/00-atoms/00-globals/title.twig');
var mainTemplate = require('./patterns/00-molecules/01-alert/warning.twig');

var page = mainTemplate.render({
  title: 'Main Page'
});
$('body').html(page);

Transforming with the command-line

browserify test.js -t twigify-patternlab > test-bundle.js