fix: issue with cached variables set used in template function, #128

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change log
 
+## 4.8.1 (2024-12-06)
+
+- fix: if template is imported in JS in compile mode and the same template function called with different variables set
+       then variables from previous definition must not be cached.
+       This fix is for all template engines. #128
+
 ## 4.8.0 (2024-12-05)
 
 - feat: add `minimized` tag in stats output for minimized HTML assets

README.md

@@ -34,7 +34,7 @@ Advanced alternative to [html-webpack-plugin](https://github.com/jantimon/html-w
 - **Renders** the [template engines](#template-engine) "out of the box":
   [Eta](#using-template-eta), [EJS](#using-template-ejs), [Handlebars](#using-template-handlebars), [Nunjucks](#using-template-nunjucks), [Pug](#using-template-pug), [Tempura](#using-template-tempura), [TwigJS](#using-template-twig), [LiquidJS](#using-template-liquidjs).
   It is very easy to add support for any template engine.
-- Supports including of Markdown `*.md` files in the template, see [live Markdown demo](https://stackblitz.com/edit/markdown-to-html-webpack?file=webpack.config.js) in browser.
+- Supports including of Markdown `*.md` files in the template, see [Markdown demo](https://stackblitz.com/edit/markdown-to-html-webpack?file=webpack.config.js) in browser.
 - **Source files** of [`script`](#option-js) and [`style`](#option-css) can be specified directly in HTML:
   - `<link href="./style.scss" rel="stylesheet">`\
   No longer need to define source style files in Webpack entry or import styles in JavaScript.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "HTML Bundler Plugin for Webpack renders HTML templates containing source files of scripts, styles, images. Supports template engines: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

src/Loader/Preprocessors/Ejs/index.js

@@ -123,7 +123,7 @@ const preprocessor = (loaderContext, options) => {
 
       return `${templateFunction};
         var data = ${stringifyJSON(data)};
-        var template = (context) => ${exportFunctionName}(Object.assign(data, context));
+        var template = (context) => ${exportFunctionName}(Object.assign({}, data, context));
         ${exportCode}template;`;
     },
   };

src/Loader/Preprocessors/Eta/index.js

@@ -125,7 +125,7 @@ const preprocessor = (loaderContext, options) => {
         var eta = new Eta(${stringifyJSON(options)});
         var data = ${stringifyJSON(data)};
         var etaFn = ${templateFunction};
-        var ${exportFunctionName} = (context) => etaFn.bind(eta)(Object.assign(data, context));
+        var ${exportFunctionName} = (context) => etaFn.bind(eta)(Object.assign({}, data, context));
         ${exportCode}${exportFunctionName};`;
     },
   };

src/Loader/Preprocessors/Handlebars/index.js

@@ -257,7 +257,7 @@ const preprocessor = (loaderContext, options) => {
         ${precompiledTemplate};
         var ${exportFunctionName} = (context) => {
           var template = (Handlebars['default'] || Handlebars).template(precompiledTemplate);
-          return template(Object.assign(data, context));
+          return template(Object.assign({}, data, context));
         };
         ${exportCode}${exportFunctionName};`;
     },
@@ -271,7 +271,7 @@ const preprocessor = (loaderContext, options) => {
     },
 
     /**
-     * CCalled when the webpack compiler is closing.
+     * Called when the webpack compiler is closing.
      * Reset cached states, needed for tests.
      */
     shutdown() {

src/Loader/Preprocessors/Nunjucks/index.js

@@ -131,7 +131,7 @@ const preprocessor = (loaderContext, options = {}, { esModule, watch }) => {
         var nunjucks = require('${runtimeFile}');
         ${precompiledTemplate};
         var data = ${stringifyJSON(data)};
-        var ${exportFunctionName} = (context) => nunjucks.render(templateId, Object.assign(data, context));
+        var ${exportFunctionName} = (context) => nunjucks.render(templateId, Object.assign({}, data, context));
         ${exportCode}${exportFunctionName};`;
     },
   };

src/Loader/Preprocessors/Pug/index.js

@@ -67,7 +67,7 @@ const preprocessor = (loaderContext, options, { esModule, watch }) => {
 
       return `${templateFunction};
         var data = ${stringifyJSON(data)};
-        var ${exportFunctionName} = (context) => ${functionName}(Object.assign(data, context));
+        var ${exportFunctionName} = (context) => ${functionName}(Object.assign({}, data, context));
         ${exportCode}${exportFunctionName};`;
     },
   };

src/Loader/Preprocessors/Tempura/index.js

@@ -129,7 +129,7 @@ const preprocessor = (loaderContext, options) => {
       return `${templateFunction};
         var data = ${stringifyJSON(data)};
         var helpers = ${helpersString};
-        ${exportCode} (context) => ${exportFunctionName}(Object.assign(data, context), helpers);`;
+        ${exportCode} (context) => ${exportFunctionName}(Object.assign({}, data, context), helpers);`;
     },
   };
 };

src/Loader/Preprocessors/Twig/index.js

@@ -170,7 +170,7 @@ const preprocessor = (loaderContext, options) => {
         ${hot === true ? `Twig.cache(false);` : ''}
         var data = ${stringifyJSON(data)};
         var template = Twig.twig(${precompiledTemplate});
-        var ${exportFunctionName} = (context) => template.render(Object.assign(data, context));
+        var ${exportFunctionName} = (context) => template.render(Object.assign({}, data, context));
         ${exportCode}${exportFunctionName};`;
     },
   };

src/Plugin/Collection.js

@@ -874,10 +874,10 @@ class Collection {
   render(assets) {
     const compilation = this.compilation;
     const { RawSource } = compilation.compiler.webpack.sources;
-    const LF = this.pluginOption.getLF();
-    const isIntegrity = this.pluginOption.isIntegrityEnabled();
+    const hasIntegrity = this.pluginOption.isIntegrityEnabled();
     const isHtmlMinify = this.pluginOption.isMinify();
-
+    const { minifyOptions } = this.pluginOption.get();
+    const LF = this.pluginOption.getLF();
     const hooks = this.hooks;
     const promises = [];
 
@@ -928,16 +928,14 @@ class Collection {
       // 2. postprocess callback
       if (this.pluginOption.hasPostprocess()) {
         // TODO:  update readme for postprocess
-        promise = promise.then(
-          (value) => this.pluginOption.postprocess(value, templateInfo, this.compilation) || value
-        );
+        promise = promise.then((value) => this.pluginOption.postprocess(value, templateInfo, compilation) || value);
       }
 
       // 3. minify HTML before inlining JS and CSS to avoid:
       //    - needles minification already minified assets in production mode
       //    - issues by parsing the inlined JS/CSS code with the html minification module
       if (isHtmlMinify) {
-        promise = promise.then((value) => minify(value, this.pluginOption.get().minifyOptions));
+        promise = promise.then((value) => minify(value, minifyOptions));
       }
 
       // 4. inline JS and CSS
@@ -974,7 +972,7 @@ class Collection {
               }
 
               // 1.1 compute CSS integrity
-              if (isIntegrity && !inline) {
+              if (hasIntegrity && !inline) {
                 // path to asset relative by output.path
                 let pathname = asset.assetFile;
                 if (this.pluginOption.isAutoPublicPath()) {
@@ -1001,7 +999,7 @@ class Collection {
               break;
             case Collection.type.script:
               // 1.2 compute JS integrity
-              if (isIntegrity) {
+              if (hasIntegrity) {
                 for (const chunk of asset.chunks) {
                   if (!chunk.inline) {
                     const assetContent = compilation.assets[chunk.chunkFile].source();
@@ -1046,7 +1044,7 @@ class Collection {
       }
 
       // 8. inject integrity
-      if (isIntegrity) {
+      if (hasIntegrity) {
         promise = promise.then((content) => {
           // 2. parse generated html for `link` and `script` tags
           const parsedResults = [];