Merge pull request #708 from Swiip/typescript-modules

New version for Typescript 1.5 with ES6 modules and Webpack
Swiip · Aug 24, 2015 · b2b1074 · b2b1074
2 parents abe0389 + e7597a6
commit b2b1074
Show file tree

Hide file tree

Showing 21 changed files with 1,236 additions and 16,611 deletions.
diff --git a/app/files.json b/app/files.json
@@ -3,6 +3,7 @@
     ".bowerrc",
     ".editorconfig",
 
+    "tsconfig.json",
     "protractor.conf.js",
 
     "e2e/.jshintrc",

diff --git a/app/src/preprocessors.js b/app/src/preprocessors.js
@@ -62,6 +62,7 @@ module.exports = function(GulpAngularGenerator) {
       if(this.props.jsPreprocessor.key !== 'typescript') {
         rejectWithRegexp.call(this, /tsd\.js/);
         rejectWithRegexp.call(this, /tsd\.json/);
+        rejectWithRegexp.call(this, /tsconfig\.json/);
       }
 
       if(this.props.jsPreprocessor.srcExtension === 'es6' || this.props.jsPreprocessor.key === 'typescript') {

diff --git a/app/templates/_karma.conf.js b/app/templates/_karma.conf.js
@@ -24,6 +24,10 @@ function listFiles() {
       path.join(conf.paths.tmp, '/serve/app/**/*.js'),
       path.join(conf.paths.tmp, '/**/*.spec.js'),
       path.join(conf.paths.tmp, '/**/*.mock.js'),
+<% } else if (props.jsPreprocessor.key === 'typescript') { -%>
+      path.join(conf.paths.tmp, '/serve/app/index.module.js'),
+      path.join(conf.paths.src, '/**/*.spec.{js,ts}'),
+      path.join(conf.paths.src, '/**/*.mock.{js,ts}'),
 <% } else { -%>
       path.join(conf.paths.tmp, '/serve/app/index.module.js'),
       path.join(conf.paths.src, '/**/*.spec.js'),

diff --git a/app/templates/_package.json b/app/templates/_package.json
@@ -43,18 +43,19 @@
 <% } if (props.jsPreprocessor.key === 'coffee') { -%>
     "gulp-coffee": "~2.3.1",
     "gulp-coffeelint": "~0.5.0",
-<% } if (props.jsPreprocessor.srcExtension === 'es6') { -%>
+<% } if (props.jsPreprocessor.srcExtension === 'es6' || props.jsPreprocessor.key === 'typescript') { -%>
     "webpack-stream": "~2.0.0",
+<% } if (props.jsPreprocessor.srcExtension === 'es6') { -%>
     "jshint-loader": "~0.8.3",
 <% } if (props.jsPreprocessor.key === 'babel') { -%>
     "babel-core": "~5.5.8",
     "babel-loader": "~5.1.4",
 <% } if (props.jsPreprocessor.key === 'traceur') { -%>
     "traceur-loader": "~0.6.3",
 <% } if (props.jsPreprocessor.key === 'typescript') { -%>
-    "gulp-typescript": "~2.7.7",
-    "gulp-tslint": "~2.0.0",
-    "gulp-concat": "~2.5.2",
+    "typescript": "~1.5.3",
+    "awesome-typescript-loader": "~0.11.2",
+    "tslint-loader": "~1.0.1",
     "tsd": "~0.6.1",
 <% } else if (props.jsPreprocessor.srcExtension !== 'es6') { -%>
     "gulp-angular-filesort": "~1.1.1",

diff --git a/app/templates/gulp/_scripts.js b/app/templates/gulp/_scripts.js
@@ -5,23 +5,14 @@ var gulp = require('gulp');
 var conf = require('./conf');
 
 var browserSync = require('browser-sync');
-<% if (props.jsPreprocessor.srcExtension === 'es6') { -%>
+<% if (props.jsPreprocessor.srcExtension === 'es6' || props.jsPreprocessor.key === 'typescript') { -%>
 var webpack = require('webpack-stream');
 <% } -%>
 
 var $ = require('gulp-load-plugins')();
 
-<% if (props.jsPreprocessor.srcExtension !== 'es6') { -%>
-<%   if (props.jsPreprocessor.key === 'typescript') { -%>
-  var tsProject = $.typescript.createProject({
-    target: 'es5',
-    sortOutput: true
-  });
-
-  gulp.task('scripts', ['tsd:install'], function () {
-<%   } else { -%>
+<% if (props.jsPreprocessor.srcExtension !== 'es6' && props.jsPreprocessor.key !== 'typescript') { -%>
 gulp.task('scripts', function () {
-<%   } -%>
   return gulp.src(path.join(conf.paths.src, '/app/**/*.<%- props.jsPreprocessor.extension %>'))
 <%   if (props.jsPreprocessor.extension === 'js') { -%>
     .pipe($.jshint())
@@ -32,11 +23,6 @@ gulp.task('scripts', function () {
     .pipe($.coffeelint())
     .pipe($.coffeelint.reporter())
     .pipe($.coffee()).on('error', conf.errorHandler('CoffeeScript'))
-<%   } if (props.jsPreprocessor.key === 'typescript') { -%>
-    .pipe($.tslint())
-    .pipe($.tslint.report('prose', { emitError: false }))
-    .pipe($.typescript(tsProject)).on('error', conf.errorHandler('TypeScript'))
-    .pipe($.concat('index.module.js'))
 <%   } if (props.jsPreprocessor.key !== 'none') { -%>
     .pipe($.sourcemaps.write())
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app')))
@@ -47,13 +33,22 @@ gulp.task('scripts', function () {
 <% } else { -%>
 function webpackWrapper(watch, callback) {
   var webpackOptions = {
+<%   if (props.jsPreprocessor.key === 'typescript') { -%>
+    resolve: { extensions: ['', '.ts'] },
+<%   } -%>
     watch: watch,
     module: {
+<%   if (props.jsPreprocessor.extension === 'js') { -%>
       preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'jshint-loader'}],
+<%   } if (props.jsPreprocessor.key === 'typescript') { -%>
+      preLoaders: [{ test: /\.ts$/, exclude: /node_modules/, loader: 'tslint-loader'}],
+<%   } -%>
 <%   if (props.jsPreprocessor.key === 'babel') { -%>
       loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}]
 <%   } if (props.jsPreprocessor.key === 'traceur') { -%>
       loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'traceur-loader'}]
+<%   } if (props.jsPreprocessor.key === 'typescript') { -%>
+      loaders: [{ test: /\.ts$/, exclude: /node_modules/, loader: 'awesome-typescript-loader'}]
 <%   } -%>
     },
     output: { filename: 'index.module.js' }
@@ -80,12 +75,16 @@ function webpackWrapper(watch, callback) {
     }
   };
 
-  return gulp.src(path.join(conf.paths.src, '/app/index.module.js'))
+  return gulp.src(path.join(conf.paths.src, '/app/index.module.<%- props.jsPreprocessor.extension %>'))
     .pipe(webpack(webpackOptions, null, webpackChangeHandler))
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app')));
 }
 
+<%   if (props.jsPreprocessor.key === 'typescript') { -%>
+gulp.task('scripts', ['tsd:install'], function () {
+<%   } else { %>
 gulp.task('scripts', function () {
+<%   } %>
   return webpackWrapper(false);
 });
 

diff --git a/app/templates/src/app/_index.config.ts b/app/templates/src/app/_index.config.ts
@@ -1,15 +1,10 @@
-module <%- appName %> {
-  'use strict';
-
-  /** @ngInject */
-  export function config($logProvider: ng.ILogProvider, toastrConfig) {
-    // enable log
-    $logProvider.debugEnabled(true);
-    // set options third-party lib
-    toastrConfig.allowHtml = true;
-    toastrConfig.timeOut = 3000;
-    toastrConfig.positionClass = 'toast-top-right';
-    toastrConfig.preventDuplicates = true;
-    toastrConfig.progressBar = true;
-  }
+export /** @ngInject */ function config($logProvider: ng.ILogProvider, toastrConfig) {
+  // enable log
+  $logProvider.debugEnabled(true);
+  // set options third-party lib
+  toastrConfig.allowHtml = true;
+  toastrConfig.timeOut = 3000;
+  toastrConfig.positionClass = 'toast-top-right';
+  toastrConfig.preventDuplicates = true;
+  toastrConfig.progressBar = true;
 }
diff --git a/app/templates/src/app/_index.module.ts b/app/templates/src/app/_index.module.ts
@@ -1,33 +1,29 @@
 /// <reference path="../../<%- props.paths.tmp %>/typings/tsd.d.ts" />
 
-<% if (props.router.key !== 'none') { %>
-/// <reference path="index.route.ts" />
-<% } %>
-/// <reference path="index.config.ts" />
-/// <reference path="index.run.ts" />
-/// <reference path="main/main.controller.ts" />
-/// <reference path="../app/components/navbar/navbar.directive.ts" />
-/// <reference path="../app/components/malarkey/malarkey.directive.ts" />
-/// <reference path="../app/components/webDevTec/webDevTec.service.ts" />
-/// <reference path="../app/components/githubContributor/githubContributor.service.ts" />
+import { config } from './index.config';
+<% if (props.router.key !== 'none') { -%>
+import { routerConfig } from './index.route';
+<% } -%>
+import { runBlock } from './index.run';
+import { MainController } from './main/main.controller';
+import { GithubContributor } from '../app/components/githubContributor/githubContributor.service';
+import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service';
+import { acmeNavbar } from '../app/components/navbar/navbar.directive';
+import { acmeMalarkey } from '../app/components/malarkey/malarkey.directive';
 
 declare var malarkey: any;
 declare var moment: moment.MomentStatic;
 
-module <%- appName %> {
-  'use strict';
-
-  angular.module('<%- appName %>', [<%- modulesDependencies %>])
-    .constant('malarkey', malarkey)
-    .constant('moment', moment)
-    .config(config)
-<% if (props.router.key !== 'none') { %>
-    .config(routerConfig)
-<% } %>
-    .run(runBlock)
-    .service('githubContributor', GithubContributor)
-    .service('webDevTec', WebDevTecService)
-    .controller('MainController', MainController)
-    .directive('acmeNavbar', acmeNavbar)
-    .directive('acmeMalarkey', acmeMalarkey);
-}
+angular.module('<%- appName %>', [<%- modulesDependencies %>])
+  .constant('malarkey', malarkey)
+  .constant('moment', moment)
+  .config(config)
+<% if (props.router.key !== 'none') { -%>
+  .config(routerConfig)
+<% } -%>
+  .run(runBlock)
+  .service('githubContributor', GithubContributor)
+  .service('webDevTec', WebDevTecService)
+  .controller('MainController', MainController)
+  .directive('acmeNavbar', acmeNavbar)
+  .directive('acmeMalarkey', acmeMalarkey);
diff --git a/app/templates/src/app/_index.run.ts b/app/templates/src/app/_index.run.ts
@@ -1,8 +1,4 @@
-module <%- appName %> {
-  'use strict';
-
-  /** @ngInject */
-  export function runBlock($log: ng.ILogService) {
-    $log.debug('runBlock end');
-  }
+/** @ngInject */
+export function runBlock($log: ng.ILogService) {
+  $log.debug('runBlock end');
 }
diff --git a/app/templates/src/app/_ngroute/__ngroute.ts b/app/templates/src/app/_ngroute/__ngroute.ts
@@ -1,15 +1,12 @@
-module <%- appName %> {
-  'use strict';
-
-  /** @ngInject */
-  export function routerConfig($routeProvider: ng.route.IRouteProvider) {
-    $routeProvider
-      .when('/', {
-        templateUrl: 'app/main/main.html',
-        controller: 'MainController',
-        controllerAs: 'main'
-      })
-      .otherwise({
-        redirectTo: '/'
-      });
-  }
+/** @ngInject */
+export function routerConfig($routeProvider: ng.route.IRouteProvider) {
+  $routeProvider
+    .when('/', {
+      templateUrl: 'app/main/main.html',
+      controller: 'MainController',
+      controllerAs: 'main'
+    })
+    .otherwise({
+      redirectTo: '/'
+    });
+}
diff --git a/app/templates/src/app/_uirouter/__uirouter.ts b/app/templates/src/app/_uirouter/__uirouter.ts
@@ -1,16 +1,12 @@
-module <%- appName %> {
-  'use strict';
+/** @ngInject */
+export function routerConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
+  $stateProvider
+    .state('home', {
+      url: '/',
+      templateUrl: 'app/main/main.html',
+      controller: 'MainController',
+      controllerAs: 'main'
+    });
 
-  /** @ngInject */
-  export function routerConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
-    $stateProvider
-      .state('home', {
-        url: '/',
-        templateUrl: 'app/main/main.html',
-        controller: 'MainController',
-        controllerAs: 'main'
-      });
-
-    $urlRouterProvider.otherwise('/');
-  }
+  $urlRouterProvider.otherwise('/');
 }
diff --git a/app/templates/src/app/components/githubContributor/_githubContributor.service.ts b/app/templates/src/app/components/githubContributor/_githubContributor.service.ts
@@ -1,26 +1,22 @@
-module <%- appName %> {
-  'use strict';
+export class GithubContributor {
+  public apiHost: string = 'https://api.github.com/repos/Swiip/generator-gulp-angular';
 
-  export class GithubContributor {
-    public apiHost: string = 'https://api.github.com/repos/Swiip/generator-gulp-angular';
+  private $log: ng.ILogService;
+  private $http: ng.IHttpService;
 
-    private $log: ng.ILogService;
-    private $http: ng.IHttpService;
-
-    /** @ngInject */
-    constructor($log: ng.ILogService, $http: ng.IHttpService) {
-      this.$log = $log;
-      this.$http = $http;
-    }
+  /** @ngInject */
+  constructor($log: ng.ILogService, $http: ng.IHttpService) {
+    this.$log = $log;
+    this.$http = $http;
+  }
 
-    getContributors(limit: number = 30) {
-      return this.$http.get(this.apiHost + '/contributors?per_page=' + limit)
-        .then((response: any) => {
-          return response.data;
-        })
-        .catch((error: any) => {
-          this.$log.error('XHR Failed for getContributors.\n', error.data);
-        });
-    }
+  getContributors(limit: number = 30) {
+    return this.$http.get(this.apiHost + '/contributors?per_page=' + limit)
+      .then((response: any) => {
+        return response.data;
+      })
+      .catch((error: any) => {
+        this.$log.error('XHR Failed for getContributors.\n', error.data);
+      });
   }
 }