fix: watching changes in template function imported in JS

Author: webdiscus

CHANGELOG.md

@@ -1,8 +1,12 @@
 # Change log
 
+## 3.4.2 (2023-12-08)
+
+- fix: watching changes in template function imported in JS
+
 ## 3.4.1 (2023-12-08)
 
-- fix: runtime error using template function in js when external data is not defined
+- fix: runtime error using template function in JS when external data is not defined
 
 ## 3.4.0 (2023-12-03)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.4.1",
+  "version": "3.4.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/Common/CompilationHelpers.js

@@ -0,0 +1,35 @@
+/**
+ * Find the root issuer of a resource.
+ *
+ * @param {Compilation} compilation
+ * @param {string} resource
+ * @return {string|undefined}
+ */
+const findRootIssuer = (compilation, resource) => {
+  const moduleMap = compilation.moduleGraph._moduleMap;
+  const modules = moduleMap.keys();
+  const [resourceFile] = resource.split('?', 1);
+  let current;
+  let parent;
+
+  for (let module of modules) {
+    // skip non normal modules, e.g. runtime
+    if (!module.resource) continue;
+
+    const [file] = module.resource.split('?', 1);
+    if (file === resourceFile) {
+      current = module;
+      break;
+    }
+  }
+
+  if (current) {
+    while ((parent = moduleMap.get(current).issuer)) {
+      current = parent;
+    }
+  }
+
+  return current && current.resource !== resource ? current.resource : undefined;
+};
+
+module.exports = { findRootIssuer };

src/Loader/Option.js

@@ -3,6 +3,7 @@ const Preprocessor = require('./Preprocessor');
 const PluginService = require('../Plugin/PluginService');
 const { parseQuery } = require('../Common/Helpers');
 const { rootSourceDir, filterParentPaths } = require('../Common/FileUtils');
+const { findRootIssuer } = require('../Common/CompilationHelpers');
 const { watchPathsException, dataFileNotFoundException, dataFileException } = require('./Messages/Exeptions');
 
 /**
@@ -21,6 +22,7 @@ class Option {
   static #options;
   static #rootContext;
   static #resourcePath;
+  static #pluginOption;
 
   // rule: the first value is default
   static preprocessorModes = new Set(['render', 'compile']);
@@ -33,8 +35,9 @@ class Option {
     const queryData = parseQuery(resourceQuery);
     let options = PluginService.getLoaderCache(loaderId);
 
-    this.fileSystem = loaderContext.fs.fileSystem;
+    this.#pluginOption = PluginService.getOptions();
     this.#watch = PluginService.isWatchMode();
+    this.fileSystem = loaderContext.fs.fileSystem;
     this.#webpackOptions = loaderContext._compiler.options || {};
     this.#rootContext = rootContext;
     this.#resourcePath = resourcePath;
@@ -43,6 +46,9 @@ class Option {
       const loaderOptions = PluginService.getLoaderOptions();
       options = { ...loaderOptions, ...(loaderContext.getOptions() || {}) };
 
+      // save the initial value defined in the webpack config
+      options.originalPreprocessorMode = options.preprocessorMode;
+
       // the assets root path is used for resolving files specified in attributes (`sources` option)
       // allow both 'root' and 'basedir' option name for compatibility
       const basedir = options.root || options.basedir || false;
@@ -53,16 +59,57 @@ class Option {
 
       PluginService.setLoaderCache(loaderId, options);
     }
-
     this.#options = options;
 
-    // preprocessor mode
+    // if the data option is a string, it must be an absolute or relative filename of an existing file that exports the data
+    const loaderData = this.#loadData(options.data);
+    const entryData = this.#loadData(loaderContext.entryData);
+    const contextData = loaderContext.data || {};
+
+    // merge plugin and loader data, the plugin data property overrides the same loader data property
+    loaderObject.data = { ...contextData, ...loaderData, ...entryData, ...queryData };
+
+    // beforePreprocessor
+    if (typeof options.beforePreprocessor !== 'function') {
+      options.beforePreprocessor = null;
+    }
+
+    // preprocessor
+    this.#initPreprocessor(loaderContext, queryData);
+
+    // clean loaderContext of artifacts
+    if (loaderContext.entryData != null) delete loaderContext.entryData;
+
+    // defaults, cacheable is true, the loader option is not documented in readme, use it only for debugging
+    if (loaderContext.cacheable != null) loaderContext.cacheable(options?.cacheable !== false);
+
+    if (this.#watch) this.#initWatchFiles();
+  }
+
+  /**
+   * @param {BundlerPluginLoaderContext} loaderContext The loader context of Webpack.
+   * @param {Object} queryData The parsed parameters from the url query.
+   */
+  static #initPreprocessor(loaderContext, queryData) {
+    const pluginOption = this.#pluginOption;
+    const options = this.#options;
     const issuer = loaderContext._module.resourceResolveData?.context?.issuer || '';
     let [defaultPreprocessorMode] = this.preprocessorModes;
