visurel/twing-loader

Bundle your Twig templates with webpack

twing-loader

Webpack loader for Twig templates, based on Twing.

Prerequisites

• Webpack 4
• Twing 5.0.2

Installation

npm install twing-loader

Usage

twing-loader comes with two available behaviors. Depending on your need, you can use one or the other by setting the renderContext option accordingly.

Render at runtime

By default, twing-loader transforms a Twig template to a function that, when called with some optional data, renders the template:

_{webpack.config.js}

module.exports = {
    entry: 'index.js',
    // ...
    module: {
        rules: [
            {
                test: /\.twig$/,
                use: [
                    {
                        loader: 'twing-loader',
                        options: {
                            environmentModulePath: require.resolve('./environment.js')
                        }
                    }
                ]
            }
        ]
    }
}

_{environment.js}

const {TwingEnvironment, TwingLoaderRelativeFilesystem} = require("twing");

module.exports = new TwingEnvironment(
    new TwingLoaderRelativeFilesystem()
);

_index.twig

{{ foo }}

_index.js

let template = require('./index.twig');

template({
    foo: 'bar'
}).then((renderedTemplate) => {
    // "bar" 
});

This behavior, known as render at runtime, comes at the cost of having Twing as part of the bundle.

Render at compile time

When renderContext is defined, twing-loader transforms a Twig template to the result of the template rendering:

_{webpack.config.js}

module.exports = {
    entry: 'index.js',
    // ...
    module: {
        rules: [
            {
                test: /\.twig$/,
                use: [
                    {
                        loader: 'twing-loader',
                        options: {
                            environmentModulePath: require.resolve('./environment.js'),
                            renderContext: {
                                foo: 'bar'
                            }
                        }
                    }
                ]
            }
        ]
    }
}

_{environment.js}

const {TwingEnvironment, TwingLoaderRelativeFilesystem} = require("twing");

module.exports = new TwingEnvironment(
    new TwingLoaderRelativeFilesystem()
);

_index.twig

{{ foo }}

_index.js

require('./index.twig').then((renderedTemplate) => {
    // "bar"
});

This second behavior, known as render at compile time, comes with the benefit of not having Twing as part of the bundle.

Options

Name	Required	Type	Default	Description
environmentModulePath	true	string	undefined	The absolute path or the identifier to the module that exports the TwingEnvironment instance that will be used by the loader to compile (and render) the templates at compile time and in the bundle to render them at runtime.
renderContext	false	any	undefined	If different from undefined, enables the render at compile time behavior and serves as context for the rendering of the templates.

Contributing

• Fork this repository
• Code
• Implement tests using tape
• Issue a pull request keeping in mind that all pull requests must reference an issue in the issue queue