feat: preprocessor option (#263)

webpack-contrib · Mar 18, 2020 · 8c73761 · 8c73761
1 parent f2ce5b1
commit 8c73761
Show file tree

Hide file tree

Showing 18 changed files with 441 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -50,12 +50,66 @@ module.exports = {
 
 ## Options
 
-|              Name               |            Type            |                   Default                    | Description                              |
-| :-----------------------------: | :------------------------: | :------------------------------------------: | :--------------------------------------- |
-| **[`attributes`](#attributes)** | `{Boolean\/Array\/Object}` |                    `true`                    | 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                    |
+|                Name                 |            Type            |                   Default                    | Description                                      |
+| :---------------------------------: | :------------------------: | :------------------------------------------: | :----------------------------------------------- |
+| **[`preprocessor`](#preprocessor)** |        `{Function}`        |                 `undefined`                  | Allows pre-processing of content before handling |
+|   **[`attributes`](#attributes)**   | `{Boolean\/Array\/Object}` |                    `true`                    | 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                            |
+
+### `preprocessor`
+
+Type: `Function`
+Default: `undefined`
+
+Allows pre-processing of content before handling.
+
+> ⚠ You should always return valid HTML
+
+**file.hbs**
+
+```hbs
+<div>
+  <p>{{firstname}} {{lastname}}</p>
+  <img src="image.png" alt="alt" />
+<div>
+```
+
+**webpack.config.js**
+
+```js
+const Handlebars = require('handlebars');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.hbs$/i,
+        loader: 'html-loader',
+        options: {
+          preprocessor: (content, loaderContext) => {
+            let result;
+
+            try {
+              result = Handlebars.compile(content)({
+                firstname: 'Value',
+                lastname: 'OtherValue',
+              });
+            } catch (error) {
+              loaderContext.emitError(error);
+
+              return content;
+            }
+
+            return result;
+          },
+        },
+      },
+    ],
+  },
+};
+```
 
 ### `attributes`
 
@@ -501,6 +555,99 @@ require('html-loader?root=.!./file.html');
 // => '<img src="http://cdn.example.com/49eba9f/a992ca.jpg">'
 ```
 
+### Templating
+
+You can use any template system. Below is an example for [handlebars](https://handlebarsjs.com/).
+
+**file.hbs**
+
+```hbs
+<div>
+  <p>{{firstname}} {{lastname}}</p>
+  <img src="image.png" alt="alt" />
+<div>
+```
+
+**webpack.config.js**
+
+```js
+const Handlebars = require('handlebars');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.hbs$/i,
+        loader: 'html-loader',
+        options: {
+          preprocessor: (content, loaderContext) => {
+            let result;
+
+            try {
+              result = Handlebars.compile(content)({
+                firstname: 'Value',
+                lastname: 'OtherValue',
+              });
+            } catch (error) {
+              loaderContext.emitError(error);
+
+              return content;
+            }
+
+            return result;
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+### PostHTML
+
+You can use [PostHTML](https://github.com/posthtml/posthtml) without any additional loaders.
+
+**file.html**
+
+```html
+<img src="image.jpg" />
+```
+
+**webpack.config.js**
+
+```js
+const posthtml = require('posthtml');
+const posthtmlWebp = require('posthtml-webp');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.hbs$/i,
+        loader: 'html-loader',
+        options: {
+          preprocessor: () => {
+            let result;
+
+            try {
+              result = posthtml()
+                .use(plugin)
+                .process(content, { sync: true });
+            } catch (error) {
+              loaderContext.emitError(error);
+
+              return content;
+            }
+
+            return result.html;
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ### Export into HTML files
 
 A very common scenario is exporting the HTML into their own _.html_ file, to

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,12 +67,15 @@
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-import": "^2.20.1",
     "file-loader": "^6.0.0",
+    "handlebars": "^4.7.3",
     "husky": "^4.2.3",
     "jest": "^25.1.0",
     "jest-junit": "^10.0.0",
     "lint-staged": "^10.0.8",
     "memfs": "^3.1.2",
     "npm-run-all": "^4.1.5",
+    "posthtml": "^0.12.0",
+    "posthtml-webp": "^1.5.0",
     "prettier": "^1.19.1",
     "standard-version": "^7.1.0",
     "webpack": "^4.42.0"

diff --git a/src/index.js b/src/index.js
@@ -21,6 +21,11 @@ export default function htmlLoader(content) {
     baseDataPath: 'options',
   });
 
+  if (options.preprocessor) {
+    // eslint-disable-next-line no-param-reassign
+    content = options.preprocessor(content, this);
+  }
+
   const plugins = [];
 
   const attributes =
@@ -70,5 +75,12 @@ export default function htmlLoader(content) {
   const moduleCode = getModuleCode(html, replaceableMessages, codeOptions);
   const exportCode = getExportCode(html, exportedMessages, codeOptions);
 
-  return `${importCode}${moduleCode}${exportCode}`;
+  let code = `${importCode}${moduleCode}${exportCode}`;
+
+  if (options.process && options.process.post) {
+    // eslint-disable-next-line no-param-reassign
+    code = options.process.post(code, this);
+  }
+
+  return code;
 }
diff --git a/src/options.json b/src/options.json
@@ -1,6 +1,9 @@
 {
   "type": "object",
   "properties": {
+    "preprocessor": {
+      "instanceof": "Function"
+    },
     "attributes": {
       "anyOf": [
         { "type": "boolean" },

diff --git a/src/utils.js b/src/utils.js
@@ -94,5 +94,5 @@ export function getExportCode(html, exportedMessages, codeOptions) {
     return `// Exports\nexport default code;`;
   }
 
-  return `// Exports\nmodule.exports = code`;
+  return `// Exports\nmodule.exports = code;`;
 }
diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap