Usage of Handlebars templates

[chkpnt]

Currently, I'm using the following rule:

            {
                test: /\.hbs$/,
                use: [
                    {
                        loader: "handlebars-loader",
                        options: {
                            runtime: "handlebars/runtime",
                            inlineRequires: /(\/img\/|\/_svg\/)/,
                        },
                    },
                    {
                        loader: "extract-loader",
                    },
                    {
                        loader: "html-loader",
                        options: {
                            esModule: false,
                            minimize: false,
                            preprocessor: (content, loaderContext) => {
                                var replaceWithSvg = function (arg1, arg2) {
                                    return fs.readFileSync("./src/_svg/" + arg2, "utf8", function (err, data) {
                                        if (err) {
                                            return "";
                                        }

                                        return data.fulltrim();
                                    });
                                };

                                content = content.replace(/<!-- @insertSvg (.*) -->/g, replaceWithSvg);

                                return content;
                            },
                            sources: false,
                        },
                    },
                ],
            },

I'm trying to move to preprocessor: 'handlebars', but how would I integrate my custom preprocessor which replaces <!-- @insertSvg (.*) --> with the svg's file content?

I've also issues with my helpers: Currently, all of my helpers are in one file handlebars-helper.js, where they are registered using Handlebars.registerHelper(...). handlebars-helpers.js is imported in my entry point app.js. When using preprocessor: 'handlebars', this doesn't work: It seems the helper needs to be available during the compilation.

[webdiscus]

Hallo @chkpnt,

Thanks for the question.
I will try to reproduce your interesting use case and find a solution.

[webdiscus]

As temporary solution, you can insert SVG-content into HTML using inline SVG feature:

Add to Webpack config the rule:

module: {
  rules: [
    {
      test: /\.(png|jpe?g|svg|webp|ico)$/i,
      oneOf: [
        // inline image using `?inline` query
        {
          resourceQuery: /inline/,
          type: 'asset/inline',
        },
        // load image as file
        {
          type: 'asset/module',
          parser: {
            dataUrlCondition: {
              maxSize: 1024,
            },
          },
          generator: {
            filename: 'assets/img/[name].[hash:8][ext]',
          },
        },
      ],
    },
  ],
}

In hbs template insert all your SVG source filenames with ?inline query (exactly as in webpack rule):

<img src="./src/_svg/pic1.svg?inline">
<img src="./src/_svg/pic2.svg?inline">
...

The bundler plugin replaces the source img tag with SVG content:

<svg>
  ... pic1 ...
</svg>
<svg>
  ... pic2 ...
</svg>
...

[webdiscus]

@chkpnt,

You can use your custom helpers, see please preprocessorOptions.helpers.

This option can be as array of paths to your helper files or the object containing helper functions.
The helpers must be as a pure function w/o registration. The bundler registrates helpers automatically.

P.S. can you please create a small repo with your use cases and I help you to configure your project.

[webdiscus]

@chkpnt

to use your own preprocessor you can use the beforePreprocessor callback option or beforePreprocessor hook.

In the beforePreprocessor you can modify the source template content.

See the test case hook-beforePreprocessor.

[webdiscus]

You can see here how works Hooks & Callbacks.

[chkpnt]

Thanks for your good input! Using beforePreprocessor works fine:

            beforePreprocessor: (content, { resourcePath, data }) => {
                if (resourcePath.endsWith(".hbs")) {
                    var replaceWithSvg = function (arg1, arg2) {
                        return fs.readFileSync("./src/_svg/" + arg2, "utf8", function (err, data) {
                            if (err) {
                                return "";
                            }

                            return data.fulltrim();
                        });
                    };

                    content = content.replace(/<!-- @insertSvg (.*) -->/g, replaceWithSvg);

                    return content;
                }
            },

But I like the idea to use a ?inline-query! Sounds to be a cleaner approach.

Regarding the helpers: I can't simply extract them as pure-functions, as my handlebars-helpers.js import various other code. But after comparing the bundle bundled with handlebars-loader and html-bundler-webpack-plugin, I've found the issue: In my handlebars-helpers.js, I'm using import Handlebars from "handlebars/runtime.js";, but in the preprocessor, you require handlebars/dist/handlebars.runtime.min.js. So it seems my helpers were registered on the "wrong" Handlebars instance: After I changed the import statement to handlebars/dist/handlebars.runtime.min.js, the helpers are working again. :-)

[chkpnt]

Maybe the runtime should be configurable as it is in handlebars-loader.

[webdiscus]

Maybe the runtime should be configurable as it is in handlebars-loader.

Can you please provide some text for the README: for what this option would be useful, including a simple use case?
Of cause I can add the runtime option, but I would like to explain to users why this option is necessary at all.