Skip to content

Bundle your Twig templates with webpack

Notifications You must be signed in to change notification settings

ofabel/twing-loader

 
 

Repository files navigation

twing-loader

NPM version Build Status Coverage percentage

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

About

Bundle your Twig templates with webpack

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 89.7%
  • JavaScript 6.2%
  • Twig 4.1%