+    let isIssuerScript = false;
     let preprocessorMode;
 
+    if (issuer) {
+      isIssuerScript = pluginOption.isScript(issuer);
+      if (!isIssuerScript) {
+        const rootIssuer = findRootIssuer(PluginService.compilation, issuer);
+        if (rootIssuer) {
+          isIssuerScript = pluginOption.isScript(rootIssuer);
+        }
+      }
+    }
+
     // rule: defaults, if issuer is JS, then compile template to the template function
-    if (issuer && PluginService.getOptions().isScript(issuer)) {
+    if (isIssuerScript) {
       preprocessorMode = defaultPreprocessorMode = 'compile';
     }
 
@@ -75,61 +122,35 @@ class Option {
       }
     }
 
+    // reset the original option value, also no cached state,
+    // because the loader works in different modes depend on the context
+    options.preprocessorMode = options.originalPreprocessorMode;
+
     if (preprocessorMode && this.preprocessorModes.has(preprocessorMode)) {
       options.preprocessorMode = preprocessorMode;
     } else if (!this.preprocessorModes.has(options.preprocessorMode)) {
       options.preprocessorMode = defaultPreprocessorMode;
     }
 
-    // if the data option is a string, it must be an absolute or relative filename of an existing file that exports the data
-    const loaderData = this.loadData(options.data);
-    const entryData = this.loadData(loaderContext.entryData);
-    const contextData = loaderContext.data || {};
-
-    //console.log('*** INIT DATA1: ', { data: loaderContext.data });
-
-    // merge plugin and loader data, the plugin data property overrides the same loader data property
-    const data = { ...contextData, ...loaderData, ...entryData, ...queryData };
-    if (Object.keys(data).length > 0) loaderObject.data = data;
-
-    loaderObject.data = data;
-
-    //if (!loaderObject.data) loaderObject.data = {};
-
-    //console.log('*** INIT DATA2: ', { data: loaderContext.data });
-
-    // beforePreprocessor
-    if (typeof options.beforePreprocessor !== 'function') {
-      options.beforePreprocessor = null;
-    }
-
-    // preprocessor
     if (!Preprocessor.isUsed(options.preprocessor)) {
       options.preprocessor = Preprocessor.factory(loaderContext, {
         preprocessor: options.preprocessor,
-        watch: this.#watch,
         options: options.preprocessorOptions,
+        watch: this.#watch,
       });
     }
-
-    // clean loaderContext of artifacts
-    if (loaderContext.entryData != null) delete loaderContext.entryData;
-
-    // defaults, cacheable is true, the loader option is not documented in readme, use it only for debugging
-    if (loaderContext.cacheable != null) loaderContext.cacheable(options?.cacheable !== false);
-
-    if (this.#watch) this.#initWatchFiles();
   }
 
   static #initWatchFiles() {
