fix: handle mixed preprocessorMode cases consistently, #174

webdiscus · webdiscus · commit eeba07d213e7 · 2025-06-28T23:07:14.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.20.5 (2025-06-29)
+
+- fix: handle mixed `preprocessorMode` cases consistently, #174
+
 ## 4.20.4 (2025-06-28)
 
 - fix: template rendering error in serve/watch mode with JS templates, #174
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.20.4",
+  "version": "4.20.5",
   "description": "Generates complete single-page or multi-page website from source assets. Built-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",
diff --git a/src/Loader/Option.js b/src/Loader/Option.js
@@ -40,6 +40,7 @@ class Option {
   // rule: the first value is default
   preprocessorModes = new Set(['render', 'compile']);
   #preprocessorModule;
+  #originalPreprocessorMode;
 
   constructor() {}
 
@@ -84,7 +85,7 @@ class Option {
       options.esModule = options.esModule === true;
 
       // save the initial value defined in the webpack config
-      options.originalPreprocessorMode = options.preprocessorMode;
+      this.#originalPreprocessorMode = options.preprocessorMode;
 
       // set reference to sources defined directly in plugin options
       if (this.#pluginOption.options?.sources != null) {
@@ -150,6 +151,7 @@ class Option {
   #initPreprocessor(loaderContext) {
     const queryData = this.#queryData;
     const options = this.#options;
+    //const resource = loaderContext.resourcePath + loaderContext.resourceQuery;
     const issuer = loaderContext._module.resourceResolveData?.context?.issuer || '';
     let [defaultPreprocessorMode] = this.preprocessorModes;
     let isIssuerScript = false;
@@ -181,13 +183,16 @@ 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;
+    options.preprocessorMode = this.#originalPreprocessorMode;
 
     if (preprocessorMode && this.preprocessorModes.has(preprocessorMode)) {
       options.preprocessorMode = preprocessorMode;
     } else if (!this.preprocessorModes.has(options.preprocessorMode)) {
       options.preprocessorMode = defaultPreprocessorMode;
     }
+
+    // safe dynamic option directly into module meta data
+    loaderContext._module.resourceResolveData._bundlerPluginMeta.preprocessorMode = options.preprocessorMode;
   }
 
   /**
@@ -444,6 +449,13 @@ class Option {
     this.#preprocessorModule._module = preprocessor;
   }
 
+  /**
+   * @param {string} mode
+   */
+  setPreprocessorMode(mode) {
+    this.#options.preprocessorMode = mode;
+  }
+
   /**
    * @return {Object}
    */
diff --git a/src/Loader/index.js b/src/Loader/index.js
@@ -54,6 +54,7 @@ const loader = function (content, map, meta) {
   const loader = LoaderFactory.createLoader(pluginCompiler);
   const hooks = PluginService.getHooks(pluginCompiler);
   const loaderOptionPromise = LoaderFactory.createOption(pluginCompiler, loaderContext);
+  const preprocessorMode = loaderContext._module?.resourceResolveData?._bundlerPluginMeta?.preprocessorMode;
   let loaderOption = null;
 
   loaderOptionPromise
@@ -62,6 +63,9 @@ const loader = function (content, map, meta) {
       errorStage = 'init';
       loaderOption = result;
 
+      // update with correct dynamic value
+      loaderOption.setPreprocessorMode(preprocessorMode);
+
       // bind the loaderOption before initialisations
       PluginService.setLoaderOption(pluginCompiler, loaderOption);
 
@@ -97,6 +101,9 @@ const loader = function (content, map, meta) {
       return hooks.beforePreprocessor.promise(content, loaderContext);
     })
     .then((value) => {
+      // update with correct dynamic value
+      loaderOption.setPreprocessorMode(preprocessorMode);
+
       const beforePreprocessor = loaderOption.get().beforePreprocessor;
       if (beforePreprocessor != null) {
         errorStage = 'beforePreprocessor';
@@ -105,14 +112,19 @@ const loader = function (content, map, meta) {
       return value;
     })
     .then((value) => {
+      // update with correct dynamic value
+      loaderOption.setPreprocessorMode(preprocessorMode);
+
       const loaderOptions = loaderOption.get();
       errorStage = 'preprocessor';
 
       // TODO: add to types.d.ts loaderOptions as 3rd param
       return hooks.preprocessor.promise(value, loaderContext, loaderOptions);
     })
     .then((value) => {
-      // 3
+      // update with correct dynamic value
+      loaderOption.setPreprocessorMode(preprocessorMode);
+
       const preprocessor = loaderOption.getPreprocessor();
       if (preprocessor) {
         const loaderOptions = loaderOption.get();
@@ -181,6 +193,9 @@ const loader = function (content, map, meta) {
 
       const browserErrorMessage = loader?.exportError(error, resource);
 
+      // update with correct value
+      loaderOption.setPreprocessorMode(preprocessorMode);
+
       // initialize dependency when an exception occurs before regular dependency initialisation
       dependency.init({ loaderContext, loaderOption });
       dependency.watch();
diff --git a/test/manual/watch-hbs-partials-js-tmpl/package.json b/test/manual/watch-hbs-partials-js-tmpl/package.json
@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "scripts": {
     "start": "webpack serve",
     "watch": "webpack watch --mode development",
diff --git a/test/manual/watch-hbs-partials-js-tmpl/src/app.hbs b/test/manual/watch-hbs-partials-js-tmpl/src/app.hbs
@@ -8,4 +8,4 @@
   {{#*inline "footerContainer"}}
     {{> footer}}
   {{/inline}}
-{{/layout}}
+{{/layout}}
diff --git a/test/manual/watch-hbs-partials-js-tmpl/src/app.js b/test/manual/watch-hbs-partials-js-tmpl/src/app.js
@@ -1,4 +1,4 @@
-import tmpl from './app.hbs';
+import tmpl from './app.hbs?lang=de';
 
 const locals = {
   helloName: 'World',
diff --git a/test/manual/watch-hbs-partials-js-tmpl/src/data/index.js b/test/manual/watch-hbs-partials-js-tmpl/src/data/index.js
diff --git a/test/manual/watch-hbs-partials-js-tmpl/src/data/index.mjs b/test/manual/watch-hbs-partials-js-tmpl/src/data/index.mjs
@@ -0,0 +1,7 @@
+import { productsDB } from './productsDB.js';
+
+export default {
+  projectName: 'Test',
+  copyright: 'ABC copyright',
+  smallSliderProductCards: [productsDB[874], productsDB[8711], productsDB[8711], productsDB[874], productsDB[8711]],
+};
diff --git a/test/manual/watch-hbs-partials-js-tmpl/src/data/productsDB.js b/test/manual/watch-hbs-partials-js-tmpl/src/data/productsDB.js
@@ -1,12 +1,12 @@
 export const productsDB = {
-	874: {
-		id: '874',
-		currentPrice: '5 489',
-		prevPrice: false,
-	},
-	8711: {
-		id: '8711',
-		currentPrice: '7 103',
-		prevPrice: '7 896',
-	},
+  874: {
+    id: '874',
+    currentPrice: '5 489',
+    prevPrice: false,
+  },
+  8711: {
+    id: '8711',
+    currentPrice: '7 103.09',
+    prevPrice: '7 896',
+  },
 };
diff --git a/test/manual/watch-hbs-partials-js-tmpl/src/index.hbs b/test/manual/watch-hbs-partials-js-tmpl/src/index.hbs
@@ -11,5 +11,12 @@
     {{!-- the partial used in both a Handlebars template and a JS template --}}
     {{> person name="Heisenberg" age="50"}}
     <div id="app"></div>
+    <h3>Product</h3>
+    <ul class="people_list">
+      {{#each smallSliderProductCards}}
+        <li>id: {{this.id}}, current price: {{this.currentPrice}}</li>
+      {{/each}}
+    </ul>
+    <p>{{ copyright }}</p>
   </body>
 </html>
diff --git a/test/manual/watch-hbs-partials-js-tmpl/webpack.config.js b/test/manual/watch-hbs-partials-js-tmpl/webpack.config.js
@@ -1,7 +1,12 @@
-const path = require('path');
-const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+import HtmlBundlerPlugin from '@test/html-bundler-webpack-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-module.exports = {
+// Since we're using ES modules, we need to get __dirname differently
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
   mode: 'production',
 
   output: {
@@ -24,10 +29,15 @@ module.exports = {
         strict: true,
         partials: ['src/partials'],
       },
-      //data: './src/data/index.js',
-      data: {
-        projectName: 'Test',
+      // data: {
+      //   projectName: 'Test',
+      // },
+      // IMPORTANT: ESM data file must have '.mjs' file extension
+      data: './src/data/index.mjs',
+      watchFiles: {
+        includes: [/\/data\/.+\.(m?js|json)$/],
       },
+      //verbose: true,
     }),
   ],
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "html-bundler-webpack-plugin",`
`3`		`- "version": "4.20.4",`
	`3`	`+ "version": "4.20.5",`
`4`	`4`	`"description": "Generates complete single-page or multi-page website from source assets. Built-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "type": "module",`
`2`	`3`	`"scripts": {`
`3`	`4`	`"start": "webpack serve",`
`4`	`5`	`"watch": "webpack watch --mode development",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import tmpl from './app.hbs';`
	`1`	`+import tmpl from './app.hbs?lang=de';`
`2`	`2`
`3`	`3`	`const locals = {`
`4`	`4`	`helloName: 'World',`