feat: using template literals in code when it supported (#520)

README.md

@@ -628,7 +628,12 @@ module.exports = {
  loader: "html-loader",
  options: {
  postprocessor: (content, loaderContext) => {
- return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
+ // When you environment supports template literals (using browserslist or options) we will generate code using them
+ const isTemplateLiteralSupported = content[0] === "`";
+
+ return content
+ .replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
+ .replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
  },
  },
  },
@@ -655,10 +660,12 @@ module.exports = {
  options: {
  postprocessor: async (content, loaderContext) => {
  const value = await getValue();
+ // When you environment supports template literals (using browserslist or options) we will generate code using them
+ const isTemplateLiteralSupported = content[0] === "`";
 
  return content
- .replace(/<%=/g, '" +')
- .replace(/%>/g, '+ "')
+ .replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
+ .replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "')
  .replace("my-value", value);
  },
  },

src/index.js

@@ -6,6 +6,8 @@ import {
  getModuleCode,
  getExportCode,
  defaultMinimizerOptions,
+ supportTemplateLiteral,
+ convertToTemplateLiteral,
 } from "./utils";
 
 import schema from "./options.json";
@@ -57,7 +59,17 @@ export default async function loader(content) {
 
  let { html } = await pluginRunner(plugins).process(content);
 
- html = JSON.stringify(html)
+ for (const error of errors) {
+ this.emitError(error instanceof Error ? error : new Error(error));
+ }
+
+ const isTemplateLiteralSupported = supportTemplateLiteral(this);
+
+ html = (
+ isTemplateLiteralSupported
+ ? convertToTemplateLiteral(html)
+ : JSON.stringify(html)
+ )
  // Invalid in JavaScript but valid HTML
  .replace(/[\u2028\u2029]/g, (str) =>
  str === "\u2029" ? "\\u2029" : "\\u2028",
@@ -68,12 +80,10 @@ export default async function loader(content) {
  html = await options.postprocessor(html, this);
  }
 
- for (const error of errors) {
- this.emitError(error instanceof Error ? error : new Error(error));
- }
-
  const importCode = getImportCode(html, this, imports, options);
- const moduleCode = getModuleCode(html, replacements, options);
+ const moduleCode = getModuleCode(html, replacements, {
+ isTemplateLiteralSupported,
+ });
  const exportCode = getExportCode(html, options);
 
  return `${importCode}${moduleCode}${exportCode}`;

src/utils.js

@@ -1240,10 +1240,31 @@ export function getImportCode(html, loaderContext, imports, options) {
  return `// Imports\n${code}`;
 }
 
-export function getModuleCode(html, replacements) {
+const SLASH = "\\".charCodeAt(0);
+const BACKTICK = "`".charCodeAt(0);
+const DOLLAR = "$".charCodeAt(0);
+
+export function convertToTemplateLiteral(str) {
+ let escapedString = "";
+
+ for (let i = 0; i < str.length; i++) {
+ const code = str.charCodeAt(i);
+
+ escapedString +=
+ code === SLASH || code === BACKTICK || code === DOLLAR
+ ? `\\${str[i]}`
+ : str[i];
+ }
+
+ return `\`${escapedString}\``;
+}
+
+export function getModuleCode(html, replacements, options) {
  let code = html;
  let replacersCode = "";
 
+ const { isTemplateLiteralSupported } = options;
+
  for (const item of replacements) {
  const { runtime, importName, replacementName, isValueQuoted, hash } = item;
 
@@ -1256,20 +1277,24 @@ export function getModuleCode(html, replacements) {
 
  replacersCode += `var ${replacementName} = ${GET_SOURCE_FROM_IMPORT_NAME}(${importName}${preparedOptions});\n`;
 
- code = code.replace(
- new RegExp(replacementName, "g"),
- () => `" + ${replacementName} + "`,
+ code = code.replace(new RegExp(replacementName, "g"), () =>
+ isTemplateLiteralSupported
+ ? `\${${replacementName}}`
+ : `" + ${replacementName} + "`,
  );
  } else {
- code = code.replace(
- new RegExp(replacementName, "g"),
- () => `" + ${importName} + "`,
+ code = code.replace(new RegExp(replacementName, "g"), () =>
+ isTemplateLiteralSupported
+ ? `\${${replacementName}}`
+ : `" + ${replacementName} + "`,
  );
  }
  }
 
  // Replaces "<script>" or "</script>" to "<" + "script>" or "<" + "/script>".
- code = code.replace(/<(\/?script)/g, (_, s) => `<" + "${s}`);
+ code = code.replace(/<(\/?script)/g, (_, s) =>
+ isTemplateLiteralSupported ? `\${"<" + "${s}"}` : `<" + "${s}`,
+ );
 
  return `// Module\n${replacersCode}var code = ${code};\n`;
 }
@@ -1342,4 +1367,28 @@ export function traverse(root, callback) {
  visit(root, null);
 }
 
+export function supportTemplateLiteral(loaderContext) {
+ if (loaderContext.environment && loaderContext.environment.templateLiteral) {
+ return true;
+ }
+
+ // TODO remove in the next major release
+ if (
+ // eslint-disable-next-line no-underscore-dangle
+ loaderContext._compilation &&
+ // eslint-disable-next-line no-underscore-dangle
+ loaderContext._compilation.options &&
+ // eslint-disable-next-line no-underscore-dangle
+ loaderContext._compilation.options.output &&
+ // eslint-disable-next-line no-underscore-dangle
+ loaderContext._compilation.options.output.environment &&
+ // eslint-disable-next-line no-underscore-dangle
+ loaderContext._compilation.options.output.environment.templateLiteral
+ ) {
+ return true;
+ }
+
+ return false;
+}
+
 export const webpackIgnoreCommentRegexp = /webpackIgnore:(\s+)?(true|false)/;

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

@@ -8,7 +8,11 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
 var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
-var code = "<div>\\n <p>{{firstname}} {{lastname}}</p>\\n <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
+var code = \`<div>
+ <p>{{firstname}} {{lastname}}</p>
+ <img src="\${___HTML_LOADER_REPLACEMENT_0___}" alt="alt" />
+<div>
+\`;
 // Exports
 export default code;"
 `;
@@ -23,6 +27,31 @@ exports[`'postprocess' option should work with async "postprocessor" function op
 
 exports[`'postprocess' option should work with async "postprocessor" function option: warnings 1`] = `[]`;
 
+exports[`'postprocess' option should work with the "postprocessor" option #1: errors 1`] = `[]`;
+
+exports[`'postprocess' option should work with the "postprocessor" option #1: module 1`] = `
+"// Imports
+import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.js";
+var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
+// Module
+var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
+var code = "<img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\">\\n<img src=\\"" + 'Hello ' + (1+1) + "\\">\\n<img src=\\"" + require('./image.png') + "\\">\\n<img src=\\"" + new URL('./image.png', import.meta.url) + "\\">\\n<div>" + require('./gallery.html').default + "</div>\\n<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->\\n";
+// Exports
+export default code;"
+`;
+
+exports[`'postprocess' option should work with the "postprocessor" option #1: result 1`] = `
+"<img src="replaced_file_protocol_/webpack/public/path/image.png">
+<img src="Hello 2">
+<img src="/webpack/public/path/image.png">
+<img src="replaced_file_protocol_/webpack/public/path/image.png">
+<div><h2>Gallery</h2></div>
+<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->
+"
+`;
+
+exports[`'postprocess' option should work with the "postprocessor" option #1: warnings 1`] = `[]`;
+
 exports[`'postprocess' option should work with the "postprocessor" option: errors 1`] = `[]`;
 
 exports[`'postprocess' option should work with the "postprocessor" option: module 1`] = `
@@ -31,7 +60,13 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
 var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
-var code = "<img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\">\\n<img src=\\"" + 'Hello ' + (1+1) + "\\">\\n<img src=\\"" + require('./image.png') + "\\">\\n<img src=\\"" + new URL('./image.png', import.meta.url) + "\\">\\n<div>" + require('./gallery.html').default + "</div>\\n<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->\\n";
+var code = \`<img src="\${___HTML_LOADER_REPLACEMENT_0___}">
+<img src="\${ 'Hello ' + (1+1) }">
+<img src="\${ require('./image.png') }">
+<img src="\${ new URL('./image.png', import.meta.url) }">
+<div>\${ require('./gallery.html').default }</div>
+<!--Works fine, but need improve testing <div>< %= (await import('./gallery.html')).default % ></div>-->
+\`;
 // Exports
 export default code;"
 `;

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

@@ -8,7 +8,11 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
 var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
-var code = "<div>\\n <p>Alexander Krasnoyarov</p>\\n <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
+var code = \`<div>
+ <p>Alexander Krasnoyarov</p>
+ <img src="\${___HTML_LOADER_REPLACEMENT_0___}" alt="alt" />
+<div>
+\`;
 // Exports
 export default code;"
 `;
@@ -33,7 +37,8 @@ var ___HTML_LOADER_IMPORT_1___ = new URL("./image.png", import.meta.url);
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
-var code = "<picture><source type=\\"image/webp\\" srcset=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\"><img src=\\"" + ___HTML_LOADER_REPLACEMENT_1___ + "\\"></picture>\\n";
+var code = \`<picture><source type="image/webp" srcset="\${___HTML_LOADER_REPLACEMENT_0___}"><img src="\${___HTML_LOADER_REPLACEMENT_1___}"></picture>
+\`;
 // Exports
 export default code;"
 `;
@@ -53,7 +58,11 @@ import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../src/runtime/getUrl.j
 var ___HTML_LOADER_IMPORT_0___ = new URL("./image.png", import.meta.url);
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
-var code = "<div>\\n <p>Alexander Krasnoyarov</p>\\n <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
+var code = \`<div>
+ <p>Alexander Krasnoyarov</p>
+ <img src="\${___HTML_LOADER_REPLACEMENT_0___}" alt="alt" />
+<div>
+\`;
 // Exports
 export default code;"
 `;
@@ -78,7 +87,8 @@ var ___HTML_LOADER_IMPORT_1___ = new URL("./image.png", import.meta.url);
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
-var code = "<picture><source type=\\"image/webp\\" srcset=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\"><img src=\\"" + ___HTML_LOADER_REPLACEMENT_1___ + "\\"></picture>\\n";
+var code = \`<picture><source type="image/webp" srcset="\${___HTML_LOADER_REPLACEMENT_0___}"><img src="\${___HTML_LOADER_REPLACEMENT_1___}"></picture>
+\`;
 // Exports
 export default code;"
 `;

test/postprocessor-option.test.js

@@ -1,3 +1,5 @@
+import path from "path";
+
 import {
  compile,
  execute,
@@ -15,7 +17,11 @@ describe("'postprocess' option", () => {
  expect(typeof content).toBe("string");
  expect(loaderContext).toBeDefined();
 
- return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
+ const isTemplateLiteralSupported = content[0] === "`";
+
+ return content
+ .replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
+ .replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
  },
  });
  const stats = await compile(compiler);
@@ -30,13 +36,58 @@ describe("'postprocess' option", () => {
  expect(getErrors(stats)).toMatchSnapshot("errors");
  });
 
+ it('should work with the "postprocessor" option #1', async () => {
+ const compiler = getCompiler(
+ "postprocessor.html",
+ {
+ postprocessor: (content, loaderContext) => {
+ expect(typeof content).toBe("string");
+ expect(loaderContext).toBeDefined();
+
+ const isTemplateLiteralSupported = content[0] === "`";
+
+ return content
+ .replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
+ .replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
+ },
+ },
+ {
+ output: {
+ path: path.resolve(__dirname, "./outputs"),
+ filename: "[name].bundle.js",
+ chunkFilename: "[name].chunk.js",
+ chunkLoading: "require",
+ publicPath: "/webpack/public/path/",
+ library: "___TEST___",
+ assetModuleFilename: "[name][ext]",
+ hashFunction: "xxhash64",
+ environment: { templateLiteral: false },
+ },
+ },
+ );
+ const stats = await compile(compiler);
+
+ expect(getModuleSource("./postprocessor.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 work with async "postprocessor" function option', async () => {
  const compiler = getCompiler("preprocessor.hbs", {
  postprocessor: async (content, loaderContext) => {
  await expect(typeof content).toBe("string");
  await expect(loaderContext).toBeDefined();
 
- return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
+ const isTemplateLiteralSupported = content[0] === "`";
+
+ return content
+ .replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
+ .replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
  },
  });
  const stats = await compile(compiler);