refactor: move the root option under the attributes option (#254)

BREAKING CHANGE: the `root` option was moved under the `attributes` option, please see README.md
webpack-contrib · Mar 13, 2020 · 1c24662 · 1c24662
1 parent 888b8fe
commit 1c24662
Show file tree

Hide file tree

Showing 9 changed files with 649 additions and 890 deletions.
diff --git a/README.md b/README.md
@@ -53,12 +53,12 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 ## Options
 
-|              Name               |        Type         |                                                                         Default                                                                         | Description                              |
-| :-----------------------------: | :-----------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
-| **[`attributes`](#attributes)** | `{Boolean\/Array}`  | `['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src']` | Enables/Disables attributes handling     |
-|       **[`root`](#root)**       |     `{String}`      |                                                                       `undefiend`                                                                       | Allow to handle root-relative attributes |
-|   **[`minimize`](#minimize)**   | `{Boolean\|Object}` |                                                      `true` in production mode, otherwise `false`                                                       | Tell `html-loader` to minimize HTML      |
-|   **[`esModule`](#esmodule)**   |     `{Boolean}`     |                                                                         `false`                                                                         | Use ES modules syntax                    |
+|              Name               |            Type            |                                                                         Default                                                                         | Description                              |
+| :-----------------------------: | :------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
+| **[`attributes`](#attributes)** | `{Boolean\/Array\/Object}` | `['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src']` | Enables/Disables attributes handling     |
+|       **[`root`](#root)**       |         `{String}`         |                                                                       `undefiend`                                                                       | Allow to handle root-relative attributes |
+|   **[`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`
 
@@ -114,7 +114,39 @@ module.exports = {
 
 To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass set `false` value.
 
-### `root`
+#### `Object`
+
+Type: `Array`
+Default: `{ list: ['source:srcset', 'img:src', 'img:srcset', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src'], root: undefined }`
+
+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**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+        options: {
+          attributes: {
+            // May be omitted
+            list: [':data-src', 'custom-elements:data-src'],
+            // May be omitted
+            root: '.',
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+#### `root`
 
 Type: `String`
 Default: `undefined`
@@ -132,7 +164,9 @@ module.exports = {
         test: /\.html$/i,
         loader: 'html-loader',
         options: {
-          root: './file.html',
+          attributes: {
+            root: '.',
+          },
         },
       },
     ],
@@ -285,6 +319,7 @@ require('html-loader?-attributes!./file.html');
 
 // => '<img src="image.jpg"  data-src="image2x.png" >'
 ```
+
 > :warning: `-attributes` it is set attributes: false
 
 ```html

diff --git a/src/options.json b/src/options.json
@@ -9,12 +9,24 @@
           "items": {
             "type": "string"
           }
+        },
+        {
+          "type": "object",
+          "properties": {
+            "root": {
+              "type": "string"
+            },
+            "list": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "additionalProperties": false
         }
       ]
     },
-    "root": {
-      "type": "string"
-    },
     "minimize": {
       "anyOf": [{ "type": "boolean" }, { "type": "object" }]
     },

diff --git a/src/plugins/source-plugin.js b/src/plugins/source-plugin.js
@@ -373,31 +373,44 @@ function parseSrc(input) {
   return { value, startIndex };
 }
 
+const defaultAttributes = [
+  'source:srcset',
+  'img:src',
+  'img:srcset',
+  'audio:src',
+  'video:src',
+  'track:src',
+  'embed:src',
+  'source:src',
+  'input:src',
+  'object:data',
+  'script:src',
+];
+
 export default (options) =>
   function process(html, result) {
-    const tagsAndAttributes =
-      typeof options.attributes === 'undefined' || options.attributes === true
-        ? [
-            'source:srcset',
-            'img:src',
-            'img:srcset',
-            'audio:src',
-            'video:src',
-            'track:src',
-            'embed:src',
-            'source:src',
-            'input:src',
-            'object:data',
-            'script:src',
-          ]
-        : options.attributes;
+    let tagsAndAttributes;
+    let root;
+
+    if (
+      typeof options.attributes === 'undefined' ||
+      options.attributes === true
+    ) {
+      tagsAndAttributes = defaultAttributes;
+    } else if (Array.isArray(options.attributes)) {
+      tagsAndAttributes = options.attributes;
+    } else {
+      tagsAndAttributes = options.attributes.list || defaultAttributes;
+      // eslint-disable-next-line no-undefined
+      root = options.attributes.root ? options.attributes.root : undefined;
+    }
 
     const sources = [];
     const onOpenTagFilter = new RegExp(
       `^(${tagsAndAttributes.join('|')})$`,
       'i'
     );
-    const filter = (value) => isUrlRequest(value, options.root);
+    const filter = (value) => isUrlRequest(value, root);
     const parser = new Parser(
       {
         attributesMeta: {},
@@ -518,10 +531,7 @@ export default (options) =>
         }
       }
 
-      const importKey = urlToRequest(
-        decodeURIComponent(source.value),
-        options.root
-      );
+      const importKey = urlToRequest(decodeURIComponent(source.value), root);
       let importName = importsMap.get(importKey);
 
       if (!importName) {

diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
diff --git a/test/__snapshots__/root-option.test.js.snap b/test/__snapshots__/root-option.test.js.snap
diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap
@@ -3,67 +3,64 @@
 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, ...]
+   boolean | [string, ...] | object { root?, list? }
    Details:
     * options.attributes should be a boolean.
     * options.attributes should be an array:
-      [string, ...]"
+      [string, ...]
+    * options.attributes should be an object:
+      object { root?, list? }"
 `;
 
 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 "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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, 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?, minimize?, esModule? }"
+   object { attributes?, minimize?, esModule? }"
 `;