handlebars-webpack-plugin Problem with helpers

Problem with helpers

Open ivanchuk opened this issue 7 years ago • 14 comments

Please, could you add an example of a helper and how to use it. I can register a helper, but when I append it to a template, the helper did not render.

My helper is:

// helpers/salutation.js
module.exports = function(context, options) {
  return 'Hi, everybody';
};

and my template:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{htmlWebpackPlugin.options.title}}</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
      {{salutation}}
  </body>
</html>

Dec 05 '16 17:12 ivanchuk

Hi ivanchuk.

To better debug helpers i suggest you add an argument to it. i.e. call {{salutation "test-run"}}. If the partial was not loaded, handlebars will throw an error Error: Missing helper: "salutation". Without an argument it will fail silently.

If a helper was registered, a message is logged: HandlebarsPlugin: registering helper <name>.

Dec 05 '16 18:12 sagold

The safest way to register a helper might to use an expression function like

  helper: {
    salutation: function(context, options) {
      return 'Hi, everybody';
    }
}

or you could require it, which throws an error if it not found

  helper: {
    salutation: require("./app/helpers/salutation.helper")
}

In case you want to register multiple helpers in a single statement, you can use a path with wildcards, like

  helper: {
    "anIdThatWillBeIgnored": path.join(__dirname, "app/helpers/*.helper.js")
}

In the last cases, the helper function looks like

// app/helpers/salutation.helper.js
module.exports = function(context, options) {
  return 'Hi, everybody';
};

Just remember: A helper is assigned by its filename (without its js-extensions). If a filename.helper.js is found, helper.js will be stripped from the name, resulting in filename. i.e. adding a helper-file salutation.helper.js will be registered with {{salutation}} adding a helper-file salutation.js will also be registered with {{salutation}}.

Hope this helps. Regards

Dec 05 '16 19:12 sagold

solved, thank you, very much

this in webpack config: helpers: [path.join(process.cwd(), 'src', 'templates', 'helpers', '**', '.js')],* this in a helper (code.js): module.exports = function(context, options) { return 'foo'; }; this in a template: {{code 'test-param'}}

2016-12-05 20:01 GMT+01:00 Sascha Goldhofer [email protected]:

The safest way to register a helper might to use an expression function like

helper: { salutation: function(context, options) { return 'Hi, everybody'; } }

or you could require it, which throws an error if it not found

helper: { salutation: require("./app/helpers/salutation.helper") }

In case you want to register multiple helpers in a single statement, you can use a path with wildcards, like

helper: { "anIdThatWillBeIgnored": path.join(__dirname, "app/helpers/*.helper.js") }

Hope this helps. Regards

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sagold/handlebars-webpack-plugin/issues/8#issuecomment-264944037, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQ5LrgYi2ZC6xXqnb_-xD3nyTogSM9uks5rFF-jgaJpZM4LEeti .

Dec 07 '16 09:12 ivanchuk

How would this work if you had all your helpers in one file?

Jan 05 '17 16:01 jshjohnson

Hi jshjohnson.

You can always manually register partials in the plugin config like

{
  onBeforeAddPartials: function (Handlebars) {
    const helpers = require("../.../helpers.js");
    Object.keys(helpers).forEach((id) => {
      Handlebars.registerPartial(id, helpers[id]);
    });
  }
}

Jan 05 '17 16:01 sagold

Ah I solved it by doing this:

{
  ...
  helpers: require(path.join(process.cwd(), 'src/helpers/helpers.js'))
}

And exporting each function in that file

Jan 05 '17 16:01 jshjohnson

Thank you a lot.

I've finally coded my own plugin, because I need more control and a bootstrap 4 support in a near future

Jan 10 '17 15:01 ivanchuk

🤘

Jan 10 '17 16:01 sagold

@sagold can you please add the details in your comment to the readme documentation: https://github.com/sagold/handlebars-webpack-plugin/issues/8#issuecomment-264944037

The documentation says that you can register helpers but it doesn't really fully explain how to register helpers.

Since the syntax is different from the typical Handlebars.registerHelper syntax it's vital that it is covered in the documentation.

Sep 20 '18 00:09 Dan503

Hi, what would be the best way to import the helpers of this package?

https://github.com/helpers/handlebars-helpers

Dec 05 '19 16:12 fabian-michael

Nevermind ^^ just put ...handlebarsHelpers into helpers: { }

Dec 06 '19 13:12 fabian-michael

Thank you, for posting the solution!

Dec 06 '19 13:12 sagold

@Mycl95 Can you tell me more on how you imported the helpers of handlebars-helpers? Somehow I cannot figure it out. Thanks!

Mar 26 '20 22:03 buc-htl

@buc-htl3r I cannot remember so well but it should be pretty much be done like that:

// import the helpers
const handlebarsHelpers = require('handlebars-helpers');

// configure the plugin
new HandlebarsWebpackPlugin({
    // other config

    helpers: {
        // other helpers

        ...handlebarsHelpers
    }

    // or if you are using only the helpers
    helpers: handlebarsHelpers
})

Mar 27 '20 09:03 fabian-michael

handlebars-webpack-plugin handlebars-webpack-plugin copied to clipboard

Problem with helpers

handlebars-webpack-plugin
handlebars-webpack-plugin copied to clipboard