diff --git a/package.json b/package.json index 7234a3f26..166d3f5cb 100644 --- a/package.json +++ b/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 --git a/src/generators/app/index.js b/src/generators/app/index.js index 8c3b55b2f..b9409bab5 100644 --- a/src/generators/app/index.js +++ b/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,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 --git a/templates/app/client/app/account(auth)/account.module.js b/templates/app/client/app/account(auth)/account.module.js index 9ae1ed74d..eb2a55471 100644 --- a/templates/app/client/app/account(auth)/account.module.js +++ b/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 --git a/templates/app/client/app/account(auth)/login/login.component.js b/templates/app/client/app/account(auth)/login/login.component.js index 203e412ca..4bc1d847e 100644 --- a/templates/app/client/app/account(auth)/login/login.component.js +++ b/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 --git a/templates/app/client/app/account(auth)/settings/settings.component.js b/templates/app/client/app/account(auth)/settings/settings.component.js index 9e0a436b9..7e1da1743 100644 --- a/templates/app/client/app/account(auth)/settings/settings.component.js +++ b/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 --git a/templates/app/client/app/account(auth)/signup/signup.component.js b/templates/app/client/app/account(auth)/signup/signup.component.js index c8138cab2..96f051bc6 100644 --- a/templates/app/client/app/account(auth)/signup/signup.component.js +++ b/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 --git a/templates/app/client/app/app.component.js b/templates/app/client/app/app.component.js index 7f0859ba3..0a4f290ce 100644 --- a/templates/app/client/app/app.component.js +++ b/templates/app/client/app/app.component.js @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -export let AppComponent = @Component({ +@Component({ selector: 'app', template: ` ` }) -class AppComponent {} +export class AppComponent {} diff --git a/templates/app/client/app/app.constants.js b/templates/app/client/app/app.constants.js index 730aed801..eed259ffc 100644 --- a/templates/app/client/app/app.constants.js +++ b/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 --git a/templates/app/client/app/app.module.js b/templates/app/client/app/app.module.js index cb9aed6f4..319662d77 100644 --- a/templates/app/client/app/app.module.js +++ b/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 --git a/templates/app/client/app/main/main.component.js b/templates/app/client/app/main/main.component.js index ed2927b76..a8f75fa25 100644 --- a/templates/app/client/app/main/main.component.js +++ b/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 --git a/templates/app/client/app/main/main.module.js b/templates/app/client/app/main/main.module.js index cad630bfa..46e10de14 100644 --- a/templates/app/client/app/main/main.module.js +++ b/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 --git a/templates/app/client/components/auth(auth)/auth.module.js b/templates/app/client/components/auth(auth)/auth.module.js index 82f92e6df..e097d977f 100644 --- a/templates/app/client/components/auth(auth)/auth.module.js +++ b/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 --git a/templates/app/client/components/auth(auth)/auth.service.js b/templates/app/client/components/auth(auth)/auth.service.js index d2753b0de..a99cf9366 100644 --- a/templates/app/client/components/auth(auth)/auth.service.js +++ b/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 --git a/templates/app/client/components/auth(auth)/user.service.js b/templates/app/client/components/auth(auth)/user.service.js index 561284b53..0a0a329bc 100644 --- a/templates/app/client/components/auth(auth)/user.service.js +++ b/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 --git a/templates/app/client/components/directives.module.js b/templates/app/client/components/directives.module.js index def4d52bc..6d6391d66 100644 --- a/templates/app/client/components/directives.module.js +++ b/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 --git a/templates/app/client/components/footer/footer.component.js b/templates/app/client/components/footer/footer.component.js index 87914ad78..d5ca83148 100644 --- a/templates/app/client/components/footer/footer.component.js +++ b/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 --git a/templates/app/client/components/navbar/navbar.component.js b/templates/app/client/components/navbar/navbar.component.js index 129f1cb72..dbd0979fe 100644 --- a/templates/app/client/components/navbar/navbar.component.js +++ b/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 --git a/templates/app/client/components/oauth-buttons(oauth)/oauth-buttons.component.js b/templates/app/client/components/oauth-buttons(oauth)/oauth-buttons.component.js index c29bbff2c..da3696719 100644 --- a/templates/app/client/components/oauth-buttons(oauth)/oauth-buttons.component.js +++ b/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 --git a/templates/app/client/components/socket(socketio)/socket.service.js b/templates/app/client/components/socket(socketio)/socket.service.js index efc3473de..978221287 100644 --- a/templates/app/client/components/socket(socketio)/socket.service.js +++ b/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 --git a/templates/app/server/config/environment/shared.js b/templates/app/server/config/environment/shared.js index c1e3e1032..1f000515d 100644 --- a/templates/app/server/config/environment/shared.js +++ b/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