megahertz / twigjs-loader

twig.js loader for Webpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

twigjs-loader

Build Status npm version Dependencies status

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

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

About

twig.js loader for Webpack

License:MIT License


Languages

Language:JavaScript 78.7%Language:Twig 21.3%