feat(component): add less support

- Add optional support for less via `style` option

Author: wesleycho

addon/ng2/blueprints/component/index.js

@@ -1,7 +1,8 @@
 var stringUtils = require('ember-cli/lib/utilities/string');
+var fs = require('fs');
 
 module.exports = {
-  description: ''
+  description: 'Generates a component.',
 
   //locals: function(options) {
   //   // Return custom template variables here.
@@ -10,7 +11,10 @@ module.exports = {
   //   };
   //}
 
-  // afterInstall: function(options) {
-  //   // Perform extra work here.
-  // }
+  afterInstall: function(options) {
+    switch (options.style) {
+      case 'less':
+        fs.renameSync(options.project.root + '/src/app/components/' + options.args[1] + '/' + options.args[1] + '.css', options.project.root + '/src/app/components/' + options.args[1] + '/' + options.args[1] + '.less');
+    }
+  }
 };

addon/ng2/commands/generate.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var GenerateCommand = require('ember-cli/lib/commands/generate');
+
+module.exports = GenerateCommand.extend({
+  availableOptions: [
+    { name: 'dry-run', type: Boolean, default: false, aliases: ['d'] },
+    { name: 'verbose', type: Boolean, default: false, aliases: ['v'] },
+    { name: 'blueprint', type: String, default: 'ng2', aliases: ['b'] },
+    { name: 'name', type: String, default: '', aliases: ['n'] },
+    { name: 'style', type: String, default: 'css', aliases: ['s'] }
+  ],
+
+  _defaultBlueprint: function() {
+    if (this.project.isEmberCLIAddon()) {
+      return 'addon';
+    } else {
+      return 'ng2';
+    }
+  },
+});
+
+module.exports.overrideCore = true;

addon/ng2/index.js

@@ -6,7 +6,8 @@ module.exports = {
   includedCommands: function() {
     return {
       'new': require('./commands/new'),
-      'init': require('./commands/init')
+      'init': require('./commands/init'),
+      'generate': require('./commands/generate')
     };
   }
 };

lib/broccoli/angular2-app.js

@@ -1,6 +1,7 @@
 var Concat = require('broccoli-concat');
 var configReplace = require('./broccoli-config-replace');
 var compileWithTypescript = require('./broccoli-typescript').default;
+var compileLess = require('broccoli-less');
 var fs = require('fs');
 var Funnel = require('broccoli-funnel');
 var mergeTrees = require('broccoli-merge-trees');
@@ -45,7 +46,7 @@ Angular2App.prototype.toTree = function () {
         'systemjs/dist/system.src.js'
       ],
       destDir: 'vendor'
-    })
+    });
 
     // var appJs = new Concat(mergeTrees([tsTree, jsTree]), {
     //     inputFiles: [
@@ -55,7 +56,13 @@ Angular2App.prototype.toTree = function () {
     //     outputFile: '/app.js'
     // });
 
-    return mergeTrees([assetTree, tsSrcTree, tsTree, jsTree, this.index(), vendorJsTree], { overwrite: true });
+    var lessTree = new Funnel(sourceTree, {
+        include: ['**/*.less'],
+        allowEmpty: true
+    });
+    var lessSrcTree = compileLess(lessTree);
+
+    return mergeTrees([assetTree, tsSrcTree, tsTree, jsTree, this.index(), lessSrcTree, vendorJsTree], { overwrite: true });
 };
 
 /**

package.json

@@ -32,6 +32,7 @@
     "broccoli": "^0.16.3",
     "broccoli-concat": "0.0.13",
     "broccoli-funnel": "^1.0.0",
+    "broccoli-less": "^2.1.0",
     "broccoli-merge-trees": "^1.0.0",
     "broccoli-writer": "^0.1.1",
     "chalk": "^1.1.0",

tests/acceptance/generate.spec.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var ng     = require('../helpers/ng');
+var expect    = require('chai').expect;
+var Blueprint = require('ember-cli/lib/models/blueprint');
+var path      = require('path');
+var tmp       = require('../helpers/tmp');
+var root      = process.cwd();
+var conf      = require('ember-cli/tests/helpers/conf');
+var forEach   = require('lodash/collection/forEach');
+var existsSync = require('exists-sync');
+
+var defaultIgnoredFiles = Blueprint.ignoredFiles;
+
+describe('Acceptance: ng generate', function() {
+    this.timeout(20000);
+
+    before(function() {
+        conf.setup();
+    });
+
+    after(function() {
+        conf.restore();
+    });
+
+    beforeEach(function() {
+        Blueprint.ignoredFiles = defaultIgnoredFiles;
+
+        return tmp.setup('./tmp')
+            .then(function() {
+                process.chdir('./tmp');
+            }).then(function() {
+                return ng([
+                    'new',
+                    'foo',
+                    '--skip-npm',
+                    '--skip-bower',
+                    '--skip-git'
+                ]);
+            });
+    });
+
+    afterEach(function() {
+        return tmp.teardown('./tmp');
+    });
+    
+    function confirmBlueprinted(files) {
+        forEach(files, function(file) {
+            expect(existsSync(file));
+        });
+    }
+    
+    function confirmBlueprintedComponent(settings) {
+        settings = settings || {
+            style: 'css'
+        };
+        
+        var componentPath = path.join(process.cwd(), 'src/app/components/bar');
+        
+        var files = [
+            path.join(componentPath, 'bar.' + settings.style),
+            path.join(componentPath, 'bar.html'),
+            path.join(componentPath, 'bar.ts'),
+            path.join(componentPath, 'bar.spec.ts') 
+        ];
+        
+        confirmBlueprinted(files);
+    }
+    
+    function confirmBlueprintedService() {
+        process.chdir('./src/app/services/bar');
+        
+        var servicePath = path.join(process.cwd(), 'src/app/services/bar');
+        
+        var files = [
+            path.join(servicePath, 'bar.ts'),
+            path.join(servicePath, 'bar.spec.ts')
+        ];
+        
+        confirmBlueprinted(files);
+    }
+
+    it('component', function() {
+        return ng([
+            'generate',
+            'component',
+            'bar'
+        ]).then(confirmBlueprintedComponent());
+    });
+    
+    it('component with less', function() {
+        return ng([
+            'generate',
+            'component',
+            'bar',
+            '--style=less'
+        ]).then(confirmBlueprintedComponent({style: 'less'}));
+    });
+
+    it('services', function() {
+        return ng([
+            'generate',
+            'service',
+            'bar'
+        ]).then(confirmBlueprintedService);
+    });
+
+});