fix: prevent build failure when used JS-template with dynamic tag attribute, #178

webdiscus · webdiscus · commit c9739259d8b4 · 2025-07-01T16:45:36.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.20.9 (2025-07-01)
+
+- fix: prevent build failure when used JS-template with dynamic tag attribute, #178
+
 ## 4.20.8 (2025-07-01)
 
 - fix: support Handlebars partial name containing dot, #179
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.20.8",
+  "version": "4.20.9",
   "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,25 +135,6 @@ 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.
  *
@@ -175,6 +156,25 @@ const parseTagAttributes = (string) => {
 };
 
 class HtmlParser {
+  /**
+   * 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.
+   */
+  static 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 values of tag attributes.
    *
@@ -390,7 +390,7 @@ class HtmlParser {
     };
 
     // check whether the value is JS-template code generated by a template engine
-    if (!isHtmlAttributeValue(value)) {
+    if (!this.isHtmlAttributeValue(value)) {
       return result;
     }
 
diff --git a/src/Loader/Template.js b/src/Loader/Template.js
@@ -36,7 +36,9 @@ class Template {
     for (let { type, tag, raw, parsedAttrs } of parsedTags) {
       for (let { attr, value, resolvedValue, startPos, endPos, quote, inEscapedDoubleQuotes } of parsedAttrs) {
         if (resolvedValue == null) {
-          if (!value) continue;
+          if (!value || !HtmlParser.isHtmlAttributeValue(value)) {
+            continue;
+          }
 
           const result = this.resolveFile({
             loader,
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/app.js b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/app.js
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/img/home.c7e37912.svg b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/img/home.c7e37912.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="16px" height="16px"><path d="M 8 1.320313 L 0.660156 8.132813 L 1.339844 8.867188 L 2 8.253906 L 2 14 L 7 14 L 7 9 L 9 9 L 9 14 L 14 14 L 14 8.253906 L 14.660156 8.867188 L 15.339844 8.132813 Z M 8 2.679688 L 13 7.328125 L 13 13 L 10 13 L 10 8 L 6 8 L 6 13 L 3 13 L 3 7.328125 Z"/></svg>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/img/imac.3666c92d.svg b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/img/imac.3666c92d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z"/></svg>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/img/stern.6adb226f.svg b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/img/stern.6adb226f.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m323 851 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178Zm-90 125 65-281L80 506l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-355Z"/></svg>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/index.html b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/expected/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Title</title>
+    <script src="app.js" defer="defer"></script>
+  </head>
+  <body>
+    <h2>HBS-template</h2>
+    <div><b>Resolve static image path</b></div>
+    <img src="img/stern.6adb226f.svg">
+    
+    <p><b>Render images resolved in a helper attribute</b></p>
+      <div>
+        <a href="./home.html">
+            <img
+              src="img/home.c7e37912.svg"
+              alt=""
+            />
+            <span>home</span> <-- <span>@images/icons/home.svg</span>
+        </a>
+      </div>
+      <div>
+        <a href="./token.html">
+            <img
+              src="img/imac.3666c92d.svg"
+              alt=""
+            />
+            <span>iMac</span> <-- <span>@images/icons/imac.svg</span>
+        </a>
+      </div>
+
+    <h2>JS-template</h2>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/app.hbs b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/app.hbs
@@ -0,0 +1,2 @@
+{{!-- provide data array from JS --}}
+{{> icons-js-tmpl }}
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/app.js b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/app.js
@@ -0,0 +1,16 @@
+import tmpl from './app.hbs';
+
+import homeIcon from '@images/icons/home.svg';
+import imacIcon from '@images/icons/imac.svg';
+
+const locals = {
+  urlData: [
+    //
+    { href: './home.html', text: 'home', icon: homeIcon },
+    { href: './imac.html', text: 'iMac', icon: imacIcon },
+  ],
+};
+
+document.getElementById('app').innerHTML = tmpl(locals);
+
+console.log('>> app');
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/index.hbs b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/index.hbs
@@ -0,0 +1,16 @@
+<!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>
+    <h2>HBS-template</h2>
+    {{!-- render partials with image aliases defined in helper array --}}
+    {{> icons}}
+
+    <h2>JS-template</h2>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/partials/icons-js-tmpl.hbs b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/partials/icons-js-tmpl.hbs
@@ -0,0 +1,35 @@
+<div><b>Resolve static image path</b></div>
+<img src="@images/stern.svg">
+
+{{!-- WARNING: this way works only for rendering into static HTML, but not for compilation into JS-funciton --}}
+{{!--
+<p><b>Render images resolved in a helper attribute</b></p>
+{{#each (array
+    (object href='./home.html' text='home' icon='@images/icons/home.svg')
+    (object href='./token.html' text='iMac' icon='@images/icons/imac.svg')
+)}}
+  <div>
+    <a href="{{ href }}">
+      <img
+        src="{{ icon }}"
+        alt=""
+      />
+      <span>{{ text }}</span> <-- <span>{{ icon }}</span>
+    </a>
+  </div>
+{{/each}}
+--}}
+
+{{!-- Solution for JS-templates --}}
+<p><b>Render images resolved in JS code</b></p>
+{{#each urlData}}
+  <div>
+    <a href="{{ this.href }}">
+        <img
+          src="{{ this.icon }}"
+          alt=""
+        />
+        <span>{{ this.text }}</span> <-- <span>{{ this.icon }}</span>
+    </a>
+  </div>
+{{/each}}
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/partials/icons.hbs b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/src/partials/icons.hbs
@@ -0,0 +1,18 @@
+<div><b>Resolve static image path</b></div>
+<img src="@images/stern.svg">
+
+<p><b>Render images resolved in a helper attribute</b></p>
+{{#each (array
+    (object href='./home.html' text='home' icon='@images/icons/home.svg')
+    (object href='./token.html' text='iMac' icon='@images/icons/imac.svg')
+  ) as |tag|}}
+  <div>
+    <a href="{{ tag.href }}">
+        <img
+          src="{{ tag.icon }}"
+          alt=""
+        />
+        <span>{{ tag.text }}</span> <-- <span>{{ tag.icon }}</span>
+    </a>
+  </div>
+{{/each}}
diff --git a/test/cases/_preprocessor/js-tmpl-hbs-compile-images/webpack.config.js b/test/cases/_preprocessor/js-tmpl-hbs-compile-images/webpack.config.js
@@ -0,0 +1,50 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+const helpers = {
+  object: (options) => options.hash || {},
+  array: (...args) => args.slice(0, -1),
+};
+
+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: {
+        strict: true, // test the option in the precompiled template function
+        partials: ['src/partials'],
+        helpers,
+      },
+      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
@@ -105,6 +105,8 @@ describe('usage template in js on client side', () => {
   test('hbs: compile, variables', () => compareFiles('_preprocessor/js-tmpl-hbs-compile-variables'));
   test('hbs: partials in hbs- and JS templates', () => compareFiles('_preprocessor/js-tmpl-hbs-partials-in-hbs-js'));
 
+  test('hbs: render/compile images', () => compareFiles('_preprocessor/js-tmpl-hbs-compile-images'));
+
   // Nunjucks
   test('njk: compile to fn', () => compareFiles('_preprocessor/js-tmpl-njk-compile'));
 

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.8",`
	`3`	`+ "version": "4.20.9",`
`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
`@@ -0,0 +1,2 @@`
	`1`	`+{{!-- provide data array from JS --}}`
	`2`	`+{{> icons-js-tmpl }}`