feat(app): additional app generator option for ES6 preprocessing usin…

…g babel Added a follow up question to the first language selection question to enable ES6 client support with Babel. Related issue: Any plans for es6 and traceur support? #684
angular-fullstack · Jun 16, 2015 · bc03aba · bc03aba
1 parent f6f912f
commit bc03aba
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 8 deletions.
diff --git a/app/index.js b/app/index.js
@@ -78,6 +78,13 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
 
           return filterMap[val];
         }
+      }, {
+        type: "confirm",
+        name: "babel",
+        message: "Would you like to use Javascript ES6 in your client by preprocessing it with Babel?",
+        when: function (answers) {
+          return answers.script === 'js';
+        }
       }, {
         type: "list",
         name: "markup",
@@ -110,6 +117,9 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
           return answers.bootstrap;
         }
       }], function (answers) {
+
+        this.filters.babel = !!answers.babel;
+        if(this.filters.babel){ this.filters.js = true; }
         this.filters[answers.script] = true;
         this.filters[answers.markup] = true;
         this.filters[answers.stylesheet] = true;
@@ -211,6 +221,7 @@ var AngularFullstackGenerator = yeoman.generators.Base.extend({
 
     if(this.filters.ngroute) filters.push('ngroute');
     if(this.filters.uirouter) filters.push('uirouter');
+    if(this.filters.babel) extensions.push('babel');
     if(this.filters.coffee) extensions.push('coffee');
     if(this.filters.js) extensions.push('js');
     if(this.filters.html) extensions.push('html');

diff --git a/app/templates/Gruntfile.js b/app/templates/Gruntfile.js
@@ -127,6 +127,13 @@ module.exports = function (grunt) {
           '<%%= yeoman.client %>/{app,components}/**/*.spec.{coffee,litcoffee,coffee.md}'
         ],
         tasks: ['karma']
+      },<% } %><% if(filters.babel) { %>
+      babel: {
+        files: [
+          '<%%= yeoman.client %>/{app,components}/**/*.js',
+          '!<%%= yeoman.client %>/{app,components}/**/*.spec.js'
+        ],
+        tasks: ['babel']
       },<% } %>
       gruntfile: {
         files: ['Gruntfile.js']
@@ -135,7 +142,11 @@ module.exports = function (grunt) {
         files: [
           '{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.css',
           '{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.html',
+          <% if(filters.babel) { %>
+          '.tmp/{app,components}/**/*.js',
+          <% } else { %>
           '{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.js',
+          <% } %>
           '!{.tmp,<%%= yeoman.client %>}{app,components}/**/*.spec.js',
           '!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.mock.js',
           '<%%= yeoman.client %>/assets/images/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}'
@@ -442,14 +453,16 @@ module.exports = function (grunt) {
     // Run some tasks in parallel to speed up the build process
     concurrent: {
       server: [<% if(filters.coffee) { %>
-        'coffee',<% } %><% if(filters.jade) { %>
+        'coffee',<% } %><% if(filters.babel) { %>
+        'babel',<% } %><% if(filters.jade) { %>
         'jade',<% } %><% if(filters.stylus) { %>
         'stylus',<% } %><% if(filters.sass) { %>
         'sass',<% } %><% if(filters.less) { %>
         'less',<% } %>
       ],
       test: [<% if(filters.coffee) { %>
-        'coffee',<% } %><% if(filters.jade) { %>
+        'coffee',<% } %><% if(filters.babel) { %>
+        'babel',<% } %><% if(filters.jade) { %>
         'jade',<% } %><% if(filters.stylus) { %>
         'stylus',<% } %><% if(filters.sass) { %>
         'sass',<% } %><% if(filters.less) { %>
@@ -465,7 +478,8 @@ module.exports = function (grunt) {
         }
       },
       dist: [<% if(filters.coffee) { %>
-        'coffee',<% } %><% if(filters.jade) { %>
+        'coffee',<% } %><% if(filters.babel) { %>
+        'babel',<% } %><% if(filters.jade) { %>
         'jade',<% } %><% if(filters.stylus) { %>
         'stylus',<% } %><% if(filters.sass) { %>
         'sass',<% } %><% if(filters.less) { %>
@@ -551,6 +565,24 @@ module.exports = function (grunt) {
           ext: '.js'
         }]
       }
+    },<% } %><% if(filters.babel) { %>
+
+    // Compiles ES6 to JavaScript using Babel
+    babel: {
+      options: { 
+        sourceMap: true
+      },
+      server: {
+        files: [{
+          expand: true,
+          cwd: 'client',
+          src: [
+            '{app,components}/**/*.js',
+            '!{app,components}/**/*.spec.js'
+          ],
+          dest: '.tmp'
+        }]
+      }
     },<% } %><% if(filters.stylus) { %>
 
     // Compiles Stylus to CSS
@@ -620,10 +652,16 @@ module.exports = function (grunt) {
         },
         files: {
           '<%%= yeoman.client %>/index.html': [
-              ['{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.js',
-               '!{.tmp,<%%= yeoman.client %>}/app/app.js',
-               '!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.spec.js',
-               '!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.mock.js']
+               [
+                 <% if(filters.babel) { %>
+                 '.tmp/{app,components}/**/*.js',
+                 <% } else { %>
+                 '{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.js',
+                 <% } %>
+                 '!{.tmp,<%%= yeoman.client %>}/app/app.js',               
+                 '!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.spec.js',
+                 '!{.tmp,<%%= yeoman.client %>}/{app,components}/**/*.mock.js'               
+               ]
             ]
         }
       },<% if(filters.stylus) { %>

diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -45,7 +45,8 @@
     "grunt-contrib-watch": "~0.6.1",<% if(filters.coffee) { %>
     "grunt-contrib-coffee": "^0.10.1",<% } %><% if(filters.jade) { %>
     "grunt-contrib-jade": "^0.11.0",<% } %><% if(filters.less) { %>
-    "grunt-contrib-less": "^0.11.0",<% } %>
+    "grunt-contrib-less": "^0.11.0",<% } %><% if(filters.babel) { %>
+    "grunt-babel": "~5.0.0",<% } %>
     "grunt-google-cdn": "~0.4.0",
     "grunt-newer": "~0.7.0",
     "grunt-ng-annotate": "^0.2.3",

diff --git a/app/templates/client/index.html b/app/templates/client/index.html
@@ -50,7 +50,11 @@
       <script src="socket.io-client/socket.io.js"></script><% } %>
     <!-- endbuild -->
 
+        <% if(filters.babel) { %>
+        <!-- build:js(.tmp) app/app.js -->
+        <% } else { %>
         <!-- build:js({.tmp,client}) app/app.js -->
+        <% } %>
         <script src="app/app.js"></script>
           <!-- injector:js -->
           <!-- endinjector -->

diff --git a/test/test-file-creation.js b/test/test-file-creation.js
@@ -145,6 +145,49 @@ describe('angular-fullstack generator', function () {
 //      });
     });
 
+    describe('with Babel ES6 preprocessor', function() {
+      beforeEach(function() {
+        helpers.mockPrompt(gen, {
+          script: 'js',
+          babel: true,
+          markup: 'jade',
+          stylesheet: 'less',
+          router: 'uirouter'
+        });
+      });
+
+      it('should run client tests successfully', function(done) {
+        this.timeout(60000);
+        gen.run({}, function () {
+          exec('grunt test:client', function (error, stdout, stderr) {
+            expect(stdout, 'Client tests failed \n' + stdout ).to.contain('Executed 1 of 1\u001b[32m SUCCESS\u001b');
+            done();
+          });
+        });
+      });
+
+      it('should pass jshint', function(done) {
+        this.timeout(60000);
+        gen.run({}, function () {
+          exec('grunt jshint', function (error, stdout, stderr) {
+            expect(stdout).to.contain('Done, without errors.');
+            done();
+          });
+        });
+      });
+
+      it('should run server tests successfully', function(done) {
+        this.timeout(60000);
+        gen.run({}, function () {
+          exec('grunt test:server', function (error, stdout, stderr) {
+            expect(stdout, 'Server tests failed (do you have mongoDB running?) \n' + stdout).to.contain('Done, without errors.');
+            done();
+          });
+        });
+      });
+    });
+
+
     describe('with other preprocessors and oauth', function() {
       beforeEach(function() {
         helpers.mockPrompt(gen, {