Pattern Lab Node 0.10.0 Released

A busy time here again - with an uptick in interest in the project and renewed focus from me. Your humble port maintainer wants to get to v1.0.0 like no-other! It was also unlike any release to date - as it started with an incremental feature addition (pattern parameters) and ended with a complete overhaul of how patterns were stitched together with data.

Waiter, Is That A Parameter I See in My Pattern?

Yes they are finally here! Pattern parameters are a simple mechanism for replacing Mustache variables via attributes on a pattern partial tag rather than having to use a pattern-specific json file. They are especially useful when you want to supply distinct values for Mustache variables in a specific pattern partial instance that may be included multiple times in a molecule, template, or page.

The basic syntax is this:

{{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}

The attributes listed in the pattern parameters should match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.

Pattern parameters do not currently support the following:

You can read the full documentation on pattern parameters here: Using Pattern Parameters

Data Inheritance

I cannot omit what I easily sank the most hours and stress into - the rendering of data correctly. Data inheritance is such a core concept to Pattern Lab that discovering a critical flaw in my algorithm was tough to swallow — it basically meant the port was never close to emulating the power of its older brother. I learned this during a rather routine comparison of functionality between PHP and Node, by finally noticing that the home page touts were not rendered at all. Sure enough, they were not defined in the global data; only within the homepage.json



Normally one could be safe following the instructions in here, but this time we’ve changed some source/_patternlab-files/ directory files too. I have opened an issue to make this process smoother in the future. For now, you should be able to upgrade using the follow process:

  1. Backup your source/ directory and config.json
  2. Overwrite all of builder/ and public/ as normal
  3. Refer to this pull request if you need help, but you’ll essentially need to:
    • Add "baseurl" : "" to config.json
    • Overwrite source/_patternlab-files/pattern-header-footer/footer.html
    • Overwrite source/_patternlab-files/styleguide.mustache
    • Overwrite source/_patternlab-files/viewall.mustache

Sorry for the inconvenience. I know this isn’t ideal, but it’s far from impossible. Perhaps if you don’t need pattern parameter support or the base url you may choose to postpone an upgrade.

I put a lot of hours into this one - essentially rewriting the entire engine -hope you like what you see!

You can view the specific release here:

Pattern Lab Node v1.0.0

Partly for my own sanity, and partly at the request of the community, I have organized remaining work into a roadmap for sorts. A person dedicating more hours to the project would churn through like I do a stack of pancakes, but for me it will take months yet. My goals are to be transparent about direction, emphasize the current finish line as the mustache-powered Pattern Lab PHP v1, and motivate myself toward that finish line. Please let me know if your current needs don’t jive with the roadmap..

Originally posted 08/01/15 - Brian Muenzenmeyer - Follow me on Twitter