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

• example
• typescript example

$ 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.

Credits

Based on zimmo-be/twig-loader