liquid-loader

v0.2.1

Published

2 years ago

Liquid template engine for Webpack loader.

Downloads

145

0High
0Medium
0Low

azeeson

liquid template loader webpack

Liquid Loader

Liquid template engine for Webpack loader.

Liquid Templating language (see http://github.com/shopify/liquid)

Install

npm install --save-dev liquid-loader

Loader options

| Option | Default | Description | | ------ | ------- | ------------------------------------------------- | | data | {} | Object of function that returns the template data |

You can opt between two ways to provide your template data.

Passing data as an object

You can provide your template data to the loader itself using the data option.

On your webpack.config.js:

const NODE_ENV = process.env.NODE_ENV || 'development';
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.liquid$/,
            use: [{
                loader: "html-loader"
            }, {
                loader: "liquid-loader",
                options: {
                    data: {
                        dev_evn: NODE_ENV == 'development'
                    }
                }
            }]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.liquid',
            filename: 'index.html'
        })
    ]
};

On your src/index.liquid:

  ...
  <body>
    {% if dev_evn %} Section for development {% else %} Section for production
    {% endif %}
  </body>
  ...

Passing data as a Function

Another way is to pass a function in the data option. This function must return an object containing the data for the template. This way, you you can provide different data to each template.

Function arguments

| Argument | Type | Properties | Description | | -------- | ------ | ------------ | ----------------------------------------------------- | | resource | object | resourcePath | String containing the current processed template path |

On your webpack.config.js:

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.liquid$/,
            use: [{
                loader: "html-loader"
            }, {
                loader: "liquid-loader",
                options: {
                    data: (resourcePath) => {
                        const myTemplateData = /* Get my template data based on the resourcePath (see examples below) */
                        return myTemplateData;
                    }
                }
            }]
        }]
    },
    ...
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Liquid Loader

Install

Loader options

Passing data as an object

Passing data as a Function

Examples

Take a look at the examples folder for more detailed examples

Dependencies

License