-
Notifications
You must be signed in to change notification settings - Fork 405
Working with PatternEngines
The default Pattern Lab template language experience is Mustache. This serves as a reasonably simple introduction into features such as partial inclusion and separation of content from structure.
The mustache engine has its limits however, and users can reach that limit naturally as their use of Pattern Lab increases. Maybe they want a closer integration with the template engine of their production system. Or they want more powerful conditionals and data hierarchies. Whatever the case, the Pattern Lab 2.0 architecture is modular enough to allow for a different template engine to be used.
Let's assume a user wants to upgrade from the default Mustache PatternEngine to the Handlebars engine. The following documentation can be generically applied to other scenarios too.
First, we install the new engine. You can add it directly into your package.json file and run npm install or, run
npm install @pattern-lab/engine-handlebars
PatternEngines can technically coexist, along with patterns of different languages, but it's important to note that these are parallel streams on the big river of life - they never cross. So yes, you could have a mixed pattern tree, but you cannot include a mustache pattern inside a handlebars pattern. It's best not to even attempt this, and I mention it only out of a sense of completeness.
Familiar users will remember that the Pattern Lab filesystem supports a global head and foot pattern, which, in our scenario is still likely mustache. We are working on allowing engines to spawn these files themselves for each engine, but until that ships, be mindful that this is a place you will likely need to alter or add.
For Handlebars, you can see the meta files here: https://github.com/pattern-lab/patternlab-node/tree/master/packages/engine-handlebars/_meta
It's important to note too that PatternEngines are not all created equal. Some enjoy more language features than others, and therefore may deviate from the default Mustache-based featureset. We attempt to report this feature comparison upfront on the README of each engine. Take a gander at the Handlebars Engine featureset, you can see that it wholly obsoletes some of the Pattern Lab conventions created to support the Mustache language, like pattern parameters.
If you have questions about a particular PatternEngine, someone on our gitter.im channel, pattern-lab/node may be able to help.
There is also a dedicated Pattern Lab channel on the design system slack run by @jina.
Ask or answer Pattern Lab questions on Stack Overflow: http://stackoverflow.com/questions/tagged/patternlab.io
Check out the current list of official and community engines here: Official and Community PatternEngines