Skip to content

Commit 8e5a0cd

Browse files
evilebottnawievilebottnawi
authored
fix: emit an error on interpolation compile problems (#233)
1 parent ee4b838 commit 8e5a0cd

File tree

7 files changed

+74
-30
lines changed

7 files changed

+74
-30
lines changed

‎src/index.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,16 @@ export default function htmlLoader(source) {
110110
}
111111

112112
if (options.interpolate && options.interpolate !== 'require') {
113-
// Double escape quotes so that they are not unescaped completely in the template string
114-
content = content.replace(/\\"/g, '\\\\"');
115-
content = content.replace(/\\'/g, "\\\\\\'");
113+
try {
114+
// Double escape quotes so that they are not unescaped completely in the template string
115+
content = compile(
116+
`\`${content.replace(/\\"/g, '\\\\"').replace(/\\'/g, "\\\\\\'")}\``
117+
).code;
118+
} catch (error) {
119+
this.emitError(error);
116120

117-
content = compile(`\`${content}\``).code;
121+
content = JSON.stringify(content);
122+
}
118123
} else {
119124
content = JSON.stringify(content);
120125
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,25 @@ exports[`'interpolate' option should disabled by default: result 1`] = `
2020

2121
exports[`'interpolate' option should disabled by default: warnings 1`] = `Array []`;
2222

23+
exports[`'interpolate' option should emit an error on broken interpolation syntax: errors 1`] = `
24+
Array [
25+
"ModuleError: Module Error (from /path/to/file.js):
26+
Line 1: Unexpected token |",
27+
]
28+
`;
29+
30+
exports[`'interpolate' option should emit an error on broken interpolation syntax: module 1`] = `
31+
"// Exports
32+
module.exports = \\"<div>\${broken|||test}</div>\\\\n\\";"
33+
`;
34+
35+
exports[`'interpolate' option should emit an error on broken interpolation syntax: result 1`] = `
36+
"<div>\${broken|||test}</div>
37+
"
38+
`;
39+
40+
exports[`'interpolate' option should emit an error on broken interpolation syntax: warnings 1`] = `Array []`;
41+
2342
exports[`'interpolate' option should work with boolean notation: errors 1`] = `Array []`;
2443

2544
exports[`'interpolate' option should work with boolean notation: module 1`] = `

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

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -546,6 +546,31 @@ exports[`"minimize" option should be turned on in "production" mode: result 1`]
546546
547547
exports[`"minimize" option should be turned on in "production" mode: warnings 1`] = `Array []`;
548548
549+
exports[`"minimize" option should emit an error on broken HTML syntax: errors 1`] = `
550+
Array [
551+
"ModuleError: Module Error (from /path/to/file.js):
552+
Parse Error: < img src=\\"image.png\\" >",
553+
]
554+
`;
555+
556+
exports[`"minimize" option should emit an error on broken HTML syntax: module 1`] = `
557+
"// Imports
558+
var ___HTML_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
559+
var ___HTML_LOADER_IDENT_0___ = require(\\"./image.png\\");
560+
var ___HTML_LOADER_IDENT_1___ = require(\\"./image.png\\");
561+
// Exports
562+
module.exports = \\"Text < img src=\\\\\\"image.png\\\\\\" >\\\\nText <<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_0___) + \\"\\\\\\">\\\\nText ><img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_1___) + \\"\\\\\\">\\\\n\\";"
563+
`;
564+
565+
exports[`"minimize" option should emit an error on broken HTML syntax: result 1`] = `
566+
"Text < img src=\\"image.png\\" >
567+
Text <<img src=\\"/webpack/public/path/image.png\\">
568+
Text ><img src=\\"/webpack/public/path/image.png\\">
569+
"
570+
`;
571+
572+
exports[`"minimize" option should emit an error on broken HTML syntax: warnings 1`] = `Array []`;
573+
549574
exports[`"minimize" option should not work with a value equal to "false": errors 1`] = `Array []`;
550575
551576
exports[`"minimize" option should not work with a value equal to "false": module 1`] = `
@@ -859,31 +884,6 @@ Text ><img src=\\"/webpack/public/path/image.png\\">--> <br> <br/> &lt;div id =
859884
860885
exports[`"minimize" option should support options for minimizer: warnings 1`] = `Array []`;
861886
862-
exports[`"minimize" option should work emit an error on broken HTML syntax: errors 1`] = `
863-
Array [
864-
"ModuleError: Module Error (from /path/to/file.js):
865-
Parse Error: < img src=\\"image.png\\" >",
866-
]
867-
`;
868-
869-
exports[`"minimize" option should work emit an error on broken HTML syntax: module 1`] = `
870-
"// Imports
871-
var ___HTML_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
872-
var ___HTML_LOADER_IDENT_0___ = require(\\"./image.png\\");
873-
var ___HTML_LOADER_IDENT_1___ = require(\\"./image.png\\");
874-
// Exports
875-
module.exports = \\"Text < img src=\\\\\\"image.png\\\\\\" >\\\\nText <<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_0___) + \\"\\\\\\">\\\\nText ><img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_1___) + \\"\\\\\\">\\\\n\\";"
876-
`;
877-
878-
exports[`"minimize" option should work emit an error on broken HTML syntax: result 1`] = `
879-
"Text < img src=\\"image.png\\" >
880-
Text <<img src=\\"/webpack/public/path/image.png\\">
881-
Text ><img src=\\"/webpack/public/path/image.png\\">
882-
"
883-
`;
884-
885-
exports[`"minimize" option should work emit an error on broken HTML syntax: warnings 1`] = `Array []`;
886-
887887
exports[`"minimize" option should work with a value equal to "true": errors 1`] = `Array []`;
888888
889889
exports[`"minimize" option should work with a value equal to "true": module 1`] = `

‎test/fixtures/broken-interpolation-syntax.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div>${broken|||test}</div>

‎test/fixtures/broken-interpolation-syntax.js

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

‎test/interpolate-option.test.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,20 @@ describe("'interpolate' option", () => {
4444
expect(getWarnings(stats)).toMatchSnapshot('warnings');
4545
expect(getErrors(stats)).toMatchSnapshot('errors');
4646
});
47+
48+
it('should emit an error on broken interpolation syntax', async () => {
49+
const compiler = getCompiler('broken-interpolation-syntax.js', {
50+
interpolate: true,
51+
});
52+
const stats = await compile(compiler);
53+
54+
expect(
55+
getModuleSource('./broken-interpolation-syntax.html', stats)
56+
).toMatchSnapshot('module');
57+
expect(
58+
execute(readAsset('main.bundle.js', compiler, stats))
59+
).toMatchSnapshot('result');
60+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
61+
expect(getErrors(stats)).toMatchSnapshot('errors');
62+
});
4763
});

‎test/minimize-option.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe('"minimize" option', () => {
9898
expect(getErrors(stats)).toMatchSnapshot('errors');
9999
});
100100

101-
it('should work emit an error on broken HTML syntax', async () => {
101+
it('should emit an error on broken HTML syntax', async () => {
102102
const compiler = getCompiler('broken-html-syntax.js', { minimize: true });
103103
const stats = await compile(compiler);
104104

0 commit comments

Comments
 (0)