refactor: attrs option (#217)

evilebottnawi · web-flow · commit a80fc7e7693f · 2020-01-20T16:43:48.000+03:00
* refactor: `attrs` option

BREAKING CHANGE: the `attrs` option was renamed to the `attributes` option
diff --git a/README.md b/README.md
@@ -57,21 +57,21 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 |               Name                |        Type         |                   Default                    | Description                              |
 | :-------------------------------: | :-----------------: | :------------------------------------------: | :--------------------------------------- |
-|       **[`attrs`](#attrs)**       |  `{Array\|String}`  |                `['img:src']`                 | Enables/Disables attributes handling     |
+|  **[`attributes`](#attributes)**  |  `{Array\|String}`  |                `['img:src']`                 | 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                    |
 
-### `attrs`
+### `attributes`
 
 Type: `Array|String`
 Default: `['img:src']`
 
-You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`.
-Pass an array or a space-separated list of `<tag>:<attribute>` combinations. (Default: `attrs=img:src`)
+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`)
 
-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 `attrs=:custom-src` and it will match every element.
+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.
 
 **webpack.config.js**
 
@@ -83,7 +83,7 @@ module.exports = {
         test: /\.html$/i,
         loader: 'html-loader',
         options: {
-          attrs: [':data-src'],
+          attributes: [':data-src'],
         },
       },
     ],
@@ -323,20 +323,20 @@ require('html-loader!./file.html');
 ```
 
 ```js
-require('html-loader?attrs=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?attrs=img:src img:data-src!./file.html');
-require('html-loader?attrs[]=img:src&attrs[]=img:data-src!./file.html');
+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,..." >'
 ```
 
 ```js
-require('html-loader?-attrs!./file.html');
+require('html-loader?-attributes!./file.html');
 
 // => '<img src="image.jpg"  data-src="image2x.png" >'
 ```
diff --git a/src/index.js b/src/index.js
@@ -8,7 +8,6 @@ import validateOptions from 'schema-utils';
 
 import { GET_URL_CODE, IDENT_REGEX, REQUIRE_REGEX } from './constants';
 import {
-  getAttributes,
   getExportsString,
   getLinks,
   getUniqueIdent,
@@ -30,9 +29,7 @@ export default function htmlLoader(source) {
 
   let content = source.toString();
 
-  const attributes = getAttributes(options);
-  const links = getLinks(content, attributes);
-
+  const links = getLinks(content, options.attributes);
   const data = new Map();
 
   let offset = 0;
diff --git a/src/options.json b/src/options.json
@@ -1,8 +1,12 @@
 {
   "type": "object",
   "properties": {
-    "attrs": {
-      "anyOf": [{ "type": "array" }, { "type": "string" }]
+    "attributes": {
+      "anyOf": [
+        { "type": "boolean" },
+        { "type": "array" },
+        { "type": "string" }
+      ]
     },
     "root": {
       "type": "string"
diff --git a/src/utils.js b/src/utils.js
@@ -4,42 +4,42 @@ function randomIdent() {
   return `xxxHTMLLINKxxx${Math.random()}${Math.random()}xxx`;
 }
 
-export function getAttributes(options) {
-  if (typeof options.attrs !== 'undefined') {
-    if (typeof options.attrs === 'string') {
-      return options.attrs.split(' ');
+export function getTagsAndAttributes(attributes) {
+  const defaultAttributes = ['img:src'];
+
+  if (typeof attributes !== 'undefined') {
+    if (typeof attributes === 'string') {
+      return attributes.split(' ');
     }
 
-    if (Array.isArray(options.attrs)) {
-      return options.attrs;
+    if (Array.isArray(attributes)) {
+      return attributes;
     }
 
-    if (options.attrs === false) {
+    if (attributes === false) {
       return [];
     }
 
-    throw new Error('Invalid value to options parameter attrs');
-  }
-
-  return ['img:src'];
-}
+    if (attributes === true) {
+      return defaultAttributes;
+    }
 
-export function getExportsString(options) {
-  if (options.esModule) {
-    return 'export default ';
+    throw new Error('Invalid value to options parameter attrs');
   }
 
-  return 'module.exports = ';
+  return defaultAttributes;
 }
 
 export function getLinks(content, attributes) {
-  return parseAttributes(content, (tag, attr) => {
-    const res = attributes.find((a) => {
+  const tagsAndAttributes = getTagsAndAttributes(attributes);
+
+  return parseAttributes(content, (tag, attribute) => {
+    const res = tagsAndAttributes.find((a) => {
       if (a.startsWith(':')) {
-        return attr === a.slice(1);
+        return attribute === a.slice(1);
       }
 
-      return `${tag}:${attr}` === a;
+      return `${tag}:${attribute}` === a;
     });
 
     return Boolean(res);
@@ -56,6 +56,14 @@ export function getUniqueIdent(data) {
   return ident;
 }
 
+export function getExportsString(options) {
+  if (options.esModule) {
+    return 'export default ';
+  }
+
+  return 'module.exports = ';
+}
+
 export function replaceLinkWithIdent(source, link, ident, offset = 0) {
   return (
     source.substr(0, link.start + offset) +
diff --git a/test/attributes-option.test.js b/test/attributes-option.test.js
@@ -0,0 +1,102 @@
+import loader from '../src';
+import { GET_URL_CODE } from '../src/constants';
+
+describe("'attributes' option", () => {
+  it('should work with a "string" notation', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes=script:src',
+      },
+      'Text <script src="script.js"><img src="image.png">'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <script src=\\"" + __url__(require("./script.js")) + "\\"><img src=\\"image.png\\">";`
+    );
+  });
+
+  it('should work with multiple a "string" notations', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes=script:src img:src',
+      },
+      'Text <script src="script.js"><img src="image.png">'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <script src=\\"" + __url__(require("./script.js")) + "\\"><img src=\\"" + __url__(require("./image.png")) + "\\">";`
+    );
+  });
+
+  it('should work with an "array" notations', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes[]=img:src',
+      },
+      'Text <script src="script.js"><img src="image.png">'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <script src=\\"script.js\\"><img src=\\"" + __url__(require("./image.png")) + "\\">";`
+    );
+  });
+
+  it('should work with multiple an "array" notations', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes[]=script:src&attributes[]=img:src',
+      },
+      'Text <script src="script.js"><img src="image.png">'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <script src=\\"" + __url__(require("./script.js")) + "\\"><img src=\\"" + __url__(require("./image.png")) + "\\">";`
+    );
+  });
+
+  it('should work with a custom attribute', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes[]=:custom-src',
+      },
+      'Text <custom-element custom-src="image1.png"><custom-img custom-src="image2.png"/></custom-element>'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <custom-element custom-src=\\"" + __url__(require("./image1.png")) + "\\"><custom-img custom-src=\\"" + __url__(require("./image2.png")) + "\\"/></custom-element>";`
+    );
+  });
+
+  it('should work with a "boolean" notation', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes=false',
+      },
+      'Text <script src="script.js"><img src="image.png">'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <script src=\\"script.js\\"><img src=\\"image.png\\">";`
+    );
+  });
+
+  it('should work with a "boolean" notation', () => {
+    const result = loader.call(
+      {
+        mode: 'development',
+        query: '?attributes=true',
+      },
+      'Text <script src="script.js"><img src="image.png">'
+    );
+
+    expect(result).toBe(
+      `${GET_URL_CODE}module.exports = "Text <script src=\\"script.js\\"><img src=\\"" + __url__(require("./image.png")) + "\\">";`
+    );
+  });
+});
diff --git a/test/loader.test.js b/test/loader.test.js
@@ -15,71 +15,6 @@ describe('loader', () => {
     );
   });
 
