dgeb / grunt-ember-templates Goto Github PK

It will be nice to have emblem support

https://github.com/wordofchristian/grunt-emblem

FYI: we're changing the name of grunt-contrib-lib to grunt-lib-contrib. Please update your deps!

Similar to the AMD issue, original Handlebars supports CommonJS style output using --commonjs or -c.

This should allow the same.

Please update to use handlebars 2.0.0 :)

Thanks 👍

I've got a config that looks like this:

ember_templates: {
    compile: {
        options: {
            templateName: function(sourceFile) {
                return sourceFile.replace(/src\/Lararjouren\/[a-z]+\/Resources\/templates\//i, '');
            }
        },
        files: {
            "src/Lararjouren/ArticleBundle/Resources/public/js/templates.js": "src/Lararjouren/ArticleBundle/Resources/templates/*.hbs",
            "src/Lararjouren/UserBundle/Resources/public/js/templates.js": "src/Lararjouren/UserBundle/Resources/templates/*.hbs"
        }
    }
}

When templates.js in UserBundle is created (the second entry in files hash) it contains all the templates from both bundles. Is this by design or a bug?

Is there any way to compile just the matching .hbs files into a template.js file?

Hey
(I am using yeoman 0.9.6 and grunt-ember-templates 0.4.1)

I have two templates in my app/scripts/templates. Now, when I specify files like

    ember_templates: {
      compile: {
        options: {
          templateName: function(sourceFile) {
            return sourceFile.replace(/app\/scripts\/templates\//, '');
          }
        },
        files: {
          'app/scripts/templates.js': ["app/scripts/templates/**/*.hbs"]
        }
      }
    }

I am getting this error

Error: Unable to read "app/scripts/templates/**/*.hbs" file (Error code: ENOENT).
<WARN> Ember Handlebars failed to compile app/scripts/templates/**/*.hbs. Use --force to continue. </WARN>

however, when I manually specify the files, like below, everything works out fine.

    ember_templates: {
      compile: {
        options: {
          templateName: function(sourceFile) {
            return sourceFile.replace(/app\/scripts\/templates\//, '');
          }
        },
        files: {
          'app/scripts/templates.js': ["app/scripts/templates/application.hbs",
          "app/scripts/templates/header.hbs"]
        }
      }
    }

any ideas?

I noticed there's already an existing doing this https://github.com/yaymukund/grunt-ember-handlebars

What's the reason for creating a new project instead of improving the existing one?

The explanation to that needs to be in the readme, since users will be confused by which to use.

Nice work on this one :)

grunt-contrib is a collection of officially supported grunt plugins, by using the contrib name you're making users believe that is the fact.

I would like to see this either be accepted as an official contrib plugin and moved to the gruntjs org or renamed to something else than grunt-contrib-*.

@tkellen Thoughts?

Hi! Great, you published that one just in time for me, thanks!

Unfortunately for me it doesn't do anything. I took all the relevant parts from you example project. No error, but also nothing happens. Any hint how I can debug?

Hi Dan, is there a reason you're holding off Handlebars 1.0.0?

I'd like to upgrade to 1.0.0 but ember-templates is forcing the use of COMPILER_REVISION 3.

Thanks!

Update the compiler to use handlebars 1.3 :) Thanks!

Peer [email protected] wants handlebars@~1.1

Hi,

I'm trying to pre-compile my templates in Grunt with your module. It works perfectly on Ember 1.9 but now we want to upgrade to the latest version of Ember. That's why I tried to use your module as described with the ember-template-compiler.js from downloaded from here.

This is how the task is setup:

module.exports = function (grunt) {
    grunt.initConfig({
        emberTemplates: {
            'default': {
                options: {
                    templateName: function (sourceFile) {
                        return sourceFile.replace('Views/Handlebars/', '').replace('.hbs', '');
                    },
                    templateCompilerPath: 'JS/libs/ember-template-compiler.js',
                    templateNamespace: 'HTMLBars',
                    handlebarsPath: 'JS/libs/handlebars-v3.0.1.js'
                },
                files: {
                    'JS/Templates.js': ['Views/Handlebars/*.hbs']
                }
            }
        }
    });

    //Load the Ember template compiler
    grunt.loadNpmTasks('grunt-ember-templates');

    //Register default grunt task
    grunt.registerTask('default', ['emberTemplates']);
};

But when I execute Grunt then this error occurs:

Running "emberTemplates:default" (emberTemplates) task
>> ReferenceError: window is not defined
Warning: Ember Handlebars failed to compile Views/Handlebars/addtrack.hbs. Use --force to continue.

Aborted due to warnings.

Update: for some reason NPM update was not working, I had to uninstall then re-install and it worked. If I could delete this I would. Sorry for jumping the gun.
. . .
Just updated to the latest release of ember/handlebars and loaded my app and got this error:

"Template was precompiled with an older version of Handlebars than the current runtime. Please update your precompiler to a newer version (>= 1.0.0) or downgrade your runtime to an older version (== 1.0.0-rc.4). "

However in looking at the repo here and handlebars.js it seems it has been updated so perhaps NPM is not finding the latest version?

https://github.com/toranb/ember-template-compiler/blob/master/vendor/ember-template-compiler.js

Just wondering: I'm using each a lot and I've seen in /lib/ember-template-compiler.js that it is not inside the knownHelpers:

  var options = {
    knownHelpers: {
      action: true,
      unbound: true,
      bindAttr: true,
      template: true,
      view: true,
      _triageMustache: true
    },
    data: true,
    stringParams: true
  };

Could it be that it could improve the performance of my application?

grunt-contrib-watch is a bit slow and when compared to grunt-este-watch it is really slow. I got other grunt-contrib-* scripts working but I couldn't get grunt-ember-templates to work. It might be configuration issue but I tried and I failed. Could someone kindly have a look and advise on how to get it working ... thanks

When upgrading my Ember instance to 1.9.1 which I run within Yeoman, I noticed that the ember-template-compiler is on version 1.8.0 while grunt-ember-templates' package.json expects 1.9.0-alpha, e.g.:

"devDependencies": {
    ...
    "ember-template-compiler": "~1.9.0-alpha"
  },

I don't know why the compiler went from 1.9 to 1.8, but my npm installer doesn't like the conflict.

Bryan

While running my tasks, jshint complain to how the template is compiled and suggest to use dot notation

app/templates/compiledTemplates.js
3 |Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
^ ['index'] is better written in dot notation.

1 error in 4 files
Warning: Task "jshint:files" failed. Use --force to continue.

I force and now I can work but I don't think is the best way using force..

Original Handlebars supports AMD style output using --amd or -a options used like:

handlebars -a -m -e hb ./js/photos > ./js/photos/templates.js

Since my entire application is based on Require.js, I need AMD compliant compiled templates.

All that is required is to wrap the current output with:

define(["Ember"],function(Ember){
    // Current output goes here.
});

I think it should be fairly simple to add this feature. Please let me know if it has already been added.

Hello. I'm running into an error when compiling my templates and it doesn't provide any useful information as to where the error is occurring.

Warning: Running "emberTemplates:dist" (emberTemplates) task
    >> Error: if doesn't match each
    Warning: Ember Handlebars failed to compile ... Use --force to continue.

It would be nice if it told me what line is causing this error. I've manually searched my template and it appears all of my if/else/each match each other (other colleagues have confirmed too).

I'm getting this result when compiling templates:

define(["ember"], function(Ember){

Ember.TEMPLATES["application"] = Ember.Handlebars.template([object Object]);

// ...

My grunt config looks something like this:

emberTemplates: {
  compile: {
    options: {
      amd: true,
      templateBasePath: PATH_SOURCE_HBS
    },
    files: [ {
      src: [ PATH_SOURCE_HBS + '**/*.hbs'],
      dest: PATH_SOURCE_JS_APP + 'templates.js'
    } ]
  }
}

It's only started recently, but nothing has changed in my configuration.

i have a structure
-login
---login.hbs
-users
---users.hbs
---create.hbs

With default settings if templates are generate i see template names
login/login
users/users
users/create

I need "login/login" to be "login" only
"users/users" to be "users"

I tried different variations without any luck - can you suggest how task should looks like.

I have upgraded the grunt-ember-templating, with in return installed ember-template-compiler 1.9.0 alfa.
Once i reconfigured grunt to compile the hbs files into 1 template.js, my app does not render the templates anymore.

i use nodeJS with express framework

If i replace the "new" template with the "old" template ([email protected] and ember-template-compiler 1.8.0) the application works like expected.

In order to be more consistent with other grunt plugins, I'm considering renaming the grunt task for this project from ember_templates to emberTemplates.

One of the issues I'm struggling with is whether to bump the minor version from 0.4 to 0.5 along with this change. Obviously, this would be a breaking change. However, I'm reticent to move to 0.5, considering that this plugin is compatible with grunt ~0.4, and most other grunt plugins are keeping pace with the same minor version.

Thoughts?

Here's the error:

$ grunt
Running "qunit:files" (qunit) task
>> 0 assertions passed (0ms)

Running "ember_templates:default" (ember_templates) task

TypeError: Object #<Object> has no method 'options'
    at Object.module.exports (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt-ember-templates/tasks/ember_templates.js:25:24)
    at Object.task.registerMultiTask.thisTask (/usr/local/share/npm/lib/node_modules/grunt/lib/grunt/task.js:109:15)
    at Object.task.registerTask.thisTask.fn (/usr/local/share/npm/lib/node_modules/grunt/lib/grunt/task.js:58:16)
    at Task.<anonymous> (/usr/local/share/npm/lib/node_modules/grunt/lib/util/task.js:343:36)
    at Task.<anonymous> (/usr/local/share/npm/lib/node_modules/grunt/lib/util/task.js:319:9)
    at Task.<anonymous> (/usr/local/share/npm/lib/node_modules/grunt/lib/util/task.js:346:11)
    at Task.<anonymous> (/usr/local/share/npm/lib/node_modules/grunt/lib/util/task.js:319:9)
    at module.exports.grunt.registerHelper.grunt.utils.spawn.cmd (/usr/local/share/npm/lib/node_modules/grunt/tasks/qunit.js:223:7)
    at Object.async.forEachSeries (/usr/local/share/npm/lib/node_modules/grunt/node_modules/async/lib/async.js:104:20)
    at Object.module.exports.grunt.registerHelper.grunt.utils.spawn.cmd (/usr/local/share/npm/lib/node_modules/grunt/tasks/qunit.js:130:23)

Here's my grunt.js file:

/*global module:false*/
module.exports = function(grunt) {
  // Project Options
  var metadata = {
    version: '1.0.0',
    namespacing: 'var Application = Ember.Application.create();',
    banner: '/*! Absolvte Client - v<%= meta.version %> - ' +
      '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
      '* https://absolvte-client.github.com/\n' +
      '* Copyright (c) <%= grunt.template.today("yyyy") %> ' +
      'Kurtis Rainbolt-Greene; Licensed MIT */'
  }

  var templates_options = {
    'default': {
      options: {
        templateName: function(sourceFile) {
          return sourceFile.replace(/application\/templates\//, '');
        }
      },
      files: {
        "build/templates.js": ["application/templates/**/*.handlebars"]
      }
    }
  }

  var concat_options = {
    styles: {
      src: [
        'styles/vendor/bootstrap.css',
        'styles/vendor/bootstrap-responsive.css',
        'styles/vendor/fontawesome.css',
        'styles/styles.css'
      ],
      dest: 'styles.min.css'
    },
    scripts: {
      src: [
        'scripts/vendor/bootstrap.js',
        'scripts/vendor/modernizr.js',
        'scripts/scripts.js'
      ],
      dest: 'build/scripts.js'
    },
    libraries: {
      src: [
        'application/libraries/jquery.js',
        'application/libraries/sugar.js',
        'application/libraries/handlebars.js',
        'application/libraries/ember.js',
        'application/libraries/ember-data.js'
      ],
      dest: 'build/libraries.js'
    },
    application: {
      src: [
        'application/models/model.js',
        'application/models/**/*.js',
        'application/controllers/controller.js',
        'application/controllers/**/*.js',
        'application/views/view.js',
        'application/views/**/*.js',
        'application/routers/router.js',
        'application/routers/**/*.js',
        'application/application.js'
      ],
      dest: 'build/application.js'
    }
  }

  var minify_options = {
    application: {
      src: [
        '<banner:meta.banner>',
        '<config:concat.libraries.dest>',
        '<banner:meta.namespacing>',
        'build/templates.js',
        '<config:concat.application.dest>'
      ],
      dest: 'application.min.js'
    },
    scripts: {
      src: [
        '<banner:meta.banner>',
        '<config:concat.scripts.dest>'
      ],
      dest: 'scripts.min.js'
    }
  }

  var jshint_options = {
    options: {
      curly: true,
      eqeqeq: true,
      immed: true,
      latedef: true,
      newcap: true,
      noarg: true,
      sub: true,
      undef: true,
      boss: true,
      eqnull: true,
      browser: true
    },
    globals: {
      jQuery: true
    }
  }

  // Project configuration.
  grunt.initConfig({
    meta: metadata,
    lint: { files: ['grunt.js'] },
    qunit: { files: ['test/**/*.html'] },
    ember_templates: templates_options,
    concat: concat_options,
    min: minify_options,
    watch: {
      files: ['<config:concat.application.src>'],
      tasks: ['concat:application']
    },
    jshint: jshint_options
  });

  // Extra tasks.
  grunt.loadNpmTasks('grunt-ember-templates');

  // Default task.
  grunt.registerTask('default', 'qunit ember_templates concat min');

};

We are relying heavily on ember components. Initially we had all our hbs templates associated with components written within "templates/components" folder, but since the number of components are growing we wanted to give more structure and define the templates within subfolder within components folder. When doing so, ember complains

You are looking for a [XYZ] component in the [SUBFOLDER] namespace, but the namespace could not be found

My compiled template looks like:

Ember.TEMPLATES["components/answers/checkbox-answer"] = ...

But things work if I were to make following change :

Ember.TEMPLATES["components/checkbox-answer"] = ...

The work around I have now is to modify gruntfile like this

 emberTemplates: {
        options: {
            templateName: function(sourceFile) {
                var fileName = sourceFile.replace(/.*\/templates\//, '');

                if((/^components\//).test(fileName)){
                    /*if component hbs files are defined within sub-folder, remove the subfolder part*/
                    return "components"+fileName.substr(fileName.lastIndexOf('/'));
                }
                return sourceFile.replace(/.*\/templates\//, '');
            }
        }

I am not sure if this is an ember thing or something else. But putting the question out there hoping for some better solution.

UPDATE
It seems like the problem is caused because of the way we were loading components. We are basically using helper function that loads the component based on parameter we pass to it like :

Ember.Handlebars.helpers[componentToLoad].call(this, options);

I checked the Ember.Handlebars.helpers and it doesn't seem to have components that were defined within any folder within component(but only those defined in components folder).

I'm posting this issue to let you know that we will be publishing Grunt 0.4 on Monday, February 18th.

If your plugin is not already Grunt 0.4 compatible, would you please consider updating it? For an overview of what's changed, please see our migration guide.

If you'd like to develop against the final version of Grunt before Monday, please specify "grunt": "0.4.0rc8" as a devDependency in your project. After Monday's release, you'll be able to use "grunt": "~0.4.0" to actually publish your plugin. If you depend on any plugins from the grunt-contrib series, please see our list of release candidates for compatible versions. All of these will be updated to final status when Grunt 0.4 is published.

Also, in an effort to reduce duplication of effort and fragmentation in the developer community, could you review the grunt-contrib series of plugins to see if any of your functionality overlaps significantly with them? Grunt-contrib is community maintained with 40+ contributors—we'd love to discuss any additions you'd like to make.

Finally, we're working on a new task format that doesn't depend on Grunt: it's called node-task. Once this is complete, there will be one more conversion, and then we'll never ask you to upgrade your plugins to support our changes again. Until that happens, thanks for bearing with us!

If you have any questions about how to proceed, please respond here, or join us in #grunt on irc.freenode.net.

Thanks, we really appreciate your work!

I've created the following grunt file:

https://gist.github.com/dd024b7637de636afce7

But I am not getting a result source file. I cannot see the task being called from the output either.

Could you let me know if my grunt.js file configuration is correct please?

For partial like post/_edit

how should I name the hbs file?

I specify multiple files in the task... while compiling and merging the templates... it doesn't flushes out the previous compiled templates from the 'templates' and 'output' array.

E.g.

ember_templates: {
compile: {
options: {
templateName: function(sourceFile) {
return sourceFile.replace(/path/to//, '');
}
},
files: {
"path/to/result.js": "path/to/source.handlebars",
"path/to/another.js": ["path/to/sources/.handlebars", "path/to/more/.handlebars"]
}
}
}

In this case... I get two files created result.js and another.js, which is correct... the issue is in another.js, it consists of the compiled templates from previous path (result.js = sources.handlebars) + ["path/to/sources/.handlebars", "path/to/more/.handlebars"]... ideally it should contains the compiled templates of only ["path/to/sources/.handlebars", "path/to/more/.handlebars"].

Please fix this.

Console output:

Error: no global: self or global found

Ember 2.0.0
EmberData: 2.0.0
Handlebars: 3.0.3 (tried with 2.0.0 also)

Do you want the grunt-ember name? grunt-ember is not really maintained and I'd be happy to give it away

this.merge does not exist in the compiled template closures.

Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', stack1, hashTypes, hashContexts, options, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;


  data.buffer.push("<div class=\"application\">\n   <div class=\"content\">\n       ");
  hashTypes = {};
  hashContexts = {};
  options = {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data};
  data.buffer.push(escapeExpression(((stack1 = helpers.outlet || depth0.outlet),stack1 ? stack1.call(depth0, "content", options) : helperMissing.call(depth0, "outlet", "content", options))));
  data.buffer.push("\n  </div>\n</div>");
  return buffer;

});

In case someone runs into the same issue, my templates weren't compiling as I didn't have an ending / in my path. Not sure if this is the way it's supposed to be or an issue. Feel free to close.

works:

templateBasePath: '<%= yeoman.app %>/scripts/templates/'

does not work:

templateBasePath: '<%= yeoman.app %>/scripts/templates'

As per documentation, value in key-value object map for files within the compile configuration, is supposed to accept minimatch.

Current results:
Input:

files: {
          'app/scripts/templates.js': 'app/scripts/**/*.handlebars'
        }

Output:

$ yeoman ember_templates
Running "ember_templates:compile" (ember_templates) task
<WARN> Object app/scripts/**/*.handlebars has no method 'forEach' Use --force to continue. </WARN>

And for input:

files: {
          'app/scripts/templates.js': ['app/scripts/**/*.handlebars']
        }

It outputs:

$ yeoman ember_templates
Running "ember_templates:compile" (ember_templates) task
>> Error: Unable to read "app/scripts/**/*.handlebars" file (Error code: ENOENT).
<WARN> Ember Handlebars failed to compile app/scripts/**/*.handlebars. Use --force to continue. </WARN>

What configuration should I use to convert all my *.handlebars to template.js single file?

EDIT: I've tried using the exact same code at Gruntfile.js at https://github.com/dgeb/yeoman-ember-basic-example with no success, same error.

Can we get an option to compress the templates before they are stuffed into a string? This way, it gets rid of all the leading tabs/spaces leading up to the actual content. I realize some wouldn't want this feature, but I'm very interested in reducing our HTML footprint.

Hello,

Since Ember.js 1.9, when using the templateCompilerPath and handlebarsPath options, this task fails with the following error:

>> ReferenceError: module is not defined
Warning: Ember Handlebars failed to compile templates/dummy_template.hbs. Use --force to continue.

It works fine though with the latest changes in the master, even with Ember.js 1.10.

Is a new release to NPM planned soon?

Thanks.

Can we have an option to just wrap the template content with Ember.Handlebars.compile() like in rake-pipeline-web-filters

https://github.com/wycats/rake-pipeline-web-filters/blob/master/lib/rake-pipeline-web-filters/handlebars_filter.rb#L37

This will greatly reduce the template compilation time during development.

Is there any progress on the alpha version? I'm still using this grunt lib to render my templates for a non-cli ember project, i'd like to know if this lib keeps available.

EDIT: I should have asked this question to the ember-template-compiler project I guess...

Can we add a check and see if grunt.version >= 0.4.0rc5 and potentially throw an error if the version isn't compatible?

I've seen some experiences in the wild where people spent a lot of time looking for something wrong and eventually finding their grunt version was wrong.

Currently ember-template-compiler has released version 1.9.0-alpha which has handlebars 2.0.0 as dependency. This is causing errors when running grunt-ember-templates, because it has a dependency >= 1 on ember-template-compiler which will pick up the alpha version.

Maybe it's better to change the dependency on ember-template-compiler in package.json to a stable version instead of latest.

Do not use ~v0.4.10 as it has handlebars 1.0.0 which is not compatible with the present version of ember ( rc-6 ) and gives an error.

For now ~0.4.9 is the right version.

I have two "base" directories for my templates (one in app and one is a set of copied vendor templates present in tmp/transpiled/templates) ...How to I indicate multiple base paths?

templateBasePath: /app/|/tmp/transpiled/app/templates//,

Probably need to coordinate with dependent libraries, but an upgrade to current handlebars would be great.

Disclaimer: I'm new to Ember.js

First off. Thank you. Grunt-ember-templates is great.

I'm using grunt-ember-templates on a phonegap/cordova project, where animated transitions are a must. I just tried to use https://github.com/billysbilling/ember-animated-outlet (while it is appears to use the older linkTo rather than link-to which should be getting updated soon). But during the template compilation phase, I receive an error:

Error: linkToAnimated doesn't match link-to

Would it be possible to either 1) all compilation with a linkToAnimated or better 2) pass an options hash with a custom link-to name?

I tried this

ember_templates:
   files: grunt.file.expandMapping(["**/*.tmpl"], "public/",
     cwd: "app/"
     rename: (destBase, destPath) -> destBase + (destPath.replace /\.tmpl$/, ".tmpl.js")
   )

which results in

Warning: Object #<Object> has no method 'indexOf' Use --force to continue.

Is there another way to specify a whole directory to be converted recursively, each file individually?

Starting in v1.10, Ember is distributing the ember-template-compiler with the ember install.
grunt-ember-templates uses the ember-template-compiler package on npm, which is stuck at 1.9.
Do you have any plans to work out compatibility for newer versions of Ember?
Otherwise, I'd suggest making a note on your Readme.

Hi,

This is what I get:

Running "emberTemplates:dist" (emberTemplates) task
Warning: Encoding::UndefinedConversionError on line ["654"] of C: "\x90" to UTF-8 in conversion from Windows-1252 to UTF-8
Run with --trace to see the full backtrace Use --force to continue.

I am using inside a grunt server task but using --trace doesn't make any difference in the output

I get an error when launching the app coming from EMBER.TEMPLATES['index']

TypeError: 'undefined' is not a function (evaluating 'this.merge(helpers, Ember.Handlebars.helpers)')

I am running handlebars-1.0.0-rc.4 and ember-1.0.0-rc.6

Any idea what is happening ?