twig-webpack-loader
Webpack loader for compiling twig.js templates
Last updated a year ago by djodjonx .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install twig-webpack-loader 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.1                                ...           latest (a year ago)

2 Versions

  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (5)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |