refactor: remove the require value for the interpolate option (#235)

BREAKING CHANGE: the `require` value for the `interpolation` option was removed with replacement, please use `raw-loader`, the special loader for syntax (for example - `ejs-loader`)  or template literal for that. Non standard HTML syntax potential can be broken by minimizer, parser can throw an error in some cases.

Author: evilebottnawi

README.md

@@ -48,7 +48,7 @@ module.exports = {
 };
 ```
 
-By default every local `<img src="image.png">` is required (`require('./image.png')`).
+By default every loadable attributes (for example - `<img src="image.png">`) is imported (`const img = require('./image.png')` or `import img from "./image.png""`).
 You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
 
 ## Options
@@ -57,7 +57,7 @@ You may need to specify loaders for images in your configuration (recommended `f
 | :-------------------------------: | :-----------------: | :-------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
 |  **[`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  |
+| **[`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                    |
 
@@ -147,22 +147,20 @@ Type: `Boolean|String`
 Default: `false`
 
 Allow to use expressions in HTML syntax.
-
-#### `Boolean`
-
 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`)}" />
+<img src="${require(`./images/gallery.png`).default}" />
 
-<div>${require('./components/gallery.html')}</div>
+<div>${require('./components/gallery.html').default}</div>
 ```
 
-#### `Boolean`
+> ⚠ 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**
 
@@ -182,40 +180,6 @@ module.exports = {
 };
 ```
 
-#### `String`
-
-If you only want to use `require` in template and any other `${}` are not to be translated, you can set `interpolate` flag to `require`, like so:
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.html$/i,
-        loader: 'html-loader',
-        options: {
-          interpolate: 'require',
-        },
-      },
-    ],
-  },
-};
-```
-
-This may be useful for template syntaxes. For example:
-
-```html
-<#list list as list>
-  <a href="${list.href!}" />${list.name}</a>
-</#list>
-
-<img src="${require(`./images/gallery.png`)}">
-
-<div>${require('./components/gallery.html')}</div>
-```
-
 ### `minimize`
 
 Type: `Boolean|Object`

src/index.js

@@ -16,8 +16,6 @@ import {
 
 import schema from './options.json';
 
-const REQUIRE_REGEX = /\${require\([^)]*\)}/g;
-
 export const raw = true;
 
 export default function htmlLoader(source) {
@@ -55,31 +53,6 @@ export default function htmlLoader(source) {
     }
   }
 
-  if (options.interpolate === 'require') {
-    const reqList = [];
-
-    let result = REQUIRE_REGEX.exec(content);
-    while (result) {
-      reqList.push({
-        length: result[0].length,
-        start: result.index,
-        value: result[0],
-      });
-
-      result = REQUIRE_REGEX.exec(content);
-    }
-
-    reqList.reverse();
-
-    for (const link of reqList) {
-      const ident = getUniqueIdent(replacers);
-
-      replacers.set(ident, link.value.substring(11, link.length - 3));
-
-      content = replaceLinkWithIdent(content, link, ident);
-    }
-  }
-
   const minimize =
     typeof options.minimize === 'undefined'
       ? isProductionMode(this)
@@ -109,7 +82,7 @@ export default function htmlLoader(source) {
     }
   }
 
-  if (options.interpolate && options.interpolate !== 'require') {
+  if (options.interpolate) {
     try {
       // Double escape quotes so that they are not unescaped completely in the template string
       content = compile(

src/options.json

@@ -16,7 +16,7 @@
       "type": "string"
     },
     "interpolate": {
-      "anyOf": [{ "type": "boolean" }, { "type": "string" }]
+      "anyOf": [{ "type": "boolean" }]
     },
     "minimize": {
       "anyOf": [{ "type": "boolean" }, { "type": "object" }]

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

@@ -58,26 +58,3 @@ exports[`'interpolate' option should work with boolean notation: result 1`] = `
 `;
 
 exports[`'interpolate' option should work with boolean notation: warnings 1`] = `Array []`;
-
-exports[`'interpolate' option should work with the "require": errors 1`] = `Array []`;
-
-exports[`'interpolate' option should work with the "require": module 1`] = `
-"// Imports
-var ___HTML_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
-var ___HTML_LOADER_IDENT_0___ = require(\\"./image.png\\");
-// Exports
-module.exports = \\"<img src=\\\\\\"\${\\\\\\"Hello \\\\\\" + (1+1)}\\\\\\">\\\\n<img src=\\\\\\"\${\`Hello \` + (1+1)}\\\\\\">\\\\n<p>Something about the \\\\\\\\\` character</p>\\\\n<script>{\\\\\\"json\\\\\\": \\\\\\"with \\\\\\\\\\\\\\"quotes\\\\\\\\\\\\\\" in value\\\\\\"}</script>\\\\n<h3>#{number} {customer}</h3>\\\\n<p>   {title}   </p>\\\\n<img src=\\\\\\"\\" + ___HTML_LOADER_GET_URL_IMPORT___(___HTML_LOADER_IDENT_0___) + \\"\\\\\\" /></a>\\\\n\\";"
-`;
-
-exports[`'interpolate' option should work with the "require": result 1`] = `
-"<img src=\\"\${\\"Hello \\" + (1+1)}\\">
-<img src=\\"\${\`Hello \` + (1+1)}\\">
-<p>Something about the \\\\\` character</p>
-<script>{\\"json\\": \\"with \\\\\\"quotes\\\\\\" in value\\"}</script>
-<h3>#{number} {customer}</h3>
-<p>   {title}   </p>
-<img src=\\"/webpack/public/path/image.png\\" /></a>
-"
-`;
-
-exports[`'interpolate' option should work with the "require": warnings 1`] = `Array []`;

test/__snapshots__/validate-options.test.js.snap

@@ -17,11 +17,7 @@ exports[`validate options should throw an error on the "esModule" option with "t
 
 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."
+ - options.interpolate should be a boolean."
 `;
 
 exports[`validate options should throw an error on the "root" option with "true" value 1`] = `

test/interpolate-option.test.js

@@ -33,18 +33,6 @@ describe("'interpolate' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work with the "require"', async () => {
-    const compiler = getCompiler('template.js', { interpolate: 'require' });
-    const stats = await compile(compiler);
-
-    expect(getModuleSource('./template.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 emit an error on broken interpolation syntax', async () => {
     const compiler = getCompiler('broken-interpolation-syntax.js', {
       interpolate: true,

test/validate-options.test.js

@@ -13,7 +13,7 @@ describe('validate options', () => {
       failure: [true],
     },
     interpolate: {
-      success: [false /* true */, 'require'],
+      success: [false /* true */],
       failure: [1],
     },
     esModule: {