Skip to content
This repository was archived by the owner on May 7, 2024. It is now read-only.

Commit f4c357f

Browse files
Eric MORANDericmorand
Eric MORAND
authored and
ericmorand
committed
Implement a fully-featured Webpack loader
1 parent 58674b6 commit f4c357f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1461
-29
lines changed

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*.ts]
4+
end_of_line = lf
5+
charset = utf-8
6+
trim_trailing_whitespace = true
7+
insert_final_newline = true
8+
indent_style = space
9+
indent_size = 4

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.idea
2+
.nyc_output
3+
dist
4+
coverage
5+
node_modules
6+
package-lock.json

‎.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*
2+
!/dist/**
3+
!/LICENSE
4+
!/CHANGELOG
5+
!/README.md

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎.nycrc.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"all": true,
3+
"lines": 100,
4+
"branches": 100,
5+
"functions": 100,
6+
"extension": [
7+
".ts"
8+
],
9+
"include": "src",
10+
"reporter": [
11+
"text-summary",
12+
"html"
13+
]
14+
}

‎.travis.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
language: node_js
2+
node_js:
3+
- 7
4+
- 8
5+
- 9
6+
- 10
7+
jobs:
8+
include:
9+
- stage: test & cover
10+
node_js: 11
11+
script:
12+
- npm run cover
13+
- npm run coverage
14+
- stage: test in web browser
15+
node_js: 11
16+
script:
17+
- npm run test:browser
18+
addons:
19+
apt:
20+
packages:
21+
- xvfb
22+
install:
23+
- export DISPLAY=':99.0'
24+
- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
25+
- npm install

‎README.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Twing loader
2+
[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage percentage][coveralls-image]][coveralls-url]
3+
4+
Webpack loader that compiles Twig templates with [Twing](https://www.npmjs.com/package/twing).
5+
6+
## Prerequisites
7+
8+
* Webpack 4
9+
* Twing 2.3.3
10+
11+
## Installation
12+
13+
`npm install twing-loader`
14+
15+
## Usage
16+
17+
twing-loader comes with two available behaviors. Depending on your need, you can use one or the other by setting the `renderContext` option accordingly.
18+
19+
### Render at runtime
20+
21+
By default, twing-loader transforms a Twig template to a function that, when called with some optional data, renders the template:
22+
23+
> webpack.config.js
24+
25+
```javascript
26+
module.exports = {
27+
entry: 'index.js',
28+
// ...
29+
module: {
30+
rules: [
31+
{
32+
test: /\.twig$/,
33+
use: [
34+
{
35+
loader: 'twing-loader',
36+
options: {
37+
environmentModulePath: 'environment.js'
38+
}
39+
}
40+
]
41+
}
42+
]
43+
}
44+
}
45+
```
46+
47+
> environment.js
48+
49+
```javascript
50+
const {TwingEnvironment, TwingLoaderRelativeFilesystem} = require("twing");
51+
52+
module.exports = new TwingEnvironment(
53+
new TwingLoaderRelativeFilesystem()
54+
);
55+
```
56+
57+
> index.twig
58+
59+
```twig
60+
{{ foo }}
61+
```
62+
63+
> index.js
64+
65+
```javascript
66+
let template = require('./index.twig');
67+
68+
let renderedTemplate = template({
69+
foo: 'bar'
70+
}); // "bar"
71+
```
72+
73+
This behavior, known as _render at runtime_, comes at the price of having Twing as part of the bundle.
74+
75+
### Render at compile time
76+
77+
When `renderContext` is _defined_, twing-loader transforms a Twig template to the result of the template rendering:
78+
79+
> webpack.config.js
80+
81+
```javascript
82+
module.exports = {
83+
entry: 'index.js',
84+
// ...
85+
module: {
86+
rules: [
87+
{
88+
test: /\.twig$/,
89+
use: [
90+
{
91+
loader: 'twing-loader',
92+
options: {
93+
environmentModulePath: 'environment.js',
94+
renderContext: {
95+
foo: 'bar'
96+
}
97+
}
98+
}
99+
]
100+
}
101+
]
102+
}
103+
}
104+
```
105+
106+
> environment.js
107+
108+
```javascript
109+
const {TwingEnvironment, TwingLoaderRelativeFilesystem} = require("twing");
110+
111+
module.exports = new TwingEnvironment(
112+
new TwingLoaderRelativeFilesystem()
113+
);
114+
```
115+
116+
> index.twig
117+
118+
```twig
119+
{{ foo }}
120+
```
121+
122+
> index.js
123+
124+
```javascript
125+
let renderedTemplate = require('./index.twig'); // "bar"
126+
```
127+
128+
This second behavior, known as _render at compile time_, comes with the benefit of not having Twing as part of the bundle.
129+
130+
## Options
131+
132+
|Name|Required|Type|Default|Description|
133+
|---|:---:|:---:|:---:|---|
134+
|environmentModulePath|`true`|string|`undefined`| A path 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 by the bundle to render them at runtime.|
135+
|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.|
136+
137+
## Contributing
138+
139+
* Fork this repository
140+
* Code
141+
* Implement tests using [tape](https://github.com/substack/tape)
142+
* Issue a pull request keeping in mind that all pull requests must reference an issue in the issue queue
143+
144+
[npm-image]: https://badge.fury.io/js/twing-loader.svg
145+
[npm-url]: https://npmjs.org/package/twing-loader
146+
[travis-image]: https://travis-ci.org/nicolasRdr/twing-loader.svg?branch=master
147+
[travis-url]: https://travis-ci.org/nicolasRdr/twing-loader
148+
[coveralls-image]: https://coveralls.io/repos/github/nicolasRdr/twing-loader/badge.svg
149+
[coveralls-url]: https://coveralls.io/github/nicolasRdr/twing-loader

‎index.js

-1
This file was deleted.

‎package.json

+55-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
11
{
22
"name": "twing-loader",
3-
"version": "1.0.0",
4-
"main": "index.js",
3+
"version": "2.0.0",
4+
"main": "dist/index.js",
55
"scripts": {
6-
"test": "jest",
7-
"dev": "webpack --display-error-details"
6+
"build": "npm run clean && tsc",
7+
"clean": "rimraf dist",
8+
"test": "npm run build && ts-node node_modules/tape/bin/tape 'test/**/test.ts' | tap-bail | tap-spec",
9+
"test:unit": "ts-node node_modules/tape/bin/tape 'test/unit/**/test.ts' | tap-bail | tap-spec",
10+
"test:integration": "npm run build && ts-node node_modules/tape/bin/tape 'test/integration/**/test.ts' | tap-bail | tap-spec",
11+
"cover": "rimraf .nyc_output coverage && nyc npm run test:unit",
12+
"coverage": "nyc report --reporter=text-lcov | coveralls",
13+
"prepack": "npm run build"
814
},
9-
"keywords": [],
15+
"keywords": [
16+
"twig",
17+
"twing",
18+
"webpack",
19+
"webpack-loader"
20+
],
1021
"author": "Nicolas REINE",
22+
"contributors": [
23+
{
24+
"name": "Eric MORAND",
25+
"email": "[email protected]",
26+
"url": "https://github.com/ericmorand"
27+
}
28+
],
1129
"license": "ISC",
12-
"dependencies": {
13-
"twing": "^2.2.3"
30+
"peerDependencies": {
31+
"twing": "^2.3.3"
1432
},
1533
"repository": {
1634
"type": "git",
@@ -20,5 +38,34 @@
2038
"url": "https://github.com/nicolasRdr/twing-loader/issues"
2139
},
2240
"homepage": "https://github.com/nicolasRdr/twing-loader#readme",
23-
"description": ""
41+
"description": "",
42+
"dependencies": {
43+
"crypto-js": "^3.1.9-1",
44+
"loader-utils": "^1.2.3",
45+
"schema-utils": "^2.0.1"
46+
},
47+
"devDependencies": {
48+
"@types/loader-utils": "^1.1.3",
49+
"@types/luxon": "^1.15.2",
50+
"@types/memory-fs": "^0.3.2",
51+
"@types/schema-utils": "^1.0.0",
52+
"@types/sinon": "^7.0.13",
53+
"@types/tape": "^4.2.33",
54+
"@types/webpack": "^4.32.1",
55+
"coveralls": "^3.0.5",
56+
"html-webpack-plugin": "^3.2.0",
57+
"memory-fs": "^0.4.1",
58+
"module-alias": "^2.2.1",
59+
"nyc": "^14.1.1",
60+
"rimraf": "^2.6.3",
61+
"sinon": "^7.3.2",
62+
"tap-bail": "^1.0.0",
63+
"tap-spec": "^5.0.0",
64+
"tape": "^4.11.0",
65+
"ts-node": "^8.3.0",
66+
"twing": "^2.3.3",
67+
"typescript": "^3.5.3",
68+
"webpack": "^4.37.0",
69+
"webpack-cli": "^3.3.6"
70+
}
2471
}

0 commit comments

Comments
 (0)