import custom handlebars template

[yonatan-bin]

Hi,
great loader.
is there an option to add a custom handlebar template to it, similar to the "cssTemplate" var in the sprite-smith grunt plugin.

thanks in advance.

[mixtur]

I updated readme with some instructions on that topic. Is that ok or you want an actual option in config?

[yonatan-bin]

Thanks for the fast reply.

i have an handlebar template i constructed my self (few edits to the on in npm lib) i just want to point to it so the loader will use it instead of the one in the npm lib.

i could not understand from the readme how to do it.
in grunt plugin i just use the cssTemplate option to reference for the template location.

it will be great if you can add this option in the config, but any other solution that can load custom template from a provided path will help me a lot.

thanks.

[mixtur]

Yeah my English sucks. And I am not even sure how to explain it in my own language:)
Anyway. Updated readme more.
To be clear. Currently there are no "official" way to do what you want. But since I used spritesheet-templates, and spritesheet-templates allows you to create custom templates, you can leverage that and register your own template, and then tell webpack-spritesmith to use that template.
You can do that with

  //webpack.config.js
  var templater = require('spritesheet-templates');

  templater.addTemplate('template_name', templateFunction)
  //or
  var fs = require('fs');
  var handlebarsCode = fs.readFileSync('/path/to/template.handlebars');
  templater.addHandlebarsTemplate('template_name', handlebarsCode);

 ...
 new SpritesmithPlugin({
   target: {
     css: [
       ['/path/to/generated-source-file', {format: 'template_name'}]
     ]
   }
 })

I'll add explicit option to config soon.

[yonatan-bin]

thanks a lot. :)

it worked, but only when i loaded the master branch (it could not find the template in latest release version).
also had to add encoding for it to read my handlbars.

handlebarsCode = fs.readFileSync('/path/mytemplate', 'utf8');

[fruchtose]

@mixtur, your advice is simply wrong, I'm afraid. The version of spritesheet-templates being loaded will not be the same instance as the one used by webpack-spritesmith. If you install spritesheet-templates as a dependency, that will be a separate instance of that library. To use the correct instance of spritesheet-templates, you must load it like this:

var templater = require('webpack-spritesmith/node_modules/spritesheet-templates');

It is ugly and hacky, but it will work.

[mixtur]

Not always. With npm 3+ you have more flat directory structure. And It is kinda works. Sometimes. Need more investigation to be sure.

Anyway It should be implemented inside webpack-spritesmith, and what I currently adviced is a dirty temporary workaround. I think I'll deal with it in upcoming weekend.

[fruchtose]

You're right, I actually was having an issue with the install order. Sorry about that, I'm still getting used to Node 4.

[mixtur]

in 0.2.5 you can define custom template.

So what I did via hack above, now can be achieved this way:

 ...
 new SpritesmithPlugin({
   ...
   target: {
     css: [
       ['/path/to/generated-source-file', {format: 'template_name'}]
     ]
   },
   customTemplates: {
      template_name: templateFunction,
      //or 
      template_name: '/path/to/template.handlebars'
   }
 })

The hack should still work though.
Closing it now.