+    const pluginOption = this.#pluginOption;
     const watchFiles = {
       // watch files only in the directories;
       // defaults is first-level subdirectory of a template, relative to root context
       paths: [],
 
       // watch only files matched to RegExps,
       // if empty then watch all files, except ignored
-      files: PluginService.getOptions().getEntryTest(),
+      files: pluginOption.getEntryTest(),
 
       // ignore paths and files matched to RegExps
       ignore: [
@@ -142,7 +163,7 @@ class Option {
     };
 
     const fs = this.fileSystem;
-    const { paths, files, ignore } = PluginService.getOptions().getWatchFiles();
+    const { paths, files, ignore } = pluginOption.getWatchFiles();
     const watchDirs = new Set([rootSourceDir(this.#rootContext, this.#resourcePath)]);
     const rootContext = this.#rootContext;
 
@@ -195,7 +216,7 @@ class Option {
    * @param {Object|string|null} dataValue If string, the relative or absolute filename.
    * @return {Object}
    */
-  static loadData(dataValue) {
+  static #loadData(dataValue) {
     if (typeof dataValue !== 'string') return dataValue || {};
 
     let dataFile = PluginService.dataFiles.get(dataValue);

src/Plugin/AssetCompiler.js

@@ -12,6 +12,7 @@ const AssetGenerator = require('webpack/lib/asset/AssetGenerator');
 
 const { pluginName } = require('../config');
 const { baseUri, urlPathPrefix, cssLoaderName } = require('../Loader/Utils');
+const { findRootIssuer } = require('../Common/CompilationHelpers');
 const { isDir } = require('../Common/FileUtils');
 const createPersistentCache = require('./createPersistentCache');
 const PersistentCache = require('./PersistentCache');
@@ -34,7 +35,6 @@ const Integrity = require('./Extras/Integrity');
 
 const { compilationName, verbose } = require('./Messages/Info');
 const { PluginError, afterEmitException } = require('./Messages/Exception');
-const Preprocessor = require('../Loader/Preprocessor');
 
 const loaderPath = require.resolve('../Loader');
 
@@ -585,7 +585,7 @@ class AssetCompiler {
       // to avoid splitting the loader runtime scripts;
       // allow runtime scripts for styles imported in JavaScript, regards deep imported styles via url()
       if (isIssuerStyle && file.endsWith('.js')) {
-        const rootIssuer = Collection.findRootIssuer(issuer);
+        const rootIssuer = findRootIssuer(this.compilation, issuer);
         meta.isScript = true;
 
         // return true if the root issuer is a JS (not style and not template), otherwise return false
@@ -605,7 +605,7 @@ class AssetCompiler {
       // try to detect imported style as resolved resource file, because a request can be a node module w/o an extension
       // the issuer can be a style if a scss contains like `@import 'main.css'`
       if (!Option.isStyle(issuer) && !Option.isEntry(issuer) && meta.isStyle) {
-        const rootIssuer = Collection.findRootIssuer(issuer);
+        const rootIssuer = findRootIssuer(this.compilation, issuer);
 
         Collection.importStyleRootIssuers.add(rootIssuer || issuer);
         meta.isImportedStyle = true;

src/Plugin/Collection.js

@@ -555,39 +555,6 @@ class Collection {
     return walk(module);
   }
 
-  /**
-   * Find the root issuer of a resource.
-   *
-   * @param {string} resource
-   * @return {string|undefined}
-   */
-  static findRootIssuer(resource) {
-    const moduleMap = this.compilation.moduleGraph._moduleMap;
-    const modules = moduleMap.keys();
-    const [resourceFile] = resource.split('?', 1);
-    let current;
-    let parent;
-
-    for (let module of modules) {
-      // skip non normal modules, e.g. runtime
-      if (!module.resource) continue;
-
-      const [file] = module.resource.split('?', 1);
-      if (file === resourceFile) {
-        current = module;
-        break;
-      }
-    }
-
-    if (current) {
-      while ((parent = moduleMap.get(current).issuer)) {
-        current = parent;
-      }
-    }
-
-    return current && current.resource !== resource ? current.resource : undefined;
-  }
-
   /**
    * Find insert position for styles in the HTML head.
    *

src/Plugin/PluginService.js

@@ -114,7 +114,7 @@ class PluginService {
   /**
    * Returns plugin options instance.
    *
-   * TODO: rename to getPluginOptionInstance()
+   * TODO: rename to getOptionInstance()
    *
    * @return {OptionPluginInterface}
    */

test/manual/watch-template-function/package.json

@@ -0,0 +1,11 @@
+{
+  "description": "Watch changes in a template function imported in js",
+  "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-template-function/src/app.js

@@ -0,0 +1,9 @@
+import tmpl from './partials/content.html';
+
+const html = tmpl({
+  name: 'World',
+});
+
+document.getElementById('main').innerHTML = html;
+
+console.log('>> app');

test/manual/watch-template-function/src/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Home</title>
+    <!-- load the rendered template in JS and add it into HTML in runtime -->
+    <script src="./app.js" defer="defer"></script>
+  </head>
+  <body>
+    <div id="main"></div>
+  </body>
+</html>