From 4e2a3e1814655716fd2096dfe72998e0ca0b1a48 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 20 Jan 2020 16:27:29 +0300 Subject: [PATCH 1/2] refactor: `attrs` option BREAKING CHANGE: the `attrs` option was renamed to the `attributes` option --- src/options.json | 2 +- src/utils.js | 18 ++++----- test/attributes-option.test.js | 74 ++++++++++++++++++++++++++++++++++ test/loader.test.js | 71 +++----------------------------- 4 files changed, 90 insertions(+), 75 deletions(-) create mode 100644 test/attributes-option.test.js diff --git a/src/options.json b/src/options.json index 29ccc712..5e8499d8 100644 --- a/src/options.json +++ b/src/options.json @@ -1,7 +1,7 @@ { "type": "object", "properties": { - "attrs": { + "attributes": { "anyOf": [{ "type": "array" }, { "type": "string" }] }, "root": { diff --git a/src/utils.js b/src/utils.js index a097fc67..8206546c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -5,16 +5,16 @@ function randomIdent() { } export function getAttributes(options) { - if (typeof options.attrs !== 'undefined') { - if (typeof options.attrs === 'string') { - return options.attrs.split(' '); + if (typeof options.attributes !== 'undefined') { + if (typeof options.attributes === 'string') { + return options.attributes.split(' '); } - if (Array.isArray(options.attrs)) { - return options.attrs; + if (Array.isArray(options.attributes)) { + return options.attributes; } - if (options.attrs === false) { + if (options.attributes === false) { return []; } @@ -33,13 +33,13 @@ export function getExportsString(options) { } export function getLinks(content, attributes) { - return parseAttributes(content, (tag, attr) => { + return parseAttributes(content, (tag, attribute) => { const res = attributes.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); diff --git a/test/attributes-option.test.js b/test/attributes-option.test.js new file mode 100644 index 00000000..b876ecb1 --- /dev/null +++ b/test/attributes-option.test.js @@ -0,0 +1,74 @@ +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 ";` ); }); + 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 = "";` ); }); + it('should export as es6 default export', () => { const result = loader.call( { From 18e5d9e3fd28da6ed4f1c4658b9dabc41861b108 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Mon, 20 Jan 2020 16:36:19 +0300 Subject: [PATCH 2/2] refactor: `attrs` option BREAKING CHANGE: the `attrs` option was renamed to the `attributes` option --- README.md | 20 ++++++++-------- src/index.js | 5 +--- src/options.json | 6 ++++- src/utils.js | 42 ++++++++++++++++++++-------------- test/attributes-option.test.js | 28 +++++++++++++++++++++++ 5 files changed, 69 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 65110a5b..ee07e023 100644 --- 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 `:` 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 `:` combinations. (Default: `attributes=img:src`) -If you use ``, and lots of them make use of a `custom-src` attribute, you don't have to specify each combination `:`: just specify an empty tag like `attrs=:custom-src` and it will match every element. +If you use ``, and lots of them make use of a `custom-src` attribute, you don't have to specify each combination `:`: 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'); // => '' ``` ```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'); // => '' ``` ```js -require('html-loader?-attrs!./file.html'); +require('html-loader?-attributes!./file.html'); // => '' ``` diff --git a/src/index.js b/src/index.js index a1d809a9..42086dc5 100644 --- 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 index 5e8499d8..fdbca07d 100644 --- a/src/options.json +++ b/src/options.json @@ -2,7 +2,11 @@ "type": "object", "properties": { "attributes": { - "anyOf": [{ "type": "array" }, { "type": "string" }] + "anyOf": [ + { "type": "boolean" }, + { "type": "array" }, + { "type": "string" } + ] }, "root": { "type": "string" diff --git a/src/utils.js b/src/utils.js index 8206546c..bc39b975 100644 --- a/src/utils.js +++ b/src/utils.js @@ -4,37 +4,37 @@ function randomIdent() { return `xxxHTMLLINKxxx${Math.random()}${Math.random()}xxx`; } -export function getAttributes(options) { - if (typeof options.attributes !== 'undefined') { - if (typeof options.attributes === 'string') { - return options.attributes.split(' '); +export function getTagsAndAttributes(attributes) { + const defaultAttributes = ['img:src']; + + if (typeof attributes !== 'undefined') { + if (typeof attributes === 'string') { + return attributes.split(' '); } - if (Array.isArray(options.attributes)) { - return options.attributes; + if (Array.isArray(attributes)) { + return attributes; } - if (options.attributes === 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) { + const tagsAndAttributes = getTagsAndAttributes(attributes); + return parseAttributes(content, (tag, attribute) => { - const res = attributes.find((a) => { + const res = tagsAndAttributes.find((a) => { if (a.startsWith(':')) { return attribute === a.slice(1); } @@ -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 index b876ecb1..f203b535 100644 --- a/test/attributes-option.test.js +++ b/test/attributes-option.test.js @@ -71,4 +71,32 @@ describe("'attributes' option", () => { `${GET_URL_CODE}module.exports = "Text ";` ); }); + + it('should work with a "boolean" notation', () => { + const result = loader.call( + { + mode: 'development', + query: '?attributes=false', + }, + 'Text