fix: avoid recompiling all entry templates after changes of a non-entry partial file

Author: webdiscus

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-lock.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",

package.json

@@ -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);
     }
   }
 

src/Loader/Dependency.js

@@ -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/README.md

@@ -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/package.json

@@ -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/components/slider/slider.html

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

test/manual/watch-non-entry-partial-ejs/src/views/pages/about-product/includes/header.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-product/index.html

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