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

this is a proper codemod tool, instead of a general transpiler like babel

Author: Awk34

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",

src/generators/app/index.js

@@ -15,6 +15,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) {
@@ -461,52 +462,47 @@ 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();
+
+          // 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)')

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 {}

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: '',

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: '',

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: '',

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 {}

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 {}

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;<% } %>

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 {}