Skip to content

Commit 9e3871f

Browse files
michael-ciniawskymichael-ciniawsky
committed
feat(index): add url filter support (options.url) (#162)
1 parent 6da1dce commit 9e3871f

File tree

13 files changed

+235
-60
lines changed

13 files changed

+235
-60
lines changed

‎README.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,40 @@ If your application includes many HTML Components or certain HTML Components are
6969

7070
### `url`
7171

72+
#### `{Boolean}`
73+
74+
**webpack.config.js**
75+
```js
76+
{
77+
loader: 'html-loader',
78+
options: {
79+
url: false
80+
}
81+
}
82+
```
83+
84+
#### `{RegExp}`
85+
7286
**webpack.config.js**
7387
```js
7488
{
7589
loader: 'html-loader',
7690
options: {
77-
url: // TODO add URL filter method (#158 && #159)
91+
url: /filter/
92+
}
93+
}
94+
```
95+
96+
#### `{Function}`
97+
98+
**webpack.config.js**
99+
```js
100+
{
101+
loader: 'html-loader',
102+
options: {
103+
url (url) {
104+
return /filter/.test(url)
105+
}
78106
}
79107
}
80108
```

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function loader(html, map, meta) {
3939

4040
// HTML URL Plugin
4141
if (options.url) {
42-
plugins.push(urls());
42+
plugins.push(urls(options));
4343
}
4444

4545
// HTML IMPORT Plugin
@@ -49,7 +49,9 @@ export default function loader(html, map, meta) {
4949

5050
// TODO(michael-ciniawsky)
5151
// <imports src=""./file.html"> aren't minified (options.template) (#160)
52-
if (options.minimize) plugins.push(minifier());
52+
if (options.minimize) {
53+
plugins.push(minifier());
54+
}
5355

5456
// Reuse HTML AST (PostHTML AST)
5557
// (e.g posthtml-loader) to avoid HTML reparsing
@@ -84,7 +86,7 @@ export default function loader(html, map, meta) {
8486
}
8587

8688
return imports
87-
}, '// HTML Imports\n')
89+
}, '')
8890

8991
const exports = messages
9092
.filter((msg) => msg.type === 'export' ? msg : false)
@@ -102,24 +104,25 @@ export default function loader(html, map, meta) {
102104
}
103105

104106
return exports;
105-
}, '// HTML Exports\n')
107+
}, '')
106108

107109
// TODO(michael-ciniawsky)
108-
// replace with post5/core
109-
// HACK
110-
// Ensure to cleanup/reset messages
110+
// replace posthtml with @post5/core
111+
// HACK Ensure to cleanup/reset messages
111112
// during recursive resolving of imports
112113
messages.length = 0;
113114

114115
html = options.template
115-
? `// HTML\nexport default function (${options.template}) { return \`${html}\`; }`
116-
: `// HTML\nexport default \`${html}\``;
116+
? `function (${options.template}) { return \`${html}\`; }`
117+
: `\`${html}\``;
117118

118119
const result = [
119-
`${imports}\n`,
120-
`${exports}\n`,
121-
html,
122-
].join('\n');
120+
imports ? `// HTML Imports\n${imports}\n` : false,
121+
exports ? `// HTML Exports\n${exports}\n` : false,
122+
`// HTML\nexport default ${html}`,
123+
]
124+
.filter(Boolean)
125+
.join('\n');
123126

124127
cb(null, result);
125128

