3

I am using the node version of patternlab with twig as template engine. I am using twig because my codebase is written in twig - so using mustache it not an option.

I simple try to include an pattern:

<button type="button" class="btn {{ buttonClass }}">{{ cta }}</button>

in an other pattern with:

{% include "base-button" with {'buttonClass': 'btn-primary btn-xs'} %}

This does not work. The pattern is included but the variable buttonClass is not set.

Any Ideas?

d-bro82
  • 490
  • 1
  • 6
  • 21
  • Would not it miss the extension of your include like base-button **.html** ou base-button **.html.twig** ? – doydoy44 Mar 14 '17 at 14:11
  • An extension is not needed here. Patternlab has its own logic to find pattern by name; see: http://patternlab.io/docs/pattern-including.html. My Pattern gets included - so the path is resolved - but the vars are not there. – d-bro82 Mar 14 '17 at 15:11

2 Answers2

1

This seems to be an issue with the twig integration in this repo https://github.com/pattern-lab/patternengine-node-twig.

There are other issues with twig core features described here: https://github.com/pattern-lab/patternlab-node/issues/554

I finally decided to switch to the php/twig edition and the same twig-patterns are working as expected. If anybody have to use the node edition, i recommend to use mustache.

d-bro82
  • 490
  • 1
  • 6
  • 21
  • Maintainer of Pattern Lab Node here.You're spot on in that the Twig engine of PL Node is rough around the edges. This issue attempts to address that too: https://github.com/pattern-lab/patternlab-node/issues/285 I want to respond though, to your comment that one should use mustache with PL Node. We have a very mature Underscore and Handlebars engine too, with React and Liquid in the works. Good luck with your PL journey! – Brian Muenzenmeyer Apr 06 '17 at 03:40
0

I believe there are plans to pass the Twig rendering in Pattern Lab Node to PHP, however, this isn't ready yet, but using The Twig engine for Patternlab/Node you can pass a variable via an include. It doesn't work exactly the same as normal twig but it does work.

{% set buttonClass = 'btn-primary btn-xs' %}
{% include "components-button" with buttonClass %}

You can also pass multiple variables:

{% include "components-button" with buttonClass anotherVariable %}
Flowgram
  • 246
  • 2
  • 8