Skip to content

Commit 6da1dce

Browse files
michael-ciniawskymichael-ciniawsky
committed
feat(index): add <import> filter support (options.import) (#163)
1 parent 75a23b6 commit 6da1dce

File tree

8 files changed

+234
-10
lines changed

8 files changed

+234
-10
lines changed

Diff for: ‎README.md

+29-1
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,40 @@ If your application includes many HTML Components or certain HTML Components are
9393
</div>
9494
```
9595

96+
#### `{Boolean}`
97+
98+
**webpack.config.js**
99+
```js
100+
{
101+
loader: 'html-loader',
102+
options: {
103+
import: false
104+
}
105+
}
106+
```
107+
108+
#### `{RegExp}`
109+
96110
**webpack.config.js**
97111
```js
98112
{
99113
loader: 'html-loader',
100114
options: {
101-
import: // TODO add URL filter method (#158)
115+
import: /filter/
116+
}
117+
}
118+
```
119+
120+
#### `{Function}`
121+
122+
**webpack.config.js**
123+
```js
124+
{
125+
loader: 'html-loader',
126+
options: {
127+
import (url) {
128+
return /filter/.test(url)
129+
}
102130
}
103131
}
104132
```

Diff for: ‎src/index.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,16 @@ export default function loader(html, map, meta) {
3737

3838
const plugins = [];
3939

40-
if (options.url) plugins.push(urls());
41-
if (options.import) plugins.push(imports(options));
40+
// HTML URL Plugin
41+
if (options.url) {
42+
plugins.push(urls());
43+
}
44+
45+
// HTML IMPORT Plugin
46+
if (options.import) {
47+
plugins.push(imports(options));
48+
}
49+
4250
// TODO(michael-ciniawsky)
4351
// <imports src=""./file.html"> aren't minified (options.template) (#160)
4452
if (options.minimize) plugins.push(minifier());

Diff for: ‎src/options.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
"type": "boolean"
66
},
77
"import": {
8-
"type": "boolean"
8+
"anyOf": [
9+
{ "type": "string" },
10+
{ "type": "boolean" },
11+
{ "instanceof": "RegExp" },
12+
{ "instanceof": "Function" }
13+
]
914
},
1015
"template": {
1116
"type": [ "boolean", "string" ]

Diff for: ‎src/plugins/import.js

+19-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,25 @@
22
// External URL (Protocol URL)
33
const URL = /^\w+:\/\//;
44
const TAGS = [ { tag: 'import' }, { tag: 'include' } ];
5-
// TODO(michael-ciniawsky)
6-
// add filter method for urls (e.g `options.import`) (#158)
7-
const filter = (url) => {
8-
return URL.test(url) || url.startsWith('//');
5+
6+
const filter = (url, options) => {
7+
if (URL.test(url)) {
8+
return true;
9+
}
10+
11+
if (url.startsWith('//')) {
12+
return true;
13+
}
14+
15+
if (options.import instanceof RegExp) {
16+
return options.import.test(url);
17+
}
18+
19+
if (typeof options.import === 'function') {
20+
return options.import(url);
21+
}
22+
23+
return false;
924
};
1025

1126
export default function (options = {}) {

Diff for: ‎test/fixtures/options/import/filter/fixture.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!-- Ignore -->
2+
<import src="//file.html"></import>
3+
<import src="//cdn.com/file.html"></import>
4+
<import src="http://cdn.com/file.html"></import>
5+
<import src="https://cdn.com/file.html"></import>
6+
<!-- Transform -->
7+
<import src="./1.html"></import>
8+
<import src="/2.html"></import>
9+
<!-- Filter (Ignore) -->
10+
<import src="./filter/1.html"></import>
11+
<import src="/filter/2.html"></import>
12+
<!-- Transform -->
13+
<include src="./1.html"></include>
14+
<include src="/2.html"></include>
15+
<!-- Filter (Ignore) -->
16+
<include src="./filter/1.html"></include>
17+
<include src="/filter/2.html"></include>
18+

Diff for: ‎test/fixtures/options/import/filter/fixture.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import html from './fixture.html';
2+
3+
export default html;

Diff for: ‎test/options/__snapshots__/import.test.js.snap

+98-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,37 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Options import {Boolean} 1`] = `
3+
exports[`Options import {Boolean} - false 1`] = `
4+
"// HTML Imports
5+
6+
7+
// HTML Exports
8+
9+
10+
// HTML
11+
export default \`<!DOCTYPE html>
12+
<html lang=\\"en\\">
13+
<head>
14+
<meta charset=\\"utf-8\\">
15+
<title>HTML Loader</title>
16+
</head>
17+
<body>
18+
<!-- Ignore -->
19+
<import src=\\"//file.html\\"></import>
20+
<import src=\\"//cdn.com/file.html\\"></import>
21+
<import src=\\"http://cdn.com/file.html\\"></import>
22+
<import src=\\"https://cdn.com/file.html\\"></import>
23+
<!-- Transform -->
24+
<import src=\\"./1.html\\"></import>
25+
<import src=\\"/2.html\\"></import>
26+
27+
<include src=\\"./1.html\\"></include>
28+
<include src=\\"/2.html\\"></include>
29+
</body>
30+
</html>
31+
\`"
32+
`;
33+
34+
exports[`Options import {Boolean} - true - default 1`] = `
435
"// HTML Imports
536
import HTML__IMPORT__0 from './1.html';
637
import HTML__IMPORT__1 from '/2.html';
@@ -32,5 +63,71 @@ export default \`<!DOCTYPE html>
3263
\${HTML__IMPORT__3}
3364
</body>
3465
</html>
66+
\`"
67+
`;
68+
69+
exports[`Options import {Function} 1`] = `
70+
"// HTML Imports
71+
import HTML__IMPORT__0 from './1.html';
72+
import HTML__IMPORT__1 from '/2.html';
73+
import HTML__IMPORT__2 from './1.html';
74+
import HTML__IMPORT__3 from '/2.html';
75+
76+
77+
// HTML Exports
78+
79+
80+
// HTML
81+
export default \`<!-- Ignore -->
82+
83+
84+
85+
86+
<!-- Transform -->
87+
\${HTML__IMPORT__0}
88+
\${HTML__IMPORT__1}
89+
<!-- Filter (Ignore) -->
90+
91+
92+
<!-- Transform -->
93+
\${HTML__IMPORT__2}
94+
\${HTML__IMPORT__3}
95+
<!-- Filter (Ignore) -->
96+
97+
98+
99+
\`"
100+
`;
101+
102+
exports[`Options import {RegExp} 1`] = `
103+
"// HTML Imports
104+
import HTML__IMPORT__0 from './1.html';
105+
import HTML__IMPORT__1 from '/2.html';
106+
import HTML__IMPORT__2 from './1.html';
107+
import HTML__IMPORT__3 from '/2.html';
108+
109+
110+
// HTML Exports
111+
112+
113+
// HTML
114+
export default \`<!-- Ignore -->
115+
116+
117+
118+
119+
<!-- Transform -->
120+
\${HTML__IMPORT__0}
121+
\${HTML__IMPORT__1}
122+
<!-- Filter (Ignore) -->
123+
124+
125+
<!-- Transform -->
126+
\${HTML__IMPORT__2}
127+
\${HTML__IMPORT__3}
128+
<!-- Filter (Ignore) -->
129+
130+
131+
35132
\`"
36133
`;

