Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@webdiscus/pug-loader
Advanced tools
@webdiscus/pug-loader - npm Package Compare versions
Comparing version 2.1.0 to 2.1.1
| # Change log | ||
| ## 2.0.0 (2022-05-08) | ||
| ## 2.1.1 (2022-05-11) | ||
| - fix: support resolving npm modules in pug template | ||
| ## 2.1.0 (2022-05-09) | ||
| - feat: add the `embedFilter` option to enable using in pug filters embedded in pug-loader | ||
| - feat: add embedded `escape` filter to escape HTML tags | ||
| - test: add test for `escape` filter | ||
| - feat: add embedded `:escape` filter to escape HTML tags | ||
| - test: add test for `:escape` filter | ||
@@ -31,6 +35,6 @@ ## 2.0.0 (2022-04-01) | ||
| <html> | ||
| <head> | ||
| <script src='/assets/js/main.1234abcd.js'></script> | ||
| </head> | ||
| <body></body> | ||
| <head> | ||
| <script src='/assets/js/main.1234abcd.js'></script> | ||
| </head> | ||
| <body></body> | ||
| </html> | ||
@@ -37,0 +41,0 @@ ``` |
| { | ||
| "name": "@webdiscus/pug-loader", | ||
| "version": "2.1.0", | ||
| "version": "2.1.1", | ||
| "description": "Pug loader resolves paths and webpack aliases in a pug template and compiles it to HTML or into a template function.", | ||
@@ -68,3 +68,3 @@ "keywords": [ | ||
| "dependencies": { | ||
| "ansis": "^1.3.4", | ||
| "ansis": "^1.3.6", | ||
| "pug": ">=3.0.2", | ||
@@ -85,4 +85,4 @@ "webpack-merge": "^5.8.0" | ||
| "tsconfig-paths-webpack-plugin": "^3.5.2", | ||
| "webpack": "^5.72.0" | ||
| "webpack": "^5.72.1" | ||
| } | ||
| } |
227
README.md
@@ -44,3 +44,3 @@ <div align="center"> | ||
| 1. [Options](#options) | ||
| 1. [Embedded filters](#embedFilter) | ||
| 1. [Embedded filters](#embed-filters) | ||
| 1. [Usage method `compile`](#method-compile) | ||
@@ -221,4 +221,3 @@ 1. [Usage method `render`](#method-render) | ||
| Type: `boolean` Default: `false`<br> | ||
| Use the `self` as namespace for the local variables in template. It will speed up the compilation, but for access to | ||
| variable, e.g. `myVariable`, you must write `self.myVariable`. | ||
| Use the `self` as namespace for the local variables in template. It will speed up the compilation, but for access to variable, e.g. `myVariable`, you must write `self.myVariable`. | ||
@@ -258,18 +257,12 @@ ### `globals` | ||
| Values: | ||
| - `compile` the pug template compiles into a template function and in JavaScript can be called with variables to render | ||
| into HTML at runtime. \ | ||
| The query parameter is `?pug-compile`. Can be used if the method is `render`. \ | ||
| Use this method, if the template have variables passed from JavaScript at runtime. [see usage](#method-compile) | ||
| - `render` the pug template renders into HTML at compile time and exported as a string. | ||
| All required resource will be processed by the webpack and separately included as added strings wrapped to a | ||
| function. \ | ||
| The query parameter is `?pug-render`. Can be used if the method is `compile` or is not defined in options. \ | ||
| Use this method, if the template does not have variables passed from JavaScript at runtime. The method generates the | ||
| most compact and fastest code. [see usage](#method-render) | ||
| - `html` the template renders into a pure HTML string at compile time. The method need an addition loader to handles the | ||
| HTML. \ | ||
| Use this method if the rendered HTML needs to be processed by additional loader, e.g. | ||
| by `html-loader` [see usage](#method-html) | ||
| - `compile` the pug template compiles into a template function and in JavaScript can be called with variables to render into HTML at runtime. \ | ||
| The query parameter is `?pug-compile`. Can be used if the method is `render`. \ | ||
| Use this method, if the template have variables passed from JavaScript at runtime. [see usage](#method-compile) | ||
| - `render` the pug template renders into HTML at compile time and exported as a string. | ||
| All required resource will be processed by the webpack and separately included as added strings wrapped to a function. \ | ||
| The query parameter is `?pug-render`. Can be used if the method is `compile` or is not defined in options. \ | ||
| Use this method, if the template does not have variables passed from JavaScript at runtime. The method generates the most compact and fastest code. [see usage](#method-render) | ||
| - `html` the template renders into a pure HTML string at compile time. The method need an addition loader to handles the HTML. \ | ||
| Use this method if the rendered HTML needs to be processed by additional loader, e.g. by `html-loader` [see usage](#method-html) | ||
| > Embedded resources such as `img(src=require('./image.jpeg'))` handles at compile time by the webpack using [**asset/resource**](https://webpack.js.org/guides/asset-modules/#resource-assets). | ||
@@ -282,10 +275,9 @@ | ||
| Values: | ||
| - `true` The `pug-loader` generates JS modules with the ESM syntax. \ | ||
| For example: `import html from 'template.pug';`. \ | ||
| For smaller and faster JS code, it is recommended to use this mode. | ||
| - `false` defaults. The `pug-loader` generates JS modules with the CommonJS modules syntax. \ | ||
| For example, `const html = require('template.pug')`. \ | ||
| The default value is `false` for compatibility with the JS modules that is generated by the original pug-loader. | ||
| - `true` The `pug-loader` generates JS modules with the ESM syntax. \ | ||
| For example: `import html from 'template.pug';`. \ | ||
| For smaller and faster JS code, it is recommended to use this mode. | ||
| - `false` defaults. The `pug-loader` generates JS modules with the CommonJS modules syntax. \ | ||
| For example, `const html = require('template.pug')`. \ | ||
| The default value is `false` for compatibility with the JS modules that is generated by the original pug-loader. | ||
| > **Note:** The option `esModule` is irrelevant for the `html` method, because it returns a pure HTML string. | ||
@@ -327,3 +319,3 @@ | ||
| <a id="embedFilter" name="embedFilter"></a> | ||
| <a id="embed-filters" name="embed-filters" href="#embed-filters"></a> | ||
@@ -393,3 +385,3 @@ ## Embedded filters | ||
| Inline syntax: | ||
| ```pug | ||
| ``` | ||
| p | ||
@@ -425,8 +417,4 @@ :escape The <strong> element has the closing </strong> tag. | ||
| test: /\.pug$/, | ||
| loader | ||
| : | ||
| '@webdiscus/pug-loader', | ||
| options | ||
| : | ||
| { | ||
| loader: '@webdiscus/pug-loader', | ||
| options: { | ||
| method: 'compile' // default method `compile` can be omitted | ||
@@ -436,6 +424,3 @@ } | ||
| ``` | ||
| In JavaScript, the result of require() is a template function. Call the template function with some variables to render | ||
| it to HTML. | ||
| In JavaScript, the result of require() is a template function. Call the template function with some variables to render it to HTML. | ||
| ```js | ||
@@ -470,8 +455,4 @@ const tmpl = require('template.pug'); | ||
| test: /\.pug$/, | ||
| loader | ||
| : | ||
| '@webdiscus/pug-loader', | ||
| options | ||
| : | ||
| { | ||
| loader: '@webdiscus/pug-loader', | ||
| options: { | ||
| method: 'render' | ||
@@ -508,19 +489,17 @@ } | ||
| { | ||
| test: /\.pug$/, | ||
| use | ||
| : | ||
| [ | ||
| { | ||
| loader: 'html-loader', | ||
| options: { | ||
| esModule: false, // allow to use the require() for load a template in JavaScript | ||
| }, | ||
| }, | ||
| { | ||
| loader: '@webdiscus/pug-loader', | ||
| options: { | ||
| method: 'html', | ||
| }, | ||
| }, | ||
| ], | ||
| test: /\.pug$/, | ||
| use: [ | ||
| { | ||
| loader: 'html-loader', | ||
| options: { | ||
| esModule: false, // allow to use the require() for load a template in JavaScript | ||
| }, | ||
| }, | ||
| { | ||
| loader: '@webdiscus/pug-loader', | ||
| options: { | ||
| method: 'html', | ||
| }, | ||
| }, | ||
| ], | ||
| } | ||
@@ -761,5 +740,3 @@ ``` | ||
| loader: '@webdiscus/pug-loader', | ||
| options | ||
| : | ||
| { | ||
| options: { | ||
| basedir: path.resolve(__dirname, './src') | ||
@@ -772,6 +749,3 @@ } | ||
| ``` | ||
| The file in the directory defined by `webpack aliase` `MAY` start with `~` or `@`, e.g. with the | ||
| alias `Images: path.join(__dirname, 'src/assets/images/')`: | ||
| The file in the directory defined by `webpack aliase` `MAY` start with `~` or `@`, e.g. with the alias `Images: path.join(__dirname, 'src/assets/images/')`: | ||
| ```pug | ||
@@ -783,5 +757,3 @@ img(src=require('Images/image.jpeg')) | ||
| ⚠️ Using a variable with the `compile` method has the limitation - the variable `MUST NOT` contain a path, only a | ||
| filename, because is interpolated at compile time: | ||
| ⚠️ Using a variable with the `compile` method has the limitation - the variable `MUST NOT` contain a path, only a filename, because is interpolated at compile time: | ||
| ```pug | ||
@@ -802,4 +774,3 @@ - const file = 'image.jpeg' | ||
| ⚠️ Using an alias from the `paths` defined in `tsconfig.json` with the `compile` method has the limitation - the | ||
| required argument `MUST` be a string only, the webpack not supports an expression with alias:\ | ||
| ⚠️ Using an alias from the `paths` defined in `tsconfig.json` with the `compile` method has the limitation - the required argument `MUST` be a string only, the webpack not supports an expression with alias:\ | ||
| **tsconfig.json** | ||
@@ -809,12 +780,6 @@ | ||
| { | ||
| "compilerOptions" | ||
| : | ||
| { | ||
| "paths" | ||
| : | ||
| { | ||
| "@Images/*" | ||
| : | ||
| ["assets/images/*"] | ||
| } | ||
| "compilerOptions": { | ||
| "paths": { | ||
| "@Images/*": ["assets/images/*"] | ||
| } | ||
| } | ||
@@ -830,5 +795,3 @@ } | ||
| Using a variable with `render` and `html` methods has no limitation - the variable `MAY` contain a path, because is | ||
| resolved at runtime: | ||
| Using a variable with `render` and `html` methods has no limitation - the variable `MAY` contain a path, because is resolved at runtime: | ||
| ```pug | ||
@@ -844,3 +807,2 @@ - const file = '../parent/path/to/image.jpeg' | ||
| The example of webpack alias used in the table below: | ||
| ``` | ||
@@ -869,3 +831,2 @@ resolve: { | ||
| <a id="usage-with-angular-component" name="usage-with-angular-component" href="#usage-with-angular-component"></a> | ||
| ## Usage with Angular Component | ||
@@ -901,69 +862,37 @@ | ||
| Bind the file `webpack.config.js` in the Angular config `angular.json`: | ||
| ```js | ||
| { | ||
| // ... | ||
| "projects" | ||
| : | ||
| { | ||
| // ... | ||
| "architect" | ||
| : | ||
| { | ||
| "build" | ||
| : | ||
| { | ||
| // replace architect.build.builder with this value: | ||
| "builder" | ||
| : | ||
| "@angular-builders/custom-webpack:browser", | ||
| "projects": { | ||
| // ... | ||
| "architect": { | ||
| "build": { | ||
| // replace architect.build.builder with this value: | ||
| "builder": "@angular-builders/custom-webpack:browser", | ||
| // add the options: | ||
| "options" | ||
| : | ||
| { | ||
| "aot" | ||
| : | ||
| true, | ||
| "customWebpackConfig" | ||
| : | ||
| { | ||
| "path" | ||
| : | ||
| "./webpack.config.js" // the path to webpack.config.js | ||
| } | ||
| , | ||
| "options": { | ||
| "aot": true, | ||
| "customWebpackConfig": { | ||
| "path": "./webpack.config.js" // the path to webpack.config.js | ||
| }, | ||
| // ... | ||
| }, | ||
| // ... | ||
| } | ||
| , | ||
| }, | ||
| "serve": { | ||
| // replace architect.serve.builder with this value: | ||
| "builder": "@angular-builders/custom-webpack:dev-server", | ||
| "options": { | ||
| "browserTarget": "<app-name>:build" | ||
| }, | ||
| // ... | ||
| }, | ||
| // ... | ||
| } | ||
| , | ||
| "serve" | ||
| : | ||
| { | ||
| // replace architect.serve.builder with this value: | ||
| "builder" | ||
| : | ||
| "@angular-builders/custom-webpack:dev-server", | ||
| "options" | ||
| : | ||
| { | ||
| "browserTarget" | ||
| : | ||
| "<app-name>:build" | ||
| } | ||
| , | ||
| // ... | ||
| } | ||
| , | ||
| // ... | ||
| } | ||
| } | ||
| }, | ||
| } | ||
| , | ||
| } | ||
| ``` | ||
| In a component file, e.g. `./src/app/app.component.ts` set the `templateUrl` with pug file: | ||
| ```js | ||
@@ -992,11 +921,9 @@ import { Component } from '@angular/core'; | ||
| See [the complete source of the example](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component-render/) | ||
| . | ||
| See [the complete source of the example](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component-render/). | ||
| <a id="recipes" name="recipes" href="#recipes"></a> | ||
| ## Recipes | ||
| ### Resolving the attribute `srcset` in `img` tag | ||
| ```pug | ||
@@ -1007,3 +934,2 @@ img(srcset=`${require('./image1.jpeg')} 320w, ${require('./image2.jpeg')} 640w` src=require('./image.jpeg')) | ||
| output | ||
| ```html | ||
@@ -1049,7 +975,4 @@ <img srcset="/assets/image1.f78b30f4.jpeg 320w, /assets/image2.f78b30f4.jpeg 640w" src="/assets/image.f78b30f4.jpeg"> | ||
| [ansis]: https://github.com/webdiscus/ansis | ||
| [pug]: https://github.com/pugjs/pug | ||
| [pug-api]: https://pugjs.org/api/reference.html | ||
| [pug-plugin]: https://github.com/webdiscus/pug-plugin |
@@ -15,9 +15,5 @@ // the 'enhanced-resolve' package already used in webpack, don't need to define it in package.json | ||
| ...options, | ||
| // allow resolve node modules | ||
| aliasFields: [], | ||
| conditionNames: [], | ||
| descriptionFiles: [], | ||
| exportsFields: [], | ||
| mainFields: [], | ||
| modules: [], | ||
| mainFiles: [], | ||
| modules: ['node_modules'], | ||
| extensions: ['.js'], | ||
@@ -147,2 +143,3 @@ preferRelative: true, | ||
| } | ||
| resolvedPath = this.resolveFile(context, request); | ||
@@ -262,3 +259,2 @@ } catch (error) { | ||
| //file = file.replace(/&/g, '&'); | ||
| //console.log('\n *** PUG-LOADER resolveResource: ', file); | ||
| return self.loader.require(file, templateFile); | ||
@@ -265,0 +261,0 @@ }); |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of downloads
- increased by26.55%
2812
Worsened metrics
- Total package byte prevSize
- decreased by-0.3%
75392
- Lines of code
- decreased by-0.54%
919
- Number of lines in readme file
- decreased by-7.45%
957
Dependency changes
+ Added@types/node@22.10.2(transitive)
+ Addedget-intrinsic@1.2.6(transitive)
- Removed@types/node@22.10.5(transitive)
- Removedget-intrinsic@1.2.7(transitive)
- Removedget-proto@1.0.1(transitive)
Updatedansis@^1.3.6