fix: avoid recompiling all entry templates after changes of a non-ent…

…ry partial file

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change log
 
+## 3.6.2 (2024-03-11)
+
+- fix: avoid recompiling all entry templates after changes of a non-entry partial file, [pug-plugin issue](https://github.com/webdiscus/pug-plugin/issues/66)
+
 ## 3.6.1 (2024-03-08)
 
 - fix: cannot find module 'nunjucks/src/object', introduced in v3.6.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "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",

src/Loader/Dependency.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const { readDirRecursiveSync } = require('../Common/FileUtils');
 const PluginService = require('../Plugin/PluginService');
 const AssetEntry = require('../Plugin/AssetEntry');
@@ -11,18 +12,28 @@ class Dependency {
   static fileSystem = null;
   static files = new Set();
   static directories = new Set();
-  static loaderContext = null;
   static watchFiles = {};
-  static #entryFiles = new Set();
+  static entryFiles = new Set();
+  static excludeDirs = [];
+  static loaderContext = null;
 
   static init(loaderContext) {
     if (!PluginService.isWatchMode()) return;
 
+    let watchFile = loaderContext.resourcePath;
+
     PluginService.setDependencyInstance(this);
     this.loaderContext = loaderContext;
     this.fileSystem = loaderContext.fs.fileSystem;
     this.watchFiles = Option.getWatchFiles();
-    this.#entryFiles = AssetEntry.getEntryFiles();
+    this.entryFiles = AssetEntry.getEntryFiles();
+
+    this.excludeDirs = [];
+    this.entryFiles.forEach((entryFile) => {
+      let entryDir = path.dirname(entryFile) + path.sep;
+      if (!watchFile.startsWith(entryDir)) this.excludeDirs.push(entryDir);
+    });
+
     this.addFile = this.addFile.bind(this);
 
     const fs = this.fileSystem;
@@ -69,18 +80,18 @@ class Dependency {
   static watch() {
     if (!PluginService.isWatchMode()) return;
 
-    const { loaderContext } = this;
+    const { loaderContext, excludeDirs } = this;
 
-    for (let dir of this.directories) {
-      loaderContext.addContextDependency(dir);
-    }
+    this.directories.forEach(loaderContext.addContextDependency);
 
     for (let file of this.files) {
-      if (!this.#entryFiles.has(file)) {
-        // the dependency already contains the current resource file,
-        // add for watching only files not defined in the entry to avoid unnecessary rebuilding of all templates
-        loaderContext.addDependency(file);
+      let isExcluded = excludeDirs.findIndex((dirname) => file.startsWith(dirname)) > -1;
+
+      if (isExcluded || this.entryFiles.has(file)) {
+        // ignore all files from other entry directory or the current entry file, because it is already in the list
+        continue;
       }
+      loaderContext.addDependency(file);
     }
   }
 

test/manual/watch-non-entry-partial-ejs/README.md

@@ -0,0 +1,20 @@
+## Problem `FIXED` in v3.6.2
+
+Compiling all entrypoint files after changes of a non-entry file.
+
+**Project files**
+
+```
+pages/home/index.html <= entrypoint
+pages/home/includes/header.html <= non entry partial
+
+pages/about/index.html <= entrypoint
+pages/about/includes/header.html <= non entry partial
+```
+
+### Reproduce
+
+- change `pages/home/index.html` => will be rendered only this file. OK
+- change `pages/home/includes/header.html` => will be recompiled pages:
+  - pages/home/index.html (with all dependencies), OK
+  - pages/about/index.html (with all dependencies), NOT OK, should not be recompiled (`FIXED`)

test/manual/watch-non-entry-partial-ejs/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "watch": "webpack watch --mode development",
+    "build": "webpack --mode=production --progress"
+  },
+  "devDependencies": {
+    "html-bundler-webpack-plugin": "file:../../.."
+  }
+}

test/manual/watch-non-entry-partial-ejs/src/components/slider/slider.html

@@ -0,0 +1,5 @@
+<div class="slider">
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</div>

test/manual/watch-non-entry-partial-ejs/src/views/pages/about-product/includes/header.html

@@ -0,0 +1 @@
+<h1>About product 123456789</h1>

test/manual/watch-non-entry-partial-ejs/src/views/pages/about-product/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>About product</title>
+  </head>
+  <body>
+    <%- include('./includes/header.html') %>
+    <p>Test body: 123 45678</p>
+    <%- include('../../../components/slider/slider.html') %>
+  </body>
+</html>

test/manual/watch-non-entry-partial-ejs/src/views/pages/about/includes/header.html

@@ -0,0 +1 @@
+<h1>About 123</h1>

test/manual/watch-non-entry-partial-ejs/src/views/pages/about/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>About</title>
+  </head>
+  <body>
+    <%- include('./includes/header.html') %>
+    <p>Test body: 123 4567</p>
+    <%- include('../../../components/slider/slider.html') %>
+  </body>
+</html>

test/manual/watch-non-entry-partial-ejs/src/views/pages/home/includes/header.html

@@ -0,0 +1 @@
+<h1>Home 123</h1>

test/manual/watch-non-entry-partial-ejs/src/views/pages/home/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Home</title>
+  </head>
+  <body>
+    <%- include('./includes/header.html') %>
+    <p>Test body: 123</p>
+    <%- include('../../../components/slider/slider.html') %>
+  </body>
+</html>

test/manual/watch-non-entry-partial-ejs/webpack.config.js

@@ -0,0 +1,50 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  stats: 'minimal',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/views/pages/home/index.html',
+        about: './src/views/pages/about/index.html',
+      },
+      preprocessor: 'ejs',
+      //preprocessor: false,
+      //hotUpdate: true,
+      //verbose: true,
+    }),
+  ],
+
+  // module: {
+  //   rules: [
+  //     {
+  //       test: /\.(css)$/,
+  //       use: ['css-loader'],
+  //     },
+  //   ],
+  // },
+
+  // devServer: {
+  //   static: {
+  //     directory: path.join(__dirname, 'dist'),
+  //   },
+  //   watchFiles: {
+  //     paths: ['src/**/*.*'],
+  //     options: {
+  //       usePolling: true,
+  //     },
+  //   },
+  // },
+
+  watchOptions: {
+    // fix twice recompilation the same file
+    aggregateTimeout: 600,
+  },
+};

