v3 Twig Engine Integration

Gruntfile.js

@@ -84,8 +84,7 @@ module.exports = function (grunt) {
         files: [
           path.resolve(paths().source.css + '**/*.css'),
           path.resolve(paths().source.styleguide + 'css/*.css'),
-          path.resolve(paths().source.patterns + '**/*.mustache'),
-          path.resolve(paths().source.patterns + '**/*.json'),
+          path.resolve(paths().source.patterns + '**/*'),
           path.resolve(paths().source.fonts + '/*'),
           path.resolve(paths().source.images + '/*'),
           path.resolve(paths().source.data + '*.json')

builder/pattern_engines/engine_twig.js

@@ -0,0 +1,87 @@
+/*
+ * handlebars pattern engine for patternlab-node - v0.15.1 - 2015
+ *
+ * Geoffrey Pursell, Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+/*
+ * ENGINE SUPPORT LEVEL:
+ *
+ * Full. Partial calls and lineage hunting are supported. Handlebars does not
+ * support the mustache-specific syntax extensions, style modifiers and pattern
+ * parameters, because their use cases are addressed by the core Handlebars
+ * feature set.
+ *
+ */
+
+(function () {
+  "use strict";
+
+  var Twig = require('twig/twig.js');
+  var twig = Twig.twig;
+
+  var engine_twig = {
+    engine: Twig,
+    engineName: 'twig',
+    engineFileExtension: '.twig',
+
+    //Important! Needed for Twig compilation. Can't resolve paths otherwise.
+    expandPartials: true,
+
+    // regexes, stored here so they're only compiled once
+    findPartialsRE: /{%([ ]+)?(?:extends|include|embed)(\s\S)(.*)%}/g,
+    findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // TODO
+
+    // render it
+    renderPattern: function renderPattern(template, data) {
+      var template = twig({
+        data: template
+      }).render(data);
+
+      return template;
+    },
+
+    // find and return any {{> template-name }} within pattern
+    findPartials: function findPartials(pattern) {
+      var matches = pattern.template.match(this.findPartialsRE);
+      return matches;
+    },
+    findPartialsWithStyleModifiers: function() {
+      // TODO: make the call to this from oPattern objects conditional on their
+      // being implemented here.
+      return [];
+    },
+    // returns any patterns that match {{> value(foo:"bar") }} or {{>
+    // value:mod(foo:"bar") }} within the pattern
+    findPartialsWithPatternParameters: function() {
+      // TODO: make the call to this from oPattern objects conditional on their
+      // being implemented here.
+      return [];
+    },
+    findListItems: function(pattern) {
+      var matches = pattern.template.match(this.findListItemsRE);
+      return matches;
+    },
+    // given a pattern, and a partial string, tease out the "pattern key" and
+    // return it.
+    findPartialKey: function(partialString) {
+
+
+      //var partialKey = partialString.replace(this.findPartialsRE, '$1');
+      var partialKey = partialString.match(/"((?:\\.|[^"\\])*)"/)[0];
+      partialKey = partialKey.replace(/"/g, '');
+
+      return partialKey;
+    }
+
+
+
+
+  };
+
+  module.exports = engine_twig;
+})();

package.gulp.json

@@ -9,7 +9,10 @@
     "fs-extra": "^0.26.5",
     "glob": "^7.0.0",
     "html-entities": "^1.2.0",
-    "mustache": "^2.2.1"
+    "mustache": "^2.2.1",
+    "handlebars": "^4.0.5",
+    "twig": "^0.8.8",
+    "underscore": "^1.8.3",
   },
   "devDependencies": {
     "browser-sync": "^2.11.1",

package.json

@@ -11,7 +11,8 @@
     "matchdep": "^1.0.0",
     "mustache": "^2.2.0",
     "handlebars": "^4.0.5",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "twig": "^0.8.8"
   },
   "devDependencies": {
     "bs-html-injector": "^3.0.0",

source/_patterns/00-atoms/08-button.twig

@@ -0,0 +1,10 @@
+<style>
+  .btn {
+    padding: 10px;
+    border-radius: 10px;
+    display: inline-block;
+    text-align: center;
+  }
+</style>
+
+<a href="#" class="btn">Button</a>

source/_patterns/00-atoms/09-image.twig

@@ -0,0 +1,5 @@
+<img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=280%C3%97220&w=280&h=220&fm=pjpg"
+  srcset="http://placeholdit.imgix.net/~text?txtsize=33&txt=280%C3%97220&w=280&h=220&fm=pjpg 280w,
+          http://placeholdit.imgix.net/~text?txtsize=33&txt=560%C3%97440&w=560&h=440&fm=pjpg 560w,
+          http://placeholdit.imgix.net/~text?txtsize=33&txt=840%C3%97660&w=840&h=660&fm=pjpg 840w"
+  sizes="100vw">

source/_patterns/01-molecules/media-object.twig

@@ -0,0 +1,31 @@
+<style>
+  .Media {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .Media > img {
+    margin-right: 1em;
+    max-width: 200px;
+  }
+
+  .Media-body {
+    flex: 1;
+  }
+</style>
+
+
+{% set foo = "world!" %}
+
+
+<div class="Media">
+  {% include "atoms-image" %}
+
+  <div class="Media-body">
+
+    {# Testing if we can also pull in non-twig templates without breaking anything (it works!). Good idea though? Eh... #}
+    {% include "atoms-paragraph" %}
+
+    <p>Oh, hello {{ foo }}</p>
+  </div>
+</div>