Skip to content

Commit d7ec407

Browse files
committedJul 10, 2018
feat: Replace jade with pug in examples
1 parent ae1f435 commit d7ec407

29 files changed

+411
-7733
lines changed
 

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ The following variables are available in the template:
258258
- `compilation`: the webpack [compilation](https://webpack.js.org/api/compilation/) object.
259259
This can be used, for example, to get the contents of processed assets and inline them
260260
directly in the page, through `compilation.assets[...].source()`
261-
(see [the inline template example](examples/inline/template.jade)).
261+
(see [the inline template example](examples/inline/template.pug)).
262262

263263

264264
### `Filtering Chunks`

‎docs/template-option.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
The version 2.x which was introduced last year (Sep, 2015) changed the way the template is processed.
66
Instead of forcing all users to use the [blueimp](https://github.com/blueimp/JavaScript-Templates) template engine it allowed to use any webpack loader:
77

8-
* [jade/pug](https://github.com/pugjs/pug-loader)
8+
* [pug](https://github.com/pugjs/pug-loader)
99
* [ejs](https://github.com/okonet/ejs-loader)
1010
* [underscore](https://github.com/emaphp/underscore-template-loader)
1111
* [handlebars](https://github.com/pcardune/handlebars-loader)

‎examples/inline/dist/webpack-4/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Jade demo</title></head><body><style>body {
1+
<!DOCTYPE html><html><head><meta charset="utf-8"><title>pug demo</title></head><body><style>body {
22
background: snow;
33
}</style><script>/******/ (function(modules) { // webpackBootstrap
44
/******/ // The module cache

‎examples/inline/readme.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# isomorphic jade example
1+
# isomorphic pug example
22

3-
This example shows how to use a different template engine (in this case jade)
4-
to load the `time.jade` template on the backend and frontend.
3+
This example shows how to use a different template engine (in this case pug)
4+
to load the `time.pug` template on the backend and frontend.
File renamed without changes.

‎examples/inline/webpack.config.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ module.exports = {
1414
module: {
1515
rules: [
1616
{ test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
17-
{ test: /\.jade$/, loader: 'jade-loader' }
17+
{ test: /\.pug$/, loader: 'pug-loader' }
1818
]
1919
},
2020
plugins: [
2121
new HtmlWebpackPlugin({
2222
inject: false,
2323
cache: false,
24-
template: 'template.jade',
24+
template: 'template.pug',
2525
filename: 'index.html',
2626
favicon: 'favicon.ico',
27-
title: 'Jade demo'
27+
title: 'pug demo'
2828
}),
2929
new ExtractTextPlugin('styles.css')
3030
]
Binary file not shown.

‎examples/jade-loader/dist/webpack-4/bundle.js

-378
This file was deleted.

‎examples/jade-loader/dist/webpack-4/index.html

-1
This file was deleted.

‎examples/jade-loader/readme.md

-4
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2018-07-09T17:14:39.242Z<h2>Partial</h2>
1+
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2018-07-10T06:35:32.858Z<h2>Partial</h2>
22
<img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
/******/
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
/******/
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId]) {
10+
/******/ return installedModules[moduleId].exports;
11+
/******/ }
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ i: moduleId,
15+
/******/ l: false,
16+
/******/ exports: {}
17+
/******/ };
18+
/******/
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
/******/
22+
/******/ // Flag the module as loaded
23+
/******/ module.l = true;
24+
/******/
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
/******/
29+
/******/
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
/******/
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
/******/
36+
/******/ // define getter function for harmony exports
37+
/******/ __webpack_require__.d = function(exports, name, getter) {
38+
/******/ if(!__webpack_require__.o(exports, name)) {
39+
/******/ Object.defineProperty(exports, name, {
40+
/******/ configurable: false,
41+
/******/ enumerable: true,
42+
/******/ get: getter
43+
/******/ });
44+
/******/ }
45+
/******/ };
46+
/******/
47+
/******/ // define __esModule on exports
48+
/******/ __webpack_require__.r = function(exports) {
49+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
50+
/******/ };
51+
/******/
52+
/******/ // getDefaultExport function for compatibility with non-harmony modules
53+
/******/ __webpack_require__.n = function(module) {
54+
/******/ var getter = module && module.__esModule ?
55+
/******/ function getDefault() { return module['default']; } :
56+
/******/ function getModuleExports() { return module; };
57+
/******/ __webpack_require__.d(getter, 'a', getter);
58+
/******/ return getter;
59+
/******/ };
60+
/******/
61+
/******/ // Object.prototype.hasOwnProperty.call
62+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
63+
/******/
64+
/******/ // __webpack_public_path__
65+
/******/ __webpack_require__.p = "";
66+
/******/
67+
/******/
68+
/******/ // Load entry module and return exports
69+
/******/ return __webpack_require__(__webpack_require__.s = 3);
70+
/******/ })
71+
/************************************************************************/
72+
/******/ ([
73+
/* 0 */
74+
/***/ (function(module, exports) {
75+
76+
/* (ignored) */
77+
78+
/***/ }),
79+
/* 1 */
80+
/***/ (function(module, exports, __webpack_require__) {
81+
82+
"use strict";
83+
84+
85+
var pug_has_own_property = Object.prototype.hasOwnProperty;
86+
87+
/**
88+
* Merge two attribute objects giving precedence
89+
* to values in object `b`. Classes are special-cased
90+
* allowing for arrays and merging/joining appropriately
91+
* resulting in a string.
92+
*
93+
* @param {Object} a
94+
* @param {Object} b
95+
* @return {Object} a
96+
* @api private
97+
*/
98+
99+
exports.merge = pug_merge;
100+
function pug_merge(a, b) {
101+
if (arguments.length === 1) {
102+
var attrs = a[0];
103+
for (var i = 1; i < a.length; i++) {
104+
attrs = pug_merge(attrs, a[i]);
105+
}
106+
return attrs;
107+
}
108+
109+
for (var key in b) {
110+
if (key === 'class') {
111+
var valA = a[key] || [];
112+
a[key] = (Array.isArray(valA) ? valA : [valA]).concat(b[key] || []);
113+
} else if (key === 'style') {
114+
var valA = pug_style(a[key]);
115+
valA = valA && valA[valA.length - 1] !== ';' ? valA + ';' : valA;
116+
var valB = pug_style(b[key]);
117+
valB = valB && valB[valB.length - 1] !== ';' ? valB + ';' : valB;
118+
a[key] = valA + valB;
119+
} else {
120+
a[key] = b[key];
121+
}
122+
}
123+
124+
return a;
125+
};
126+
127+
/**
128+
* Process array, object, or string as a string of classes delimited by a space.
129+
*
130+
* If `val` is an array, all members of it and its subarrays are counted as
131+
* classes. If `escaping` is an array, then whether or not the item in `val` is
132+
* escaped depends on the corresponding item in `escaping`. If `escaping` is
133+
* not an array, no escaping is done.
134+
*
135+
* If `val` is an object, all the keys whose value is truthy are counted as
136+
* classes. No escaping is done.
137+
*
138+
* If `val` is a string, it is counted as a class. No escaping is done.
139+
*
140+
* @param {(Array.<string>|Object.<string, boolean>|string)} val
141+
* @param {?Array.<string>} escaping
142+
* @return {String}
143+
*/
144+
exports.classes = pug_classes;
145+
function pug_classes_array(val, escaping) {
146+
var classString = '', className, padding = '', escapeEnabled = Array.isArray(escaping);
147+
for (var i = 0; i < val.length; i++) {
148+
className = pug_classes(val[i]);
149+
if (!className) continue;
150+
escapeEnabled && escaping[i] && (className = pug_escape(className));
151+
classString = classString + padding + className;
152+
padding = ' ';
153+
}
154+
return classString;
155+
}
156+
function pug_classes_object(val) {
157+
var classString = '', padding = '';
158+
for (var key in val) {
159+
if (key && val[key] && pug_has_own_property.call(val, key)) {
160+
classString = classString + padding + key;
161+
padding = ' ';
162+
}
163+
}
164+
return classString;
165+
}
166+
function pug_classes(val, escaping) {
167+
if (Array.isArray(val)) {
168+
return pug_classes_array(val, escaping);
169+
} else if (val && typeof val === 'object') {
170+
return pug_classes_object(val);
171+
} else {
172+
return val || '';
173+
}
174+
}
175+
176+
/**
177+
* Convert object or string to a string of CSS styles delimited by a semicolon.
178+
*
179+
* @param {(Object.<string, string>|string)} val
180+
* @return {String}
181+
*/
182+
183+
exports.style = pug_style;
184+
function pug_style(val) {
185+
if (!val) return '';
186+
if (typeof val === 'object') {
187+
var out = '';
188+
for (var style in val) {
189+
/* istanbul ignore else */
190+
if (pug_has_own_property.call(val, style)) {
191+
out = out + style + ':' + val[style] + ';';
192+
}
193+
}
194+
return out;
195+
} else {
196+
return val + '';
197+
}
198+
};
199+
200+
/**
201+
* Render the given attribute.
202+
*
203+
* @param {String} key
204+
* @param {String} val
205+
* @param {Boolean} escaped
206+
* @param {Boolean} terse
207+
* @return {String}
208+
*/
209+
exports.attr = pug_attr;
210+
function pug_attr(key, val, escaped, terse) {
211+
if (val === false || val == null || !val && (key === 'class' || key === 'style')) {
212+
return '';
213+
}
214+
if (val === true) {
215+
return ' ' + (terse ? key : key + '="' + key + '"');
216+
}
217+
if (typeof val.toJSON === 'function') {
218+
val = val.toJSON();
219+
}
220+
if (typeof val !== 'string') {
221+
val = JSON.stringify(val);
222+
if (!escaped && val.indexOf('"') !== -1) {
223+
return ' ' + key + '=\'' + val.replace(/'/g, '&#39;') + '\'';
224+
}
225+
}
226+
if (escaped) val = pug_escape(val);
227+
return ' ' + key + '="' + val + '"';
228+
};
229+
230+
/**
231+
* Render the given attributes object.
232+
*
233+
* @param {Object} obj
234+
* @param {Object} terse whether to use HTML5 terse boolean attributes
235+
* @return {String}
236+
*/
237+
exports.attrs = pug_attrs;
238+
function pug_attrs(obj, terse){
239+
var attrs = '';
240+
241+
for (var key in obj) {
242+
if (pug_has_own_property.call(obj, key)) {
243+
var val = obj[key];
244+
245+
if ('class' === key) {
246+
val = pug_classes(val);
247+
attrs = pug_attr(key, val, false, terse) + attrs;
248+
continue;
249+
}
250+
if ('style' === key) {
251+
val = pug_style(val);
252+
}
253+
attrs += pug_attr(key, val, false, terse);
254+
}
255+
}
256+
257+
return attrs;
258+
};
259+
260+
/**
261+
* Escape the given string of `html`.
262+
*
263+
* @param {String} html
264+
* @return {String}
265+
* @api private
266+
*/
267+
268+
var pug_match_html = /["&<>]/;
269+
exports.escape = pug_escape;
270+
function pug_escape(_html){
271+
var html = '' + _html;
272+
var regexResult = pug_match_html.exec(html);
273+
if (!regexResult) return _html;
274+
275+
var result = '';
276+
var i, lastIndex, escape;
277+
for (i = regexResult.index, lastIndex = 0; i < html.length; i++) {
278+
switch (html.charCodeAt(i)) {
279+
case 34: escape = '&quot;'; break;
280+
case 38: escape = '&amp;'; break;
281+
case 60: escape = '&lt;'; break;
282+
case 62: escape = '&gt;'; break;
283+
default: continue;
284+
}
285+
if (lastIndex !== i) result += html.substring(lastIndex, i);
286+
lastIndex = i + 1;
287+
result += escape;
288+
}
289+
if (lastIndex !== i) return result + html.substring(lastIndex, i);
290+
else return result;
291+
};
292+
293+
/**
294+
* Re-throw the given `err` in context to the
295+
* the pug in `filename` at the given `lineno`.
296+
*
297+
* @param {Error} err
298+
* @param {String} filename
299+
* @param {String} lineno
300+
* @param {String} str original source
301+
* @api private
302+
*/
303+
304+
exports.rethrow = pug_rethrow;
305+
function pug_rethrow(err, filename, lineno, str){
306+
if (!(err instanceof Error)) throw err;
307+
if ((typeof window != 'undefined' || !filename) && !str) {
308+
err.message += ' on line ' + lineno;
309+
throw err;
310+
}
311+
try {
312+
str = str || __webpack_require__(0).readFileSync(filename, 'utf8')
313+
} catch (ex) {
314+
pug_rethrow(err, null, lineno)
315+
}
316+
var context = 3
317+
, lines = str.split('\n')
318+
, start = Math.max(lineno - context, 0)
319+
, end = Math.min(lines.length, lineno + context);
320+
321+
// Error context
322+
var context = lines.slice(start, end).map(function(line, i){
323+
var curr = i + start + 1;
324+
return (curr == lineno ? ' > ' : ' ')
325+
+ curr
326+
+ '| '
327+
+ line;
328+
}).join('\n');
329+
330+
// Alter exception message
331+
err.path = filename;
332+
err.message = (filename || 'Pug') + ':' + lineno
333+
+ '\n' + context + '\n\n' + err.message;
334+
throw err;
335+
};
336+
337+
338+
/***/ }),
339+
/* 2 */
340+
/***/ (function(module, exports, __webpack_require__) {
341+
342+
var pug = __webpack_require__(1);
343+
344+
function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (time) {pug_html = pug_html + "\u003C!-- this partial is used for frontend and backend--\u003E\u003Cdiv class=\"time\"\u003E \u003Cb\u003ECurrent time\u003C\u002Fb\u003E\u003Cp\u003E" + (pug.escape(null == (pug_interp = time.toISOString()) ? "" : pug_interp)) + "\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cimg src=\"#{require('.\u002Flogo.png')}\"\u003E";}.call(this,"time" in locals_for_with?locals_for_with.time:typeof time!=="undefined"?time:undefined));;return pug_html;};
345+
module.exports = template;
346+
347+
/***/ }),
348+
/* 3 */
349+
/***/ (function(module, exports, __webpack_require__) {
350+
351+
"use strict";
352+
353+
__webpack_require__(7);
354+
// Use the same template for the frontend code
355+
var template = __webpack_require__(2);
356+
357+
setInterval(function () {
358+
var div = document.getElementById('main');
359+
div.innerHTML = template({ time: new Date() });
360+
div.style.color = 'navy';
361+
}, 1000);
362+
363+
364+
/***/ }),
365+
/* 4 */,
366+
/* 5 */,
367+
/* 6 */,
368+
/* 7 */
369+
/***/ (function(module, exports) {
370+
371+
// removed by extract-text-webpack-plugin
372+
373+
/***/ })
374+
/******/ ]);
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><title>pug demo</title><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><!-- this partial is used for frontend and backend--><div class="time"> <b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="#{require('./logo.png')}"></div><script src="bundle.js"></script></body></html>

‎examples/jade-loader/example.js ‎examples/pug-loader/example.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22
require('./main.css');
33
// Use the same template for the frontend code
4-
var template = require('./time.jade');
4+
var template = require('./time.pug');
55

66
setInterval(function () {
77
var div = document.getElementById('main');
File renamed without changes.
File renamed without changes.
File renamed without changes.

‎examples/pug-loader/readme.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# isomorphic pug example
2+
3+
This example shows how to use a different template engine (in this case pug)
4+
to load the `time.pug` template on the backend and frontend.

‎examples/jade-loader/template.jade ‎examples/pug-loader/template.pug

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ html
55
body
66
#main
77
- locals.time = new Date('01 01, 1999');
8-
include ./time.jade
8+
include ./time.pug
File renamed without changes.

‎examples/jade-loader/webpack.config.js ‎examples/pug-loader/webpack.config.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ module.exports = {
1414
rules: [
1515
{ test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
1616
{ test: /\.png$/, loader: 'file-loader' },
17-
{ test: /\.jade$/, loader: 'jade-loader' }
17+
{ test: /\.pug$/, loader: 'pug-loader' }
1818
]
1919
},
2020
plugins: [
2121
new HtmlWebpackPlugin({
2222
filename: 'index.html',
2323
favicon: 'favicon.ico',
24-
template: 'template.jade',
25-
title: 'Jade demo'
24+
template: 'template.pug',
25+
title: 'pug demo'
2626
}),
2727
new ExtractTextPlugin('styles.css')
2828
]

‎migration.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@ This configuration allows you to require partial html from your main `index.html
9898

9999
## Custom template engines
100100

101-
Maybe you prefer jade or blueimp over underscore - or your project is using jade for the front end part.
101+
Maybe you prefer pug or blueimp over underscore - or your project is using pug for the front end part.
102102
With 2.x you can use the webpack loaders either once only for the template as in the following example
103-
where we use jade (requires the [jade-loader](https://github.com/webpack/jade-loader)):
103+
where we use pug (requires the [pug-loader](https://github.com/webpack/pug-loader)):
104104

105105
```js
106106
var HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -109,31 +109,31 @@ module.exports = {
109109
// ...
110110
plugins: [
111111
new HtmlWebpackPlugin({
112-
template: 'jade!template.jade'
112+
template: 'pug!template.pug'
113113
})
114114
]
115115
};
116116
```
117117

118-
or by configuring webpack to handle all `.jade` files:
118+
or by configuring webpack to handle all `.pug` files:
119119

120120
```js
121121
module.exports = {
122122
// ...
123123
module: {
124124
loaders: [
125-
{ test: /\.jade$/, loader: 'jade' }
125+
{ test: /\.pug$/, loader: 'pug' }
126126
]
127127
},
128128
plugins: [
129129
new HtmlWebpackPlugin({
130-
template: 'template.jade'
130+
template: 'template.pug'
131131
})
132132
]
133133
};
134134
```
135135

136-
Please note that if you specify the loader and use 'jade!template.jade' webpack will try to apply the jade loader twice and fail.
136+
Please note that if you specify the loader and use 'pug!template.pug' webpack will try to apply the pug loader twice and fail.
137137

138138
## Isomorph apps
139139

@@ -164,8 +164,8 @@ Using loaders inside a template.js
164164
```js
165165
// This function has to return a string or promised string:
166166
module.exports = function(templateParams) {
167-
// Play around with the arguments and then use the webpack jade loader to load the jade:
168-
return require('./template.jade')({assets: templateParams.htmlWebpackPlugin.files});
167+
// Play around with the arguments and then use the webpack pug loader to load the pug:
168+
return require('./template.pug')({assets: templateParams.htmlWebpackPlugin.files});
169169
};
170170
```
171171

‎package-lock.json

-7,318
This file was deleted.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"extract-text-webpack-plugin": "^4.0.0-beta.0",
3535
"file-loader": "^0.9.0",
3636
"html-loader": "^0.4.4",
37-
"jade": "^1.11.0",
38-
"jade-loader": "^0.8.0",
37+
"pug": "2.0.3",
38+
"pug-loader": "2.4.0",
3939
"jest": "23.3.0",
4040
"rimraf": "^2.5.4",
4141
"semistandard": "8.0.0",

‎spec/basic.spec.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ describe('HtmlWebpackPlugin', function () {
142142
},
143143
plugins: [new HtmlWebpackPlugin({
144144
inject: false,
145-
template: 'jade-loader!' + path.join(__dirname, 'fixtures/template.jade')
145+
template: 'pug-loader!' + path.join(__dirname, 'fixtures/template.pug')
146146
})]
147147
},
148148
['<script src="app_bundle.js', 'Some unique text'], null, done);
@@ -174,7 +174,7 @@ describe('HtmlWebpackPlugin', function () {
174174
},
175175
module: {
176176
rules: [
177-
{test: /\.jade$/, loader: 'jade-loader'}
177+
{test: /\.pug$/, loader: 'pug-loader'}
178178
]
179179
},
180180
output: {
@@ -183,7 +183,7 @@ describe('HtmlWebpackPlugin', function () {
183183
},
184184
plugins: [new HtmlWebpackPlugin({
185185
inject: false,
186-
template: path.join(__dirname, 'fixtures/template.jade')
186+
template: path.join(__dirname, 'fixtures/template.pug')
187187
})]
188188
},
189189
['<script src="app_bundle.js', 'Some unique text'], null, done);
@@ -1211,7 +1211,7 @@ describe('HtmlWebpackPlugin', function () {
12111211
plugins: [
12121212
new HtmlWebpackPlugin({
12131213
inject: false,
1214-
template: 'jade-loader!' + path.join(__dirname, 'fixtures/template.jade')
1214+
template: 'pug-loader!' + path.join(__dirname, 'fixtures/template.pug')
12151215
}),
12161216
examplePlugin
12171217
]

‎spec/example.spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ describe('HtmlWebpackPlugin Examples', function () {
8585
runExample('inline', done);
8686
});
8787

88-
it('jade-loader example', function (done) {
89-
runExample('jade-loader', done);
88+
it('pug-loader example', function (done) {
89+
runExample('pug-loader', done);
9090
});
9191

9292
it('javascript example', function (done) {
File renamed without changes.

0 commit comments

Comments
 (0)
Please sign in to comment.