‎src/options.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
"type": "object",
33
"properties": {
44
"url": {
5-
"type": "boolean"
5+
"anyOf": [
6+
{ "type": "string" },
7+
{ "type": "boolean" },
8+
{ "instanceof": "RegExp" },
9+
{ "instanceof": "Function" }
10+
]
611
},
712
"import": {
813
"anyOf": [

‎src/plugins/url.js

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
11
/* eslint-disable */
22
// External URL (Protocol URL)
33
const URL = /^\w+:\/\//;
4-
// TODO(michael-ciniawsky)
5-
// extend with custom matchers
6-
// e.g <custom-element custom-src="">
7-
// (`options.url.filter`) (#159)
4+
// Attributes Matcher
85
const ATTRS = [
96
{ attrs: { src: true } },
107
{ attrs: { href: true } },
118
{ attrs: { srcset: true } },
129
];
1310

14-
// TODO(michael-ciniawsky)
15-
// add filter method for urls (e.g `options.url.filter`) (#158)
16-
const filter = (url) => {
17-
return URL.test(url) || url.startsWith('//');
11+
const filter = (url, options) => {
12+
if (URL.test(url)) {
13+
return true;
14+
}
15+
16+
if (url.startsWith('//')) {
17+
return true;
18+
}
19+
20+
if (options.url instanceof RegExp) {
21+
return options.url.test(url);
22+
}
23+
24+
if (typeof options.url === 'function') {
25+
return options.url(url);
26+
}
27+
28+
return false;
1829
};
1930

2031
export default function (options = {}) {
@@ -30,7 +41,7 @@ export default function (options = {}) {
3041
}
3142

3243
// Ignore external && filtered urls
33-
if (filter(node.attrs.src)) {
44+
if (filter(node.attrs.src, options)) {
3445
return node;
3546
}
3647

@@ -48,10 +59,11 @@ export default function (options = {}) {
4859

4960
return node;
5061
}
62+
5163
// <tag href="path/to/file.ext">
5264
if (node.attrs.href) {
5365
// Ignore external && filtered urls
54-
if (filter(node.attrs.href)) {
66+
if (filter(node.attrs.href, options)) {
5567
return node;
5668
}
5769

@@ -72,7 +84,7 @@ export default function (options = {}) {
7284
// <tag srcset="path/to/file.ext">
7385
if (node.attrs.srcset) {
7486
// Ignore external && filtered urls
75-
if (filter(node.attrs.srcset)) {
87+
if (filter(node.attrs.srcset, options)) {
7688
return node;
7789
}
7890

‎test/__snapshots__/loader.test.js.snap

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import HTML__URL__0 from './file.png';
66
import HTML__IMPORT__0 from './file.html';
77
88
9-
// HTML Exports
10-
11-
129
// HTML
1310
export default \`<!DOCTYPE html>
1411
<html lang=\\"en\\">

‎test/fixtures/options/url/filter/fixture.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- Ignore -->
2+
<img src="//file.png">
3+
<img src="//cdn.com/file.png">
4+
<img src="http://cdn.com/file.png">
5+
<img src="https://cdn.com/file.png">
6+
<!-- Transform -->
7+
<img src="./file.png">
8+
<img src="/file.png">
9+
<!-- Filter -->
10+
<img src="./filter/file.png">
11+
<img src="/filter/file.png">

‎test/fixtures/options/url/filter/fixture.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import html from './fixture.html';
2+
3+
export default html;

‎test/options/__snapshots__/import.test.js.snap

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Options import {Boolean} - false 1`] = `
4-
"// HTML Imports
5-
6-
7-
// HTML Exports
8-
9-
10-
// HTML
4+
"// HTML
115
export default \`<!DOCTYPE html>
126
<html lang=\\"en\\">
137
<head>
@@ -39,9 +33,6 @@ import HTML__IMPORT__2 from './1.html';
3933
import HTML__IMPORT__3 from '/2.html';
4034
4135
42-
// HTML Exports
43-
44-
4536
// HTML
4637
export default \`<!DOCTYPE html>
4738
<html lang=\\"en\\">
@@ -74,9 +65,6 @@ import HTML__IMPORT__2 from './1.html';
7465
import HTML__IMPORT__3 from '/2.html';
7566
7667
77-
// HTML Exports
78-
79-
8068
// HTML
8169
export default \`<!-- Ignore -->
8270
@@ -107,9 +95,6 @@ import HTML__IMPORT__2 from './1.html';
10795
import HTML__IMPORT__3 from '/2.html';
10896
10997
110-
// HTML Exports
111-
112-
11398
// HTML
11499
export default \`<!-- Ignore -->
115100

‎test/options/__snapshots__/minimize.test.js.snap

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ exports[`Options minimize {Boolean} 1`] = `
55
import HTML__URL__0 from './file.png';
66
77
8-
// HTML Exports
9-
10-
118
// HTML
129
export default \`<!DOCTYPE html><html lang=\\"en\\"><head><meta charset=\\"utf-8\\"><title>HTML Loader</title></head><body><div id=\\"app\\"></div><img src=\\"\${HTML__URL__0}\\"></body></html>\`"
1310
`;

‎test/options/__snapshots__/template.test.js.snap

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import HTML__URL__0 from './urls/file.png';
66
import HTML__IMPORT__0 from './imports/import.html';
77
88
9-
// HTML Exports
10-
11-
129
// HTML
1310
export default function (_) { return \`<!DOCTYPE html>
1411
<html lang=\\"en\\">
@@ -34,9 +31,6 @@ import HTML__URL__0 from './urls/file.png';
3431
import HTML__IMPORT__0 from './imports/import.html';
3532
3633
37-
// HTML Exports
38-
39-
4034
// HTML
4135
export default function ($) { return \`<!DOCTYPE html>
4236
<html lang=\\"en\\">

0 commit comments

Comments
 (0)