# twigjs-loader

> twig.js loader for Webpack

Latest version **1.0.3** (published 2022-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install twigjs-loader
pnpm add twigjs-loader
yarn add twigjs-loader
bun add twigjs-loader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-08-20 |
| First published | 2018-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0 |
| Dependencies | 0 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Alexey Prokhorov |
| Maintainers | megahertz |
| Keywords | twig, twig.js, template, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/twigjs-loader
- Repository: https://github.com/megahertz/twigjs-loader
- Homepage: https://github.com/megahertz/twigjs-loader#readme
- Issues: https://github.com/megahertz/twigjs-loader/issues
- npm.io page: https://npm.io/package/twigjs-loader

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-08-20
- 1.0.2 — 2020-06-11
- 1.0.1 — 2019-11-12
- 1.0.0 — 2019-10-16
- 0.2.2 — 2018-05-16
- 0.2.1 — 2018-04-26
- 0.2.0 — 2018-04-26
- 0.1.2 — 2018-04-19
- 0.1.1 — 2018-04-19
- 0.1.0 — 2018-04-19
- 0.0.2 — 2018-04-19
- 0.0.1 — 2018-04-19
- 0.0.0 — 2018-04-19

## README

# twigjs-loader
[![Build Status](https://travis-ci.org/megahertz/twigjs-loader.svg?branch=master)](https://travis-ci.org/megahertz/twigjs-loader)
[![npm version](https://badge.fury.io/js/twigjs-loader.svg)](https://badge.fury.io/js/twigjs-loader)
[![Dependencies status](https://img.shields.io/david/megahertz/twigjs-loader)](https://david-dm.org/megahertz/twigjs-loader)

## Description

twig.js loader for Webpack


## Installation

This package requires node.js 8 at least.

Install with [npm](https://npmjs.org/package/twigjs-loader):

    $ npm install -D twigjs-loader

## Usage

```js
const indexView = require('./index.twig');
console.log(indexView({ variable1: 'value' }));
```

**webpack.config.js**

```js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.twig$/,
        use: 'twigjs-loader',
      },
      //...
    ],
  },
  //...
}

```

### With Express

 - [example](examples/express)
 - [typescript example](examples/typescript)

`$ npm install twigjs-loader`

**index.js:**
```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

 - [example](examples/frontend)

```js
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**

```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](examples/namespaces).

## Credits

Based on [zimmo-be/twig-loader](https://github.com/zimmo-be/twig-loader)

---
_Source: https://npm.io/package/twigjs-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._