Skip to content

Commit bd979e2

Browse files
alexander-akaitalexander-akait
committed
refactor: remove the interpolate option
BREAKING CHANGE: the `interpolate` option was removed without replacement, please consider migration template system and relevant loader
1 parent fcba4ec commit bd979e2

11 files changed

+31
-224
lines changed

‎README.md

Lines changed: 15 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,12 @@ You may need to specify loaders for images in your configuration (recommended `f
5353

5454
## Options
5555

56-
| Name | Type | Default | Description |
57-
| :-------------------------------: | :-----------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
58-
| **[`attributes`](#attributes)** | `{Boolean\/Array}` | `['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src']` | Enables/Disables attributes handling |
59-
| **[`root`](#root)** | `{String}` | `undefiend` | Allow to handle root-relative attributes |
60-
| **[`interpolate`](#interpolate)** | `{Boolean}` | `false` | Allow to use expressions in HTML syntax |
61-
| **[`minimize`](#minimize)** | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML |
62-
| **[`esModule`](#esmodule)** | `{Boolean}` | `false` | Use ES modules syntax |
56+
| Name | Type | Default | Description |
57+
| :-----------------------------: | :-----------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
58+
| **[`attributes`](#attributes)** | `{Boolean\/Array}` | `['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src']` | Enables/Disables attributes handling |
59+
| **[`root`](#root)** | `{String}` | `undefiend` | Allow to handle root-relative attributes |
60+
| **[`minimize`](#minimize)** | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML |
61+
| **[`esModule`](#esmodule)** | `{Boolean}` | `false` | Use ES modules syntax |
6362

6463
### `attributes`
6564

@@ -141,45 +140,6 @@ module.exports = {
141140
};
142141
```
143142

144-
### `interpolate`
145-
146-
Type: `Boolean|String`
147-
Default: `false`
148-
149-
Allow to use expressions in HTML syntax.
150-
You can use `interpolate` flag to enable interpolation syntax for ES6 template strings, like so:
151-
152-
```js
153-
require('html-loader?interpolate!./file.html');
154-
```
155-
156-
```html
157-
<img src="${require(`./images/gallery.png`).default}" />
158-
159-
<div>${require('./components/gallery.html').default}</div>
160-
```
161-
162-
> ⚠ By default `file-loader` or `url-loader` use ES module syntax so you need use the `default` property.
163-
> You should not use the `default` property if you setup the `esModule` option to `false` value for `file-loader` or `url-loader`.
164-
165-
**webpack.config.js**
166-
167-
```js
168-
module.exports = {
169-
module: {
170-
rules: [
171-
{
172-
test: /\.html$/i,
173-
loader: 'html-loader',
174-
options: {
175-
interpolate: true,
176-
},
177-
},
178-
],
179-
},
180-
};
181-
```
182-
183143
### `minimize`
184144

185145
Type: `Boolean|Object`
@@ -224,7 +184,7 @@ module.exports = {
224184

225185
**webpack.config.js**
226186

227-
See [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)'s documentation for more information on the available options.
187+
See [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)'s documentation for more information on the available options.
228188

229189
The rules can be disabled using the following options in your `webpack.conf.js`
230190

@@ -347,6 +307,8 @@ a {
347307
}
348308
```
349309

310+
**file.html**
311+
350312
```html
351313
<!DOCTYPE html>
352314
<html>
@@ -399,17 +361,22 @@ module.exports = {
399361

400362
With the same configuration as above:
401363

364+
**file.html**
365+
402366
```html
403-
<!-- file.html -->
404367
<img src="/image.jpg" />
405368
```
406369

370+
**scripts.js**
371+
407372
```js
408373
require('html-loader!./file.html');
409374

410375
// => '<img src="/image.jpg">'
411376
```
412377

378+
**other-scripts.js**
379+
413380
```js
414381
require('html-loader?root=.!./file.html');
415382

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
"webpack": "^4.0.0 || ^5.0.0"
4444
},
4545
"dependencies": {
46-
"es6-templates": "^0.2.3",
4746
"html-minifier-terser": "^5.0.4",
4847
"htmlparser2": "^4.1.0",
4948
"loader-utils": "^1.4.0",

‎src/index.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { getOptions } from 'loader-utils';
22
import validateOptions from 'schema-utils';
33

4-
import { sourcePlugin, interpolatePlugin, minimizerPlugin } from './plugins';
4+
import { sourcePlugin, minimizerPlugin } from './plugins';
55
import Warning from './Warning';
66

77
import {
@@ -40,12 +40,6 @@ export default function htmlLoader(content) {
4040
plugins.push(minimizerPlugin(options));
4141
}
4242

43-
const { interpolate } = options;
44-
45-
if (interpolate) {
46-
plugins.push(interpolatePlugin(options));
47-
}
48-
4943
const { html, messages, warnings, errors } = pluginRunner(plugins).process(
5044
content
5145
);

‎src/options.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
"root": {
1616
"type": "string"
1717
},
18-
"interpolate": {
19-
"anyOf": [{ "type": "boolean" }]
20-
},
2118
"minimize": {
2219
"anyOf": [{ "type": "boolean" }, { "type": "object" }]
2320
},

‎src/plugins/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import sourcePlugin from './source-plugin';
2-
import interpolatePlugin from './interpolate-plugin';
32
import minimizerPlugin from './minimizer-plugin';
43

5-
export { sourcePlugin, interpolatePlugin, minimizerPlugin };
4+
export { sourcePlugin, minimizerPlugin };

‎src/plugins/interpolate-plugin.js

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/utils.js

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,12 @@ export function getImportCode(html, importedMessages, codeOptions) {
5050
return `// Imports\n${code}`;
5151
}
5252

53-
export function getModuleCode(html, replaceableMessages, codeOptions) {
54-
let code = html;
55-
56-
if (!codeOptions.interpolate) {
57-
code = JSON.stringify(code)
58-
// Invalid in JavaScript but valid HTML
59-
.replace(/[\u2028\u2029]/g, (str) =>
60-
str === '\u2029' ? '\\u2029' : '\\u2028'
61-
);
62-
}
53+
export function getModuleCode(html, replaceableMessages) {
54+
let code = JSON.stringify(html)
55+
// Invalid in JavaScript but valid HTML
56+
.replace(/[\u2028\u2029]/g, (str) =>
57+
str === '\u2029' ? '\\u2029' : '\\u2028'
58+
);
6359

6460
let replacersCode = '';
6561

‎test/__snapshots__/interpolate-option.test.js.snap

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎test/__snapshots__/validate-options.test.js.snap

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@ exports[`validate options should throw an error on the "esModule" option with "t
1515
- options.esModule should be a boolean."
1616
`;
1717

18-
exports[`validate options should throw an error on the "interpolate" option with "1" value 1`] = `
19-
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
20-
- options.interpolate should be a boolean."
21-
`;
22-
2318
exports[`validate options should throw an error on the "root" option with "true" value 1`] = `
2419
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
2520
- options.root should be a string."
@@ -28,47 +23,47 @@ exports[`validate options should throw an error on the "root" option with "true"
2823
exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
2924
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
3025
- options has an unknown property 'unknown'. These properties are valid:
31-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
26+
object { attributes?, root?, minimize?, esModule? }"
3227
`;
3328
3429
exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
3530
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
3631
- options has an unknown property 'unknown'. These properties are valid:
37-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
32+
object { attributes?, root?, minimize?, esModule? }"
3833
`;
3934
4035
exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
4136
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
4237
- options has an unknown property 'unknown'. These properties are valid:
43-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
38+
object { attributes?, root?, minimize?, esModule? }"
4439
`;
4540
4641
exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
4742
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
4843
- options has an unknown property 'unknown'. These properties are valid:
49-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
44+
object { attributes?, root?, minimize?, esModule? }"
5045
`;
5146
5247
exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
5348
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
5449
- options has an unknown property 'unknown'. These properties are valid:
55-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
50+
object { attributes?, root?, minimize?, esModule? }"
5651
`;
5752
5853
exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
5954
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
6055
- options has an unknown property 'unknown'. These properties are valid:
61-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
56+
object { attributes?, root?, minimize?, esModule? }"
6257
`;
6358
6459
exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
6560
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
6661
- options has an unknown property 'unknown'. These properties are valid:
67-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
62+
object { attributes?, root?, minimize?, esModule? }"
6863
`;
6964
7065
exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
7166
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
7267
- options has an unknown property 'unknown'. These properties are valid:
73-
object { attributes?, root?, interpolate?, minimize?, esModule? }"
68+
object { attributes?, root?, minimize?, esModule? }"
7469
`;

‎test/interpolate-option.test.js

Lines changed: 0 additions & 51 deletions
This file was deleted.

0 commit comments

Comments
 (0)