feat(all): convert to TypeScript

Author: ctoran

build/babel-options.js

@@ -21,7 +21,7 @@ module.exports = {
     "es7.classProperties"
   ],
   plugins: [
-    "babel-dts-generator"
+    //"babel-dts-generator"
   ],
   extra: {
     dts: {

build/paths.js

@@ -3,13 +3,17 @@ var fs = require('fs');
 
 var appRoot = 'src/';
 var pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
+var outputRoot = 'dist/';
 
 module.exports = {
   root: appRoot,
+  tsSource: outputRoot + pkg.name + '.ts',
+  jspmDefinitions: 'jspm_packages/**/*.d.ts',
+  typings: 'typings/**/*.d.ts',
   source: appRoot + '**/*.js',
   html: appRoot + '**/*.html',
   style: 'styles/**/*.css',
-  output: 'dist/',
+  output: outputRoot,
   doc:'./doc',
   e2eSpecsSrc: 'test/e2e/src/*.js',
   e2eSpecsDist: 'test/e2e/dist/',

build/tasks/build.js

@@ -1,55 +1,83 @@
 var gulp = require('gulp');
 var runSequence = require('run-sequence');
 var to5 = require('gulp-babel');
+var sourcemaps = require('gulp-sourcemaps');
 var paths = require('../paths');
 var compilerOptions = require('../babel-options');
 var assign = Object.assign || require('object.assign');
 var rename = require('gulp-rename');
-
+var merge = require('merge2');
 var jsName = paths.packageName + '.js';
+var ts = require('gulp-typescript');
+var tsProject = ts.createProject('tsconfig.json', {
+  typescript: require('typescript')
+});
 
-gulp.task('build-index', function(){
-  return gulp.src(paths.root + 'index.js')
-    .pipe(rename(jsName))
+// copies src/index.ts to dist/<package-name>.ts
+gulp.task('build-index', function() {
+  return gulp.src(paths.root + 'index.ts')
+    .pipe(rename(function (file) { file.basename = paths.packageName; }))
     .pipe(gulp.dest(paths.output));
 });
 
+// gulp-typescript compiles TS files into ES6
+gulp.task('build-ts', function () {
+  var tsResult = gulp.src([paths.tsSource, paths.typings, paths.jspmDefinitions])
+    .pipe(sourcemaps.init())
+    .pipe(ts(tsProject));
+  return merge([
+    tsResult.js
+      .pipe(sourcemaps.write({includeContent: false, sourceRoot: paths.sourceMapRelativePath}))
+      .pipe(gulp.dest(paths.output)),
+    tsResult.dts
+      .pipe(gulp.dest(paths.output))
+    ]);
+});
+
+function buildModule(moduleType, dirName) {
+  return gulp.src(paths.output + jsName)
+    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(to5(assign({}, compilerOptions, { modules: moduleType })))
+    .pipe(sourcemaps.write({includeContent: true}))
+    .pipe(gulp.dest(paths.output + dirName));
+}
+
+// copies js file from ts output for ES6 build
 gulp.task('build-es6', function () {
   return gulp.src(paths.output + jsName)
     .pipe(gulp.dest(paths.output + 'es6'));
 });
 
+// builds js file as ES5 with CommonJS module
 gulp.task('build-commonjs', function () {
-  return gulp.src(paths.output + jsName)
-    .pipe(to5(assign({}, compilerOptions, {modules:'common'})))
-    .pipe(gulp.dest(paths.output + 'commonjs'));
+  return buildModule('common', 'commonjs');
 });
 
+// builds js file as ES5 with AMD module
 gulp.task('build-amd', function () {
-  return gulp.src(paths.output + jsName)
-    .pipe(to5(assign({}, compilerOptions, {modules:'amd'})))
-    .pipe(gulp.dest(paths.output + 'amd'));
+  return buildModule('amd', 'amd');
 });
 
+// builds js file as ES5 with SystemJS module
 gulp.task('build-system', function () {
-  return gulp.src(paths.output + jsName)
-    .pipe(to5(assign({}, compilerOptions, {modules:'system'})))
-    .pipe(gulp.dest(paths.output + 'system'));
+  return buildModule('system', 'system');
 });
 
-gulp.task('build-dts', function(){
-  return gulp.src(paths.output + paths.packageName + '.d.ts')
-      .pipe(rename(paths.packageName + '.d.ts'))
-      .pipe(gulp.dest(paths.output + 'es6'))
-      .pipe(gulp.dest(paths.output + 'commonjs'))
-      .pipe(gulp.dest(paths.output + 'amd'))
-      .pipe(gulp.dest(paths.output + 'system'));
+// copies the ts declaration file for each module build 
+gulp.task('build-dts', function() {
+  return gulp.src([paths.output + paths.packageName + '.d.ts', paths.typings])
+    .pipe(gulp.dest(paths.output + 'es6'))
+    .pipe(gulp.dest(paths.output + 'commonjs'))
+    .pipe(gulp.dest(paths.output + 'amd'))
+    .pipe(gulp.dest(paths.output + 'system'));
 });
 
+// main build task
 gulp.task('build', function(callback) {
   return runSequence(
     'clean',
     'build-index',
+    'build-ts',
     ['build-es6', 'build-commonjs', 'build-amd', 'build-system'],
     'build-dts',
     callback

doc/core-js.d.ts

@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"target": "ES6",
+		"module": "system"
+	}
+}

jsconfig.json

@@ -49,18 +49,22 @@
     "gulp-bump": "^0.3.1",
     "gulp-eslint": "^1.0.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-typedoc": "^1.2.1",
     "gulp-typedoc-extractor": "^0.0.8",
+    "gulp-typescript": "^2.9.2",
     "jasmine-core": "^2.1.3",
     "karma": "^0.13.15",
     "karma-babel-preprocessor": "^5.2.2",
     "karma-chrome-launcher": "^0.1.7",
     "karma-coverage": "^0.3.1",
     "karma-jasmine": "^0.3.5",
     "karma-jspm": "^2.0.1",
+    "merge2": "^0.3.6",
     "object.assign": "^1.0.3",
     "require-dir": "^0.1.0",
     "run-sequence": "^1.0.2",
+    "typescript": "^1.6.2",
     "vinyl": "^0.5.1",
     "vinyl-paths": "^1.0.0",
     "yargs": "^2.1.1"

package.json

@@ -3,12 +3,10 @@ import * as LogManager from 'aurelia-logging';
 const logger = LogManager.getLogger('event-aggregator');
 
 class Handler {
-  constructor(messageType, callback) {
-    this.messageType = messageType;
-    this.callback = callback;
+  constructor(public messageType: any, public callback: (message: any) => void) {
   }
 
-  handle(message) {
+  handle(message: any) {
     if (message instanceof this.messageType) {
       this.callback.call(null, message);
     }
@@ -18,7 +16,7 @@ class Handler {
 /**
 * Represents a disposable subsciption to an EventAggregator event.
 */
-interface Subscription {
+export interface Subscription {
   /**
   * Disposes the subscription.
   */
@@ -28,23 +26,24 @@ interface Subscription {
 /**
 * Enables loosely coupled publish/subscribe messaging.
 */
-export class EventAggregator {
+export class EventAggregator {  
+  private eventLookup: any = {};
+  private messageHandlers: Handler[] = [];
+
   /**
-  * Creates an instance of the EventAggregator class.
+  * Publishes a message.
+  * @param event The event data type to publish to.
   */
-  constructor() {
-    this.eventLookup = {};
-    this.messageHandlers = [];
-  }
-
+  publish<T>(event: T): void;
   /**
   * Publishes a message.
-  * @param event The event or channel to publish to.
+  * @param event The message channel to publish to.
   * @param data The data to publish on the channel.
   */
-  publish(event: string | any, data?: any): void {
-    let subscribers;
-    let i;
+  publish(event: string, data?: any): void;
+  publish(event: any, data?: any): void {
+    let subscribers: any[];
+    let i: number;
 
     if (typeof event === 'string') {
       subscribers = this.eventLookup[event];
@@ -76,12 +75,19 @@ export class EventAggregator {
 
   /**
   * Subscribes to a message channel or message type.
-  * @param event The event channel or event data type.
-  * @param callback The callback to be invoked when when the specified message is published.
+  * @param event The message data Type to subscribe to.
+  * @param callback The callback to be invoked when the specified message is published.
+  */
+  subscribe<T>(event: Constructor<T>, callback: (message: T) => void): Subscription;
+  /**
+  * Subscribes to a message channel or message type.
+  * @param event The message channel to subscribe to.
+  * @param callback The callback to be invoked when the specified message is published.
   */
-  subscribe(event: string | Function, callback: Function): Subscription {
-    let handler;
-    let subscribers;
+  subscribe(event: string, callback: (message: any, event?: string) => void): Subscription;
+  subscribe(event: string|Constructor<any>, callback: (message: any, event?: string) => void): Subscription {
+    let handler: Function|Handler;
+    let subscribers: any[];
 
     if (typeof event === 'string') {
       handler = callback;
@@ -104,12 +110,19 @@ export class EventAggregator {
   }
 
   /**
-  * Subscribes to a message channel or message type, then disposes the subscription automatically after the first message is received.
-  * @param event The event channel or event data type.
+  * Subscribes to a message type, then disposes the subscription automatically after the first message is received.
+  * @param event The message data Type to subscribe to.
   * @param callback The callback to be invoked when when the specified message is published.
   */
-  subscribeOnce(event: string | Function, callback: Function): Subscription {
-    let sub = this.subscribe(event, (a, b) => {
+  subscribeOnce<T>(event: Constructor<T>, callback: (message: T) => void): Subscription;
+  /**
+  * Subscribes to a message channel, then disposes the subscription automatically after the first message is received.
+  * @param event The message channel to subscribe to.
+  * @param callback The callback to be invoked when when the specified message is published.
+  */
+  subscribeOnce(event: string, callback: (message: any, event?: string) => void): Subscription;
+  subscribeOnce(event: string|Constructor<any>, callback: (message: any, event?: string) => void): Subscription {
+    let sub = this.subscribe(<any>event, (a, b) => {
       sub.dispose();
       return callback(a, b);
     });
@@ -122,28 +135,18 @@ export class EventAggregator {
 * Includes EA functionality into an object instance.
 * @param obj The object to mix Event Aggregator functionality into.
 */
-export function includeEventsIn(obj: Object): EventAggregator {
+export function includeEventsIn(obj: any): EventAggregator {
   let ea = new EventAggregator();
-
-  obj.subscribeOnce = function(event, callback) {
-    return ea.subscribeOnce(event, callback);
-  };
-
-  obj.subscribe = function(event, callback) {
-    return ea.subscribe(event, callback);
-  };
-
-  obj.publish = function(event, data) {
-    ea.publish(event, data);
-  };
-
+  obj.subscribeOnce = (event: any, callback: any) => ea.subscribeOnce(event, callback);
+  obj.subscribe = (event: any, callback: any) => ea.subscribe(event, callback);
+  obj.publish = (event: any, data?: any) => ea.publish(event, data);
   return ea;
 }
 
 /**
 * Configures a global EA by merging functionality into the Aurelia instance.
 * @param config The Aurelia Framework configuration object used to configure the plugin.
 */
-export function configure(config: Object): void {
+export function configure(config: any): void {
   config.instance(EventAggregator, includeEventsIn(config.aurelia));
 }

src/index.js renamed to src/index.ts

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "declaration": true,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

tsconfig.json

@@ -0,0 +1,3 @@
+interface Constructor<T> {
+    new (...args: any[]): T;
+}