Merge pull request #1971 from angular-fullstack/webpack

Webpack

Author: Awk34

circle.yml

@@ -3,7 +3,7 @@ machine:
   node:
     version: 5.11.1
   post:
-    - npm install -g gulp-cli grunt-cli bower
+    - npm install -g gulp-cli
 
 ## Customize checkout
 checkout:
@@ -17,6 +17,9 @@ dependencies:
   # builds. If you need to, you can add custom paths to cache:
   cache_directories:
     - "test/fixtures/node_modules"
+  post:
+    - wget https://saucelabs.com/downloads/sc-latest-linux.tar.gz
+    - tar -xzf sc-latest-linux.tar.gz
 
 ## Custom notifications
 #notify:
@@ -25,3 +28,12 @@ notify:
     # A list of hook hashes, containing the url field
     # gitter hook
     - url: https://webhooks.gitter.im/e/ac3980c61cb722b9e789
+
+test:
+  pre:
+    - cd sc-*-linux && ./bin/sc --user $SAUCE_USERNAME --api-key $SAUCE_ACCESS_KEY --readyfile ~/sauce_is_ready:
+        background: true
+    # Wait for tunnel to be ready
+    - while [ ! -e ~/sauce_is_ready ]; do sleep 1; done
+  post:
+    - killall --wait sc  # wait for Sauce Connect to close the tunnel

gulpfile.js

