feat: app the pretty and prettyOptions options to format the generated HTML

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change log
 
+## 5.1.0 (2024-03-21)
+
+- feat: app the `pretty` and `prettyOptions` options to format the generated HTML
+
 ## 5.0.3 (2024-03-17)
 
 - fix: catching of the error when a peer dependency for a Pug filter is not installed

README.md

@@ -74,6 +74,8 @@ See the [full list of features](https://github.com/webdiscus/html-bundler-webpac
 
 ### 📋 [Table of Contents](https://github.com/webdiscus/html-bundler-webpack-plugin#contents)
 
+### ⚙️ [Pug Plugin options](#options)
+
 ### 📜 [History of Pug Plugin](#history-pug-plugin)
 
 ---
@@ -167,8 +169,66 @@ The generated HTML contains URLs of the output filenames:
 </html>
 ```
 
+<a id="options" name="options"></a>
+
+## Pug Plugin options
+
+The Pug plugin has all the [options](https://github.com/webdiscus/html-bundler-webpack-plugin?#plugin-options) of the `HTML Bundler Plugin`, plus a few options specific to Pug plugin.
+
+<a id="option-pretty" name="option-pretty"></a>
+### `pretty`
+
+Type: `'auto'|boolean|Object` Default: `false`
+
+The Pug compiler generate minimized HTML.
+For formatting generated HTML is used the [js-beautify](https://github.com/beautifier/js-beautify) with the following `default options`:
+
+```js
+{
+  html: {
+    indent_size: 2,
+    end_with_newline: true,
+    indent_inner_html: true,
+    preserve_newlines: true,
+    max_preserve_newlines: 0,
+    wrap_line_length: 120,
+    extra_liners: [],
+    space_before_conditional: true,
+    js: {
+      end_with_newline: false,
+      preserve_newlines: true,
+      max_preserve_newlines: 2,
+      space_after_anon_function: true,
+    },
+    css: {
+      end_with_newline: false,
+      preserve_newlines: false,
+      newline_between_rules: false,
+    },
+  },
+}
+```
+
+Possible values:
+
+- `false` - disable formatting
+- `true` - enable formatting with default options
+- `'auto'` - in `development` mode enable formatting with default options, in `production` mode disable formatting,
+  use [prettyOptions](#option-pretty-options) to customize options
+- `{}` - enable formatting with custom options, this object are merged with `default options`\
+  see [options reference](https://github.com/beautifier/js-beautify#options)
+
+  
+<a id="option-pretty-options" name="option-pretty-options"></a>
+### `prettyOptions`
+
+Type: `Object` Default: `null`
+
+When the [pretty](#option-pretty) option is set to `auto` or `true`, you can configure minification options using the `prettyOptions`.
+
 <a id="history-pug-plugin" name="history-pug-plugin"></a>
 
+---
 ## History of Pug Plugin
 
 **Why the Pug Plugin since `v5.0` based on [html-bundler-webpack-plugin][html-bundler-webpack-plugin]?**
@@ -223,7 +283,7 @@ module.exports = {
 };
 ```
 
-> The `pug-plugin`'s heart 🧡 now lives in the `html-bundler-webpack-plugin`'s body 🏋️‍♂️.
+> The `pug-plugin`'s heart now lives in the `html-bundler-webpack-plugin`.
 > 
 > `@webdiscus/pug-loader` -> `pug-plugin` -> `html-bundler-webpack-plugin` -> `pug-plugin`
 > 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pug-plugin",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "Pug plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in Pug.",
   "keywords": [
     "html",
@@ -67,8 +67,8 @@
   },
   "dependencies": {
     "ansis": "2.0.3",
-    "html-bundler-webpack-plugin": "3.6.4",
-    "js-beautify": "^1.14.11",
+    "html-bundler-webpack-plugin": "3.7.0",
+    "js-beautify": "^1.15.1",
     "pug": "3.0.2"
   },
   "devDependencies": {

package.json

@@ -5,6 +5,32 @@ const Config = require('html-bundler-webpack-plugin/Config');
 Config.init(path.join(__dirname, './config.js'));
 
 const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+const formatHtml = require('js-beautify').html;
+
+/**
+ * Resolve undefined|true|false|''|'auto' value depend on current Webpack mode dev/prod.
+ *
+ * @param {boolean|string|undefined} value The value one of the values: true, false, 'auto'.
+ * @param {boolean} autoDevValue Returns the autoValue in dev mode when value is 'auto'.
+ * @param {boolean} autoProdValue Returns the autoValue in prod mode when value is 'auto'.
+ * @param {boolean|string} defaultValue Returns default value when value is undefined.
+ * @param {boolean} isProd Is production mode.
+ * @return {boolean}
+ */
+const toBool = (value, { autoDevValue, autoProdValue, defaultValue, isProd }) => {
+  if (value == null) value = defaultValue;
+  // note: if a parameter is defined without a value or value is empty, then the value is true
+  if (value === '' || value === 'true') return true;
+  if (value === 'false') return false;
+  if (value === true || value === false) return value;
+
+  if (value === 'auto') {
+    if (!isProd && autoDevValue != null) return autoDevValue;
+    if (isProd && autoProdValue != null) return autoProdValue;
+  }
+
+  return false;
+};
 
 /**
  * @typedef {PluginOptions} HtmlBundlerPluginOptions
@@ -19,7 +45,7 @@ class PugPlugin extends HtmlBundlerPlugin {
       test: /\.(pug|jade)$/, // default extensions for the pug plugin
       enabled: true,
       verbose: false,
-      pretty: false, // new option for the pug plugin
+      pretty: false, // formatting html for the pug plugin
       minify: false,
       minifyOptions: null,
       sourcePath: null,
@@ -45,7 +71,55 @@ class PugPlugin extends HtmlBundlerPlugin {
    * @param {Compiler} compiler The instance of the webpack compilation.
    */
   init(compiler) {
-    // TODO: do some thing in an extended plugin
+    const pretty = PugPlugin.option.options.pretty;
+    const userPrettyOptions = PugPlugin.option.options.prettyOptions;
+
+    // formatting options: https://github.com/beautifier/js-beautify
+    const defaultPrettyOptions = {
+      html: {
+        indent_size: 2,
+        end_with_newline: true,
+        indent_inner_html: true,
+        preserve_newlines: true,
+        max_preserve_newlines: 0,
+        wrap_line_length: 120,
+        extra_liners: [],
+        space_before_conditional: true,
+        js: {
+          end_with_newline: false,
+          preserve_newlines: true,
+          max_preserve_newlines: 2,
+          space_after_anon_function: true,
+        },
+        css: {
+          end_with_newline: false,
+          preserve_newlines: false,
+          newline_between_rules: false,
+        },
+      },
+    };
+
+    let isPretty;
+    let prettyOption;
+
+    if (pretty && typeof pretty !== 'string') {
+      isPretty = true;
+      prettyOption = pretty;
+    } else if (userPrettyOptions != null) {
+      isPretty = true;
+      prettyOption = { ...defaultPrettyOptions, ...userPrettyOptions };
+    } else {
+      isPretty = toBool(pretty, {
+        defaultValue: false,
+        autoDevValue: true,
+        isProd: PugPlugin.option.productionMode,
+      });
+      prettyOption = defaultPrettyOptions;
+    }
+
+    if (isPretty) {
+      PugPlugin.option.addProcess('postprocess', (content) => formatHtml(content, prettyOption));
+    }
   }
 }
 

src/index.js

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Test</title>
+    <script src="js/main.c6fe1e02.js" defer="defer"></script>
+    <script>(()=>{"use strict";var r,e={116:(r,e,o)=>{o.d(e,{Q:()=>t});const t=(r,e)=>r+e}},o={};function t(r){var n=o[r];if(void 0!==n)return n.exports;var i=o[r]={exports:{}};return e[r](i,i.exports,t),i.exports}t.d=(r,e)=>{for(var o in e)t.o(e,o)&&!t.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:e[o]})},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),r=t(116),console.log(">> inline script from inline-main.js",(0,r.Q)(3,4))})();</script>
+</head>
+
+<body>
+    <h1>Home</h1>
+</body>
+
+</html>