Skip to content
This repository was archived by the owner on Aug 27, 2026. It is now read-only.

Commit 1c24662

Browse files
evilebottnawievilebottnawi
authored
refactor: move the root option under the attributes option (#254)
BREAKING CHANGE: the `root` option was moved under the `attributes` option, please see README.md
1 parent 888b8fe commit 1c24662

9 files changed

Lines changed: 649 additions & 890 deletions

‎README.md‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +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-
| **[`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 |
56+
| Name | Type | Default | Description |
57+
| :-----------------------------: | :------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
58+
| **[`attributes`](#attributes)** | `{Boolean\/Array\/Object}` | `['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 |
6262

6363
### `attributes`
6464

@@ -114,7 +114,39 @@ module.exports = {
114114

115115
To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass set `false` value.
116116

117-
### `root`
117+
#### `Object`
118+
119+
Type: `Array`
120+
Default: `{ list: ['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src'], root: undefined }`
121+
122+
Allows you to specify which tags and attributes to process.
123+
Pass an array of `<tag>:<attribute>` or `:<attribute>` combinations.
124+
You can specify which tag-attribute combination should be processed by this loader via the query parameter `attributes`, for example:
125+
126+
**webpack.config.js**
127+
128+
```js
129+
module.exports = {
130+
module: {
131+
rules: [
132+
{
133+
test: /\.html$/i,
134+
loader: 'html-loader',
135+
options: {
136+
attributes: {
137+
// May be omitted
138+
list: [':data-src', 'custom-elements:data-src'],
139+
// May be omitted
140+
root: '.',
141+
},
142+
},
143+
},
144+
],
145+
},
146+
};
147+
```
148+
149+
#### `root`
118150

119151
Type: `String`
120152
Default: `undefined`
@@ -132,7 +164,9 @@ module.exports = {
132164
test: /\.html$/i,
133165
loader: 'html-loader',
134166
options: {
135-
root: './file.html',
167+
attributes: {
168+
root: '.',
169+
},
136170
},
137171
},
138172
],
@@ -285,6 +319,7 @@ require('html-loader?-attributes!./file.html');
285319

286320
// => '<img src="image.jpg" data-src="image2x.png" >'
287321
```
322+
288323
> :warning: `-attributes` it is set attributes: false
289324
290325
```html

‎src/options.json‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,24 @@
99
"items": {
1010
"type": "string"
1111
}
12+
},
13+
{
14+
"type": "object",
15+
"properties": {
16+
"root": {
17+
"type": "string"
18+
},
19+
"list": {
20+
"type": "array",
21+
"items": {
22+
"type": "string"
23+
}
24+
}
25+
},
26+
"additionalProperties": false
1227
}
1328
]
1429
},
15-
"root": {
16-
"type": "string"
17-
},
1830
"minimize": {
1931
"anyOf": [{ "type": "boolean" }, { "type": "object" }]
2032
},

‎src/plugins/source-plugin.js‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -373,31 +373,44 @@ function parseSrc(input) {
373373
return { value, startIndex };
374374
}
375375

376+
const defaultAttributes = [
377+
'source:srcset',
378+
'img:src',
379+
'img:srcset',
380+
'audio:src',
381+
'video:src',
382+
'track:src',
383+
'embed:src',
384+
'source:src',
385+
'input:src',
386+
'object:data',
387+
'script:src',
388+
];
389+
376390
export default (options) =>
377391
function process(html, result) {
378-
const tagsAndAttributes =
379-
typeof options.attributes === 'undefined' || options.attributes === true
380-
? [
381-
'source:srcset',
382-
'img:src',
383-
'img:srcset',
384-
'audio:src',
385-
'video:src',
386-
'track:src',
387-
'embed:src',
388-
'source:src',
389-
'input:src',
390-
'object:data',
391-
'script:src',
392-
]
393-
: options.attributes;
392+
let tagsAndAttributes;
393+
let root;
394+
395+
if (
396+
typeof options.attributes === 'undefined' ||
397+
options.attributes === true
398+
) {
399+
tagsAndAttributes = defaultAttributes;
400+
} else if (Array.isArray(options.attributes)) {
401+
tagsAndAttributes = options.attributes;
402+
} else {
403+
tagsAndAttributes = options.attributes.list || defaultAttributes;
404+
// eslint-disable-next-line no-undefined
405+
root = options.attributes.root ? options.attributes.root : undefined;
406+
}
394407

395408
const sources = [];
396409
const onOpenTagFilter = new RegExp(
397410
`^(${tagsAndAttributes.join('|')})$`,
398411
'i'
399412
);
400-
const filter = (value) => isUrlRequest(value, options.root);
413+
const filter = (value) => isUrlRequest(value, root);
401414
const parser = new Parser(
402415
{
403416
attributesMeta: {},
@@ -518,10 +531,7 @@ export default (options) =>
518531
}
519532
}
520533

521-
const importKey = urlToRequest(
522-
decodeURIComponent(source.value),
523-
options.root
524-
);
534+
const importKey = urlToRequest(decodeURIComponent(source.value), root);
525535
let importName = importsMap.get(importKey);
526536

527537
if (!importName) {

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

Lines changed: 421 additions & 104 deletions
Large diffs are not rendered by default.

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

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

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

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,64 @@
33
exports[`validate options should throw an error on the "attributes" option with "true" value 1`] = `
44
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
55
- options.attributes should be one of these:
6-
boolean | [string, ...]
6+
boolean | [string, ...] | object { root?, list? }
77
Details:
88
* options.attributes should be a boolean.
99
* options.attributes should be an array:
10-
[string, ...]"
10+
[string, ...]
11+
* options.attributes should be an object:
12+
object { root?, list? }"
1113
`;
1214
1315
exports[`validate options should throw an error on the "esModule" option with "true" value 1`] = `
1416
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
1517
- options.esModule should be a boolean."
1618
`;
1719
18-
exports[`validate options should throw an error on the "root" option with "true" value 1`] = `
19-
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
20-
- options.root should be a string."
21-
`;
22-
2320
exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
2421
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
2522
- options has an unknown property 'unknown'. These properties are valid:
26-
object { attributes?, root?, minimize?, esModule? }"
23+
object { attributes?, minimize?, esModule? }"
2724
`;
2825
2926
exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
3027
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
3128
- options has an unknown property 'unknown'. These properties are valid:
32-
object { attributes?, root?, minimize?, esModule? }"
29+
object { attributes?, minimize?, esModule? }"
3330
`;
3431
3532
exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
3633
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
3734
- options has an unknown property 'unknown'. These properties are valid:
38-
object { attributes?, root?, minimize?, esModule? }"
35+
object { attributes?, minimize?, esModule? }"
3936
`;
4037
4138
exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
4239
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
4340
- options has an unknown property 'unknown'. These properties are valid:
44-
object { attributes?, root?, minimize?, esModule? }"
41+
object { attributes?, minimize?, esModule? }"
4542
`;
4643
4744
exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
4845
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
4946
- options has an unknown property 'unknown'. These properties are valid:
50-
object { attributes?, root?, minimize?, esModule? }"
47+
object { attributes?, minimize?, esModule? }"
5148
`;
5249
5350
exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
5451
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
5552
- options has an unknown property 'unknown'. These properties are valid:
56-
object { attributes?, root?, minimize?, esModule? }"
53+
object { attributes?, minimize?, esModule? }"
5754
`;
5855
5956
exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
6057
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
6158
- options has an unknown property 'unknown'. These properties are valid:
62-
object { attributes?, root?, minimize?, esModule? }"
59+
object { attributes?, minimize?, esModule? }"
6360
`;
6461
6562
exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
6663
"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
6764
- options has an unknown property 'unknown'. These properties are valid:
68-
object { attributes?, root?, minimize?, esModule? }"
65+
object { attributes?, minimize?, esModule? }"
6966
`;

0 commit comments

Comments
 (0)