fix(pug): correct resolving required resources in multiple pages

webdiscus · Feb 20, 2024 · bcbf4ac · bcbf4ac
1 parent c8941eb
commit bcbf4ac
Show file tree

Hide file tree

Showing 25 changed files with 150 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 3.5.1 (2024-02-20)
+
+- fix(pug): correct resolving required resources in multiple pages
+
 ## 3.5.0 (2024-02-18)
 
 - feat: add support for the `Pug` template engine.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",

diff --git a/src/Loader/Preprocessors/Pug/PugCompiler.js b/src/Loader/Preprocessors/Pug/PugCompiler.js
@@ -65,7 +65,7 @@ class PugCompiler {
    * @param {{}} loaderOptions
    */
   constructor(loaderContext, loaderOptions) {
-    const { rootContext: context, resource, resourcePath: filename, resourceQuery } = loaderContext;
+    const { rootContext: context } = loaderContext;
     let basedir = loaderOptions.basedir || context;
 
     this.pug = loadModule('pug');
@@ -74,9 +74,6 @@ class PugCompiler {
     Filter.loadFilters(loaderOptions);
 
     this.pugOptions = {
-      // used to resolve import/extends and to improve errors
-      filename,
-
       // the root directory of all absolute inclusions, defaults is `/`.
       basedir,
 
@@ -113,15 +110,19 @@ class PugCompiler {
     };
   }
 
-  _compile(source) {
+  _compile(source, file) {
+    // note: for each new compilation must be defined the `filename` with current template filename
+    // used to resolve import/extends and to improve errors
+    this.pugOptions.filename = file;
+
     return this.pug.compileClientWithDependenciesTracked(source, this.pugOptions).body;
   }
 
-  compile(source) {
+  compile(source, { file }) {
     ResolvePlugin.mode = 'compile';
 
     const exportFunctionName = 'templateFn';
-    const templateFunctionSource = this._compile(source);
+    const templateFunctionSource = this._compile(source, file);
 
     return templateFunctionSource + `;var ${exportFunctionName}=${this.pugOptions.name};`;
   }
@@ -136,7 +137,7 @@ class PugCompiler {
   render(source, { file, data, esModule }) {
     ResolvePlugin.mode = 'render';
 
-    const templateFunctionSource = this._compile(source);
+    const templateFunctionSource = this._compile(source, file);
     const name = this.pugOptions.name;
 
     const vmScript = new VMScript(

diff --git a/src/Loader/Preprocessors/Pug/index.js b/src/Loader/Preprocessors/Pug/index.js
@@ -13,7 +13,6 @@ const PugCompiler = require('./PugCompiler');
 const preprocessor = (loaderContext, options, { esModule, watch }) => {
   const exportCode = esModule ? 'export default ' : 'module.exports=';
   const Pug = new PugCompiler(loaderContext, options);
-  const { rootContext } = loaderContext;
 
   return {
     /**

diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/about.html b/test/cases/_pug/resolve-js-css-multipage/expected/about.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="css/main.4f0fb2f1.css"><link rel="stylesheet" href="css/style.f07588a7.css"><script src="js/main.5317c1f6.js"></script></head><body><h4>Default layout</h4><h1>About</h1><script src="js/script.1.e55bdc4a.js"></script></body></html>
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/css/main.4f0fb2f1.css b/test/cases/_pug/resolve-js-css-multipage/expected/css/main.4f0fb2f1.css
@@ -0,0 +1,12 @@
+body {
+  font-size: 18px;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  color: deepskyblue;
+}
+
+h4 {
+  color: #9f9f9f;
+}
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/css/style.dd1336a7.css b/test/cases/_pug/resolve-js-css-multipage/expected/css/style.dd1336a7.css
@@ -0,0 +1,3 @@
+h1 {
+  color: orangered;
+}
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/css/style.f07588a7.css b/test/cases/_pug/resolve-js-css-multipage/expected/css/style.f07588a7.css
@@ -0,0 +1,3 @@
+h1 {
+  color: seagreen;
+}
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/index.html b/test/cases/_pug/resolve-js-css-multipage/expected/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="css/main.4f0fb2f1.css"><script src="js/main.5317c1f6.js"></script></head><body><h4>Default layout</h4><h1>Start page</h1></body></html>
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/js/main.5317c1f6.js b/test/cases/_pug/resolve-js-css-multipage/expected/js/main.5317c1f6.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/js/script.1.e55bdc4a.js b/test/cases/_pug/resolve-js-css-multipage/expected/js/script.1.e55bdc4a.js
@@ -0,0 +1 @@
+console.log(">> about");
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/js/script.26d1b659.js b/test/cases/_pug/resolve-js-css-multipage/expected/js/script.26d1b659.js
@@ -0,0 +1 @@
+console.log(">> news");
diff --git a/test/cases/_pug/resolve-js-css-multipage/expected/news.html b/test/cases/_pug/resolve-js-css-multipage/expected/news.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="css/main.4f0fb2f1.css"><link rel="stylesheet" href="css/style.dd1336a7.css"><script src="js/main.5317c1f6.js"></script></head><body><h4>Default layout</h4><h1>News</h1><script src="js/script.26d1b659.js"></script></body></html>
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/scripts/main.js b/test/cases/_pug/resolve-js-css-multipage/src/scripts/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/styles/main.css b/test/cases/_pug/resolve-js-css-multipage/src/styles/main.css
@@ -0,0 +1,12 @@
+body {
+  font-size: 18px;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  color: deepskyblue;
+}
+
+h4 {
+  color: #9f9f9f;
+}
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/layouts/default.pug b/test/cases/_pug/resolve-js-css-multipage/src/views/layouts/default.pug
@@ -0,0 +1,13 @@
+doctype html
+html
+  head
+    title= title
+
+    block style
+      link(rel='stylesheet' href=require('@styles/main.css'))
+
+    script(src=require('@scripts/main'))
+  body
+    h4 Default layout
+    block content
+    block script
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/about/index.pug b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/about/index.pug
@@ -0,0 +1,11 @@
+extends @views/layouts/default
+
+append script
+  script(src='./script.js')
+
+append style
+  link(rel='stylesheet' href=require('./style.css'))
+  //-link(rel='stylesheet' href='./style.css')
+
+block content
+  h1 About
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/about/script.js b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/about/script.js
@@ -0,0 +1 @@
+console.log('>> about');
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/about/style.css b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/about/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: seagreen;
+}
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/index.pug b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/index.pug
@@ -0,0 +1,8 @@
+extends @views/layouts/default
+
+append style
+
+append script
+
+block content
+  h1 Start page
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/news/index.pug b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/news/index.pug
@@ -0,0 +1,11 @@
+extends @views/layouts/default
+
+append script
+  script(src='./script.js')
+
+append style
+  link(rel='stylesheet' href=require('./style.css'))
+  //-link(rel='stylesheet' href='./style.css')
+
+block content
+  h1 News
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/news/script.js b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/news/script.js
@@ -0,0 +1 @@
+console.log('>> news');
diff --git a/test/cases/_pug/resolve-js-css-multipage/src/views/pages/news/style.css b/test/cases/_pug/resolve-js-css-multipage/src/views/pages/news/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: orangered;
+}
diff --git a/test/cases/_pug/resolve-js-css-multipage/webpack.config.js b/test/cases/_pug/resolve-js-css-multipage/webpack.config.js
@@ -0,0 +1,44 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  resolve: {
+    alias: {
+      '@views': path.join(__dirname, 'src/views'),
+      '@styles': path.join(__dirname, 'src/styles'),
+      '@scripts': path.join(__dirname, 'src/scripts'),
+    },
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        news: './src/views/pages/news/index.pug',
+        about: './src/views/pages/about/index.pug',
+        index: './src/views/pages/index.pug',
+      },
+      js: {
+        filename: 'js/[name].[contenthash:8].js',
+      },
+      css: {
+        filename: 'css/[name].[contenthash:8].css',
+      },
+      preprocessor: 'pug',
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/integration-pug.test.js b/test/integration-pug.test.js
@@ -19,6 +19,10 @@ describe('simple tests', () => {
   test('escape special chars, render', () => compareFiles('_pug/escape-mode-render'));
 });
 
+describe('special cases', () => {
+  test('resolve js, css in multiple pages', () => compareFiles('_pug/resolve-js-css-multipage'));
+});
+
 describe('extend / include / raw include', () => {
   test('resolve extends alias', () => compareFiles('_pug/extends-alias'));
   test('resolve extends relative', () => compareFiles('_pug/extends-relative'));