Grunt Handlebar precompiler templates - backbone.js

Question

I am working on a already built system developed in Laravel 5. For html, the previous developer has used Backbone but he has used some task manager. There are only two JS files present in layout. In one file he concates all basic required js files and all JS files of backbone. He named this file as admin.js. He has used another file and used all html templates as put it as pre-compiled handlebars templates and he named it as admin_template.js. He only uses these two js files across the system. I have got access of server code, but there is no such file that can indicate which build system he has used. There is no package.json on server. I guess he would have used these things on his local and never pushed these things to any repository or server.
By digging deep, I have come to know he has used Grunt. I have manged to generate admin.js file just like he has already generated. For templates he has used JST. I have searched and found one grunt-contrib-handlebars. I have managed to generate template file but it is not hundred percent matching with existing file. For example, here is the content of existing file
this["JST"] = this["JST"] || {};
this["JST"]["admin/Modules/Base/Templates/InModalMessageTemplate.html"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;
function program1(depth0,data) {
var buffer = "", stack1, helper;
buffer += "\n<div id=\"inModalMessageWrap\" class=\"bs-callout bs-callout-danger ";
if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "\">\n";
return buffer;
}
And for the same section, check my file
this["JST"] = this["JST"] || {};
this["JST"]["./public/assets/js/admin/Modules/Base/Templates/InModalMessageTemplate.html"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) {
var helper;
return "<div id=\"inModalMessageWrap\" class=\"bs-callout bs-callout-danger "
+ container.escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"type","hash":{},"data":data}) : helper)))
+ "\">\n";
},"3":function(container,depth0,helpers,partials,data) {
var helper;
return "<div id=\"inModalMessageWrap\" class=\"bs-callout bs-callout-success "
+ container.escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"type","hash":{},"data":data}) : helper)))
+ "\">\n";
}
Check the former 1 has some function program1(depth0,data) { but in my generated 1 its not. In former 1 we have compilerInfo like this.compilerInfo = [4,'>= 1.0.0']; and in my generated 1 it is missing at some place and it in some places it is like {"compiler":[7,">= 4.0.0"]
When I try to run project with my generated file, it says
`TypeError: templateSpec.call is not a function`
I have searched this error and it is about handlebar version problem. I have installed the said versions but this error isn't going any where. This is how my gruntfile looks like
module.exports = function(grunt) {
var libFiles = [
'./public/assets/js/admin/Modules/**/*.js'
];
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
stripBanners: true,
banner: '/*! Compiled on: <%= grunt.template.today("mm-dd-yyyy") %> */' + '\n\n',
separator: "\n",
process: function (src, filepath) {
return '// Source: '+filepath+'\n\n' + src+'\n'
}
},
dist: {
src: libFiles,
dest: './public/assets/js/compiled/admin.js',
},
},
handlebars: {
compile: {
options: {
namespace: 'JST'
},
files: {
'./public/assets/js/compiled/my_template.js': ['./public/assets/js/admin/Modules/**/*.html']
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-handlebars');
// Default task(s).
grunt.registerTask('default', ['concat', 'handlebars']);
};
Can any body let me know how can I fix this issue and can generate the exact file that is already there for precompiled handlebar templates?

Answer 1

couple of things:
first in "compiler":[7,">= 4.0.0"] 7 is the handlebars compiler version and >=4.0.0 means that that compiler version was introduced during the handlebars version 4. The original one has compiler v = 4. compiler v 5 came with handlebars 2.0.0-alpha, which means you need some grunt-contrib-handlebars which has a dependency on handelbars v less that 2. according to the release notes the v0.8.0 was the last one depending on handlebars 1.x.
this means you have to downgrade your precompiler in package.json like : "grunt-contrib-handlebars" : "=0.8.0".
Or you could update your runtime handlebars to the latest and hope that the precompiled templates run with no errors in the browser even if they are not the old ones anymore.
Then you have to make the names the same. I think you could set the cwd in your gruntfile's compile options section like: cwd: './public/assets/js/' or add something like
processName: function(filePath) {
return filePath.replace("./public/assets/js/", "");
},
to the options, to get rid of that part.
Third: it could be that the project uses partials. they look like {{> myPartialName}} in the templates, in that case and if they are also files then you need to add those as partials to your grunt task. partialRegex: /^myPartialName|^myOtherPartial.hbs$/,