Skip to content

Commit cfbea7d

Browse files
michael-ciniawskymichael-ciniawsky
committed
feat(import): add <import> filter support (options.import)
1 parent 888645c commit cfbea7d

File tree

8 files changed

+265
-10
lines changed

8 files changed

+265
-10
lines changed

‎README.md‎

Lines changed: 29 additions & 1 deletion
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
```

‎src/index.js‎

Lines changed: 10 additions & 2 deletions
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());

‎src/options.json‎

Lines changed: 6 additions & 1 deletion
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" ]

‎src/plugins/import.js‎

Lines changed: 19 additions & 4 deletions
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 = {}) {

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

Lines changed: 18 additions & 0 deletions
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+

‎test/fixtures/options/import/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: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Options import {Boolean} 1`] = `
3+
exports[`Options import {Boolean} - false 1`] = `
4+
"// HTML
5+
export default \`<!DOCTYPE html>
6+
<html lang=\\"en\\">
7+
<head>
8+
<meta charset=\\"utf-8\\">
9+
<title>HTML Loader</title>
10+
</head>
11+
<body>
12+
<!-- Ignore -->
13+
<import src=\\"//file.html\\"></import>
14+
<import src=\\"//cdn.com/file.html\\"></import>
15+
<import src=\\"http://cdn.com/file.html\\"></import>
16+
<import src=\\"https://cdn.com/file.html\\"></import>
17+
<!-- Transform -->
18+
<import src=\\"./1.html\\"></import>
19+
<import src=\\"/2.html\\"></import>
20+
21+
<include src=\\"./1.html\\"></include>
22+
<include src=\\"/2.html\\"></include>
23+
</body>
24+
</html>
25+
\`"
26+
`;
27+
28+
exports[`Options import {Boolean} - true - default 1`] = `
429
"// HTML Imports
530
import HTML__IMPORT__0 from './1.html';
631
import HTML__IMPORT__1 from '/2.html';
@@ -32,5 +57,92 @@ export default \`<!DOCTYPE html>
3257
\${HTML__IMPORT__3}
3358
</body>
3459
</html>
60+
\`"
61+
`;
62+
63+
exports[`Options import {Function} 1`] = `
64+
"// HTML Imports
65+
import HTML__IMPORT__0 from './1.html';
66+
import HTML__IMPORT__1 from '/2.html';
67+
import HTML__IMPORT__2 from './1.html';
68+
import HTML__IMPORT__3 from '/2.html';
69+
70+
// HTML
71+
export default \`<!-- Ignore -->
72+
73+
74+
75+
76+
<!-- Transform -->
77+
\${HTML__IMPORT__0}
78+
\${HTML__IMPORT__1}
79+
<!-- Filter (Ignore) -->
80+
81+
82+
<!-- Transform -->
83+
\${HTML__IMPORT__2}
84+
\${HTML__IMPORT__3}
85+
<!-- Filter (Ignore) -->
86+
87+
88+
89+
\`"
90+
`;
91+
92+
exports[`Options import {RegExp} 1`] = `
93+
"// HTML Imports
94+
import HTML__IMPORT__0 from './1.html';
95+
import HTML__IMPORT__1 from '/2.html';
96+
import HTML__IMPORT__2 from './1.html';
97+
import HTML__IMPORT__3 from '/2.html';
98+
99+
// HTML
100+
export default \`<!-- Ignore -->
101+
102+
103+
104+
105+
<!-- Transform -->
106+
\${HTML__IMPORT__0}
107+
\${HTML__IMPORT__1}
108+
<!-- Filter (Ignore) -->
109+
110+
111+
<!-- Transform -->
112+
\${HTML__IMPORT__2}
113+
\${HTML__IMPORT__3}
114+
<!-- Filter (Ignore) -->
115+
116+
117+
118+
\`"
119+
`;
120+
121+
exports[`Options import {String} 1`] = `
122+
"// HTML Imports
123+
import HTML__IMPORT__0 from './1.html';
124+
import HTML__IMPORT__1 from '/2.html';
125+
import HTML__IMPORT__2 from './1.html';
126+
import HTML__IMPORT__3 from '/2.html';
127+
128+
// HTML
129+
export default \`<!-- Ignore -->
130+
131+
132+
133+
134+
<!-- Transform -->
135+
\${HTML__IMPORT__0}
136+
\${HTML__IMPORT__1}
137+
<!-- Filter (Ignore) -->
138+
139+
140+
<!-- Transform -->
141+
\${HTML__IMPORT__2}
142+
\${HTML__IMPORT__3}
143+
<!-- Filter (Ignore) -->
144+
145+
146+
35147
\`"
36148
`;

‎test/options/import.test.js‎

Lines changed: 67 additions & 1 deletion
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,71 @@ 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('{String}', 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('{RegExp}', async () => {
53+
const config = {
54+
loader: {
55+
test: /\.html$/,
56+
options: {
57+
import: /filter/
58+
},
59+
},
60+
};
61+
62+
const stats = await webpack('options/import/filter/fixture.js', config);
63+
const { source } = stats.toJson().modules[1];
64+
65+
expect(source).toMatchSnapshot();
66+
});
67+
68+
test('{Function}', async () => {
69+
const config = {
70+
loader: {
71+
test: /\.html$/,
72+
options: {
73+
import (url) {
74+
return /filter/.test(url)
75+
}
76+
},
77+
},
78+
};
79+
80+
const stats = await webpack('options/import/filter/fixture.js', config);
81+
const { source } = stats.toJson().modules[1];
82+
83+
expect(source).toMatchSnapshot();
84+
});
1985
});
2086
});

0 commit comments

Comments
 (0)