Skip to content

Commit 2c640c6

Browse files
fix: include feature (#303)
1 parent 1acd204 commit 2c640c6

File tree

9 files changed

+90
-31
lines changed

9 files changed

+90
-31
lines changed

.editorconfig

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,6 @@ trim_trailing_whitespace = true
1010

1111
[*.md]
1212
trim_trailing_whitespace = false
13+
14+
[test/fixtures/*.html]
15+
insert_final_newline = false

src/plugins/source-plugin.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,11 @@ export default (options) =>
340340
case 'include': {
341341
let source;
342342

343+
// eslint-disable-next-line no-underscore-dangle
344+
if (parser._tokenizer._state === 4) {
345+
return;
346+
}
347+
343348
try {
344349
source = parseSrc(value);
345350
} catch (error) {
@@ -359,15 +364,22 @@ export default (options) =>
359364
return;
360365
}
361366

362-
const { startIndex, endIndex } = parser;
367+
const { startIndex } = parser;
368+
const closingTag = html
369+
.slice(startIndex - 1)
370+
.match(
371+
new RegExp(`<s*${tag}[^>]*>(?:.*?)</${tag}[^<>]*>`, 's')
372+
);
373+
374+
if (!closingTag) {
375+
return;
376+
}
377+
378+
const endIndex = startIndex + closingTag[0].length;
363379
const importItem = getImportItem(source.value);
364380
const replacementItem = getReplacementItem(importItem);
365381

366-
sources.push({
367-
replacementItem,
368-
startIndex,
369-
endIndex: endIndex + 1,
370-
});
382+
sources.push({ replacementItem, startIndex, endIndex });
371383

372384
break;
373385
}

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

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

3-
exports[`'attributes' option should handle "src" and "srcset" tags correctly: errors 1`] = `
3+
exports[`'attributes' option should handle "sources" tags: errors 1`] = `
44
Array [
55
"ModuleError: Module Error (from /path/to/file.js):
66
HtmlSourceError: Bad value for attribute \\"src\\" on element \\"img\\": Must be non-empty (From line 10, column 1; to line 10, column 15)",
@@ -447,7 +447,7 @@ HtmlSourceError: Bad value for attribute \\"srcset\\" on element \\"img\\": Must
447447
]
448448
`;
449449
450-
exports[`'attributes' option should handle "src" and "srcset" tags correctly: module 1`] = `
450+
exports[`'attributes' option should handle "sources" tags: module 1`] = `
451451
"// Imports
452452
var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
453453
var ___HTML_LOADER_IMPORT_0___ = require(\\"./image.png\\");
@@ -458,7 +458,7 @@ var code = \\"<img srcset=\\\\\\"image.png 480w 2x broken\\\\\\" src=\\\\\\"\\"
458458
module.exports = code;"
459459
`;
460460
461-
exports[`'attributes' option should handle "src" and "srcset" tags correctly: result 1`] = `
461+
exports[`'attributes' option should handle "sources" tags: result 1`] = `
462462
"<img srcset=\\"image.png 480w 2x broken\\" src=\\"/webpack/public/path/image.png\\" alt=\\"Elva dressed as a fairy\\">
463463
<img srcset=\\"image.png broken\\" src=\\"/webpack/public/path/image.png\\" alt=\\"Elva dressed as a fairy\\">
464464
<img src=\\"\\" srcset=\\"\\">
@@ -736,7 +736,7 @@ exports[`'attributes' option should handle "src" and "srcset" tags correctly: re
736736
"
737737
`;
738738
739-
exports[`'attributes' option should handle "src" and "srcset" tags correctly: warnings 1`] = `Array []`;
739+
exports[`'attributes' option should handle "sources" tags: warnings 1`] = `Array []`;
740740
741741
exports[`'attributes' option should handle all src attributes in all HTML tags except img tag (testing filter option): errors 1`] = `Array []`;
742742
@@ -1778,9 +1778,9 @@ or
17781778
17791779
exports[`'attributes' option should handle attributes with a "boolean" notation equals "true": warnings 1`] = `Array []`;
17801780
1781-
exports[`'attributes' option should handle the "include" type of tags: errors 1`] = `Array []`;
1781+
exports[`'attributes' option should handle the "include" tags: errors 1`] = `Array []`;
17821782
1783-
exports[`'attributes' option should handle the "include" type of tags: module 1`] = `
1783+
exports[`'attributes' option should handle the "include" tags: module 1`] = `
17841784
"// Imports
17851785
var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
17861786
var ___HTML_LOADER_IMPORT_0___ = require(\\"./include-header.html\\");
@@ -1790,36 +1790,47 @@ var ___HTML_LOADER_IMPORT_2___ = require(\\"./include-content.html\\");
17901790
var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
17911791
var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
17921792
var ___HTML_LOADER_REPLACEMENT_2___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_2___);
1793-
var code = \\"<div>\\\\n <article>\\\\n BeforeHeaderText\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"AfterHeaderText\\\\n <ol>\\\\n <li>Grow a long, majestic beard.</li>\\\\n <li>Wear a tall, pointed hat.</li>\\\\n <li>Have I mentioned the beard?</li>\\\\n </ol>\\\\n BeforeFooterText\\" + ___HTML_LOADER_REPLACEMENT_1___ + \\"AfterFooterText\\\\n <!--<div><include src=\\\\\\"./include-content.html\\\\\\"></include></div>-->\\\\n TextBeforeOpenDiv<div>TextAfterOpenDiv\\" + ___HTML_LOADER_REPLACEMENT_2___ + \\"TextBeforeCloseDiv</div>TextAfterCloseDiv\\\\n </article>\\\\n</div>\\\\n\\";
1793+
var code = \\"<div>\\\\n <article>\\\\n BeforeHeaderText\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"AfterHeaderText\\\\n <ol>\\\\n <li>Grow a long, majestic beard.</li>\\\\n <li>Wear a tall, pointed hat.</li>\\\\n <li>Have I mentioned the beard?</li>\\\\n </ol>\\\\n BeforeFooterText\\" + ___HTML_LOADER_REPLACEMENT_1___ + \\"AfterFooterText\\\\n TextBeforeOpenDiv<div>TextAfterOpenDiv\\" + ___HTML_LOADER_REPLACEMENT_2___ + \\"TextBeforeCloseDiv</div>TextAfterCloseDiv\\\\n </article>\\\\n</div>\\\\n\\\\n<!-- Future improvements -->\\\\nBEFORE\\\\n\\" + ___HTML_LOADER_REPLACEMENT_2___ + \\"\\\\nAFTER\\\\n\\\\n<div>TEXT</div>\\\\n<div>\\\\n \\" + ___HTML_LOADER_REPLACEMENT_2___ + \\"\\\\n</div>\\\\n<div>TEXT</div>\\\\n\\\\n<!-- WRONG -->\\\\n<div><include src=\\\\\\"./include-conten\\" + ___HTML_LOADER_REPLACEMENT_2___ + \\"\\\\n</include>\\\\n\\";
17941794
// Exports
17951795
module.exports = code;"
17961796
`;
17971797
1798-
exports[`'attributes' option should handle the "include" type of tags: result 1`] = `
1798+
exports[`'attributes' option should handle the "include" tags: result 1`] = `
17991799
"<div>
18001800
<article>
18011801
BeforeHeaderText<header>
18021802
<h1>How to be a wizard</h1>
1803-
</header>
1804-
AfterHeaderText
1803+
</header>AfterHeaderText
18051804
<ol>
18061805
<li>Grow a long, majestic beard.</li>
18071806
<li>Wear a tall, pointed hat.</li>
18081807
<li>Have I mentioned the beard?</li>
18091808
</ol>
18101809
BeforeFooterText<footer>
18111810
<p>© 2018 Gandalf</p>
1812-
</footer>
1813-
AfterFooterText
1814-
<!--<div><include src=\\"./include-content.html\\"></include></div>-->
1815-
TextBeforeOpenDiv<div>TextAfterOpenDiv<span>Text</span>
1816-
TextBeforeCloseDiv</div>TextAfterCloseDiv
1811+
</footer>AfterFooterText
1812+
TextBeforeOpenDiv<div>TextAfterOpenDiv<span>Text</span>TextBeforeCloseDiv</div>TextAfterCloseDiv
18171813
</article>
18181814
</div>
1815+
1816+
<!-- Future improvements -->
1817+
BEFORE
1818+
<span>Text</span>
1819+
AFTER
1820+
1821+
<div>TEXT</div>
1822+
<div>
1823+
<span>Text</span>
1824+
</div>
1825+
<div>TEXT</div>
1826+
1827+
<!-- WRONG -->
1828+
<div><include src=\\"./include-conten<span>Text</span>
1829+
</include>
18191830
"
18201831
`;
18211832
1822-
exports[`'attributes' option should handle the "include" type of tags: warnings 1`] = `Array []`;
1833+
exports[`'attributes' option should handle the "include" tags: warnings 1`] = `Array []`;
18231834
18241835
exports[`'attributes' option should not handle attributes with a "boolean" notation equals "false": errors 1`] = `Array []`;
18251836

test/attributes-option.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe("'attributes' option", () => {
2323
expect(getErrors(stats)).toMatchSnapshot('errors');
2424
});
2525

26-
it('should handle "src" and "srcset" tags correctly', async () => {
26+
it('should handle "sources" tags', async () => {
2727
const compiler = getCompiler('sources.js');
2828
const stats = await compile(compiler);
2929

@@ -35,7 +35,7 @@ describe("'attributes' option", () => {
3535
expect(getErrors(stats)).toMatchSnapshot('errors');
3636
});
3737

38-
it('should handle the "include" type of tags', async () => {
38+
it('should handle the "include" tags', async () => {
3939
const compiler = getCompiler('include.js', {
4040
attributes: {
4141
list: [

test/fixtures/include-content.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<span>Text</span>
1+
<span>Text</span>

test/fixtures/include-footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<footer>
22
<p>© 2018 Gandalf</p>
3-
</footer>
3+
</footer>

test/fixtures/include-header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<header>
22
<h1>How to be a wizard</h1>
3-
</header>
3+
</header>

test/fixtures/include-partial.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div>
2+
<span>Example</span>
3+
<div class="header">
4+
<partial name="header"></partial>
5+
</div>
6+
<hr />
7+
<div class="content">
8+
<partial name="content"></partial>
9+
</div>
10+
<div class="footer">
11+
<partial name="footer"></partial>
12+
</div>
13+
</div>

test/fixtures/include.html

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
11
<div>
22
<article>
3-
BeforeHeaderText<include src="./include-header.html" />AfterHeaderText
3+
BeforeHeaderText<include src="./include-header.html"></include>AfterHeaderText
44
<ol>
55
<li>Grow a long, majestic beard.</li>
66
<li>Wear a tall, pointed hat.</li>
77
<li>Have I mentioned the beard?</li>
88
</ol>
9-
BeforeFooterText<include src="./include-footer.html" />AfterFooterText
10-
<!--<div><include src="./include-content.html"></include></div>-->
11-
TextBeforeOpenDiv<div>TextAfterOpenDiv<include src="./include-content.html" />TextBeforeCloseDiv</div>TextAfterCloseDiv
9+
BeforeFooterText<include src="./include-footer.html"></include>AfterFooterText
10+
TextBeforeOpenDiv<div>TextAfterOpenDiv<include src="./include-content.html"></include>TextBeforeCloseDiv</div>TextAfterCloseDiv
1211
</article>
1312
</div>
13+
14+
<!-- Future improvements -->
15+
BEFORE
16+
<include src="./include-content.html">
17+
<header partial="header">Header</header>
18+
<div partial="content">Header</div>
19+
<footer partial="footer">Footer</footer>
20+
</include>
21+
AFTER
22+
23+
<div>TEXT</div>
24+
<div>
25+
<include src="./include-content.html" ></include >
26+
</div>
27+
<div>TEXT</div>
28+
29+
<!-- WRONG -->
30+
<div><include src="./include-content.html" /></div>
31+
<include src="./include-content.html">
32+
<include src="./include-content.html"></include>
33+
</include>

0 commit comments

Comments
 (0)