@visurel/twing-loader v4.0.1

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

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