Twigjs-loader NPM

twigjs-loader

Description

twig.js loader for Webpack

Installation

This package requires node.js 8 at least.

Install with npm:

$ npm install -D twigjs-loader

Usage

const indexView = require('./index.twig');
console.log(indexView({ variable1: 'value' }));

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.twig$/,
        use: 'twigjs-loader',
      },
      //...
    ],
  },
  //...
}

With Express

$ npm install twigjs-loader

index.js:

import * as express from 'express';
import { ExpressView } from 'twigjs-loader';
import indexView from './views/index.twig';

const app = express();
app.set('view', ExpressView);

app.get('/', (req, res) => {
  res.render(indexView, {
    url: req.originalUrl,
  })
});

app.listen(8080);

On frontend

example

import indexView from './views/index.twig';

document.body.innerHTML = indexView({
  url: location.href,
})

Configure

You can configure how a template is compiled by webpack using the renderTemplate option. For example:

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.twig$/,
        use:  {
          loader: 'twigjs-loader',
          options: {
            /**
             * @param {object}  twigData        Data passed to the Twig.twig function
             * @param {string}  twigData.id     Template id (relative path)
             * @param {object}  twigData.tokens Parsed AST of a template
             * @param {string}  dependencies    Code which requires related templates
             * @param {boolean} isHot           Is Hot Module Replacement enabled
             * @return {string}
             */
            renderTemplate(twigData, dependencies, isHot) {
              return `
                ${dependencies}
                var twig = require("twig").twig;
                var tpl = twig(${JSON.stringify(twigData)});
                module.exports = function(context) { return tpl.render(context); };
              `;
            },
          },
        },
      },
      //...
    ],
  },
  //...
}

Path resolving

The module uses webpack for resolving template path, so it doesn't resolve path by itself. If you need custom file path resolution (eg namespaces), check the example.