Merge pull request #2423 from angular-fullstack/jscodeshift

feat(gen): generate js with jscodeshift instead of babel

Author: Awk34

Diff for: package.json

@@ -52,6 +52,7 @@
     "gulp-filter": "^4.0.0",
     "gulp-tap": "^0.1.3",
     "insight": "~0.8.3",
+    "jscodeshift": "^0.3.30",
     "lodash": "^4.17.0",
     "semver": "^5.1.0",
     "underscore.string": "^3.1.1",

Diff for: src/generators/app/index.js

@@ -12,6 +12,7 @@ import tap from 'gulp-tap';
 import filter from 'gulp-filter';
 import eslint from 'gulp-eslint';
 import semver from 'semver';
+import jscodeshift from 'jscodeshift';
 
 export class Generator extends Base {
   constructor(...args) {
@@ -458,52 +459,51 @@ export class Generator extends Base {
   get writing() {
     return {
       generateProject: function() {
-        /**
-         * var tap = require('gulp-tap');
-           this.registerTransformStream([
-              extensionFilter,
-              tap(function(file, t) {
-                  var contents = file.contents.toString();
-                  contents = beautify_js(contents, config);
-                  file.contents = new Buffer(contents);
-              }),
-              //prettifyJs(config),
-              extensionFilter.restore
-           ]);
-         */
-
         const flow = this.filters.flow;
 
-        let babelPlugins = [
-          'babel-plugin-syntax-flow',
-          'babel-plugin-syntax-class-properties',
-          'babel-plugin-syntax-decorators',
-          'babel-plugin-syntax-export-extensions',
-        ];
-
-        if(this.filters.babel && !flow) {
-          babelPlugins.push('babel-plugin-transform-flow-strip-types');
-        }
-
         const genDir = path.join(__dirname, '../../');
 
+        // TODO: remove babel stuff from dependencies
+        const codeshiftStream = tap(function(file, t) {
+          var contents = file.contents.toString();
+
+          // remove `implements Foo` from class declarations
+          contents = jscodeshift(contents)
+            .find(jscodeshift.ClassDeclaration)
+            .forEach(path => {
+              path.value.implements = null;
+            })
+            .toSource();
+
+          // remove any type annotations
+          contents = jscodeshift(contents)
+            .find(jscodeshift.TypeAnnotation)
+            .remove()
+            .toSource();
+          contents = jscodeshift(contents)
+            .find(jscodeshift.GenericTypeAnnotation)
+            .remove()
+            .toSource();
+
+          // remove any `type Foo = { .. }` declarations
+          contents = jscodeshift(contents)
+            .find(jscodeshift.TypeAlias)
+            .remove()
+            .toSource();
+
+          // remove any flow directive comments
+          contents = jscodeshift(contents)
+            .find(jscodeshift.Comment, path => path.type === 'CommentLine' && path.value.includes('@flow'))
+            .forEach(path => path.prune())
+            .toSource();
+
+          file.contents = new Buffer(contents);
+        });
+
         let clientJsFilter = filter(['client/**/*.js'], {restore: true});
         this.registerTransformStream([
           clientJsFilter,
-          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` */
-            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`
-          }),
+          codeshiftStream,
           eslint({
             fix: true, 
             configFile: path.join(genDir, 'templates/app/client/.eslintrc(babel)')

Diff for: templates/app/client/app/account(auth)/account.module.js

@@ -12,7 +12,7 @@ import { LoginComponent } from './login/login.component';
 import { SignupComponent } from './signup/signup.component';
 import { SettingsComponent } from './settings/settings.component';
 
-export let AccountModule = @NgModule({
+@NgModule({
     imports: [
         FormsModule,
         <%_ if (filters.uirouter) { -%>
@@ -28,4 +28,4 @@ export let AccountModule = @NgModule({
         SettingsComponent,
     ],
 })
-class AccountModule {}
+export class AccountModule {}

Diff for: templates/app/client/app/account(auth)/login/login.component.js

@@ -20,11 +20,11 @@ interface User {
 }
 <%_ } -%>
 
-export let LoginComponent = @Component({
+@Component({
   selector: 'login',
   template: require('./login.<%=templateExt%>'),
 })
-class LoginComponent {
+export class LoginComponent {
   user: User = {
     name: '',
     email: '',

Diff for: templates/app/client/app/account(auth)/settings/settings.component.js

@@ -17,11 +17,11 @@ interface User {
 }
 <%_ } -%>
 
-export let SettingsComponent = @Component({
+@Component({
   selector: 'settings',
   template: require('./settings.<%=templateExt%>'),
 })
-class SettingsComponent {
+export class SettingsComponent {
   user: User = {
     oldPassword: '',
     newPassword: '',

Diff for: templates/app/client/app/account(auth)/signup/signup.component.js

@@ -19,12 +19,12 @@ interface User {
   password: string;
 }<% } %>
 
-export let SignupComponent = @Component({
+@Component({
   selector: 'signup',
   template: require('./signup.<%=templateExt%>'),
   directives: [...ANGULARCLASS_MATCH_CONTROL_DIRECTIVES]
 })
-class SignupComponent {
+export class SignupComponent {
   user: User = {
     name: '',
     email: '',

Diff for: templates/app/client/app/app.component.js

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
-export let AppComponent = @Component({
+@Component({
     selector: 'app',
     template: `<navbar></navbar>
     <ui-view></ui-view>
     <footer></footer>`
 })
-class AppComponent {}
+export class AppComponent {}

Diff for: templates/app/client/app/app.constants.js

@@ -1 +1,6 @@
-export default from '../../server/config/environment/shared';
+<%_ if(filters.babel) { -%>
+export default from '../../server/config/environment/shared';<% } %>
+<%_ if(filters.ts) { -%>
+import shared from '../../server/config/environment/shared';
+
+module.exports.default = shared;<% } %>

Diff for: templates/app/client/app/app.module.js

@@ -83,7 +83,7 @@ if(constants.env === 'development') {
   providers.push({ provide: RequestOptions, useClass: HttpOptions });
 }
 
-export let AppModule = @NgModule({
+@NgModule({
     providers,
     imports: [
         BrowserModule,
@@ -99,4 +99,4 @@ export let AppModule = @NgModule({
     ],
     bootstrap: [AppComponent]
 })
-class AppModule {}
+export class AppModule {}

Diff for: templates/app/client/app/main/main.component.js

@@ -2,12 +2,12 @@ import { Component, OnInit<% if(filters.socketio) { %>, OnDestroy<% } %> } from
 import { Http } from '@angular/http';
 import { SocketService } from '../../components/socket/socket.service';
 
-export let MainComponent = @Component({
+@Component({
     selector: 'main',
     template: require('./main.<%=templateExt%>'),
     styles: [require('./main.<%=styleExt%>')],
 })
-class MainComponent implements OnInit<% if(filters.socketio) { %>, OnDestroy<% } %> {
+export class MainComponent implements OnInit<% if(filters.socketio) { %>, OnDestroy<% } %> {
   Http;
   <%_ if(filters.socketio) { -%>
   SocketService;<% } %>

Diff for: templates/app/client/app/main/main.module.js

@@ -21,7 +21,7 @@ export const STATES = [
   { name: 'main', url: '/', component: MainComponent },
 ];<% } %>
 
-export let MainModule = @NgModule({
+@NgModule({
     imports: [
         BrowserModule,
         FormsModule,
@@ -45,4 +45,4 @@ export let MainModule = @NgModule({
         MainComponent,
     ],
 })
-class MainModule {}
+export class MainModule {}

Diff for: templates/app/client/components/auth(auth)/auth.module.js

@@ -10,10 +10,10 @@ import { NgModule } from '@angular/core';
 import { AuthService } from './auth.service';
 import { UserService } from './user.service';
 
-export let AuthModule = @NgModule({
+@NgModule({
     providers: [
         AuthService,
         UserService
     ]
 })
-class AuthModule {}
+export class AuthModule {}

Diff for: templates/app/client/components/auth(auth)/auth.service.js

@@ -17,8 +17,8 @@ class User {
   $promise = undefined;
 }
 
-export let AuthService = @Injectable()
-class AuthService {
+@Injectable()
+export class AuthService {
   _currentUser: User = {};
   @Output() currentUserChanged = new EventEmitter(true);
   userRoles = userRoles || [];

Diff for: templates/app/client/components/auth(auth)/user.service.js

@@ -14,8 +14,8 @@ type UserType = {
   email: string;
 }
 
-export let UserService = @Injectable()
-class UserService {
+@Injectable()
+export class UserService {
   static parameters = [AuthHttp];
   constructor(authHttp: AuthHttp) {
     this.AuthHttp = authHttp;

Diff for: templates/app/client/components/directives.module.js

@@ -10,7 +10,7 @@ import { FooterComponent } from './footer/footer.component';
 <%_ if(filters.oauth) { -%>
 import { OauthButtonsComponent } from './oauth-buttons/oauth-buttons.component';<% } %>
 
-export let DirectivesModule = @NgModule({
+@NgModule({
   imports: [
     CommonModule,
     UIRouterModule.forChild(),
@@ -30,4 +30,4 @@ export let DirectivesModule = @NgModule({
     OauthButtonsComponent,<% } %>
   ]
 })
-class DirectivesModule {}
+export class DirectivesModule {}

Diff for: templates/app/client/components/footer/footer.component.js

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 
-export let FooterComponent = @Component({
+@Component({
     selector: 'footer',
     template: require('./footer.html'),
     styles: [require('./footer.scss')]
 })
-class FooterComponent {}
+export class FooterComponent {}

Diff for: templates/app/client/components/navbar/navbar.component.js

@@ -4,11 +4,11 @@ import { Component } from '@angular/core';
 import { StateService } from 'ui-router-ng2';<% } %>
 import { AuthService } from '../auth/auth.service';<% } %>
 
-export let NavbarComponent = @Component({
+@Component({
   selector: 'navbar',
   template: require('./navbar.html')
 })
-class NavbarComponent {
+export class NavbarComponent {
   isCollapsed = true;
   isLoggedIn;
   isAdmin;

Diff for: templates/app/client/components/oauth-buttons(oauth)/oauth-buttons.component.js

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
-export let OauthButtonsComponent = @Component({
+@Component({
   selector: 'oauth-buttons',
   template: require('./oauth-buttons.<%=templateExt%>'),
   styles: [require('./oauth-buttons.<%=styleExt%>')],
 })
-class OauthButtonsComponent {
+export class OauthButtonsComponent {
   loginOauth(provider) {
     window.location.href = `/auth/${provider}`;
   };

Diff for: templates/app/client/components/socket(socketio)/socket.service.js

@@ -4,8 +4,8 @@ import { noop, find, remove } from 'lodash';
 import io from 'socket.io-client';
 import constants from '../../app/app.constants';
 
-export let SocketService = @Injectable()
-class SocketService {
+@Injectable()
+export class SocketService {
   socket;
 
   constructor() {

Diff for: templates/app/server/config/environment/shared.js

@@ -1,6 +1,6 @@
 'use strict';
 
-exports = module.exports = {
+module.exports.default = {
   env: process.env.NODE_ENV,
   port: process.env.PORT || <%= devPort %>,
   // List of user roles