refactor: removed parse5-sax-parser package in favor parse5 (#365)

package.json

@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "html-minifier-terser": "^5.1.1",
-    "parse5-sax-parser": "^6.0.1"
+    "parse5": "^6.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",

src/parse5-traverse.js

@@ -0,0 +1,26 @@
+const traverse = (root, callback) => {
+  const visit = (node, parent) => {
+    let res;
+
+    if (callback) {
+      res = callback(node, parent);
+    }
+
+    let { childNodes } = node;
+
+    // in case a <template> tag is in the middle of the HTML: https://github.com/JPeer264/node-rcs-core/issues/58
+    if (node.content && Array.isArray(node.content.childNodes)) {
+      ({ childNodes } = node.content);
+    }
+
+    if (res !== false && Array.isArray(childNodes) && childNodes.length >= 0) {
+      childNodes.forEach((child) => {
+        visit(child, node);
+      });
+    }
+  };
+
+  visit(root, null);
+};
+
+module.exports = traverse;

src/plugins/sources-plugin.js

@@ -1,4 +1,6 @@
-import SAXParser from 'parse5-sax-parser';
+import parse5 from 'parse5';
+
+import traverse from '../parse5-traverse';
 
 import {
   getFilter,
@@ -9,12 +11,16 @@ import {
 
 export default (options) =>
   function process(html) {
-    const parser5 = new SAXParser({ sourceCodeLocationInfo: true });
     const sources = [];
+    const document = parse5.parse(html, { sourceCodeLocationInfo: true });
 
-    parser5.on('startTag', (node) => {
+    traverse(document, (node) => {
       const { tagName, attrs: attributes, sourceCodeLocation } = node;
 
+      if (!tagName) {
+        return;
+      }
+
       attributes.forEach((attribute) => {
         let { name } = attribute;
 
@@ -92,8 +98,6 @@ export default (options) =>
       });
     });
 
-    parser5.end(html);
-
     const urlFilter = getFilter(options.sources.urlFilter);
     const imports = new Map();
     const replacements = new Map();

test/fixtures/simple.html

@@ -442,3 +442,9 @@ <h2>An Ordered HTML List</h2>
 <img src='\nested\image3.png' />
 <img src='/nested\image3.png' />
 <img src='nested\image3.png' />
+
+<div class="will-be-parsed">
+  <template type="some_type">
+    <div class="will-not-be-parse"></div>
+  </template>
+</div>