pug-plugin - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "pug-plugin",
-  "version": "1.0.0",
-  "description": "The pug plugin for webpack to handles pug files from webpack entries and save it as HTML.",
+  "version": "1.1.0",
+  "description": "The pug plugin for webpack to handle pug files from webpack entries and save them as HTML.",
   "keywords": [
@@ -45,2 +45,3 @@ "pug",
     "src",
+    "CHANGELOG.md",
     "README.md",
@@ -50,3 +51,3 @@ "LICENSE"
   "engines": {
-    "node": ">=12.14"
+    "node": ">=12.13"
   },
@@ -64,9 +65,11 @@ "peerDependencies": {
     "@types/jest": "^27.0.3",
+    "css-loader": "^6.5.1",
     "html-loader": "^3.0.1",
-    "jest": "^27.3.1",
-    "jstransformer-markdown-it": "^2.1.0",
-    "prettier": "^2.4.1",
+    "jest": "^27.4.3",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
-    "webpack": "^5.64.1"
+    "sass": "^1.44.0",
+    "sass-loader": "^12.3.0",
+    "webpack": "^5.64.4"
   }
 }

README.md

@@ -7,52 +7,33 @@ [![npm version](https://badge.fury.io/js/pug-plugin.svg)](https://badge.fury.io/js/pug-plugin)
 
-### **NEW:** first version is released!
-
 # [pug-plugin](https://www.npmjs.com/package/pug-plugin)
 
-Handles `.pug` templates directly from webpack `entry` via `pug-loader` and save rendered HTML to destination directory.
+Webpack plugin for the [Pug](https://pugjs.org) templates.\
+This plugin extract HTML and CSS from `pug` `html` `scss` `css` files defined by `webpack entry` into output directory.
 
-## The motivation
+> The plugin can be used not only for `pug` but also for simply extracting `HTML` or `CSS` from  `webpack entry`, independent of pug usage.
 
-The goal of this plugin is do same working as `mini-css-extract-plugin`. 
-This mean that is possible add more pug files directly in webpack `entry` and stop `"plugin hell"` in `webpack.plugins`
-for huge amount of static pug files.
+<a id="install" name="install" href="#install"></a>
+## Install
 
-For example, my project has over 30 static pug files them will be rendered to 30 static HTML. 
-For each pug file need add the `new HtmlWebpackPlugin({...})` to `webpack.plugins`.
-In that case the `webpack.plugins` is like following:
+```console
+npm install pug-plugin --save-dev
+```
 
+## The motivation
+
+### Early
+To save extracted `HTML`, you had to add `new HtmlWebpackPlugin ({...})` to `webpack.plugins` for each file:
 ```js
-{
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+module.exports = {
+  entry: {
+    'main': './main.js',
+    'styles': './styles.scss',
+  },
   plugins: [
     new HtmlWebpackPlugin({
-      template: 'templates/index.pug',
-      filename: 'index.html',
-    }),
-    new HtmlWebpackPlugin({
       template: 'templates/page01.pug',
       filename: 'page01.html',
     }),
-    new HtmlWebpackPlugin({
-      template: 'templates/page02.pug',
-      filename: 'page02.html',
-    }),
-    new HtmlWebpackPlugin({
-      template: 'templates/page03.pug',
-      filename: 'page03.html',
-    }),
-    new HtmlWebpackPlugin({
-      template: 'templates/page04.pug',
-      filename: 'page04.html',
-    }),
-    new HtmlWebpackPlugin({
-      template: 'templates/page05.pug',
-      filename: 'page05.html',
-    }),
-    new HtmlWebpackPlugin({
-      template: 'templates/page06.pug',
-      filename: 'page06.html',
-    }),
-    
     // ...
-    
     new HtmlWebpackPlugin({
@@ -62,43 +43,232 @@ template: 'templates/page66.pug',
     }),
-    // ...
   ]
 }
 ```
+Each time will be created new instance of the plugin, initialized and processed. 
+This is not good for huge amount of files.
 
-This is very bad praxis! Each time will be created new instance of the plugin, initialized and processed. This need extra CPU, RAM resources, and additional build time.
+### Now 
+This plugin can extract and save `HTML` directly from `webpack entry`. It is very practical to define all static resources (js, sass, pug, html) together, in one place:
+```js
+const PugPlugin = require('pug-plugin');
+module.exports = {
+  entry: {
+    'main': './main.js',
+    'styles': './styles.scss',
+    'index': 'templates/index.html', // now is possible define HTML file in entry
+    'page01': 'templates/page01.pug', // now is possible define PUG file in entry
+    // ...
+    'page77': 'templates/page77.pug',
+  },
+  plugins: [
+    new PugPlugin(), // supports zero config using default webpack output options 
+  ]
+};
+```
 
-## I will stop this "hell"!
+## Features
+- supports **Webpack 5** and **Pug 3**
+- supports handle `pug` files from `webpack entry` and save extracted HTML into separate file
+  ```js
+  module.exports = {
+    entry: {
+      about: 'src/templates/about.pug', // extract HTML and save into output directory as `about.html`
+    },
+  }
+  ```
+- supports handle `html` files from `webpack entry` and save it without additional plugins like `html-webpack-plugin`
+  ```js
+  module.exports = {
+    entry: {
+      index: 'src/templates/index.html', // save the HTML into output directory as `index.html`
+    },
+  }
+  ```
+- supports handle `scss` `css` files from `webpack entry` without additional plugins like `mini-css-extract-plugin`
+  ```js
+  module.exports = {
+    entry: {
+      styles: 'src/assets/scss/main.scss', // extract CSS and save into output directory as `styles.css`
+    },
+  }
+  ```
+- supports `webpack entry` syntax to define source / output files separately for each entry
+  ```js
+  module.exports = {
+    entry: {
+      about: { import: 'src/pages/about/template.pug', filename: 'public/[name].html' },
+      examples: { import: 'vendor/examples/index.html', filename: 'public/some/path/[name].html' },
+    },
+  };
+  ```  
+- supports `webpack entry` API for the plugin option `filename`, its can be as a [`template string`](https://webpack.js.org/configuration/output/#template-strings) or a [`function`](https://webpack.js.org/configuration/output/#outputfilename)
+  ```js
+  const PugPluginOptions = {
+    filename: (pathData, assetInfo) => {
+      return pathData.chunk.name === 'main' ? 'assets/css/styles.css' : '[path][name].css';
+    }
+  }
+  ```
+- supports modules to separately handles of files of different types, that allow to define a separate source / output path and filename for each file type
+  ```js
+  const PugPluginOptions = {
+    modules: [
+      {
+        test: /\.(pug)$/,
+        sourcePath: path.join(__dirname, 'src/templates/'),
+        outputPath: path.join(__dirname, 'public/'),
+        filename: '[name].html'
+      },
+      {
+        test: /\.(html)$/,
+        sourcePath: path.join(__dirname, 'src/vendor/static/'),
+        outputPath: path.join(__dirname, 'public/some/other/path/'),
+      },
+      {
+        test: /\.(sass|scss)$/,
+        sourcePath: path.join(__dirname, 'src/assets/sass/'),
+        outputPath: path.join(__dirname, 'public/assets/css/'),
+        filename: isProduction ? '[name][contenthash:8].css' : '[name].css'
+      },
+    ],
+  };
+  ```
+- supports `post process` for modules to handle the extracted content `before emit`
+  ```js
+  const PugPluginOptions = {
+    modules: [
+      {
+        test: /\.pug$/,
+        postprocess: (content, entry, compilation) => {
+          // TODO: your can here handle extracted HTML
+          return content;
+        },
+      },
+    ],
+  };
+  ```
+- the [pug-loader](https://github.com/webdiscus/pug-loader) is the part of this plugin, no need additional loaders to render `pug` files
+  ```js
+  const PugPlugin = require('pug-plugin');
+  module.exports = {
+    module: {
+      rules: [
+        {
+          test: /\.pug$/,
+          loader: PugPlugin.loader,
+        },
+      ],
+    },
+  };
+  ```
+  > See the description of the [`pug-loader`](https://github.com/webdiscus/pug-loader) options [here](https://github.com/webdiscus/pug-loader#options-of-original-pug-loader).
+- extract CSS files from `webpack entry` without generating unnecessary empty js files,\
+  not need more for additional fix plugins like [webpack-remove-empty-scripts](https://github.com/webdiscus/webpack-remove-empty-scripts)
+  or [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries)
+  ```js
+  const PugPlugin = require('pug-plugin');
+  module.exports = {
+    entry: {
+      'styles': 'styles.scss',
+    },
+    plugins: [
+      new PugPlugin({
+        modules: [
+          PugPlugin.extractCss({ ...extractCssOptions }),
+        ],
+      }),
+    ]
+  };
+  ```
 
-The pug templates are in the webpack config `entry`, like it used for Sass files.
+<a id="options" name="options" href="#options"></a>
+## Plugin options
 
-## 
+The plugin options are default options for self plugin and all plugin `modules`. 
+In a defined `module` any option can be overridden.
 
+### `enabled`
+Type: `boolean` Default: `true`<br>
+Enable/disable the plugin.
 
+### `test`
+Type: `RegExp` Default: `/\.pug$/`<br>
+The search for a match of entry files.
+
+### `sourcePath`
+Type: `string` Default: `webpack.options.context`<br>
+The absolute path to sources.
+
+### `outputPath`
+Type: `string` Default: `webpack.options.output.path`<br>
+The output directory for processed entries.
+
+### `filename`
+Type: `string | Function` Default: `webpack.output.filename || '[name].html'`<br>
+The file name of output file.
+- If type is `string` then following substitutions are available in template strings
+  - `[name]` Only filename without extension or path.
+  - `[base]` Filename with extension.
+  - `[path]` Only path, without filename.
+  - `[path][name]` The path and filename without extension.
+  - `[ext]` Extension with leading `.`.
+  - `[id]` The ID of the chunk.
+  - `[contenthash]` The hash of the content.
+  - `[contenthash:nn]` The `nn` is the length of hashes (defaults to 20).
+- If type is `Function` then following parameters are available in the function:
+  - `@param {webpack PathData} pathData` See the description of this type [here](https://webpack.js.org/configuration/output/#template-strings)
+  - `@param {webpack AssetInfo} assetInfo`
+  - `@return {string}` The name or template string of output file.
+
+### `postprocess`
+Type: `Function` Default: `null`<br>
+The post process for extracted content from compiled entry.
+The following parameters are available in the function:
+  - `@param {string | []} content` The content of compiled entry. Can be a string (for html entry), an array (for css).
+  - `@param {AssetEntry} entry` The current entry object.
+  - `@param {webpack.compilation} compilation` The [webpack compilation object](https://webpack.js.org/api/compilation-object/).
+  - `@return {string | null}` Return a string content to save it into output directory.\
+    If return `null` then the compiled content of the entry will be ignored, and will be saved original content compiled as JS module.\
+    May be useful for debug to see a source of compilation any webpack loader.
+
+### `verbose`
+Type: `boolean` Default: `false`<br>
+Show the file information at processing of entry.
+
+### `modules`
+Type: `PluginOptions[]` Default: `[]`<br>
+The array of object with type `PluginOptions` to separately handles of files of different types.\
+The description of `@property` of the type `PluginOptions` see above, by Plugin options.
 ```js
+/**
+ * @typedef {Object} PluginOptions
+ * @property {boolean} enabled
+ * @property {boolean} verbose
+ * @property {RegExp} test
+ * @property {string} sourcePath
+ * @property {string} outputPath
+ * @property {string | function(PathData, AssetInfo): string} filename
+ * @property {function(string, AssetEntry, Compilation): string | null} postprocess
+ */
+```
+
+
+## Usage examples
+
+### Output HTML file from Pug template
+
+webpack.config.js
+```js
 const PugPlugin = require('pug-plugin');
-
-const config = {
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'public/'), // output path
+    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+  },
   entry: {
-    'main': 'main.js',
-    'styles': 'styles.scss',
-    'index': 'index.pug',
-    'page01': 'page01.pug',
-    'page02': 'page02.pug',
-    'page03': 'page03.pug',
-    'page04': 'page04.pug',
-    'page05': 'page05.pug',
-    'page06': 'page06.pug',
-    'page07': 'page07.pug',
-    
-    // ...
-    
-    'page77': 'page77.pug',
+    'index': 'templates/index.pug', // save HTML into '<__dirname>/public/index.html'
   },
-
   plugins: [
-    // zero config 
-    new PugPlugin(), // needs only one instance of the pug plugin to handles all pug files from webpack entry
-    // ...
+    new PugPlugin(),
   ],
-
   module: {
@@ -108,22 +278,216 @@ rules: [
         test: /\.pug$/,
-        loader: PugPlugin.loader, // the pug loader is powerful `@webdiscus/pug-loader`
+        loader: PugPlugin.loader,
+        // this loader options are optional, but recommended for faster compilation
+        options: {
+          method: 'render',
+          esModule: true,
+        },
       },
-      // ...
     ],
   },
-}
+};
+```
 
-module.exports = config;
+### Output HTML file from a source directory
+
+Dependency: `html-loader`  This loader is need to handle the `.html` file type.\
+Install: `npm install html-loader --save-dev`
+
+webpack.config.js
+```js
+const PugPlugin = require('pug-plugin');
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'public/'), // output path
+    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+  },
+  entry: {
+    'example': 'vendor/pages/example.html', // save HTML into '<__dirname>/public/example.html'
+  },
+  plugins: [
+    new PugPlugin({
+      modules: [
+        // add the module object to match `.html` files in webpack entry
+        { test: /\.html$/, filename: '[name].html' }
+      ],
+    }),
+  ],
+  module: {
+    rules: [
+      // add the loader to handle `.html` files
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+      },
+    ],
+  },
+};
 ```
 
-Of course, supports of extended webpack `entry` syntax, e.g.:
+### Extract CSS file from SASS
+
+Dependencies: 
+- `css-loader` this loader translates CSS into JS strings
+- `sass-loader` need to handle the `.scss` file type
+- `sass` needed for `sass-loader` to compile Sass CSS
+
+Install: `npm install css-loader sass sass-loader --save-dev`
+
+webpack.config.js
+```js
+const PugPlugin = require('pug-plugin');
+const isProduction = process.env.NODE_ENV === 'production';
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'public/'), // output path
+    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+  },
+  entry: {
+    'css/styles': 'src/assets/main.scss', // save CSS into '<__dirname>/public/css/styles.css'
+  },
+  plugins: [
+    new PugPlugin({
+      modules: [
+        // add the module to extract CSS into output file
+        // see options https://github.com/webdiscus/pug-plugin#options
+        PugPlugin.extractCss({
+          filename: isProduction ? '[name][contenthash:8].css' : '[name].css',
+        })
+      ],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: [
+          {
+            loader: 'css-loader',
+            options: {}, // see options https://github.com/webpack-contrib/css-loader#options
+          },
+          {
+            loader: 'sass-loader',
+            options: {}, // see options https://github.com/webpack-contrib/sass-loader#options
+          },
+        ],
+      },
+    ],
+  },
+};
 ```
-entry: {
-  about: { import: './about.pug', filename: 'pages/[name].html' },
-},
+
+> If `sass` files are defined only in `webpack entry` and used `PugPlugin.extractCss()`, 
+> then don't use [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
+> because this plugin generates unnecessary empty JavaScript files and as the fix should be used additional
+> [webpack-remove-empty-scripts](https://github.com/webdiscus/webpack-remove-empty-scripts)
+> or [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries).
+> 
+> So, if using `PugPlugin.extractCss()`, then following plugins are not needed:
+> - `mini-css-extract-plugin` 
+> - `webpack-remove-empty-scripts`
+> 
+> The plugin module `PugPlugin.extractCss` extract and save pure CSS, without eny empty JS files.
+
+---
+
+## Usage of Pug, HTML, SASS, JS together in `webpack entry`
+webpack.config.js
+```js
+const PugPlugin = require('pug-plugin');
+const isProduction = process.env.NODE_ENV === 'production';
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'public/'), // output path
+    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+  },
+  entry: {
+    // use source / output paths, defined in module options
+    'assets/js/main': './src/assets/main.js', // ==> '<__dirname>/public/assets/js/main.js'
+    'css/styles': 'src/assets/main.scss', // ==> '<__dirname>/public/assets/css/styles.css'
+    'index': 'index.pug', // ==> '<__dirname>/public/index.html'
+    'about': 'about.html', // ==> '<__dirname>/public/static/about.html'
+    
+    // use absolute paths if source file is not in defined option `sourcePath` 
+    'assets/js/demo01': path.join(__dirname, './src/components/demo01/script.js'), // ==> '<__dirname>/public/assets/js/demo01.js'
+    'assets/css/demo01': path.join(__dirname, 'src/components/demo01/styles.scss'), // ==> '<__dirname>/public/assets/css/demo01.css'
+    'pages/demo01': path.join(__dirname, 'src/components/demo01/template.pug'), // ==> '<__dirname>/public/pages/demo01.html'
+    
+    // use custom output filename individual for the entry
+    'js/demo02': {
+      import: path.join(__dirname, './src/components/demo02/main.js'),
+      filename: 'assets/[name]-[contenthash:8].js', // ==> '<__dirname>/public/assets/js/demo02-abcd1234.js'
+    },
+    'css/demo02': {
+      import: path.join(__dirname, './src/components/demo02/main.scss'),
+      filename: 'assets/[name]-[contenthash:8].css', // ==> '<__dirname>/public/assets/js/demo02-abcd1234.css'
+    },
+    'demo02': {
+      import: path.join(__dirname, './src/components/demo02/main.pug'),
+      filename: 'pages/[name].html', // ==> '<__dirname>/public/pages/demo02.html'
+    },
+  },
+  plugins: [
+    new PugPlugin({
+      enabled: true,
+      verbose: false,
+      modules: [
+        // add the module object to define custom options for `.pug`
+        {
+          test: /\.pug$/,
+          filename: '[name].html',
+          sourcePath: 'src/templates/pug/', // define custom path to sources, relative by webpack.config.js 
+          outputPath: '', // define custom output path, relative by webpack output.path
+        },
+        // add the module object to match `.html` files in webpack entry
+        { 
+          test: /\.html$/, 
+          filename: '[name].html',
+          sourcePath: 'src/templates/html/',
+          outputPath: 'static/',
+        },
+        // add the module to extract CSS into output file
+        PugPlugin.extractCss({
+          filename: isProduction ? '[name][contenthash:8].css' : '[name].css',
+          sourcePath: 'src/assets/sass/',
+          outputPath: 'assets/css/',
+        })
+      ],
+    }),
+  ],
+  module: {
+    rules: [
+      // pug
+      {
+        test: /\.pug$/,
+        loader: PugPlugin.loader,
+        options: {
+          method: 'render',
+          esModule: true,
+        },
+      },
+      // html
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+      },
+      // styles
+      {
+        test: /\.(css|sass|scss)$/,
+        use: [
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+    ],
+  },
+};
 ```
 
-
 ## Also See
 
+- more examples of usages see in [test cases](https://github.com/webdiscus/pug-plugin/tree/master/test/cases)
 - [`pug GitHub`][pug]
@@ -130,0 +494,0 @@ - [`pug API Reference`][pug-api]

src/color-string.js

 const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  dim: '\x1b[2m',
-  underscore: '\x1b[4m',
-  blink: '\x1b[5m',
-  reverse: '\x1b[7m',
-  hidden: '\x1b[8m',
+  reset: '0',
+  bold: '1',
+  bright: '1',
+  dim: '2',
+  underscore: '4',
+  blink: '5',
+  reverse: '7',
+  hidden: '8',
 
-  black: '\x1b[30m',
-  red: '\x1b[31m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  magenta: '\x1b[35m',
-  cyan: '\x1b[36m',
-  white: '\x1b[37m',
-  bgBlack: '\x1b[40m',
-  bgRed: '\x1b[41m',
-  bgGreen: '\x1b[42m',
-  bgYellow: '\x1b[43m',
-  bgBlue: '\x1b[44m',
-  bgMagenta: '\x1b[45m',
-  bgCyan: '\x1b[46m',
-  bgWhite: '\x1b[47m',
+  black: '30',
+  red: '31',
+  green: '32',
+  yellow: '33',
+  blue: '34',
+  magenta: '35',
+  cyan: '36',
+  white: '37',
+
+  bgBlack: '40',
+  bgRed: '41',
+  bgGreen: '42',
+  bgYellow: '43',
+  bgBlue: '44',
+  bgMagenta: '45',
+  bgCyan: '46',
+  bgWhite: '47',
 };
 
-const strColor = function (str, color) {
-  if (!colors[color]) color = 'white';
-  return colors[color] + str + colors.reset;
+/**
+ * @param {string} str The text string.
+ * @param {string} code The code of color.
+ * @param {string} bgCode The code of background color.
+ * @return {string}
+ */
+const strColor = (str, code, bgCode = '') => {
+  if (!code) code = colors.white;
+
+  return (bgCode ? `\x1b[${bgCode};${code}m` : `\x1b[${code}m`) + str + `\x1b[${colors.reset}m`;
 };
 
 module.exports = {
-  black: (str) => strColor(str, 'black'),
-  red: (str) => strColor(str, 'red'),
-  green: (str) => strColor(str, 'green'),
-  yellow: (str) => strColor(str, 'yellow'),
-  blue: (str) => strColor(str, 'blue'),
-  magenta: (str) => strColor(str, 'magenta'),
-  cyan: (str) => strColor(str, 'cyan'),
-  white: (str) => strColor(str, 'white'),
-  bgBlack: (str) => strColor(str, 'bgBlack'),
-  bgRed: (str) => strColor(str, 'bgRed'),
-  bgGreen: (str) => strColor(str, 'bgGreen'),
-  bgYellow: (str) => strColor(str, 'bgYellow'),
-  bgBlue: (str) => strColor(str, 'bgBlue'),
-  bgMagenta: (str) => strColor(str, 'bgMagenta'),
-  bgCyan: (str) => strColor(str, 'bgCyan'),
-  bgWhite: (str) => strColor(str, 'bgWhite'),
+  black: (str) => strColor(str, colors.black),
+  red: (str) => strColor(str, colors.red),
+  green: (str) => strColor(str, colors.green),
+  yellow: (str) => strColor(str, colors.yellow),
+  blue: (str) => strColor(str, colors.blue),
+  magenta: (str) => strColor(str, colors.magenta),
+  cyan: (str) => strColor(str, colors.cyan),
+  white: (str) => strColor(str, colors.white),
+  bgBlack: (str, color) => strColor(str, color, colors.bgBlack),
+  bgRed: (str, color) => strColor(str, color, colors.bgRed),
+  bgGreen: (str, color) => strColor(str, color, colors.bgGreen),
+  bgYellow: (str, color) => strColor(str, color, colors.bgYellow),
+  bgBlue: (str, color) => strColor(str, color, colors.bgBlue),
+  bgMagenta: (str, color) => strColor(str, color, colors.bgMagenta),
+  bgCyan: (str, color) => strColor(str, color, colors.bgCyan),
+  bgWhite: (str, color) => strColor(str, color, colors.bgWhite),
 };
+
+module.exports.colors = colors;

src/index.js

@@ -0,7 +1,8 @@
+const fs = require('fs');
+const path = require('path');
 const { merge } = require('webpack-merge');
-const path = require('path');
-const fs = require('fs');
 
 const colstr = require('./color-string');
-const { isFunction, shallowEqual } = require('./utils');
+const { plugin, isFunction, shallowEqual } = require('./utils');
+const { extractHtml, extractCss } = require('./modules');
 
@@ -17,9 +18,10 @@ /** @typedef {import('webpack').Compiler} Compiler */
  * @property {boolean} [enabled = true] Enable/disable the plugin.
+ * @property {RegExp} test The search for a match of entry files.
+ * @property {string} [sourcePath = options.context] The absolute path to sources.
+ * @property {string} [outputPath = options.output.path] The output directory for an asset.
  * @property {string | function(PathData, AssetInfo): string} [filename = '[name].html'] The file name of output file.
  *   See https://webpack.js.org/configuration/output/#outputfilename.
- * @property {string} [sourcePath = options.context] The absolute path to sources.
- * @property {string} [outputPath = options.output.path] The output directory for HTML.
  *   Must be an absolute or a relative by the context path.
- * @property {function(string, AssetEntry, Compilation): string} [postprocess = null] The post process for extracted content from entry.
- * @property {boolean} [verbose = false] Show the compilation information.
+ * @property {function(string, AssetEntry, Compilation): string | null} [postprocess = null] The post process for extracted content from entry.
+ * @property {boolean} [verbose = false] Show the information at processing entry files.
  */
@@ -41,3 +43,3 @@
  * @property {string} filename The asset filename.
- *  The template strings support only this substitutions: [id], [name], [contenthash], [contenthash:xx]
+ *  The template strings support only this substitutions: [name], [base], [path], [ext], [id], [contenthash], [contenthash:nn]
  *  See https://webpack.js.org/configuration/output/#outputfilename
@@ -54,4 +56,2 @@ * @property {string} import
 
-const plugin = 'pug-plugin';
-
 /**
@@ -209,2 +209,3 @@ * @var {PugPluginOptions} defaultOptions
             if (result == null) this.entryException(entry);
+
             // detect result of ES module
@@ -215,2 +216,3 @@ if (result.default) result = result.default;
               try {
+                // pug-loader.method: compile
                 // note: all external variables are already assigned to locals in the template function via pug-loader,
@@ -228,3 +230,3 @@ // the argument must be empty object to avoid error by reading property from undefined
               } catch (error) {
-                this.postprocessException(entry, error);
+                this.postprocessException(error, entry);
               }
@@ -244,13 +246,19 @@ }
 
-  executeAssetSourceException(error, entry) {
-    throw new Error(`\n\n[${plugin}] Asset source execution failed.\n` + `The file '${entry.import}'.\n` + error);
+  /**
+   * @param {AssetEntry} entry
+   */
+  verboseEntry(entry) {
+    if (!this.hasVerboseOut) console.log('\n');
+    this.hasVerboseOut = true;
+    console.log(
+      `[${colstr.yellow(plugin)}] Compile the entry ${colstr.green(entry.name)}\n` +
+        ` - filename: ${typeof entry.filename === 'function' ? colstr.cyan('[Function]') : entry.filename}\n` +
+        ` - import: ${entry.import}\n` +
+        ` - output: ${entry.file}\n`
+    );
   }
 
-  postprocessException(error, entry) {
-    throw new Error(`\n\n[${plugin}] Postprocess execution failed.\n` + `The file '${entry.import}'.\n` + error);
-  }
-
   publicPathException() {
     throw new Error(
-      `\n\n[${plugin}] This plugin yet not support 'auto' publicPath.\n` +
+      `\n[${plugin}] This plugin yet not support 'auto' publicPath.\n` +
         `Define a publicPath in the webpack configuration, e.g. output: { publicPath: '/' }.\n`
@@ -281,17 +289,29 @@ );
   /**
+   * @param {Error} error
    * @param {AssetEntry} entry
    */
-  verboseEntry(entry) {
-    if (!this.hasVerboseOut) console.log('\n');
-    this.hasVerboseOut = true;
-    console.log(
-      `[${colstr.yellow(plugin)}] Compile the entry ${colstr.green(entry.name)}\n` +
-        ` - filename: ${typeof entry.filename === 'function' ? colstr.cyan('[Function]') : entry.filename}\n` +
-        ` - import: ${entry.import}\n` +
-        ` - output: ${entry.file}\n`
+  executeAssetSourceException(error, entry) {
+    throw new Error(
+      `\n[${plugin}] Asset source execution failed by the entry '${entry.name}'.\n` +
+        `The file '${entry.import}'.\n` +
+        error
     );
   }
+
+  /**
+   * @param {Error} error
+   * @param {AssetEntry} entry
+   */
+  postprocessException(error, entry) {
+    throw new Error(
+      `\n[${plugin}] Postprocess execution failed by the entry '${entry.name}'.\n` +
+        `The file '${entry.import}'.\n` +
+        error
+    );
+  }
 }
 
 module.exports = PugPlugin;
+module.exports.extractCss = extractCss;
+module.exports.extractHtml = extractHtml;
 module.exports.loader = require.resolve('@webdiscus/pug-loader');

src/utils.js

@@ -0,1 +1,3 @@
+const plugin = 'pug-plugin';
+
 const isFunction = (value) => typeof value === 'function';
@@ -23,14 +25,14 @@
 
-const AUTO_PUBLIC_PATH = '__pug_plugin_public_path_auto__';
-const ABSOLUTE_PUBLIC_PATH = 'webpack:///pug-plugin/';
-const SINGLE_DOT_PATH_SEGMENT = '__pug_plugin_single_dot_path_segment__';
+//const AUTO_PUBLIC_PATH = '__pug_plugin_public_path_auto__';
+//const ABSOLUTE_PUBLIC_PATH = 'webpack:///pug-plugin/';
+//const SINGLE_DOT_PATH_SEGMENT = '__pug_plugin_single_dot_path_segment__';
 
 // todo Implement 'auto' publicPath, following is just research code from mini-css-extract-plugin:
-const getPublicPath = (compilation) => {
+/*const getPublicPath = (compilation) => {
   let { publicPath } = compilation.outputOptions || { publicPath: '' };
-  /*if (typeof options.publicPath === 'string') {
-    publicPath = options.publicPath;
-  } else if (isFunction(options.publicPath)) {
-    publicPath = options.publicPath(this.resourcePath, this.rootContext);
-  }*/
+  //if (typeof options.publicPath === 'string') {
+  //  publicPath = options.publicPath;
+  //} else if (isFunction(options.publicPath)) {
+  //  publicPath = options.publicPath(this.resourcePath, this.rootContext);
+  //}
 
@@ -47,6 +49,6 @@ if (publicPath === 'auto') {
   return publicPathForExtract;
-};
+};*/
 
 // todo Resolve 'auto' publicPath into real path, following is just research code from mini-css-extract-plugin:
-function resolvePublicPath(filename, outputPath, enforceRelative) {
+/*function resolvePublicPath(filename, outputPath, enforceRelative) {
   let depth = -1;
@@ -77,12 +79,13 @@ let append = '';
   return depth > 0 ? `${'../'.repeat(depth)}${append}` : enforceRelative ? `./${append}` : append;
-}
+}*/
 
 module.exports = {
+  plugin,
   isFunction,
   shallowEqual,
-  AUTO_PUBLIC_PATH,
-  ABSOLUTE_PUBLIC_PATH,
-  SINGLE_DOT_PATH_SEGMENT,
-  getPublicPath,
-  resolvePublicPath,
+  //AUTO_PUBLIC_PATH,
+  //ABSOLUTE_PUBLIC_PATH,
+  //SINGLE_DOT_PATH_SEGMENT,
+  //getPublicPath,
+  //resolvePublicPath,
 };

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38734

increased by87.48%

Number of package files

8

increased by33.33%

Lines of code

483

increased by32.69%

Number of lines in readme file

508

increased by252.78%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

11

increased by22.22%

No dependency changes