Using handlebars-helpers with metalsmith (and consolidate.js)

[ismay]

I'm using metalsmith and metalsmith-templates to build a static site generator. Metalsmith-templates is based on tj holowaychuck's consolidate.js and I've configured it to use handlebars.

Now I'd really like to use handlebars-layouts as well. I've been trying to incorporate handlebars-layouts in the way suggested in your readme, by registering the helpers like so:

// excerpt from https://github.com/superwolff/cape/blob/handlebars-layouts/gulp/util/metalsmith.js#L24
var Handlebars = require('handlebars');
var layouts = require('handlebars-layouts');

layouts(Handlebars);

and am testing it by extending a simple (registered) partial:

{{! excerpt from https://github.com/superwolff/cape/blob/handlebars-layouts/src/index.html#L10 }}
{{#extend "footer"}}{{/extend}}

However this does not seem to work. All other bits of handlebars functionality seem to be working (partials, custom helpers, etc.), but the {{#extend}} block helper isn't processed at all. It turns up untouched in the output:

<!-- example excerpt from dist/index.html -->
{{#extend "footer"}}{{/extend}}

It looks to me like the handlebars-layouts block helpers aren't being registered. Which is weird because I am registering other helpers successfully (here for example). Could this be solved by using the Handlebars.registerHelper method perhaps? Or is handlebars-layouts incompatible with what I'm trying to do?

---

full code here: https://github.com/superwolff/cape/tree/handlebars-layouts

[Shannon Moeller]

At first glance what you're doing appears like it should work. I'll take a closer look when I'm in a place where I can setup a local test case.

[ismay]

At first glance what you're doing appears like it should work.

That's what I thought too. I'll keep testing, should I find anything I'll let you know.

[ismay]

I've tried using the assemble version (from their handlebars-helpers repo), but that returns the exact same result (untouched {{#extend}} in output).

I still don't really see what the snag is, but might it have something to do with the gulp (gulpsmith/metalsmith) build pipeline that I'm funnelling this all through? Maybe I should add an explicit .use() step to the build pipeline, to implement the helpers? That seems weird though, since the templates plugin should take care of all the compiling.

[Shannon Moeller]

My best guess right now is that an error is being thrown and gulpsmith is eating it. The extend helper will throw an error if a partial is asked for that is not yet registered in Handlebars. The Assemble version does too. Does metalsmith have something like .on('error', cb)?

[ismay]

My best guess right now is that an error is being thrown and gulpsmith is eating it.

I hadn't thought of that, and I think you're right. I'm not sure where exactly the error's being eaten, but there are definitely some metalsmith-templates errors not being logged. For example; including a partial that clearly doesn't exist ({{> nonexistingpartial}}) doesn't return an error and just returns the tag untouched.

[Shannon Moeller]

Did you try listening for an error event?

return gulpsmith()
    .metadata(site)
    .use(filePathTask)
    .use(templates(config.templates))
    .on('error', console.log.bind(console));

Just a stab in the dark. I haven't had an opportunity to clone your code.

[ismay]

Yeah I did. Doesn't make a difference unfortunately (the build task includes the metalsmith/gulpsmith task btw., errors should appear after starting build):

╰─$ gulp build
[15:55:53] Using gulpfile ~/Github/cape/gulpfile.js
[15:55:53] Starting 'clean:dist'...
[15:55:53] Finished 'clean:dist' after 8.2 ms
[15:55:53] Starting 'build'...
[15:56:06] Finished 'build' after 13 s

[ismay]

Should you want to check it out for yourself: I made a reduced test case, that illustrates the problem more clearly (it includes the ./dist/ folder as well). https://github.com/superwolff/cape/tree/handlebars-layouts

[ismay]

After testing some more, I've found that handlebars-layouts works without problems for me with just handlebars and/or consolidate.js.

It stops working when I try to compile through metalsmith. After some more testing, I found out that the handlebars-layouts helpers are working when called from the template (./templates/default.html), but not when called from the file that's being compiled (./src/index.html). In fact, none of the handlebars syntax in ./src/index.html is being compiled.

So I think it'd be best to close this issue, as it isn't related to anything handlebars-layouts is doing or not doing and is a pretty apparent metalsmith issue (or something that I'm doing wrong when using it). Thanks for the feedback!

[Shannon Moeller]

Cool. Good luck!