@webdiscus/pug-loader - npm Package Compare versions

Comparing version 1.6.3 to 1.6.4

CHANGELOG.md

 # Change log
 
+## 1.6.4 (2022-01-31)
+- added supports the `htmlWebpackPlugin.options` in pug template, #8
+- added test case for require fonts in pug template
+- refactoring of tests
+
 ## 1.6.3 (2022-01-25)
@@ -4,0 +9,0 @@ - improve error message due to template function failure

package.json

 {
   "name": "@webdiscus/pug-loader",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "The pug loader resolves paths and webpack aliases in a pug template and compiles it to HTML or into a template function.",
@@ -13,2 +13,3 @@ "keywords": [
     "html",
+    "plain",
     "template",
@@ -42,3 +43,5 @@ "pug-loader",
     "test": "jest --detectOpenHandles --config ./test/jest.config.js",
-    "test:coverage": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js"
+    "test:coverage": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js",
+    "publish:public": "npm publish --access public",
+    "publish:beta": "npm publish --tag beta"
   },
@@ -67,3 +70,3 @@ "jest": {
   "dependencies": {
-    "ansis": "^1.3.3",
+    "ansis": "^1.3.4",
     "pug": ">=3.0.2",
@@ -83,3 +86,3 @@ "webpack-merge": "^5.8.0"
     "prettier": "^2.5.1",
-    "pug-plugin": "^1.2.3",
+    "pug-plugin": "^1.2.4",
     "rimraf": "^3.0.2",
@@ -86,0 +89,0 @@ "tsconfig-paths-webpack-plugin": "^3.5.2",

README.md

 <div align="center">
     <h1>
         <a href="https://pugjs.org">
-            <img height="140" src="https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg">
+            <img height="135" src="https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg">
         </a>
@@ -45,5 +45,12 @@ <a href="https://github.com/webpack/webpack">
 
+## Requirements
+- **Webpack 5** \
+  ⚠️ Working with Webpack 4 is not guaranteed.
+- **Asset Modules** for Webpack 5: `asset/resource` `asset/inline` `asset/source` `asset` \
+  ⚠️ Does not support deprecated modules such as `file-loader` `url-loader` `raw-loader`.
+- **Pug 3** \
+  ⚠️ By usage Pug v2.x is required extra install the `pug-walk` package. Working with Pug < v3.0.2 is not guaranteed.
+
 <a id="features" name="features" href="#features"></a>
 ## Features
- - supports for **Webpack 5** and **Pug 3**
  - rendereing pug into pure `HTML string` to save it as static HTML file
@@ -433,9 +440,7 @@ - compiling pug into `template function` for usage in JavaScript
 
-> **Limitation**
-> 
-> The `htmlWebpackPlugin.options` object in pug is `undefined`, 
-> because the `pug-loader` loads and compiles the pug template before the plugin is called. \
-> Pass the variable into pug via query.
-> 
+The user data can be passed into pug template with two ways:
+- via HtmlWebpackPlugin options
+- via query parameters of template file
 
+
 ```js
@@ -445,4 +450,4 @@ module.exports = {
     new HtmlWebpackPlugin({
-      myVar: 'value', // DON'T pass a variable into pug via plugin options
-      template: path.join(__dirname, 'src/index.pug?myVar=value'), // <= pass variable via query
+      title: 'The some page', // avaliable in pug as `htmlWebpackPlugin.options.title`
+      template: path.join(__dirname, 'src/index.pug?' + JSON.stringify({ myVar: 'value' })), // avaliable as `myVar`
       filename: 'index.html',
@@ -462,21 +467,10 @@ }),
 
-If you use any plugin options in pug, like `htmlWebpackPlugin.options.title`, 
-then for compatibility pass complete options in pug via query.
+Use the passed variables `htmlWebpackPlugin.options` and `myVar` in pug template:
 
-```js
-new HtmlWebpackPlugin({
-  template: path.join(
-    __dirname, 
-    'src/index.pug?htmlWebpackPlugin=' + JSON.stringify({ options: { title: 'My title' } })
-  ),
-  filename: 'index.html',
-})
-```
-
-Use the `htmlWebpackPlugin.options` in pug template:
-
 ```pug
 html
   head
-    title= #{htmlWebpackPlugin.options.title}
+    title= htmlWebpackPlugin.options.title
+  body
+    div= myVar
 ```
@@ -556,7 +550,6 @@
 | `- var file = 'image.jpeg'`<br>``img(src=require(`Images/${file}`))``                                                                        | <span style="color:green">**OK**</span> | <span style="color:green">**OK**</span> |
-| `- var file = 'image.jpeg'`<br>`img(src=require(file))`                                                                                      | <span style="color:green">**OK**</span> | <span style="color:red">fail</span>     |
 | `- var file = './image.jpeg'`<br>`img(src=require(file))`                                                                                    | <span style="color:green">**OK**</span> | <span style="color:red">fail</span>     |
 | `- var file = 'images/image.jpeg'`<br>`img(src=require(file))`                                                                               | <span style="color:green">**OK**</span> | <span style="color:red">fail</span>     |
+| `- var file = '../images/image.jpeg'`<br>`img(src=require(file))`                                                                            | <span style="color:green">**OK**</span> | <span style="color:red">fail</span>     |
 | `- var file = 'image.jpeg'`<br>``img(src=require(`./images/${file}`))``                                                                      | <span style="color:green">**OK**</span> | <span style="color:green">**OK**</span> |
-| `- var file = '../images/image.jpeg'`<br>`img(src=require(file))`                                                                            | <span style="color:green">**OK**</span> | <span style="color:red">fail</span>     |
 | `- var file = 'image.jpeg'`<br>`img(src=require('../images/' + file))`                                                                       | <span style="color:green">**OK**</span> | <span style="color:green">**OK**</span> |
@@ -563,0 +556,0 @@ | the `pugjs/pug-loader` can't resolve when used a mixin and require on same file: <br> `include mixins`<br>`img(src=require('./image.jpeg'))` | <span style="color:green">**OK**</span> | <span style="color:red">fail</span>     |

src/exeptions.js

@@ -54,3 +54,3 @@ const ansis = require('ansis');
     `${ansis.black.bgYellow(`Solution`)} in this case pass a variable into a pug file via the query parameter.\n` +
-    `For example, if you use in pug the external variable, like ${ansis.yellow(`title= customData.options.title`)},\n` +
+    `For example, if in pug is used the external variable, like ${ansis.yellow(`title= customData.options.title`)},\n` +
     `then pass it into pug ${ansis.magenta(
@@ -57,0 +57,0 @@ `'template.pug?customData=' + JSON.stringify({options:{title:'My title'}})`

src/index.js

@@ -74,6 +74,5 @@ // add polyfill for node.js >= 12.0.0 && < 15.0.0
 const compilePugContent = function (content, callback) {
-  const webpackOptionsResolve = this._compiler.options.resolve || {};
   let pugResult = {};
-
   const loaderContext = this,
+    webpackOptionsResolve = getWebpackOptionsResolve(loaderContext),
     loaderOptions = loaderContext.getOptions() || {},
@@ -138,3 +137,6 @@ esModule = loaderOptions.esModule === true,
 
-  const locals = merge(loaderOptions.data || {}, resourceParams),
+  // custom options from HtmlWebpackPlugin can be used in pug
+  let htmlWebpackPluginOptions = getHtmlWebpackPluginOptions(loaderContext);
+
+  const locals = merge(loaderOptions.data || {}, htmlWebpackPluginOptions, resourceParams),
     funcBody = Object.keys(locals).length ? injectExternalVariables(pugResult.body, locals) : pugResult.body,
@@ -146,2 +148,41 @@ result = loaderMethod.run(loaderContext.resourcePath, funcBody, locals, esModule);
 
+/**
+ * Get user options of HtmlWebpackPlugin({}).
+ *
+ * @param {Object} loaderContext The context object of webpack loader.
+ * @returns {{htmlWebpackPlugin: {options: {}}}}
+ */
+const getHtmlWebpackPluginOptions = (loaderContext) => {
+  const sourceFile = loaderContext.resourcePath;
+  let options = {
+    htmlWebpackPlugin: { options: {} },
+  };
+
+  if (loaderContext.hasOwnProperty('_compiler')) {
+    const plugins = loaderContext._compiler.options.plugins || [];
+    const obj = plugins.find(
+      (item) => item.constructor.name === 'HtmlWebpackPlugin' && item.options.template.indexOf(sourceFile) >= 0
+    );
+
+    if (obj && obj.hasOwnProperty('userOptions')) {
+      options.htmlWebpackPlugin.options = obj.userOptions;
+    }
+  }
+
+  return options;
+};
+
+/**
+ * @param {Object} loaderContext The context object of webpack loader.
+ * @returns {{}}
+ */
+const getWebpackOptionsResolve = (loaderContext) => {
+  let options = {};
+  if (loaderContext.hasOwnProperty('_compiler')) {
+    options = loaderContext._compiler.options.resolve || {};
+  }
+
+  return options;
+};
+
 module.exports = function (content, map, meta) {
@@ -148,0 +189,0 @@ const callback = this.async();

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

56052

increased by2.36%

Lines of code

631

increased by5.87%

Worsened metrics

Number of lines in readme file

693

decreased by-1%

Dependency changes

• Updatedansis@^1.3.4