feat: allow '*' wild card for tag option (#273)

Author: EslamHiko

README.md

@@ -270,6 +270,49 @@ module.exports = {
 };
 ```
 
+If the tag name is not specified it will process all the tags.
+
+> You can use your custom filter to specify html elements to be processed.
+
+For example:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+        options: {
+          attributes: {
+            list: [
+              {
+                // Attribute name
+                attribute: 'src',
+                // Type of processing, can be `src` or `scrset`
+                type: 'src',
+                // Allow to filter some attributes (optional)
+                filter: (tag, attribute, attributes, resourcePath) => {
+                  // The `tag` argument contains a name of the HTML tag.
+                  // The `attribute` argument contains a name of the HTML attribute.
+                  // The `attributes` argument contains all attributes of the tag.
+                  // The `resourcePath` argument contains a path to the loaded HTML file.
+
+                  // choose all HTML tags except img tag
+                  return tag.toLowerCase() !== 'img';
+                },
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 #### `urlFilter`
 
 Type: `Function`

src/options.json

@@ -19,7 +19,7 @@
           "instanceof": "Function"
         }
       },
-      "required": ["tag", "attribute", "type"],
+      "required": ["attribute", "type"],
       "additionalProperties": false
     },
     "AttributeList": {

src/plugins/source-plugin.js

@@ -495,7 +495,9 @@ export default (options) =>
     const getAttribute = (tag, attribute, attributes, resourcePath) => {
       return attributeList.find(
         (element) =>
-          element.tag.toLowerCase() === tag.toLowerCase() &&
+          (typeof element.tag === 'undefined' ||
+            (typeof element.tag !== 'undefined' &&
+              element.tag.toLowerCase() === tag.toLowerCase())) &&
           element.attribute.toLowerCase() === attribute.toLowerCase() &&
           (element.filter
             ? element.filter(tag, attribute, attributes, resourcePath)

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

@@ -15,6 +15,11 @@ exports[`validate options should throw an error on the "attributes" option with
  - options.attributes.list should be an non-empty array."
 `;
 
+exports[`validate options should throw an error on the "attributes" option with "{"list":[{"tag":"","attribute":"src","type":"src"}]}" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options.attributes.list[0].tag should be an non-empty string."
+`;
+
 exports[`validate options should throw an error on the "attributes" option with "{"list":[{"tag":"img","attribute":"src","type":"src","filter":"test"}]}" value 1`] = `
 "Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
  - options.attributes.list[0].filter should be an instance of function."

test/__snapshots__/validate-options.test.js.snap

@@ -172,6 +172,52 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should handle all src attributes in all HTML tags when tag is undefined', async () => {
+    const compiler = getCompiler('simple.js', {
+      attributes: {
+        list: [
+          {
+            attribute: 'src',
+            type: 'src',
+          },
+        ],
+      },
+    });
+    const stats = await compile(compiler);
+
+    expect(getModuleSource('./simple.html', stats)).toMatchSnapshot('module');
+    expect(
+      execute(readAsset('main.bundle.js', compiler, stats))
+    ).toMatchSnapshot('result');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should handle all src attributes in all HTML tags except img (testing filter option) tag is undefined', async () => {
+    const compiler = getCompiler('simple.js', {
+      attributes: {
+        list: [
+          {
+            attribute: 'src',
+            type: 'src',
+            // eslint-disable-next-line no-unused-vars
+            filter: (tag, attribute, attributes) => {
+              return tag.toLowerCase() !== 'img';
+            },
+          },
+        ],
+      },
+    });
+    const stats = await compile(compiler);
+
+    expect(getModuleSource('./simple.html', stats)).toMatchSnapshot('module');
+    expect(
+      execute(readAsset('main.bundle.js', compiler, stats))
+    ).toMatchSnapshot('result');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
   it('should work by default with CommonJS module syntax', async () => {
     const compiler = getCompiler(
       'simple.js',

test/attributes-option.test.js

@@ -6,6 +6,14 @@ describe('validate options', () => {
       success: [
         true,
         false,
+        {
+          list: [
+            {
+              attribute: 'src',
+              type: 'src',
+            },
+          ],
+        },
         {
           list: [
             {
@@ -72,6 +80,15 @@ describe('validate options', () => {
             },
           ],
         },
+        {
+          list: [
+            {
+              tag: '',
+              attribute: 'src',
+              type: 'src',
+            },
+          ],
+        },
         {
           list: [
             {