-  it('should accept attrs from query', () => {
-    const result = loader.call(
-      {
-        mode: 'development',
-        query: '?attrs=script:src',
-      },
-      'Text <script src="script.js"><img src="image.png">'
-    );
-
-    expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "Text <script src=\\"" + __url__(require("./script.js")) + "\\"><img src=\\"image.png\\">";`
-    );
-  });
-  it('should accept attrs from query (space separated)', () => {
-    const result = loader.call(
-      {
-        mode: 'development',
-        query: '?attrs=script:src img:src',
-      },
-      'Text <script src="script.js"><img src="image.png">'
-    );
-
-    expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "Text <script src=\\"" + __url__(require("./script.js")) + "\\"><img src=\\"" + __url__(require("./image.png")) + "\\">";`
-    );
-  });
-  it('should accept attrs from query (multiple)', () => {
-    const result = loader.call(
-      {
-        mode: 'development',
-        query: '?attrs[]=script:src&attrs[]=img:src',
-      },
-      'Text <script src="script.js"><img src="image.png">'
-    );
-
-    expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "Text <script src=\\"" + __url__(require("./script.js")) + "\\"><img src=\\"" + __url__(require("./image.png")) + "\\">";`
-    );
-  });
-  it('should accept :attribute (empty tag) from query', () => {
-    const result = loader.call(
-      {
-        mode: 'development',
-        query: '?attrs[]=:custom-src',
-      },
-      'Text <custom-element custom-src="image1.png"><custom-img custom-src="image2.png"/></custom-element>'
-    );
-
-    expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "Text <custom-element custom-src=\\"" + __url__(require("./image1.png")) + "\\"><custom-img custom-src=\\"" + __url__(require("./image2.png")) + "\\"/></custom-element>";`
-    );
-  });
-  it('should accept :attribute (empty tag) from query and not collide with similar attributes', () => {
-    const result = loader.call(
-      {
-        mode: 'development',
-        query: '?attrs[]=:custom-src',
-      },
-      'Text <custom-element custom-src="image1.png" custom-src-other="other.png"><custom-img custom-src="image2.png"/></custom-element>'
-    );
-
-    expect(result).toBe(
-      `${GET_URL_CODE}module.exports = "Text <custom-element custom-src=\\"" + __url__(require("./image1.png")) + "\\" custom-src-other=\\"other.png\\"><custom-img custom-src=\\"" + __url__(require("./image2.png")) + "\\"/></custom-element>";`
-    );
-  });
   it('should not make bad things with templates', () => {
     const result = loader.call(
       { mode: 'development' },
@@ -112,6 +47,7 @@ describe('loader', () => {
       `${GET_URL_CODE}module.exports = "Text <img src=\\"/image.png\\">";`
     );
   });
+
   it('should accept root from query', () => {
     const result = loader.call(
       {
@@ -125,6 +61,7 @@ describe('loader', () => {
       `${GET_URL_CODE}module.exports = "Text <img src=\\"" + __url__(require("/test/image.png")) + "\\">";`
     );
   });
+
   it('should ignore hash fragments in URLs', () => {
     const result = loader.call(
       { mode: 'development' },
@@ -135,6 +72,7 @@ describe('loader', () => {
       `${GET_URL_CODE}module.exports = "<img src=\\"" + __url__(require("./icons.svg")) + "#hash\\">";`
     );
   });
+
   it("should ignore anchor with 'mailto:' in the href attribute", () => {
     const result = loader.call(
       { mode: 'development' },
@@ -170,6 +108,7 @@ describe('loader', () => {
       `${GET_URL_CODE}module.exports = "<img src=\\"" + ("Hello " + (1 + 1)) + "\\">";`
     );
   });
+
   it('should not change handling of quotes when interpolation is enabled', () => {
     const result = loader.call(
       {
@@ -183,6 +122,7 @@ describe('loader', () => {
       `${GET_URL_CODE}module.exports = "<script>{\\\"json\\\": \\\"with \\\\\\\"quotes\\\\\\\" in value\\\"}</script>";`
     );
   });
+
   it('should enable interpolations when using interpolate=require flag and only require function be translate', () => {
     const result = loader.call(
       {
@@ -196,6 +136,7 @@ describe('loader', () => {
       `${GET_URL_CODE}module.exports = "<a href=\\"\${list.href}\\"><img src=\\"" + __url__(require("./test.jpg")) + "\\" /></a>";`
     );
   });
+
   it('should export as es6 default export', () => {
     const result = loader.call(
       {
