feat: added the postprocessor option

.cspell.json

@@ -36,9 +36,10 @@
     "vspace",
     "jsbeautify",
     "Gitter",
-    "commitlint"
+    "commitlint",
+    "postprocessor",
+    "eslintcache"
   ],
-
   "ignorePaths": [
     "CHANGELOG.md",
     "package.json",

.gitignore

@@ -8,6 +8,7 @@ logs
 *.log
 npm-debug.log*
 .eslintcache
+.cspellcache
 /coverage
 /dist
 /local

README.md

@@ -63,6 +63,7 @@ module.exports = {
 
 - **[`sources`](#sources)**
 - **[`preprocessor`](#preprocessor)**
+- **[`postprocessor`](#postprocessor)**
 - **[`minimize`](#minimize)**
 - **[`esModule`](#esmodule)**
 
@@ -490,10 +491,7 @@ module.exports = {
 Type:
 
 ```ts
-type preprocessor = (
-  content: string | Buffer,
-  loaderContext: LoaderContext,
-) => HTMLElement;
+type preprocessor = (content: string, loaderContext: LoaderContext) => string;
 ```
 
 Default: `undefined`
@@ -591,6 +589,85 @@ module.exports = {
 };
 ```
 
+### `postprocessor`
+
+Type:
+
+```ts
+type postprocessor = (content: string, loaderContext: LoaderContext) => string;
+```
+
+Default: `undefined`
+
+Allows post-processing of content after replacing all attributes (like `src`/`srcset`/etc).
+
+**file.html**
+
+```html
+<img src="image.png" />
+<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>
+```
+
+#### `function`
+
+You can set the `postprocessor` option as a `function` instance.
+
+**webpack.config.js**
+
+```js
+const Handlebars = require("handlebars");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+        options: {
+          postprocessor: (content, loaderContext) => {
+            return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+You can also set the `postprocessor` option as an asynchronous function instance.
+
+For example:
+
+**webpack.config.js**
+
+```js
+const Handlebars = require("handlebars");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.hbs$/i,
+        loader: "html-loader",
+        options: {
+          postprocessor: async (content, loaderContext) => {
+            const value = await getValue();
+
+            return content
+              .replace(/<%=/g, '" +')
+              .replace(/%>/g, '+ "')
+              .replace("my-value", value);
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ### `minimize`
 
 Type:

src/index.js

@@ -41,7 +41,18 @@ export default async function loader(content) {
     plugins.push(minimizerPlugin({ minimize: options.minimize, errors }));
   }
 
-  const { html } = await pluginRunner(plugins).process(content);
+  let { html } = await pluginRunner(plugins).process(content);
+
+  html = JSON.stringify(html)
+    // Invalid in JavaScript but valid HTML
+    .replace(/[\u2028\u2029]/g, (str) =>
+      str === "\u2029" ? "\\u2029" : "\\u2028",
+    );
+
+  if (options.postprocessor) {
+    // eslint-disable-next-line no-param-reassign
+    html = await options.postprocessor(html, this);
+  }
 
   for (const error of errors) {
     this.emitError(error instanceof Error ? error : new Error(error));

src/options.json

@@ -45,6 +45,11 @@
       "description": "Allows pre-processing of content before handling.",
       "link": "https://github.com/webpack-contrib/html-loader#preprocessor"
     },
+    "postprocessor": {
+      "instanceof": "Function",
+      "description": "Allows post-processing of content before handling.",
+      "link": "https://github.com/webpack-contrib/html-loader#postprocessor"
+    },
     "sources": {
       "anyOf": [
         { "type": "boolean" },

src/utils.js

@@ -1174,6 +1174,7 @@ function getSourcesOption(rawOptions) {
 export function normalizeOptions(rawOptions, loaderContext) {
   return {
     preprocessor: rawOptions.preprocessor,
+    postprocessor: rawOptions.postprocessor,
     sources: getSourcesOption(rawOptions),
     minimize: getMinimizeOption(rawOptions, loaderContext),
     esModule:
@@ -1251,12 +1252,7 @@ export function getImportCode(html, loaderContext, imports, options) {
 }
 
 export function getModuleCode(html, replacements) {
-  let code = JSON.stringify(html)
-    // Invalid in JavaScript but valid HTML
-    .replace(/[\u2028\u2029]/g, (str) =>
-      str === "\u2029" ? "\\u2029" : "\\u2028",
-    );
-
+  let code = html;
   let replacersCode = "";
 
   for (const item of replacements) {

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`'postprocess' option should work with Async "postprocessor" Function option: errors 1`] = `[]`;
+
+exports[`'postprocess' option should work with Async "postprocessor" Function option: 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 = "<div>\\n  <p>{{firstname}} {{lastname}}</p>\\n  <img src=\\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\\" alt=\\"alt\\" />\\n<div>\\n";
+// Exports
+export default code;"
+`;
+
+exports[`'postprocess' option should work with Async "postprocessor" Function option: result 1`] = `
+"<div>
+  <p>{{firstname}} {{lastname}}</p>
+  <img src="replaced_file_protocol_/webpack/public/path/image.png" alt="alt" />
+<div>
+"
+`;
+
+exports[`'postprocess' option should work with Async "postprocessor" Function option: warnings 1`] = `[]`;
+
+exports[`'postprocess' option should work with the "postprocessor" option: errors 1`] = `[]`;
+
+exports[`'postprocess' option should work with the "postprocessor" option: 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: 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: warnings 1`] = `[]`;

test/fixtures/gallery.html

@@ -0,0 +1 @@
+<h2>Gallery</h2>

test/fixtures/postprocessor.html

@@ -0,0 +1,6 @@
+<img src="image.png">
+<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>-->

test/postprocessor-option.test.js

@@ -0,0 +1,53 @@
+import {
+  compile,
+  execute,
+  getCompiler,
+  getErrors,
+  getModuleSource,
+  getWarnings,
+  readAsset,
+} from "./helpers";
+
+describe("'postprocess' option", () => {
+  it('should work with the "postprocessor" option', async () => {
+    const compiler = getCompiler("postprocessor.html", {
+      postprocessor: (content, loaderContext) => {
+        expect(typeof content).toBe("string");
+        expect(loaderContext).toBeDefined();
+
+        return content.replace(/<%=/g, '" +').replace(/%>/g, '+ "');
+      },
+    });
+    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 stats = await compile(compiler);
+
+    expect(getModuleSource("./preprocessor.hbs", stats)).toMatchSnapshot(
+      "module",
+    );
+    expect(
+      execute(readAsset("main.bundle.js", compiler, stats)),
+    ).toMatchSnapshot("result");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+});

test/preprocessor-option.test.js

@@ -12,7 +12,7 @@ import {
   readAsset,
 } from "./helpers";
 
-describe("'process' option", () => {
+describe("'preprocess' option", () => {
   it('should work with the "preprocessor" option', async () => {
     const compiler = getCompiler("preprocessor.hbs", {
       preprocessor: (content, loaderContext) => {
@@ -110,6 +110,7 @@ describe("'process' option", () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
   it('should work with the Async "preprocessor" Function option #2', async () => {
     const plugin = posthtmlWebp();
     const compiler = getCompiler("posthtml.html", {