@@ -35,7 +35,7 @@ const transpile = lazypipe()
     .pipe(babel);
 
 gulp.task('clean', () => {
-    return del(['generators/**/*', './test/(**|!fixtures/node_modules|!fixtures/bower_components)/*']);
+    return del(['generators/**/*', './test/(**|!fixtures/node_modules)/*']);
 });
 
 gulp.task('babel', () => {
@@ -113,10 +113,7 @@ function updateFixtures(target) {
     const dest = __dirname + (deps ? '/angular-fullstack-deps/' : '/test/fixtures/');
     const appName = deps ? 'angular-fullstack-deps' : 'tempApp';
 
-    return Promise.all([
-        processJson('templates/app/_package.json', dest + 'package.json', {appName, genVer, private: !deps, test: test}),
-        processJson('templates/app/_bower.json', dest + 'bower.json', {appName, genVer, private: !deps, test: test})
-    ]);
+    return processJson('templates/app/_package.json', dest + 'package.json', {appName, genVer, private: !deps, test: test});
 }
 
 gulp.task('updateFixtures', cb => {
@@ -143,16 +140,13 @@ function execAsync(cmd, opt) {
 }
 
 gulp.task('installFixtures', function() {
-    gutil.log('installing npm & bower dependencies for generated app');
+    gutil.log('installing npm dependencies for generated app');
     let progress = setInterval(() => {
         process.stdout.write('.');
     }, 1 * 1000);
     shell.cd('test/fixtures');
 
-    return Promise.all([
-        execAsync('npm install --quiet', {cwd: '../fixtures'}),
-        execAsync('bower install', {cwd: '../fixtures'})
-    ]).then(() => {
+    execAsync('npm install --quiet', {cwd: '../fixtures'}).then(() => {
         process.stdout.write('\n');
         if(!process.env.SAUCE_USERNAME) {
             gutil.log('running npm run-script update-webdriver');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-angular-fullstack",
-  "version": "3.7.5",
+  "version": "4.0.0-beta",
   "description": "Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node",
   "keywords": [
     "yeoman-generator",
@@ -45,6 +45,7 @@
     "gulp-babel": "^6.1.2",
     "gulp-beautify": "^2.0.0",
     "gulp-filter": "^4.0.0",
+    "gulp-tap": "^0.1.3",
     "insight": "~0.8.1",
     "lodash": "^4.13.1",
     "semver": "^5.1.0",

src/generators/app/index.js

@@ -11,13 +11,17 @@ import insight from '../insight-init';
 import {exec} from 'child_process';
 import babelStream from 'gulp-babel';
 import beaufityStream from 'gulp-beautify';
+import tap from 'gulp-tap';
 import filter from 'gulp-filter';
 import semver from 'semver';
 
 export class Generator extends Base {
   constructor(...args) {
     super(...args);
 
+    this.env.alias('angular-fullstack', 'afs');
+    this.env.alias('afs', 'angular-fullstack');
+
     this.argument('name', { type: String, required: false });
 
     this.option('skip-install', {
@@ -126,12 +130,12 @@ export class Generator extends Base {
               }[val];
             }
           }, {
-          // TODO: enable once Babel setup supports Flow
-          //   type: 'confirm',
-          //   name: 'flow',
-          //   message: 'Would you like to use Flow types with Babel?',
-          //   when: answers => answers.transpiler === 'babel'
-          // }, {
+            type: 'confirm',
+            name: 'flow',
+            default: false,
+            message: 'Would you like to use Flow types with Babel?',
+            when: answers => answers.transpiler === 'babel'
+          }, {
             type: 'list',
             name: 'markup',
             message: 'What would you like to write markup with?',
@@ -449,24 +453,32 @@ export class Generator extends Base {
            ]);
          */
 
+        const flow = this.filters.flow;
+
         let babelPlugins = [
           'babel-plugin-syntax-flow',
           'babel-plugin-syntax-class-properties'
         ];
 
-        // TODO: enable once Babel setup supports Flow
-        // if(this.filters.babel && !this.filters.flow) {
+        if(this.filters.babel && !flow) {
           babelPlugins.push('babel-plugin-transform-flow-strip-types');
-        // }
+        }
 
-        const jsFilter = filter(['client/**/*.js'], {restore: true});
+        let jsFilter = filter(['client/**/*.js'], {restore: true});
         this.registerTransformStream([
           jsFilter,
           babelStream({
             plugins: babelPlugins.map(require.resolve),
             /* Babel get's confused about these if you're using an `npm link`ed
                 generator-angular-fullstack, thus the `require.resolve` */
-            // retainLines: true,
+            shouldPrintComment(commentContents) {
+              if(flow) {
+                return true;
+              } else {
+                // strip `// @flow` comments if not using flow
+                return !(/@flow/.test(commentContents));
+              }
+            },
             babelrc: false  // don't grab the generator's `.babelrc`
           }),
           beaufityStream({
@@ -493,6 +505,42 @@ export class Generator extends Base {
           jsFilter.restore
         ]);
 
+        /**
+         * TypeScript doesn't play nicely with things that don't have a default export
+         */
+        if(this.filters.ts) {
+          const modulesToFix = [
+            ['angular', 'angular'],
+            ['ngCookies', 'angular-cookies'],
+            ['ngResource', 'angular-resource'],
+            ['ngSanitize', 'angular-sanitize'],
+            ['uiRouter', 'angular-ui-router'],
+            ['uiBootstrap', 'angular-ui-bootstrap'],
+            ['ngMessages', 'angular-messages'],
+            ['io', 'socket.io-client']
+          ];
+          function replacer(contents) {
+            modulesToFix.forEach(([moduleName, importName]) => {
+              contents = contents.replace(
+                `import ${moduleName} from '${importName}'`,
+                `const ${moduleName} = require('${importName}')`
+              );
+            });
+            return contents;
+          }
+
+          let tsFilter = filter(['client/**/*.ts'], {restore: true});
+          this.registerTransformStream([
+            tsFilter,
+            tap(function(file, t) {
+              var contents = file.contents.toString();
+              contents = replacer(contents);
+              file.contents = new Buffer(contents);
+            }),
+            tsFilter.restore
+          ]);
+        }
+
         let self = this;
         this.sourceRoot(path.join(__dirname, '../../templates/app'));
         this.processDirectory('.', '.');
@@ -515,14 +563,10 @@ export class Generator extends Base {
     };
   }
 
-  get install() {
-    return {
-      installDeps: function() {
-        this.installDependencies({
-          skipInstall: this.options['skip-install']
-        });
-      }
-    };
+  install() {
+    if(!this.options['skip-install']) {
+      this.spawnCommand('npm', ['install']);
+    }
   }
 
   get end() {

src/test/endpoint.test.js

@@ -53,12 +53,8 @@ function runEndpointGen(name, opt={}) {
         dir = _dir;
 
         // symlink our dependency directories
-        return Promise.all([
-          fs.mkdirAsync(dir + '/client').then(() => {
-            return fs.symlinkAsync(__dirname + '/fixtures/bower_components', dir + '/client/bower_components');
-          }),
-          fs.symlinkAsync(__dirname + '/fixtures/node_modules', dir + '/node_modules')
-        ]).then(done);
+        return fs.symlinkAsync(__dirname + '/fixtures/node_modules', dir + '/node_modules')
+          .then(done);
       })
       .withOptions(options)
       .withArguments([name])
@@ -250,4 +246,4 @@ describe('angular-fullstack:endpoint', function() {
       return jshintDir(dir, 'foo-bar').should.be.fulfilled();
     });
   });
-});
+});

src/test/fixtures/.bowerrc

@@ -26,7 +26,7 @@
       "models": true,
       "mongooseModels": true,
       "mongoose": true,
-      "grunt": true,
+      "gulp": true,
       "mocha": true,
       "jasmine": false,
       "expect": true

src/test/fixtures/.yo-rc.json

@@ -49,21 +49,22 @@ export function app(options) {
     'client/.htaccess',
     'client/favicon.ico',
     'client/robots.txt',
-    'client/index.html',
+    'client/_index.html',
+    `client/polyfills.${script}`,
     'client/app/app.' + script,
+    'client/app/app.config.' + script,
     'client/app/app.' + stylesheet,
-    'client/app/main/main.' + script,
+    'client/app/main/main.component.' + script,
+    'client/app/main/main.component.spec.' + script,
+    'client/app/main/main.routes.' + script,
     'client/app/main/main.' + markup,
     'client/app/main/main.' + stylesheet,
-    'client/app/main/main.controller.' + script,
-    'client/app/main/main.controller.spec.' + script,
     'client/assets/images/yeoman.png',
     'client/components/footer/footer.' + stylesheet,
     'client/components/footer/footer.' + markup,
-    'client/components/footer/footer.directive.' + script,
+    'client/components/footer/footer.component.' + script,
     'client/components/navbar/navbar.' + markup,
-    'client/components/navbar/navbar.controller.' + script,
-    'client/components/navbar/navbar.directive.' + script,
+    'client/components/navbar/navbar.component.' + script,
     'client/components/util/util.module.' + script,
     'client/components/util/util.service.' + script,
     'server/.jshintrc',
@@ -89,21 +90,25 @@ export function app(options) {
     'e2e/main/main.spec.js',
     'e2e/components/navbar/navbar.po.js',
     '.babelrc',
-    '.bowerrc',
     '.buildignore',
     '.editorconfig',
     '.gitattributes',
     '.gitignore',
     '.travis.yml',
     '.jscsrc',
     '.yo-rc.json',
-    'Gruntfile.js',
+    'gulpfile.babel.js',
     'package.json',
-    'bower.json',
     'karma.conf.js',
     'mocha.conf.js',
+    'mocha.global.js',
     'protractor.conf.js',
-    'README.md'
+    'README.md',
+    'spec.js',
+    'webpack.build.js',
+    'webpack.dev.js',
+    'webpack.test.js',
+    'webpack.make.js'
   ]);
 
   /* TypeScript */
@@ -120,6 +125,11 @@ export function app(options) {
     ]);
   }
 
+  /* Flow */
+  if(options.flow) {
+    files.push('.flowconfig');
+  }
+
   /* Ui-Router */
   if (options.router === 'uirouter') {
     files = files.concat([
@@ -155,18 +165,22 @@ export function app(options) {
   /* Authentication */
   if (options.auth) {
     files = files.concat([
-      'client/app/account/account.' + script,
+      'client/app/account/index.' + script,
+      'client/app/account/account.routes.' + script,
       'client/app/account/login/login.' + markup,
+      'client/app/account/login/index.' + script,
       'client/app/account/login/login.controller.' + script,
       'client/app/account/settings/settings.' + markup,
+      'client/app/account/settings/index.' + script,
       'client/app/account/settings/settings.controller.' + script,
       'client/app/account/signup/signup.' + markup,
+      'client/app/account/signup/index.' + script,
       'client/app/account/signup/signup.controller.' + script,
+      'client/app/admin/index.' + script,
       'client/app/admin/admin.' + markup,
       'client/app/admin/admin.' + stylesheet,
-      'client/app/admin/admin.module.' + script,
-      'client/app/admin/admin.router.' + script,
       'client/app/admin/admin.controller.' + script,
+      'client/app/admin/admin.routes.' + script,
       'client/components/auth/auth.module.' + script,
       'client/components/auth/auth.service.' + script,
       'client/components/auth/interceptor.service.' + script,
@@ -200,11 +214,10 @@ export function app(options) {
 
 
     files = files.concat([
+      'client/components/oauth-buttons/index.' + script,
       'client/components/oauth-buttons/oauth-buttons.' + stylesheet,
       'client/components/oauth-buttons/oauth-buttons.' + markup,
-      'client/components/oauth-buttons/oauth-buttons.controller.' + script,
       'client/components/oauth-buttons/oauth-buttons.controller.spec.' + script,
-      'client/components/oauth-buttons/oauth-buttons.directive.' + script,
       'client/components/oauth-buttons/oauth-buttons.directive.spec.' + script,
       'e2e/components/oauth-buttons/oauth-buttons.po.js'
     ]);