fix: support ES6 syntax in script tags when minimize (#219)

Author: evilebottnawi

package-lock.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "es6-templates": "^0.2.3",
     "fastparse": "^1.1.2",
-    "html-minifier": "^4.0.0",
+    "html-minifier-terser": "^5.0.2",
     "loader-utils": "^1.2.3",
     "schema-utils": "^2.6.4"
   },

package.json

@@ -1,7 +1,7 @@
 import { parse } from 'url';
 
 import { compile } from 'es6-templates';
-import { minify } from 'html-minifier';
+import { minify } from 'html-minifier-terser';
 import { getOptions, isUrlRequest, urlToRequest } from 'loader-utils';
 
 import validateOptions from 'schema-utils';

src/index.js

@@ -89,7 +89,7 @@ describe('"minimize" option', () => {
     );
   });
 
-  it('should preserve comments', () => {
+  it('should support options for minimizer', () => {
     const result = loader.call(
       {
         query: {
@@ -115,56 +115,19 @@ describe('"minimize" option', () => {
     );
   });
 
-  it('should preserve comments and white spaces when minimizing', () => {
+  it('should support ES6 syntax', () => {
     const result = loader.call(
       {
         query: {
-          minimize: {
-            conservativeCollapse: true,
-            removeAttributeQuotes: true,
-            keepClosingSlash: true,
-            minifyJS: true,
-            minifyCSS: true,
-            removeScriptTypeAttributes: true,
-            removeStyleLinkTypeAttributes: true,
-            useShortDoctype: true,
-            removeComments: false,
-            collapseWhitespace: false,
-          },
-        },
-      },
-      '<!-- comment --><h3 customAttr="">#{number} {customer}</h3><p>{title}</p>    <!-- comment -->    <img src="image.png" />'
-    );
-
-    expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "<!-- comment --><h3 customattr=\\"\\">#{number} {customer}</h3><p>{title}</p>    <!-- comment -->    <img src=" + __url__(require("./image.png")) + " />";`
-    );
-  });
-
-  it('should treat attributes as case sensitive', () => {
-    const result = loader.call(
-      {
-        query: {
-          minimize: {
-            removeComments: true,
-            collapseWhitespace: true,
-            conservativeCollapse: true,
-            removeAttributeQuotes: true,
-            keepClosingSlash: true,
-            minifyJS: true,
-            minifyCSS: true,
-            removeScriptTypeAttributes: true,
-            removeStyleLinkTypeAttributes: true,
-            useShortDoctype: true,
-            caseSensitive: true,
-          },
+          minimize: true,
         },
       },
-      '<!-- comment --><h3 customAttr="">#{number} {customer}</h3><p>{title}</p><!-- comment --><img src="image.png" />'
+      // eslint-disable-next-line no-template-curly-in-string
+      '<!-- comment --><h1>My First Heading</h1>\n\n<p>My first paragraph.</p> <script>   console.log(1 + 2 + `${3 + 3}`)   </script>'
     );
 
     expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "<h3 customAttr=\\"\\">#{number} {customer}</h3><p>{title}</p><img src=" + __url__(require("./image.png")) + " />";`
+      `${GET_URL_CODE}module.exports = "<h1>My First Heading</h1> <p>My first paragraph.</p> <script>console.log(\\"36\\")</script>";`
     );
   });
 });