fix: support Handlebars helpers defined as object methods to prevent build failure, #177

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.20.7 (2025-06-30)
+
+- fix: support Handlebars helpers defined as object methods to prevent build failure, #177
+
 ## 4.20.6 (2025-06-29)
 
 - fix: built fails when used a template variable in srcset with JS-template, #176

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.20.6",
+  "version": "4.20.7",
   "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",

src/Loader/Utils.js

@@ -202,18 +202,141 @@ const stringifyJSON = (data) => {
     : json || '{}';
 };
 
-const stringifyFn = (fn) => {
-  let value = fn.toString().replace(/\n/g, '');
-  let isArrowFunction = value.indexOf('=>', 1) > 0;
+/**
+ * Removes all JavaScript comments (single-line and multi-line)
+ * from the given source code, while preserving string and template literals.
+ *
+ * This function avoids removing comment-like patterns inside string literals
+ * (single quotes, double quotes, or backticks), and skips escaped characters.
+ *
+ * @param {string} code The JavaScript source code to clean.
+ * @returns {string} The code with all comments removed.
+ *
+ * @example
+ * // Removes only real comments, not content inside strings:
+ * const input = "const x = 'text // not a comment'; // real comment";
+ * const output = stripComments(input);
+ * // => "const x = 'text // not a comment'; "
+ */
+function stripComments(code) {
+  let out = '';
+  let i = 0;
+  const len = code.length;
+  let inStr = null; // "'", '"', or '`'
+  let inBlockComment = false;
+  let inLineComment = false;
+
+  while (i < len) {
+    const char = code[i];
+    const next = code[i + 1];
+
+    // end of line comment
+    if (inLineComment && (char === '\n' || char === '\r')) {
+      inLineComment = false;
+      out += char;
+      i++;
+      continue;
+    }
+
+    // end of block comment
+    if (inBlockComment && char === '*' && next === '/') {
+      inBlockComment = false;
+      i += 2;
+      continue;
+    }
+
+    if (inLineComment || inBlockComment) {
+      i++;
+      continue;
+    }
+
+    // handle string start
+    if (!inStr && (char === '"' || char === "'" || char === '`')) {
+      inStr = char;
+      out += char;
+      i++;
+      continue;
+    }
 
-  if (!isArrowFunction) {
-    const pos = value.indexOf('(');
-    if (pos > 0 && value.slice(0, pos).trim() !== 'function') {
-      value = 'function' + value.slice(pos);
+    // handle string end (skip escaped)
+    if (inStr) {
+      out += char;
+      if (char === '\\') {
+        out += code[i + 1];
+        i += 2;
+        continue;
+      }
+      if (char === inStr) {
+        inStr = null;
+      }
+      i++;
+      continue;
     }
+
+    // handle line comment start
+    if (char === '/' && next === '/') {
+      inLineComment = true;
+      i += 2;
+      continue;
+    }
+
+    // handle block comment start
+    if (char === '/' && next === '*') {
+      inBlockComment = true;
+      i += 2;
+      continue;
+    }
+
+    out += char;
+    i++;
   }
 
-  return value;
+  return out;
+}
+
+/**
+ * Stringify any JavaScript function and remove all comments.
+ *
+ * @param {Function} fn - The function to stringify.
+ * @returns {string|null} The cleaned stringified function or null if not a function or native.
+ */
+const stringifyFn = (fn) => {
+  if (typeof fn !== 'function') return null;
+
+  try {
+    const raw = fn.toString();
+
+    // skip native or bound functions
+    if (raw.includes('[native code]') || raw.includes('[object Function]')) {
+      return null;
+    }
+
+    // safe comment removal
+    let cleaned = stripComments(raw);
+
+    // remove leading indent and join into one line
+    cleaned = cleaned
+      .split('\n')
+      .map((line) => line.trimStart())
+      .join(' ')
+      .trim();
+
+    // check if it is top-level arrow function
+    const isArrowFunction = /^(\(?[^=(){};]*\)?)\s*=>/.test(cleaned);
+
+    // replace method shorthand to function expression
+    // Example: getFoo(a, b) { ... } -> function(a, b) { ... }
+    if (!isArrowFunction) {
+      const pos = cleaned.indexOf('(');
+      if (pos > 0 && cleaned.slice(0, pos).trim() !== 'function') {
+        cleaned = 'function' + cleaned.slice(pos);
+      }
+    }
+
+    return cleaned;
+  } catch {
+    return null;
+  }
 };
 
 module.exports = {

test/cases/_preprocessor/js-tmpl-hbs-compile-helpers-strict/expected/app.js

@@ -0,0 +1,10 @@
+import tmpl from './partials/content.hbs?lang=en';
+
+const locals = {
+  name: 'World',
+  people: ['Alexa <Amazon>', 'Cortana <MS>', 'Siri <Apple>'],
+};
+
+document.getElementById('main').innerHTML = tmpl(locals);
+
+console.log('>> app');

…ompile-undefined-var/expected/index.html …mpile-helpers-strict/expected/index.htmltest/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/index.html renamed to test/cases/_preprocessor/js-tmpl-hbs-compile-helpers-strict/expected/index.html test/cases/_preprocessor/js-tmpl-hbs-compile-undefined-var/expected/index.html renamed to test/cases/_preprocessor/js-tmpl-hbs-compile-helpers-strict/expected/index.html

@@ -0,0 +1,73 @@
+'use strict';
+
+const Handlebars = require('handlebars');
+
+// Open/close tag helpers
+
+const bold = function (options) {
+  return new Handlebars.SafeString(`<b>${options.fn(this)}</b>`);
+};
+
+const italic = function (options) {
+  return new Handlebars.SafeString(`<i>${options.fn(this)}</i>`);
+};
+
+// Self-closed tag helpers
+
+// usage: {{getFirstChars 'some text' len="3"}}
+const getFirstChars = function (content, options) {
+  if (typeof content !== 'string') return '';
+
+  const len = options.hash.len || content.length;
+  let out = content.slice(0, len);
+
+  return new Handlebars.SafeString(out);
+};
+
+// test the helper with complex code
+const complexHelper = function (content, options) {
+  let out = '';
+
+  // comment
+  const escapeHTML = (str) =>
+    str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+
+  const SEP = /(\s|&nbsp;|<br\s*\/?>)+/gi;
+  const parts = content.split(SEP).filter(Boolean);
+  const lastWord = parts.pop() || '';
+  const firstPart = parts.join('');
+
+  if (!firstPart.trim()) {
+    out = `<p class="title">${escapeHTML(lastWord)}</p>`;
+  } else {
+    out =
+      `<p class="title">` +
+      `${firstPart}` +
+      `<span class="inline-flex">` +
+      `${escapeHTML(lastWord)}` +
+      `</span>` +
+      `</p>`;
+  }
+
+  return new Handlebars.SafeString(out);
+};
+
+// test helper as arrow function
+const trim = (content, options) => {
+  let out = content;
+  out = out.trim();
+  return new Handlebars.SafeString(out);
+};
+
+export default {
+  bold,
+  italic,
+  getFirstChars,
+  complexHelper,
+  trim,
+};

test/cases/_preprocessor/js-tmpl-hbs-compile-helpers-strict/src/app.js

@@ -0,0 +1,21 @@
+<h1>Hello {{ name }}!</h1>
+
+<h3>Custom helpers in JS-template</h3>
+<ul>
+  <li>{{#bold}}bold{{/bold}}</li>
+  <li>{{#italic}}italic{{/italic}}</li>
+  <li>{{#italic}}italic{{/italic}}</li>
+  <li>getFirstChars 3: {{getFirstChars 'some text' len="3"}}</li>
+  <li>'trim' helper as arrow function: {{trim ' Trim spaces around '}}</li>
+</ul>
+
+<div><b>complexHelper</b></div>
+<div>{{complexHelper 'Text foo "bar"'}}</div>
+
+
+<h3>Variables in JS-template</h3>
+<ul>
+    {{#each people}}
+    <li>{{this}}</li>
+    {{/each}}
+</ul>

test/cases/_preprocessor/js-tmpl-hbs-compile-helpers-strict/src/helpers/my-helpers.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+import myHelpers from './src/helpers/my-helpers.js';
+
+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,
+        helpers: myHelpers,
+        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]',
+        },
+      },
+    ],
+  },
+};