pug-plugin - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

CHANGELOG.md

 # Change log
 
+## 2.0.1 (2022-04-03)
+- fixed incorrect output directory for a module if the option `outputPath` was relative
+- update readme
+
 ## 2.0.0 (2022-04-01)
 ### NEW feature
-Added supports the require() of the javascript source files directly in pug (works only with [pug-plugin](https://github.com/webdiscus/pug-plugin)). \
+Added supports the require() of the javascript source files directly in pug. \
 It is no longer necessary to define a js file in webpack entry-point.
@@ -7,0 +11,0 @@

package.json

 {
   "name": "pug-plugin",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "The pug plugin to handle the pug, html, css, scss files in webpack entry and extract css from pug.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -67,3 +67,3 @@ <div align="center">
   entry: {
-    index: './src/pages/index.pug', // ==> public/index.html
+    index: './src/pages/index.pug', // output to public/index.html
   },
@@ -90,3 +90,3 @@
 ### Early
-To save extracted `HTML`, you had to add `new HtmlWebpackPlugin ({...})` to `webpack.plugins` for each file:
+To save extracted `HTML`, you must add the `new HtmlWebpackPlugin ({...})` to `webpack.plugins` for each file:
 ```js
@@ -142,5 +142,5 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     'main': './src/main.js',
-    'styles': './src/styles.scss', // now the 'mini-css-extract-plugin' is needless  
-    'index': './src/index.html', // now is possible define HTML file in entry
-    'page01': './src/page01.pug', // now is possible define PUG file in entry
+    'styles': './src/styles.scss', // the 'mini-css-extract-plugin' is needless  
+    'index': './src/index.html', // define HTML file in entry
+    'page01': './src/page01.pug', // define PUG file in entry
     // ...
@@ -163,2 +163,5 @@ 'page77': './src/page77.pug',
         loader: PugPlugin.loader,
+        options: {
+          method: 'render',
+        }
       }, 
@@ -182,2 +185,3 @@ {
     publicPath: '/',
+    // js output filename 
     filename: 'assets/js/[name].[contenthash:8].js',
@@ -193,2 +197,3 @@ },
         PugPlugin.extractCss({
+          // css output filename 
           filename: 'assets/css/[name].[contenthash:8].css',
@@ -198,3 +203,18 @@ }),
     }),
-  ]
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(pug)$/,
+        loader: PugPlugin.loader,
+        options: {
+          method: 'render',
+        }
+      },
+      {
+        test: /\.scss$/i,
+        use: ['css-loader', 'scss-loader'],
+      },
+    ],
+  },
 };
@@ -207,3 +227,3 @@ ```
   head
-    link(rel='stylesheet' href=require('./styles.css'))
+    link(rel='stylesheet' href=require('./styles.scss'))
     script(src=require('./main.js'))
@@ -371,3 +391,3 @@ body
 Type: `string` Default: `webpack.options.output.path`<br>
-The output directory for processed entries.
+The output directory for processed entries. This directory can be relative by `webpack.options.output.path` or absolute.
 
@@ -441,7 +461,7 @@ ### `filename`
   output: {
-    path: path.join(__dirname, 'public/'), // output path
-    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+    path: path.join(__dirname, 'public/'),
+    publicPath: '/',
   },
   entry: {
-    'index': 'templates/index.pug', // save HTML into '<__dirname>/public/index.html'
+    'index': 'templates/index.pug', // output public/index.html
   },
@@ -456,4 +476,4 @@ plugins: [
         loader: PugPlugin.loader,
-        // this loader options are optional, but recommended for faster compilation
         options: {
+          // this loader option is recommended for faster compilation
           method: 'render'
@@ -513,4 +533,4 @@ },
   output: {
-    path: path.join(__dirname, 'public/'), // output path
-    publicPath: '/', // `auto` is not supported
+    path: path.join(__dirname, 'public/'),
+    publicPath: '/',
     filename: 'assets/js/[name].[contenthash:8].js',
@@ -590,7 +610,7 @@ },
   output: {
-    path: path.join(__dirname, 'public/'), // output path
-    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+    path: path.join(__dirname, 'public/'),
+    publicPath: '/',
   },
   entry: {
-    'example': 'vendor/pages/example.html', // save HTML into '<__dirname>/public/example.html'
+    'example': 'vendor/pages/example.html', // output to public/example.html
   },
@@ -637,7 +657,7 @@ plugins: [
   output: {
-    path: path.join(__dirname, 'public/'), // output path
-    publicPath: '/', // `auto` is not supported
+    path: path.join(__dirname, 'public/'),
+    publicPath: '/',
   },
   entry: {
-    'css/styles': './src/assets/main.scss', // save CSS into '<__dirname>/public/css/styles.css'
+    'css/styles': './src/assets/main.scss', // output to public/css/styles.css
   },
@@ -659,12 +679,3 @@ plugins: [
         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
-          },
-        ],
+        use: ['css-loader', 'sass-loader'],
       },
@@ -700,11 +711,11 @@ ],
   output: {
-    path: path.join(__dirname, 'public/'), // output path
-    publicPath: '/', // must be defined a real publicPath, `auto` not supported!
+    path: path.join(__dirname, 'public/'),
+    publicPath: '/',
   },
   entry: {
     // use source / output paths, defined in module options
-    'assets/js/main': './src/assets/main.js', // output '<__dirname>/public/assets/js/main.js'
-    'styles': './src/assets/main.scss', // output '<__dirname>/public/assets/css/styles.css'
-    'about': './src/about.pug', // output '<__dirname>/public/pages/about.html'
-    'examples': './src/examples.html', // output '<__dirname>/public/static/examples.html'
+    'assets/js/main': './src/assets/main.js', // output to public/assets/js/main.js
+    'styles': './src/assets/main.scss', // output to public/assets/css/styles.css
+    'about': './src/about.pug', // output to public/pages/about.html
+    'examples': './src/examples.html', // output to public/static/examples.html
     
@@ -715,14 +726,11 @@ // use absolute path if a source file is not in the defined `sourcePath`
       import: path.join(PATH_COMPONENTS, 'demo/main.js'),
-      filename: 'assets/js/[name]-[contenthash:8].js', 
-      // output '<__dirname>/public/assets/js/demo-abcd1234.js'
+      filename: 'assets/js/[name]-[contenthash:8].js', // output to public/assets/js/demo-abcd1234.js
     },
     'css/demo': {
       import: path.join(PATH_COMPONENTS, 'demo/main.scss'),
-      filename: 'assets/css/[name]-[contenthash:8].css', 
-      // output '<__dirname>/public/assets/css/demo-abcd1234.css'
+      filename: 'assets/css/[name]-[contenthash:8].css', // output to public/assets/css/demo-abcd1234.css
     },
     'demo': {
       import: path.join(PATH_COMPONENTS, 'demo/main.pug'),
-      filename: 'pages/[name].html', 
-      // output '<__dirname>/public/pages/demo.html'
+      filename: 'pages/[name].html', // output to public/pages/demo.html
     },
@@ -735,3 +743,3 @@ },
       modules: [
-        // add the module object to define custom options for `.pug`
+        // add the module to define custom options for `.pug`
         {
@@ -743,3 +751,3 @@ test: /\.pug$/,
         },
-        // add the module object to match `.html` files in webpack entry
+        // add the module to match `.html` files in webpack entry
         { 
@@ -746,0 +754,0 @@ test: /\.html$/,

src/index.js

@@ -248,3 +248,5 @@ const vm = require('vm');
 
-        const relativeOutputPath = path.relative(webpackOutputPath, outputPath);
+        const relativeOutputPath = path.isAbsolute(outputPath)
+          ? path.relative(webpackOutputPath, outputPath)
+          : outputPath;
 
@@ -524,12 +526,10 @@ entry.filename = (pathData, assetInfo) => {
           // note: by any error in webpack config the source is empty
-          let compiledResult = this.compileSource(item.source, item.sourceFile, item.assetFile, item.pluginModule);
+          let compiledResult = this.compileSource(
+            item.source,
+            item.sourceFile,
+            item.assetFile,
+            item.postprocessInfo,
+            item.pluginModule
+          );
 
-          if (item.pluginModule.postprocess) {
-            try {
-              compiledResult = item.pluginModule.postprocess(compiledResult, item.postprocessInfo, compilation);
-            } catch (error) {
-              postprocessException(error, item.postprocessInfo);
-            }
-          }
-
           if (compiledResult != null) {
@@ -644,11 +644,12 @@ result.push({
    * @param {string} assetFile
+   * @param {{}} postprocessInfo
    * @param {ModuleOptions} pluginModule
    * @return {Buffer}
    */
-  compileSource(source, sourceFile, assetFile, pluginModule) {
-    let result;
+  compileSource(source, sourceFile, assetFile, postprocessInfo, pluginModule) {
+    let result, compiledCode;
     resourceResolver.setCurrentContext(path.dirname(sourceFile));
 
     if (pluginModule && pluginModule.compile) {
-      result = pluginModule.compile(source, assetFile);
+      compiledCode = pluginModule.compile(source, assetFile);
     } else {
@@ -663,15 +664,22 @@ const contextOptions = {
       const script = new vm.Script(sourceCjs, { filename: sourceFile });
-      result = script.runInContext(contextObject) || '';
+      compiledCode = script.runInContext(contextObject) || '';
     }
 
-    if (isFunction(result)) {
-      try {
-        return result();
-      } catch (error) {
-        executeTemplateFunctionException(error, sourceFile, source);
-      }
+    try {
+      result = isFunction(compiledCode) ? compiledCode() : compiledCode;
+    } catch (error) {
+      executeTemplateFunctionException(error, sourceFile, source);
     }
 
-    if (pluginModule && pluginModule.extract) {
-      return pluginModule.extract(result, assetFile, this.compilation);
+    if (pluginModule) {
+      if (pluginModule.extract) {
+        result = pluginModule.extract(result, assetFile, this.compilation);
+      }
+      if (pluginModule.postprocess) {
+        try {
+          result = pluginModule.postprocess(result, postprocessInfo, this.compilation);
+        } catch (error) {
+          postprocessException(error, postprocessInfo);
+        }
+      }
     }
@@ -678,0 +686,0 @@

No alert changes

Improved metrics

Lines of code

1292

increased by0.7%

Number of lines in readme file

915

increased by0.88%

Worsened metrics

Total package byte prevSize

85823

decreased by-0.12%

No dependency changes