Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/megahertz/twigjs-loader
twig.js loader for Webpack
https://github.com/megahertz/twigjs-loader
template twig twig-loader webpack
Last synced: about 1 month ago
JSON representation
twig.js loader for Webpack
- Host: GitHub
- URL: https://github.com/megahertz/twigjs-loader
- Owner: megahertz
- License: mit
- Created: 2018-04-19T16:40:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-08-20T17:01:46.000Z (over 2 years ago)
- Last Synced: 2024-11-22T01:11:43.756Z (about 1 month ago)
- Topics: template, twig, twig-loader, webpack
- Language: JavaScript
- Size: 90.8 KB
- Stars: 14
- Watchers: 2
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# twigjs-loader
[](https://travis-ci.org/megahertz/twigjs-loader)
[](https://badge.fury.io/js/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)