Problem with helpers - Githubissues

ivanchuk commented 7 years ago

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>

sagold commented 7 years ago

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>.

sagold commented 7 years ago

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

ivanchuk commented 7 years ago

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 notifications@github.com:

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 .

jshjohnson commented 7 years ago

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

sagold commented 7 years ago

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]);
    });
  }
}

jshjohnson commented 7 years ago

Ah I solved it by doing this:

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

And exporting each function in that file

ivanchuk commented 7 years ago

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

sagold commented 7 years ago

🤘

Dan503 commented 6 years ago

@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.

fabian-michael commented 4 years ago

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

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

fabian-michael commented 4 years ago

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

sagold commented 4 years ago

Thank you, for posting the solution!

buc-htl commented 4 years ago

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

fabian-michael commented 4 years ago

@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
})

sagold / handlebars-webpack-plugin

Problem with helpers #8