refactor: removed string value support for attributes option

BREAKING CHANGE: the `attributes` option should be `Array<String>` or `Boolean`

Author: evilebottnawi

README.md

@@ -1,9 +1,7 @@
 <div align="center">
-  <img width="200" height="200"
-    src="https://worldvectorlogo.com/logos/html5.svg">
+  <img width="200" height="200" src="https://worldvectorlogo.com/logos/html5.svg" alt="html-loader">
   <a href="https://github.com/webpack/webpack">
-    <img width="200" height="200" vspace="" hspace="25"
-      src="https://worldvectorlogo.com/logos/webpack.svg">
+    <img width="200" height="200" vspace="" hspace="25" src="https://worldvectorlogo.com/logos/webpack.svg" alt="webpack">
   </a>
 </div>
 
@@ -57,21 +55,45 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 |               Name                |        Type         |                                                        Default                                                        | Description                              |
 | :-------------------------------: | :-----------------: | :-------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
-|  **[`attributes`](#attributes)**  |  `{Array\|String}`  | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data']` | Enables/Disables attributes handling     |
+|  **[`attributes`](#attributes)**  | `{Boolean\/Array}`  | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data']` | Enables/Disables attributes handling     |
 |        **[`root`](#root)**        |     `{String}`      |                                                      `undefiend`                                                      | Allow to handle root-relative attributes |
 | **[`interpolate`](#interpolate)** | `{Boolean\|String}` |                                                        `false`                                                        | Allow to use expressions in HTML syntax  |
 |    **[`minimize`](#minimize)**    | `{Boolean\|Object}` |                                     `true` in production mode, otherwise `false`                                      | Tell `html-loader` to minimize HTML      |
 |    **[`esModule`](#esmodule)**    |     `{Boolean}`     |                                                        `false`                                                        | Use ES modules syntax                    |
 
 ### `attributes`
 
-Type: `Array|String`
+Type: `Boolean|Array`
 Default: `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data']`
 
-You can specify which tag-attribute combination should be processed by this loader via the query parameter `attributes`.
-Pass an array or a space-separated list of `<tag>:<attribute>` combinations. (Default: `attributes=img:src`)
+#### `Boolean`
+
+The `true` value enables processing of all default elements and attributes, the `false` disable processing of all attributes.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+        options: {
+          // Disables tags and attributes processing
+          attributes: false,
+        },
+      },
+    ],
+  },
+};
+```
+
+#### `Array`
 
-If you use `<custom-elements>`, and lots of them make use of a `custom-src` attribute, you don't have to specify each combination `<tag>:<attribute>`: just specify an empty tag like `attributes=:custom-src` and it will match every element.
+Allows you to specify which tags and attributes to process.
+Pass an array of `<tag>:<attribute>` or `:<attribute>` combinations.
+You can specify which tag-attribute combination should be processed by this loader via the query parameter `attributes`, for example:
 
 **webpack.config.js**
 
@@ -83,7 +105,7 @@ module.exports = {
         test: /\.html$/i,
         loader: 'html-loader',
         options: {
-          attributes: [':data-src'],
+          attributes: [':data-src', 'custom-elements:data-src'],
         },
       },
     ],
@@ -323,13 +345,12 @@ require('html-loader!./file.html');
 ```
 
 ```js
-require('html-loader?attributes=img:data-src!./file.html');
+require('html-loader?attributes[]=img:data-src!./file.html');
 
 // => '<img src="image.png" data-src="data:image/png;base64,..." >'
 ```
 
 ```js
-require('html-loader?attributes=img:src img:data-src!./file.html');
 require('html-loader?attributes[]=img:src&attributes[]=img:data-src!./file.html');
 
 // => '<img src="http://cdn.example.com/49eba9f/a992ca.png" data-src="data:image/png;base64,..." >'

src/options.json

@@ -4,8 +4,12 @@
     "attributes": {
       "anyOf": [
         { "type": "boolean" },
-        { "type": "array" },
-        { "type": "string" }
+        {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
       ]
     },
     "root": {

src/utils.js

@@ -3,42 +3,6 @@ import Parser from 'fastparse';
 
 const IDENT_REGEX = /___HTML_LOADER_IDENT_[0-9.]+___/g;
 
-function getTagsAndAttributes(attributes) {
-  const defaultAttributes = [
-    ':srcset',
-    'img:src',
-    'audio:src',
-    'video:src',
-    'track:src',
-    'embed:src',
-    'source:src',
-    'input:src',
-    'object:data',
-  ];
-
-  if (typeof attributes !== 'undefined') {
-    if (typeof attributes === 'string') {
-      return attributes.split(' ');
-    }
-
-    if (Array.isArray(attributes)) {
-      return attributes;
-    }
-
-    if (attributes === false) {
-      return [];
-    }
-
-    if (attributes === true) {
-      return defaultAttributes;
-    }
-
-    throw new Error('Invalid value to options parameter attrs');
-  }
-
-  return defaultAttributes;
-}
-
 function parseSrcset(input) {
   // 1. Let input be the value passed to this algorithm.
   // Manual is faster than RegEx
@@ -382,7 +346,26 @@ function parseSrcset(input) {
   }
 }
 
-export function parseAttributes(html, isRelevantTagAttr) {
+export function getLinks(content, attributes) {
+  if (attributes === false) {
+    return [];
+  }
+
+  const tagsAndAttributes =
+    typeof attributes === 'undefined' || attributes === true
+      ? [
+          ':srcset',
+          'img:src',
+          'audio:src',
+          'video:src',
+          'track:src',
+          'embed:src',
+          'source:src',
+          'input:src',
+          'object:data',
+        ]
+      : attributes;
+
   function processMatch(match, strUntilValue, name, value, index) {
     if (!this.isRelevantTagAttr(this.currentTag, name)) {
       return;
@@ -442,27 +425,21 @@ export function parseAttributes(html, isRelevantTagAttr) {
     },
   });
 
-  return parser.parse('outside', html, {
+  return parser.parse('outside', content, {
     currentTag: null,
     results: [],
-    isRelevantTagAttr,
-  }).results;
-}
-
-export function getLinks(content, attributes) {
-  const tagsAndAttributes = getTagsAndAttributes(attributes);
-
-  return parseAttributes(content, (tag, attribute) => {
-    const res = tagsAndAttributes.find((a) => {
-      if (a.startsWith(':')) {
-        return attribute === a.slice(1);
-      }
+    isRelevantTagAttr: (tag, attribute) => {
+      const res = tagsAndAttributes.find((a) => {
+        if (a.startsWith(':')) {
+          return attribute === a.slice(1);
+        }
 
-      return `${tag}:${attribute}` === a;
-    });
+        return `${tag}:${attribute}` === a;
+      });
 
-    return Boolean(res);
-  });
+      return Boolean(res);
+    },
+  }).results;
 }
 
 export function getUniqueIdent(data) {

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validate options should throw an error on the "attributes" 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.attributes should be one of these:
+   boolean | [string, ...]
+   Details:
+    * options.attributes should be a boolean.
+    * options.attributes should be an array:
+      [string, ...]"
+`;
+
+exports[`validate options should throw an error on the "esModule" 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.esModule should be a boolean."
+`;
+
+exports[`validate options should throw an error on the "interpolate" option with "1" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options.interpolate should be one of these:
+   boolean | string
+   Details:
+    * options.interpolate should be a boolean.
+    * options.interpolate should be a string."
+`;
+
+exports[`validate options should throw an error on the "root" 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.root should be a string."
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
+"Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
+ - options has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;
+
+exports[`validate options should throw an error on the "unknown" 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 has an unknown property 'unknown'. These properties are valid:
+   object { attributes?, root?, interpolate?, minimize?, esModule? }"
+`;

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

@@ -163,32 +163,6 @@ describe("'attributes' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work with a "string" notation', async () => {
-    const compiler = getCompiler('simple.js', { attributes: 'img: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 work with multiple a "string" notations', async () => {
-    const compiler = getCompiler('simple.js', {
-      attributes: 'img:src script: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 work with an "array" notations', async () => {
     const compiler = getCompiler('simple.js', { attributes: ['img:src'] });
     const stats = await compile(compiler);
@@ -216,7 +190,7 @@ describe("'attributes' option", () => {
   });
 
   it('should work with only attributes', async () => {
-    const compiler = getCompiler('simple.js', { attributes: ':custom-src' });
+    const compiler = getCompiler('simple.js', { attributes: [':custom-src'] });
     const stats = await compile(compiler);
 
     expect(getModuleSource('./simple.html', stats)).toMatchSnapshot('module');