pug-plugin - npm Package Compare versions

Comparing version 4.3.2 to 4.3.3

CHANGELOG.md

 # Change log
 
+## 4.3.3 (2022-10-11)
+- fix: resolving of assets in pug templates with url query
+- chore: added example for usage multi-language pages with i18next
+- chore: update pug-loader
+- chore: update dev dependencies
+
 ## 4.3.2 (2022-09-11)
-- fix: resolve modules whose package.json contains `exports` field
+- fix: resolving of modules whose package.json contains `exports` field
 - chore: update pug-loader
@@ -6,0 +12,0 @@ - chore: update dev dependencies

package.json

 {
   "name": "pug-plugin",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "Pug plugin for webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.",
@@ -64,4 +64,4 @@ "keywords": [
   "dependencies": {
-    "@webdiscus/pug-loader": "2.9.2",
-    "ansis": "1.5.2",
+    "@webdiscus/pug-loader": "2.9.4",
+    "ansis": "1.5.5",
     "json5": "^2.2.1",
@@ -71,11 +71,11 @@ "js-beautify": "^1.14.6"
   "devDependencies": {
-    "@babel/core": "^7.19.0",
-    "@babel/preset-env": "^7.19.0",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.4",
     "@test-fixtures/lorem": "0.0.2",
     "@test-fixtures/js": "0.0.2",
     "@test-fixtures/scss": "0.0.7",
-    "@types/jest": "^29.0.1",
+    "@types/jest": "^29.1.2",
     "css-loader": "^6.7.1",
-    "html-loader": "^4.1.0",
-    "jest": "^29.0.3",
+    "html-loader": "^4.2.0",
+    "jest": "^29.1.2",
     "mini-css-extract-plugin": "^2.6.1",
@@ -85,5 +85,5 @@ "normalize.css": "^8.0.1",
     "responsive-loader": "^3.1.1",
-    "sass": "^1.54.9",
-    "sass-loader": "^13.0.2",
-    "sharp": "^0.31.0",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
+    "sharp": "^0.31.1",
     "svgo-loader": "^3.0.1",
@@ -90,0 +90,0 @@ "tsconfig-paths-webpack-plugin": "^4.0.0",

README.md

@@ -29,3 +29,3 @@ <div align="center">
 
-- The Pug file is the entry point for all scripts and styles.
+- Pug file is the entry point for all scripts and styles.
 - Source scripts and styles should be specified directly in Pug.
@@ -35,3 +35,3 @@ - All JS and CSS files will be extracted from their sources specified in Pug.
 - No longer need to import styles in JavaScript to inject them into HTML via additional plugins.
-- Pug loader has built-in filters: `:highlight` `:markdown`.
+- Pug loader has built-in filters: `:escape` `:code` `:highlight` `:markdown`.
 
@@ -122,2 +122,3 @@ Specify the Pug files in the Webpack entry:
    - [Hello World!](https://webdiscus.github.io/pug-plugin/hello-world/) ([source](https://github.com/webdiscus/pug-plugin/tree/master/examples/hello-world))
+   - [Multi-language pages using i18next](https://webdiscus.github.io/pug-plugin/multi-language-i18next/) ([source](https://github.com/webdiscus/pug-plugin/tree/master/examples/multi-language-i18next))
    - [Responsive images](https://webdiscus.github.io/pug-plugin/responsive-image/) ([source](https://github.com/webdiscus/pug-plugin/tree/master/examples/responsive-image))
@@ -124,0 +125,0 @@ - [Usage `:highlight` filter](https://webdiscus.github.io/pug-loader/pug-filters/highlight.html) ([source](https://github.com/webdiscus/pug-loader/tree/master/examples/pug-filters))

src/AssetScript.js

@@ -50,9 +50,7 @@ const path = require('path');
    * @param {string} file The source file of script.
-   * @param  {string} issuer The issuer of the asset.
    * @return {string } Return unique assetFile
    */
-  getUniqueName(file, issuer) {
+  getUniqueName(file) {
     const { name } = path.parse(file);
     let uniqueName = name;
-    let result = name;
 
@@ -65,7 +63,5 @@ // the entrypoint name must be unique, if already exists then add an index: `main` => `main.1`, etc.
       uniqueName = name + '.' + this.index[name]++;
-      result = uniqueName;
     }
-    scriptStore.setName(uniqueName, file, issuer);
 
-    return result;
+    return uniqueName;
   }
@@ -72,0 +68,0 @@

src/index.js

@@ -10,3 +10,3 @@ const vm = require('vm');
 
-const { loader, plugin } = require('./Modules');
+const { loader, plugin, scriptStore } = require('./Modules');
 const extractCss = require('./modules/extractCss');
@@ -89,3 +89,4 @@ const extractHtml = require('./modules/extractHtml');
  *  See https://webpack.js.org/configuration/output/#outputfilename
- * @property {string} importFile
+ * @property {string} request The full path of import file with query.
+ * @property {string} importFile The import file only w/o query.
  * @property {string} outputPath
@@ -118,2 +119,24 @@ * @property {string} sourcePath
 
+const issuerCache = {
+  request: new Map(),
+
+  add(request) {
+    const [file] = request.split('?', 1);
+
+    if (!this.request.has(file)) {
+      this.request.set(file, new Set());
+    }
+
+    this.request.get(file).add(request);
+  },
+
+  get(file) {
+    return this.request.get(file);
+  },
+
+  clear() {
+    this.request.clear();
+  },
+};
+
 /**
@@ -297,2 +320,3 @@ * Class PugPlugin.
       const importFile = entry.import[0];
+      let request = importFile;
       let [sourceFile] = importFile.split('?', 1);
@@ -315,2 +339,3 @@ const module = this.getModule(sourceFile);
       if (!path.isAbsolute(sourceFile)) {
+        request = path.join(sourcePath, request);
         sourceFile = path.join(sourcePath, sourceFile);
@@ -326,2 +351,3 @@ entry.import[0] = path.join(sourcePath, importFile);
         file: undefined,
+        request,
         importFile: sourceFile,
@@ -350,2 +376,5 @@ sourcePath,
 
+    // save requests to issuer cache
+    if (!issuer) issuerCache.add(request);
+
     // ignore data-URL
@@ -364,3 +393,3 @@ if (request.startsWith('data:')) return;
       if (scriptFile) {
-        const name = AssetScript.getUniqueName(scriptFile, issuer);
+        const name = AssetScript.getUniqueName(scriptFile);
         const res = AssetEntry.addToCompilation({
@@ -374,2 +403,5 @@ name,
 
+        const issuers = issuerCache.get(issuer);
+        scriptStore.setName(name, scriptFile, issuers);
+
         return res ? undefined : false;
@@ -485,3 +517,3 @@ }
     entry.filename = compilation.getPath(chunk.filenameTemplate, { contentHashType, chunk });
-    AssetScript.setIssuerFilename(entry.importFile, entry.filename);
+    AssetScript.setIssuerFilename(entry.request, entry.filename);
 
@@ -527,2 +559,3 @@ for (const module of chunkModules) {
             sourceFile,
+            resource,
             assetFile,
@@ -598,2 +631,3 @@ pluginModule: entry,
           sourceFile,
+          resource,
           assetFile,
@@ -658,3 +692,4 @@ pluginModule,
    * @param {string} code The source code.
-   * @param {string} sourceFile The full path of source file.
+   * @param {string} sourceFile The full path of source file w/o URL query.
+   * @param {string} resource The full path of source file with URL query.
    * @param {string} assetFile
@@ -664,3 +699,13 @@ * @param {ModuleOptions} pluginModule
    */
-  renderModule({ source, sourceFile, assetFile, isEntry, verbose, outputPath, filenameTemplate, pluginModule }) {
+  renderModule({
+    source,
+    sourceFile,
+    resource,
+    assetFile,
+    isEntry,
+    verbose,
+    outputPath,
+    filenameTemplate,
+    pluginModule,
+  }) {
     let code = source.source();
@@ -678,3 +723,3 @@
 
-    Resolver.setIssuer(sourceFile);
+    Resolver.setIssuer(sourceFile, resource);
 
@@ -727,4 +772,4 @@ const contextOptions = {
   /**
-   * Executed when the compilation has completed.
-   * Reset initial settings and caches by webpack serve/watch.
+   * Execute after compilation.
+   * Reset initial settings and caches by webpack serve/watch, display verbose.
    *
@@ -767,3 +812,5 @@ * @param {Object} stats
     }
+
     verboseList.clear();
+    issuerCache.clear();
 
@@ -770,0 +817,0 @@ Asset.reset();

src/Resolver.js

@@ -16,5 +16,10 @@ const path = require('path');
    */
-  issuer = '';
+  issuerFile = '';
 
   /**
+   * @type {string} The issuer request of required the file.
+   */
+  issuerRequest = '';
+
+  /**
    * @type {string} The context directory of required the file.
@@ -83,7 +88,9 @@ */
    *
-   * @param {string} issuer
+   * @param {string} file The issuer filename, w/o query.
+   * @param {string} request The issuer request.
    */
-  setIssuer(issuer) {
-    this.issuer = issuer;
-    this.context = path.dirname(issuer);
+  setIssuer(file, request) {
+    this.issuerFile = file;
+    this.issuerRequest = request;
+    this.context = path.dirname(file);
   }
@@ -255,14 +262,15 @@
   require(rawRequest) {
-    const { issuer, context } = this;
+    const { issuerFile, issuerRequest, context } = this;
     const request = path.resolve(context, rawRequest);
 
     // @import CSS rule is not supported
-    if (rawRequest.indexOf('??ruleSet') > 0) resolveException(rawRequest, issuer);
+    if (rawRequest.indexOf('??ruleSet') > 0) resolveException(rawRequest, issuerRequest);
 
     // require script in tag <script src=require('./main.js')>, set an asset filename via replaceSourceFilesInCompilation()
     const scriptFile = AssetScript.resolveFile(rawRequest);
+
     if (scriptFile != null) {
-      if (this.isDuplicate(scriptFile, issuer)) {
+      if (this.isDuplicate(scriptFile, issuerRequest)) {
         const filePath = path.relative(this.rootContext, scriptFile);
-        const issuerPath = path.relative(this.rootContext, issuer);
+        const issuerPath = path.relative(this.rootContext, issuerRequest);
         duplicateScriptWarning(filePath, issuerPath);
@@ -278,12 +286,12 @@ }
     // bypass the asset/inline as inline SVG
-    if (AssetInline.isInlineSvg(request, issuer)) return request;
+    if (AssetInline.isInlineSvg(request, issuerFile)) return request;
 
     // resolve resources
-    const sourceFile = this.getSourceFile(rawRequest, issuer);
+    const sourceFile = this.getSourceFile(rawRequest, issuerFile);
     if (sourceFile != null) {
-      const assetFile = this.resolveAsset(sourceFile, issuer);
+      const assetFile = this.resolveAsset(sourceFile, issuerFile);
       if (assetFile != null) {
-        if (assetFile.endsWith('.css') && this.isDuplicate(assetFile, issuer)) {
+        if (assetFile.endsWith('.css') && this.isDuplicate(assetFile, issuerRequest)) {
           const filePath = path.relative(this.rootContext, sourceFile);
-          const issuerPath = path.relative(this.rootContext, issuer);
+          const issuerPath = path.relative(this.rootContext, issuerRequest);
           duplicateStyleWarning(filePath, issuerPath);
@@ -294,3 +302,3 @@ }
       // try to resolve inline data url
-      const dataUrl = AssetInline.getDataUrl(sourceFile, issuer);
+      const dataUrl = AssetInline.getDataUrl(sourceFile, issuerFile);
       if (dataUrl != null) return dataUrl;
@@ -302,3 +310,3 @@ }
 
-    resolveException(rawRequest, issuer);
+    resolveException(rawRequest, issuerRequest);
   }
@@ -305,0 +313,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

149417

increased by1.02%

Lines of code

2496

increased by1.63%

Number of lines in readme file

1276

increased by0.08%

Dependency changes

• + Added@webdiscus/pug-loader@2.9.4(transitive)

• + Addedansis@1.5.5(transitive)

• - Removed@webdiscus/pug-loader@2.9.2(transitive)

• - Removedansis@1.5.2(transitive)

• Updated@webdiscus/pug-loader@2.9.4

• Updatedansis@1.5.5