ember:component

app/templates/scripts/app.coffee

@@ -5,5 +5,6 @@ require 'scripts/controllers/*'
 require 'scripts/store'
 require 'scripts/models/*'
 require 'scripts/routes/*'
+require 'scripts/components/*'
 require 'scripts/views/*'
 require 'scripts/router'

app/templates/scripts/app.js

@@ -5,5 +5,6 @@ require('scripts/controllers/*');
 require('scripts/store');
 require('scripts/models/*');
 require('scripts/routes/*');
+require('scripts/components/*');
 require('scripts/views/*');
 require('scripts/router');

component/index.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var util = require('util');
+var yeoman = require('yeoman-generator');
+var fleck = require('fleck');
+var getJSPath = require('../utils/js_path');
+
+var ComponentGenerator = module.exports = function ComponentGenerator(args, options, config) {
+  yeoman.generators.NamedBase.apply(this, arguments);
+  this.dasherized_name = this._.dasherize(this.name);
+  this.componetized_name = this._.classify(this.dasherized_name);
+  this.slugified_name = this._.slugify(this.componetized_name);
+  this.underscorized_name = this._.underscored(this.name);
+
+  if (this.dasherized_name.indexOf('-') === 0) {
+    this.dasherized_name = this.dasherized_name.slice(1);
+  }
+
+  if (!this.componetized_name.match(/.*[A-Z].*[A-Z].*/)) {
+    throw 'Component name must be made of two or more words, e.g. x-player, UserProfile, my_big_gravatar';
+
+  }
+
+  // TODO Find a better way to do this. Passing `coffee` via options from controller seems to be a futile effort
+  this.options.coffee = options.coffee;
+  if (!this.options.coffee && this.expandFiles('app/scripts/**/*.coffee', {}).length > 0) {
+    this.options.coffee = true;
+  }
+};
+
+util.inherits(ComponentGenerator, yeoman.generators.NamedBase);
+
+ComponentGenerator.prototype._getJSPath = getJSPath;
+
+ComponentGenerator.prototype.files = function files() {
+  this.copy(this._getJSPath('component'), 'app/scripts/components/' + this.underscorized_name + this._getJSPath('_component'));
+  this.copy('component.hbs', 'app/templates/components/' + this.dasherized_name + '.hbs');
+};

component/templates/component.coffee

@@ -0,0 +1,2 @@
+<%= _.classify(appname) %>.<%= _.classify(name) %>Component = Ember.Component.extend(
+)

component/templates/component.hbs

@@ -0,0 +1 @@
+<p>I'm a component, <a href="http://emberjs.com/guides/components/" title="Ember.js Component Guide">customize</a> me please!</p>

component/templates/component.js

@@ -0,0 +1,2 @@
+<%= _.classify(appname) %>.<%= componetized_name %>Component = Ember.Component.extend({
+});

readme.md

@@ -17,6 +17,7 @@ This project is an ongoing community effort, and efforts to find the easiest way
   * [ember-model](#embermodel)
   * [ember-view](#emberview)
   * [ember-controller](#embercontroller)
+  * [ember-component](#embercomponent)
 * [Options](#options)
 * [Troubleshooting](#troubleshooting)
 * [Changelog](#changelog)
@@ -100,6 +101,14 @@ see:
 
 * http://localhost:9000/#/bar
 
+### ember:component
+
+Creates a component and a template for that component, as in:
+
+  `yo ember:component x-player`
+
+Which can be used in the application with `{{x-player}}`.
+
 ## Options
 
 * `--skip-install`