twig-webpack-loader

Webpack loader for compiling Twig.js templates. This loader will allow you to require Twig.js views to your code. fork from twig-loader

Installation

npm install --save-dev twig-webpack-loader

Usage

Documentation: Using loaders

module.exports = {
    //...

    module: {
        loaders: [
            { test: /\.twig$/, loader: "twig-webpack-loader" }
        ]
    },

    node: {
        fs: "empty" // avoids error messages
    }
};

Loading templates

{# File: dialog.html.twig #}
<p>{{title}}</p>

// File: app.js
const template = require("dialog.html.twig");
// => returns pre-compiled template as a function and automatically includes Twig.js to your project

const html = template({title: 'dialog title'});
// => Render the view with the given context

Options

Name	Type	Default	Description
data	object or function(context)	{}	The data that is exposed in the templates. Function should return an object'
functions	object	undefined	Extends Twig with custom functions
filters	object	undefined	Extends Twig with custom filters
tests	object	undefined	Extends Twig with custom tests
extend	function(Twig)	undefined	Extends Twig with custom tags and more

When you extend another view, it will also be added as a dependency. All twig functions that refer to additional templates are supported: import, include, extends & embed.

Custom functions, filters, tests and tags

You can use functions, filters, tests and extend options to extend Twig. See here for adding custom functions, filters and tests, and here for adding custom tags.

module.exports = {
  // ...
  rules: [
    // ...
    {
      test: /\.twig$/,
      use: [
        {
          loader: 'twig-webpack-loader',
          options: {
            functions: {
              repeat(value, times) {
                return new Array(times + 1).join(value);
              }
            },
            filters: {
              backwords(value) {
                return value.split(' ').reverse().join(' ');
              }
            },
            tests: {
              theAnswer(value) {
                return value === 42;
              }
            },
            extend(Twig) {
              Twig.exports.extendTag({
                type: 'echo',
                regex: /^echo\s+(.+)$/,
                next: [],
                open: true,
                compile: function (token) {
                  var expression = token.match[1];

                  token.stack = Twig.expression.compile.apply(this, [{
                    type: Twig.expression.type.expression,
                    value: expression
                  }]).stack;

                  delete token.match;
                  return token;
                },
                parse: function (token, context, chain) {
                  return {
                    chain: false,
                    output: Twig.expression.parse.apply(this, [token.stack, context])
                  };
                }
              });
            }
          }
        }
      ]
    }
    // ...
  ]
};

Changelog

0.1.0 / 2019-03-08

• add options for extend Twig