test/manual/watch-non-entry-partial-pug/README.md

@@ -0,0 +1,20 @@
+## Problem `FIXED` in v3.6.2
+
+Compiling all entrypoint files after changes of a non-entry file.
+
+**Project files**
+
+```
+pages/home/index.pug <= entrypoint
+pages/home/includes/header.pug <= non entry partial
+
+pages/about/index.pug <= entrypoint
+pages/about/includes/header.pug <= non entry partial
+```
+
+### Reproduce
+
+- change `pages/home/index.pug` => will be rendered only this file. OK
+- change `pages/home/includes/header.pug` => will be recompiled pages:
+  - pages/home/index.pug (with all dependencies), OK
+  - pages/about/index.pug (with all dependencies), NOT OK, should not be recompiled (`FIXED`)

test/manual/watch-non-entry-partial-pug/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "watch": "webpack watch --mode development",
+    "build": "webpack --mode=production --progress"
+  },
+  "devDependencies": {
+    "html-bundler-webpack-plugin": "file:../../.."
+  }
+}

test/manual/watch-non-entry-partial-pug/src/components/slider/slider.pug

@@ -0,0 +1,4 @@
+.slider
+  div Slide 1: 123
+  div Slide 2
+  div Slide 3

test/manual/watch-non-entry-partial-pug/src/views/layouts/default.pug

@@ -0,0 +1,6 @@
+html
+  head
+    block head
+  body
+    .nav Menu: 123
+    block body

test/manual/watch-non-entry-partial-pug/src/views/pages/about-product/includes/header.pug

@@ -0,0 +1 @@
+h1 About product

test/manual/watch-non-entry-partial-pug/src/views/pages/about-product/index.pug

@@ -0,0 +1,9 @@
+extends ../../layouts/default
+
+block head
+  title About product
+
+block body
+  include includes/header
+  p Test body: 123
+  include ../../../components/slider/slider

test/manual/watch-non-entry-partial-pug/src/views/pages/about/includes/header.pug

@@ -0,0 +1 @@
+h1 About 123

test/manual/watch-non-entry-partial-pug/src/views/pages/about/index.pug

@@ -0,0 +1,9 @@
+extends ../../layouts/default
+
+block head
+  title About
+
+block body
+  include includes/header
+  p Test body: 123
+  include ../../../components/slider/slider

test/manual/watch-non-entry-partial-pug/src/views/pages/home/includes/header.pug

@@ -0,0 +1 @@
+h1 Home

test/manual/watch-non-entry-partial-pug/src/views/pages/home/index.pug

@@ -0,0 +1,9 @@
+extends ../../layouts/default
+
+block head
+  title Home
+
+block body
+  include includes/header
+  p Test body: 123
+  include ../../../components/slider/slider

test/manual/watch-non-entry-partial-pug/webpack.config.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  stats: 'minimal',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/views/pages/home/index.pug',
+        about: './src/views/pages/about/index.pug',
+      },
+      preprocessor: 'pug',
+      hotUpdate: true,
+      //verbose: true,
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    watchFiles: {
+      paths: ['src/**/*.*'],
+      options: {
+        usePolling: true,
+      },
+    },
+  },
+
+  watchOptions: {
+    // fix twice recompilation the same file
+    aggregateTimeout: 600,
+  },
+};