Twig.js

This module provides twig.js and is intended for developers or if some other module requires it.

Usage

Often you would probably render first something server side, and so you want to store the template in a variable. So for example you can do this, like from the tests for this module:

$template = '<ul>{% for user in users %}
                  <li>{{ user }}</li>
                 {% endfor %}
             </ul>';
return [
  '#type' => 'inline_template',
  '#prefix' => '<div id="twigjs_test_js">',
  '#suffix' => '</div>',
  '#template' => $template,
  '#context' => [
    'users' => $some_user_data,
  ],
  '#attached' => [
    'drupalSettings' => [
      'twigjsTest' => [
        'inlineTemplate' => $template,
      ],
      'library' => [
        // To include things like the "trans" tag.
        'twigjs/drupal.twigjs',
        // ...or to just include the twig.js library.
        'twigjs/twigjs',
      ],
    ],
  ],
];

Then, in JavaScript:

  Drupal.behaviors.twigJsTestSimple = {
    attach: function(context) {
      // Get the element we want to render to.
      var wrapper = document.getElementById('twigjs_test_js');
      // This is twig.js, you can read the documentation at https://github.com/twigjs/twig.js
      var template = Twig.twig({
        id: 'twigjs_test',
        data: settings.twigjsTest.inlineTemplate
      });
      wrapper.innerHTML = template.render({users: ['testUser']});
    }
  };

"Light" version

This module also exposes a "light" version, that is based on underscore.js, which is in core. This version has its limitations. For example you can not use any twig tags, which is a pretty big limitation.

A reason to use this is the amount of kilobytes of JavaScript you want to include just to be able to use something "twig-like". For example, if all you need is to render one template on both the server and the client, and the template is quite simple, you might want to go with the "light" version.

You can read more about underscore's template function here.

This module exposes this with the same API as the regular twig.js, only under the namespace "TwigLight":

// This is from the tests of this module:
var lightWrapper = document.getElementById('twigjs-test-light-wrapper-js');
if (lightWrapper) {
  var template = TwigLight.twig({
    id: 'light',
    // This particular template is like this: 
    // 'I have a variable called name and it is {{ name }} and I have a number and it is {{ number }}';
    data: settings.twigjsTest.lightTemplate
  });
  lightWrapper.innerHTML = template.render({
    name: 'testName',
    number: 1337
  });
}

Disclaimers

There is not a 1:1 relationship between twig in Drupal and twig.js. For example, you can't use a template like this, with a nested variable:

<div class"content">
  {{ content }}
</div>

And then a variable like this:

$build['content'] = [
  'image' => $image_render_array,
  'text' => $text_render_array,
];

For twig.js, the variables needs to be strings. Be aware of this.