refactor: remove the interpolate option

BREAKING CHANGE: the `interpolate` option was removed without replacement, please consider migration template system and relevant loader

Author: alexander-akait

README.md

@@ -53,13 +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 |
-| **[`interpolate`](#interpolate)** |     `{Boolean}`     |                                                                         `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                    |
+|              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                    |
 
 ### `attributes`
 
@@ -141,45 +140,6 @@ module.exports = {
 };
 ```
 
-### `interpolate`
-
-Type: `Boolean|String`
-Default: `false`
-
-Allow to use expressions in HTML syntax.
-You can use `interpolate` flag to enable interpolation syntax for ES6 template strings, like so:
-
-```js
-require('html-loader?interpolate!./file.html');
-```
-
-```html
-<img src="${require(`./images/gallery.png`).default}" />
-
-<div>${require('./components/gallery.html').default}</div>
-```
-
-> ⚠ By default `file-loader` or `url-loader` use ES module syntax so you need use the `default` property.
-> You should not use the `default` property if you setup the `esModule` option to `false` value for `file-loader` or `url-loader`.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.html$/i,
-        loader: 'html-loader',
-        options: {
-          interpolate: true,
-        },
-      },
-    ],
-  },
-};
-```
-
 ### `minimize`
 
 Type: `Boolean|Object`
@@ -224,7 +184,7 @@ module.exports = {
 
 **webpack.config.js**
 
-See [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)'s documentation for more information on the available options.
+See [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)'s documentation for more information on the available options.
 
 The rules can be disabled using the following options in your `webpack.conf.js`
 
@@ -347,6 +307,8 @@ a {
 }
 ```
 
+**file.html**
+
 ```html
 <!DOCTYPE html>
 <html>
@@ -399,17 +361,22 @@ module.exports = {
 
 With the same configuration as above:
 
+**file.html**
+
 ```html
-<!-- file.html -->
 <img src="/image.jpg" />
 ```
 
+**scripts.js**
+
 ```js
 require('html-loader!./file.html');
 
 // => '<img src="/image.jpg">'
 ```
 
+**other-scripts.js**
+
 ```js
 require('html-loader?root=.!./file.html');
 

package.json

@@ -43,7 +43,6 @@
     "webpack": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "es6-templates": "^0.2.3",
     "html-minifier-terser": "^5.0.4",
     "htmlparser2": "^4.1.0",
     "loader-utils": "^1.4.0",

src/index.js

@@ -1,7 +1,7 @@
 import { getOptions } from 'loader-utils';
 import validateOptions from 'schema-utils';
 
-import { sourcePlugin, interpolatePlugin, minimizerPlugin } from './plugins';
+import { sourcePlugin, minimizerPlugin } from './plugins';
 import Warning from './Warning';
 
 import {
@@ -40,12 +40,6 @@ export default function htmlLoader(content) {
     plugins.push(minimizerPlugin(options));
   }
 
-  const { interpolate } = options;
-
-  if (interpolate) {
-    plugins.push(interpolatePlugin(options));
-  }
-
   const { html, messages, warnings, errors } = pluginRunner(plugins).process(
     content
   );

src/options.json

@@ -15,9 +15,6 @@
     "root": {
       "type": "string"
     },
-    "interpolate": {
-      "anyOf": [{ "type": "boolean" }]
-    },
     "minimize": {
       "anyOf": [{ "type": "boolean" }, { "type": "object" }]
     },

src/plugins/index.js

@@ -1,5 +1,4 @@
 import sourcePlugin from './source-plugin';
-import interpolatePlugin from './interpolate-plugin';
 import minimizerPlugin from './minimizer-plugin';
 
-export { sourcePlugin, interpolatePlugin, minimizerPlugin };
+export { sourcePlugin, minimizerPlugin };

src/plugins/interpolate-plugin.js

@@ -50,16 +50,12 @@ export function getImportCode(html, importedMessages, codeOptions) {
   return `// Imports\n${code}`;
 }
 
-export function getModuleCode(html, replaceableMessages, codeOptions) {
-  let code = html;
-
-  if (!codeOptions.interpolate) {
-    code = JSON.stringify(code)
-      // Invalid in JavaScript but valid HTML
-      .replace(/[\u2028\u2029]/g, (str) =>
-        str === '\u2029' ? '\\u2029' : '\\u2028'
-      );
-  }
+export function getModuleCode(html, replaceableMessages) {
+  let code = JSON.stringify(html)
+    // Invalid in JavaScript but valid HTML
+    .replace(/[\u2028\u2029]/g, (str) =>
+      str === '\u2029' ? '\\u2029' : '\\u2028'
+    );
 
   let replacersCode = '';
 

src/utils.js

@@ -15,11 +15,6 @@ exports[`validate options should throw an error on the "esModule" option with "t
  - 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 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."
@@ -28,47 +23,47 @@ exports[`validate options should throw an error on the "root" option with "true"
 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, 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? }"
+   object { attributes?, root?, minimize?, esModule? }"
 `;