feat: added the scriptingEnabled option (#448)

Author: echolimazulu

README.md

@@ -90,6 +90,7 @@ type sources =
         value: string,
         resourcePath: string
       ) => boolean;
+      scriptingEnabled?: boolean;
     };
 ```
 
@@ -447,6 +448,43 @@ module.exports = {
 };
 ```
 
+#### `scriptingEnabled`
+
+Type:
+
+```ts
+type scriptingEnabled = boolean;
+```
+
+Default: `true`
+
+By default, the parser in `html-loader` interprets content inside `<noscript>` tags as `#text`, so processing of content inside this tag will be ignored.
+
+In order to enable processing inside `<noscript>` for content recognition by the parser as `#AST`, set this parameter to: `false`
+
+Additional information: [scriptingEnabled](https://parse5.js.org/interfaces/parse5.ParserOptions.html#scriptingEnabled)
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+        options: {
+          sources: {
+            // Enables processing inside the <noscript> tag
+            scriptingEnabled: false,
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ### `preprocessor`
 
 Type:

src/options.json

@@ -56,6 +56,9 @@
             },
             "urlFilter": {
               "instanceof": "Function"
+            },
+            "scriptingEnabled": {
+              "type": "boolean"
             }
           },
           "additionalProperties": false

src/plugins/sources-plugin.js

@@ -10,7 +10,10 @@ import {
 export default (options) =>
   function process(html) {
     const sources = [];
-    const document = parse(html, { sourceCodeLocationInfo: true });
+    const document = parse(html, {
+      sourceCodeLocationInfo: true,
+      scriptingEnabled: options.sources.scriptingEnabled,
+    });
 
     let needIgnore = false;
 

src/utils.js

@@ -1122,7 +1122,14 @@ function getSourcesOption(rawOptions) {
 
   const sources = normalizeSourcesList(rawOptions.sources.list);
 
-  return { list: sources, urlFilter: rawOptions.sources.urlFilter };
+  return {
+    list: sources,
+    urlFilter: rawOptions.sources.urlFilter,
+    scriptingEnabled:
+      typeof rawOptions.sources.scriptingEnabled === "undefined"
+        ? true
+        : rawOptions.sources.scriptingEnabled,
+  };
 }
 
 export function normalizeOptions(rawOptions, loaderContext) {

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

@@ -29,13 +29,13 @@ exports[`validate options should throw an error on the "preprocessor" option wit
 exports[`validate options should throw an error on the "sources" option with "[]" value 1`] = `
 "Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
  - options.sources should be one of these:
-   boolean | object { list?, urlFilter? }
+   boolean | object { list?, urlFilter?, scriptingEnabled? }
    -> By default every loadable attributes (for example - <img src='image.png'>) is imported (const img = require('./image.png'). You may need to specify loaders for images in your configuration.
    -> Read more at https://github.com/webpack-contrib/html-loader#sources
    Details:
     * options.sources should be a boolean.
     * options.sources should be an object:
-      object { list?, urlFilter? }"
+      object { list?, urlFilter?, scriptingEnabled? }"
 `;
 
 exports[`validate options should throw an error on the "sources" option with "{"list":[]}" value 1`] = `
@@ -64,10 +64,15 @@ exports[`validate options should throw an error on the "sources" option with "{"
    \\"src\\" | \\"srcset\\""
 `;
 
+exports[`validate options should throw an error on the "sources" option with "{"scriptingEnabled":"true"}" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options.sources.scriptingEnabled should be a boolean."
+`;
+
 exports[`validate options should throw an error on the "sources" option with "{"unknown":true}" value 1`] = `
 "Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
  - options.sources has an unknown property 'unknown'. These properties are valid:
-   object { list?, urlFilter? }"
+   object { list?, urlFilter?, scriptingEnabled? }"
 `;
 
 exports[`validate options should throw an error on the "sources" option with "{"urlFilter":false}" value 1`] = `
@@ -78,13 +83,13 @@ exports[`validate options should throw an error on the "sources" option with "{"
 exports[`validate options should throw an error on the "sources" option with "true" value 1`] = `
 "Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
  - options.sources should be one of these:
-   boolean | object { list?, urlFilter? }
+   boolean | object { list?, urlFilter?, scriptingEnabled? }
    -> By default every loadable attributes (for example - <img src='image.png'>) is imported (const img = require('./image.png'). You may need to specify loaders for images in your configuration.
    -> Read more at https://github.com/webpack-contrib/html-loader#sources
    Details:
     * options.sources should be a boolean.
     * options.sources should be an object:
-      object { list?, urlFilter? }"
+      object { list?, urlFilter?, scriptingEnabled? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `

test/__snapshots__/loader.test.js.snap

@@ -447,4 +447,8 @@ <h2>An Ordered HTML List</h2>
   <template type="some_type">
     <div class="will-not-be-parse"></div>
   </template>
-</div>
+</div>
+
+<noscript>
+  <img src="./noscript.png" alt="noscript content" />
+</noscript>

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

@@ -297,6 +297,7 @@ describe("'sources' option", () => {
 
           return true;
         },
+        scriptingEnabled: false,
       },
     });
     const stats = await compile(compiler);

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

@@ -58,6 +58,8 @@ describe("validate options", () => {
           ],
         },
         { urlFilter: () => true },
+        { scriptingEnabled: true },
+        { scriptingEnabled: false },
         {
           list: [
             {
@@ -122,6 +124,7 @@ describe("validate options", () => {
           ],
         },
         { urlFilter: false },
+        { scriptingEnabled: "true" },
         { unknown: true },
       ],
     },