pug-plugin - npm Package Compare versions

Comparing version 5.0.3 to 5.1.0

CHANGELOG.md

 # 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)
@@ -4,0 +8,0 @@

package.json

 {
   "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.",
@@ -70,4 +70,4 @@ "keywords": [
     "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"
@@ -74,0 +74,0 @@ },

README.md

@@ -77,2 +77,4 @@ <div align="center">
 
+### ⚙️ [Pug Plugin options](#options)
+
 ### 📜 [History of Pug Plugin](#history-pug-plugin)
@@ -171,4 +173,62 @@
 
+<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
@@ -228,3 +288,3 @@
 
-> 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`.
 > 
@@ -231,0 +291,0 @@ > `@webdiscus/pug-loader` -> `pug-plugin` -> `html-bundler-webpack-plugin` -> `pug-plugin`

src/index.js

@@ -8,4 +8,30 @@ const path = require('path');
 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
@@ -23,3 +49,3 @@ */
       verbose: false,
-      pretty: false, // new option for the pug plugin
+      pretty: false, // formatting html for the pug plugin
       minify: false,
@@ -50,3 +76,52 @@ minifyOptions: null,
   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 && !['boolean', 'string'].includes(typeof pretty)) {
+      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) {
+      //console.log({ prettyOption });
+      PugPlugin.option.addProcess('postprocess', (content) => formatHtml(content, prettyOption));
+    }
   }
@@ -53,0 +128,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44322

increased by11.19%

Lines of code

122

increased by125.93%

Number of lines in readme file

306

increased by24.39%

Dependency changes

• + Addedhtml-bundler-webpack-plugin@3.7.0(transitive)

• - Removedhtml-bundler-webpack-plugin@3.6.4(transitive)

• Updatedhtml-bundler-webpack-plugin@3.7.0

• Updatedjs-beautify@^1.15.1