fix: include feature (#303)

webpack-contrib · Aug 11, 2020 · 2c640c6 · 2c640c6
1 parent 1acd204
commit 2c640c6
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 31 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -10,3 +10,6 @@ trim_trailing_whitespace = true
 
 [*.md]
 trim_trailing_whitespace = false
+
+[test/fixtures/*.html]
+insert_final_newline = false
diff --git a/src/plugins/source-plugin.js b/src/plugins/source-plugin.js
@@ -340,6 +340,11 @@ export default (options) =>
               case 'include': {
                 let source;
 
+                // eslint-disable-next-line no-underscore-dangle
+                if (parser._tokenizer._state === 4) {
+                  return;
+                }
+
                 try {
                   source = parseSrc(value);
                 } catch (error) {
@@ -359,15 +364,22 @@ export default (options) =>
                   return;
                 }
 
-                const { startIndex, endIndex } = parser;
+                const { startIndex } = parser;
+                const closingTag = html
+                  .slice(startIndex - 1)
+                  .match(
+                    new RegExp(`<s*${tag}[^>]*>(?:.*?)</${tag}[^<>]*>`, 's')
+                  );
+
+                if (!closingTag) {
+                  return;
+                }
+
+                const endIndex = startIndex + closingTag[0].length;
                 const importItem = getImportItem(source.value);
                 const replacementItem = getReplacementItem(importItem);
 
-                sources.push({
-                  replacementItem,
-                  startIndex,
-                  endIndex: endIndex + 1,
-                });
+                sources.push({ replacementItem, startIndex, endIndex });
 
                 break;
               }

diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`'attributes' option should handle "src" and "srcset" tags correctly: errors 1`] = `
+exports[`'attributes' option should handle "sources" tags: errors 1`] = `
 Array [
   "ModuleError: Module Error (from /path/to/file.js):
 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
 ]
 `;
 
-exports[`'attributes' option should handle "src" and "srcset" tags correctly: module 1`] = `
+exports[`'attributes' option should handle "sources" tags: module 1`] = `
 "// Imports
 var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
 var ___HTML_LOADER_IMPORT_0___ = require(\\"./image.png\\");
@@ -458,7 +458,7 @@ var code = \\"<img srcset=\\\\\\"image.png 480w 2x broken\\\\\\" src=\\\\\\"\\"
 module.exports = code;"
 `;
 
-exports[`'attributes' option should handle "src" and "srcset" tags correctly: result 1`] = `
+exports[`'attributes' option should handle "sources" tags: result 1`] = `
 "<img srcset=\\"image.png 480w 2x broken\\" src=\\"/webpack/public/path/image.png\\" alt=\\"Elva dressed as a fairy\\">
 <img srcset=\\"image.png broken\\" src=\\"/webpack/public/path/image.png\\" alt=\\"Elva dressed as a fairy\\">
 <img src=\\"\\" srcset=\\"\\">
@@ -736,7 +736,7 @@ exports[`'attributes' option should handle "src" and "srcset" tags correctly: re
 "
 `;
 
-exports[`'attributes' option should handle "src" and "srcset" tags correctly: warnings 1`] = `Array []`;
+exports[`'attributes' option should handle "sources" tags: warnings 1`] = `Array []`;
 
 exports[`'attributes' option should handle all src attributes in all HTML tags except img tag (testing filter option): errors 1`] = `Array []`;
 
@@ -1778,9 +1778,9 @@ or
 
 exports[`'attributes' option should handle attributes with a "boolean" notation equals "true": warnings 1`] = `Array []`;
 
-exports[`'attributes' option should handle the "include" type of tags: errors 1`] = `Array []`;
+exports[`'attributes' option should handle the "include" tags: errors 1`] = `Array []`;
 
-exports[`'attributes' option should handle the "include" type of tags: module 1`] = `
+exports[`'attributes' option should handle the "include" tags: module 1`] = `
 "// Imports
 var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
 var ___HTML_LOADER_IMPORT_0___ = require(\\"./include-header.html\\");
@@ -1790,36 +1790,47 @@ var ___HTML_LOADER_IMPORT_2___ = require(\\"./include-content.html\\");
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
 var ___HTML_LOADER_REPLACEMENT_2___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_2___);
-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\\";
+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\\";
 // Exports
 module.exports = code;"
 `;
 
-exports[`'attributes' option should handle the "include" type of tags: result 1`] = `
+exports[`'attributes' option should handle the "include" tags: result 1`] = `
 "<div>
   <article>
     BeforeHeaderText<header>
   <h1>How to be a wizard</h1>
-</header>
-AfterHeaderText
+</header>AfterHeaderText
     <ol>
       <li>Grow a long, majestic beard.</li>
       <li>Wear a tall, pointed hat.</li>
       <li>Have I mentioned the beard?</li>
     </ol>
     BeforeFooterText<footer>
   <p>© 2018 Gandalf</p>
-</footer>
-AfterFooterText
-    <!--<div><include src=\\"./include-content.html\\"></include></div>-->
-    TextBeforeOpenDiv<div>TextAfterOpenDiv<span>Text</span>
-TextBeforeCloseDiv</div>TextAfterCloseDiv
+</footer>AfterFooterText
+    TextBeforeOpenDiv<div>TextAfterOpenDiv<span>Text</span>TextBeforeCloseDiv</div>TextAfterCloseDiv
   </article>
 </div>
+
+<!-- Future improvements -->
+BEFORE
+<span>Text</span>
+AFTER
+
+<div>TEXT</div>
+<div>
+  <span>Text</span>
+</div>
+<div>TEXT</div>
+
+<!-- WRONG -->
+<div><include src=\\"./include-conten<span>Text</span>
+</include>
 "
 `;
 
-exports[`'attributes' option should handle the "include" type of tags: warnings 1`] = `Array []`;
+exports[`'attributes' option should handle the "include" tags: warnings 1`] = `Array []`;
 
 exports[`'attributes' option should not handle attributes with a "boolean" notation equals "false": errors 1`] = `Array []`;
 

diff --git a/test/attributes-option.test.js b/test/attributes-option.test.js
@@ -23,7 +23,7 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should handle "src" and "srcset" tags correctly', async () => {
+  it('should handle "sources" tags', async () => {
     const compiler = getCompiler('sources.js');
     const stats = await compile(compiler);
 
@@ -35,7 +35,7 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should handle the "include" type of tags', async () => {
+  it('should handle the "include" tags', async () => {
     const compiler = getCompiler('include.js', {
       attributes: {
         list: [

diff --git a/test/fixtures/include-content.html b/test/fixtures/include-content.html
@@ -1 +1 @@
-<span>Text</span>
+<span>Text</span>
diff --git a/test/fixtures/include-footer.html b/test/fixtures/include-footer.html
@@ -1,3 +1,3 @@
 <footer>
   <p>© 2018 Gandalf</p>
-</footer>
+</footer>
diff --git a/test/fixtures/include-header.html b/test/fixtures/include-header.html
@@ -1,3 +1,3 @@
 <header>
   <h1>How to be a wizard</h1>
-</header>
+</header>
diff --git a/test/fixtures/include-partial.html b/test/fixtures/include-partial.html
@@ -0,0 +1,13 @@
+<div>
+  <span>Example</span>
+  <div class="header">
+    <partial name="header"></partial>
+  </div>
+  <hr />
+  <div class="content">
+    <partial name="content"></partial>
+  </div>
+  <div class="footer">
+    <partial name="footer"></partial>
+  </div>
+</div>
diff --git a/test/fixtures/include.html b/test/fixtures/include.html
@@ -1,13 +1,33 @@
 <div>
   <article>
-    BeforeHeaderText<include src="./include-header.html" />AfterHeaderText
+    BeforeHeaderText<include src="./include-header.html"></include>AfterHeaderText
     <ol>
       <li>Grow a long, majestic beard.</li>
       <li>Wear a tall, pointed hat.</li>
       <li>Have I mentioned the beard?</li>
     </ol>
-    BeforeFooterText<include src="./include-footer.html" />AfterFooterText
-    <!--<div><include src="./include-content.html"></include></div>-->
-    TextBeforeOpenDiv<div>TextAfterOpenDiv<include src="./include-content.html" />TextBeforeCloseDiv</div>TextAfterCloseDiv
+    BeforeFooterText<include src="./include-footer.html"></include>AfterFooterText
+    TextBeforeOpenDiv<div>TextAfterOpenDiv<include src="./include-content.html"></include>TextBeforeCloseDiv</div>TextAfterCloseDiv
   </article>
 </div>
+
+<!-- Future improvements -->
+BEFORE
+<include src="./include-content.html">
+  <header partial="header">Header</header>
+  <div partial="content">Header</div>
+  <footer partial="footer">Footer</footer>
+</include>
+AFTER
+
+<div>TEXT</div>
+<div>
+  <include   src="./include-content.html"   ></include   >
+</div>
+<div>TEXT</div>
+
+<!-- WRONG -->
+<div><include src="./include-content.html" /></div>
+<include src="./include-content.html">
+  <include src="./include-content.html"></include>
+</include>