Diff for: ‎test/options/import.test.js

+51-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import webpack from '../helpers/compiler';
33

44
describe('Options', () => {
55
describe('import', () => {
6-
test('{Boolean}', async () => {
6+
test('{Boolean} - true - default', async () => {
77
const config = {
88
loader: {
99
test: /\.html$/,
@@ -16,5 +16,55 @@ describe('Options', () => {
1616

1717
expect(source).toMatchSnapshot();
1818
});
19+
20+
test('{Boolean} - false', async () => {
21+
const config = {
22+
loader: {
23+
test: /\.html$/,
24+
options: {
25+
import: false
26+
},
27+
},
28+
};
29+
30+
const stats = await webpack('options/import/fixture.js', config);
31+
const { source } = stats.toJson().modules[1];
32+
33+
expect(source).toMatchSnapshot();
34+
});
35+
36+
test('{RegExp}', async () => {
37+
const config = {
38+
loader: {
39+
test: /\.html$/,
40+
options: {
41+
import: /filter/
42+
},
43+
},
44+
};
45+
46+
const stats = await webpack('options/import/filter/fixture.js', config);
47+
const { source } = stats.toJson().modules[1];
48+
49+
expect(source).toMatchSnapshot();
50+
});
51+
52+
test('{Function}', async () => {
53+
const config = {
54+
loader: {
55+
test: /\.html$/,
56+
options: {
57+
import (url) {
58+
return /filter/.test(url)
59+
}
60+
},
61+
},
62+
};
63+
64+
const stats = await webpack('options/import/filter/fixture.js', config);
65+
const { source } = stats.toJson().modules[1];
66+
67+
expect(source).toMatchSnapshot();
68+
});
1969
});
2070
});

0 commit comments

Comments
 (0)