fix: built fails when used a template variable in srcset with JS-template, #176

webdiscus · webdiscus · commit de54cc33610b · 2025-06-29T22:15:18.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 4.20.6 (2025-06-29)
+
+- fix: built fails when used a template variable in srcset with JS-template, #176
+  ```html
+  <img srcset="{{ img }}" />
+  ```
+
 ## 4.20.5 (2025-06-29)
 
 - fix: handle mixed `preprocessorMode` cases consistently, #174
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.20.5",
+  "version": "4.20.6",
   "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/Common/HtmlParser.js b/src/Common/HtmlParser.js
@@ -135,6 +135,25 @@ const isLinkScript = (attrs) => {
   return false;
 };
 
+/**
+ * Check whether a given string is a plain HTML attribute value
+ * and not a compiled JavaScript expression.
+ *
+ * @param {string} value The attribute value to test.
+ * @returns {boolean} Returns true if the value appears to be a plain HTML attribute value.
+ */
+const isHtmlAttributeValue = (value) => {
+  if (!value || typeof value !== 'string') return false;
+
+  // allow if value is a simple static require(path) or url(path)
+  if (value.includes('require(') || value.includes('url(')) return true;
+
+  // heuristic check: disallow common JS syntax characters
+  const forbidden = /[();|!+*<>]/;
+
+  return !forbidden.test(value);
+};
+
 /**
  * Parse tag attributes in a tag string.
  *
@@ -367,8 +386,15 @@ class HtmlParser {
       startPos: attrData.valueStartPos,
       endPos: attrData.valueEndPos,
       inEscapedDoubleQuotes,
+      parsedValue: [''],
     };
 
+    // check whether the value is JS-template code generated by a template engine
+    if (!isHtmlAttributeValue(value)) {
+      //return {};
+      return result;
+    }
+
     if (attr.indexOf('srcset') > -1) {
       const { values, attrs } = this.parseSrcsetValue(value, attrData.valueStartPos, inEscapedDoubleQuotes);
 
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/app.js b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/app.js
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/img/fig.c6809878.png b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/img/fig.c6809878.png
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/img/kiwi.da3e3cc9.png b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/img/kiwi.da3e3cc9.png
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/img/pear.6b9b072a.png b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/img/pear.6b9b072a.png
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/index.html b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Title</title>
+    <script src="app.js" defer="defer"></script>
+  </head>
+  <body>
+    <div id="main"></div>
+  </body>
+</html>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/src/app.js b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/src/app.js
@@ -0,0 +1,13 @@
+import tmpl from './partials/content.hbs?lang=en';
+import imgPear from '@images/pear.png';
+
+const locals = {
+  name: 'World',
+  people: ['Alexa <Amazon>', 'Cortana <MS>', 'Siri <Apple>'],
+  imgKiwi: require('@images/kiwi.png'), // resolve an asset using require
+  imgPear, // resolve an asset using import
+};
+
+document.getElementById('main').innerHTML = tmpl(locals);
+
+console.log('>> app');
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/src/index.hbs b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/src/index.hbs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{ title }}</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>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/src/partials/content.hbs b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/src/partials/content.hbs
@@ -0,0 +1,21 @@
+<h1>Hello {{ name }}!</h1>
+
+{{!-- Test: variable in src compiled to JS-template (in this case by pass value) --}}
+<img src="{{ imgPear }}">
+
+{{!-- Test: undefined variable in src compiled to JS-template --}}
+<img src="{{ undefinedVariable2 }}" alt="undefinedVariable2">
+
+{{!-- Test: variable in srcset compiled to JS-template (in this case by pass value) --}}
+<img srcset="{{ imgKiwi }}" />
+
+<div>Global data: title = "{{ title }}"</div>
+<div>Query param: lang = "{{ lang }}"</div>
+
+<ul>
+    {{#each people}}
+    <li>{{this}}</li>
+    {{/each}}
+</ul>
+
+<img src="@images/fig.png" srcset="@images/kiwi.png 300w, @images/pear.png 400w">
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/webpack.config.js b/test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/webpack.config.js
@@ -0,0 +1,43 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  resolve: {
+    alias: {
+      '@images': path.join(__dirname, '../../../fixtures/images'),
+    },
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.hbs',
+      },
+      preprocessor: 'handlebars',
+      preprocessorOptions: {
+        views: ['src/partials'],
+      },
+      data: {
+        title: 'My Title',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(ico|png|jpe?g|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/[name].[hash:8][ext][query]',
+        },
+      },
+    ],
+  },
+};
diff --git a/test/preprocessor.test.js b/test/preprocessor.test.js
@@ -98,6 +98,7 @@ describe('usage template in js on client side', () => {
 
   // Handlebars
   test('hbs: compile to fn', () => compareFiles('_preprocessor/js-tmpl-hbs-compile'));
+  test('hbs: compile undefined vars', () => compareFiles('_preprocessor/js-tmpl-hbs-compile-undefined-var'));
   test('hbs: compile to fn with helpers', () => compareFiles('_preprocessor/js-tmpl-hbs-compile-helpers'));
   test('hbs: compile to fn with partials', () => compareFiles('_preprocessor/js-tmpl-hbs-compile-partials'));
   test('hbs: partials in hbs- and JS templates', () => compareFiles('_preprocessor/js-tmpl-hbs-partials-in-hbs-js'));

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.5",`
	`3`	`+ "version": "4.20.6",`
`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",`