Aurelia TypeScript build - with working dependencies definitions (jspm) and doc generation - karma tests not yet working

Author: Lakerfield

build/babel-options.js

@@ -7,6 +7,7 @@ var pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
 module.exports = {
   root: appRoot,
   source: appRoot + '**/*.js',
+  aureliaDependenciesDefinitions: 'jspm_packages/github/aurelia/**/*.d.ts',  
   html: appRoot + '**/*.html',
   style: 'styles/**/*.css',
   output: 'dist/',

build/paths.js

@@ -1,57 +1,65 @@
 var gulp = require('gulp');
 var runSequence = require('run-sequence');
-var to5 = require('gulp-babel');
+var ts = require('gulp-typescript');
+var sourcemaps = require('gulp-sourcemaps');
+var merge = require('merge2');
 var paths = require('../paths');
-var compilerOptions = require('../babel-options');
+var compilerOptions = require('../ts-options');
 var assign = Object.assign || require('object.assign');
 var rename = require('gulp-rename');
 
-var jsName = paths.packageName + '.js';
+var tsName = paths.packageName + '.ts';
 
 gulp.task('build-index', function(){
-  return gulp.src(paths.root + 'index.js')
-    .pipe(rename(jsName))
+  return gulp.src(paths.root + 'index.ts')
+    .pipe(rename(tsName))
     .pipe(gulp.dest(paths.output));
 });
 
 gulp.task('build-es6', function () {
-  return gulp.src(paths.output + jsName)
-    .pipe(gulp.dest(paths.output + 'es6'));
+  return buildModule('es6', 'es6');
 });
 
 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('es5', 'commonjs');
 });
 
 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('es5', 'amd');
 });
 
 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('es5', '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'));
+function buildModule(target, targetName) {
+  var tsResult = gulp.src([
+    paths.output + tsName, 
+    paths.aureliaDependenciesDefinitions])
+    .pipe(sourcemaps.init())
+    .pipe(ts(assign({}, compilerOptions, {"target":target,"module":targetName})));
+
+  return merge([
+    tsResult.dts.pipe(gulp.dest(paths.output + targetName)),
+    tsResult.js
+      .pipe(sourcemaps.write())    
+      .pipe(gulp.dest(paths.output + targetName))
+  ]);
+}
+
+gulp.task('copy-dts-for-docs', function () {
+  return gulp.src([
+      paths.output + 'es6/*.d.ts'
+    ])
+    .pipe(gulp.dest(paths.output));
 });
 
 gulp.task('build', function(callback) {
   return runSequence(
     'clean',
     'build-index',
     ['build-es6', 'build-commonjs', 'build-amd', 'build-system'],
-    'build-dts',
+    'copy-dts-for-docs',
     callback
   );
 });

build/tasks/build.js

@@ -0,0 +1,8 @@
+module.exports = {
+  "target": "",
+  "declarationFiles": true,
+  "noExternalResolve": true,
+  "noImplicitAny": false,
+  "noEmitOnError": true,
+  "experimentalDecorators": true
+};

build/ts-options.js

@@ -1,21 +1,15 @@
 System.config({
   defaultJSExtensions: true,
-  transpiler: "babel",
-  babelOptions: {
-    "optional": [
-      "runtime"
-    ]
-  },
+  transpiler: "typescript",
   paths: {
     "github:*": "jspm_packages/github/*",
     "npm:*": "jspm_packages/npm/*"
   },
 
   map: {
     "aurelia-logging": "github:aurelia/[email protected]",
-    "babel": "npm:[email protected]",
-    "babel-runtime": "npm:[email protected]",
     "core-js": "npm:[email protected]",
+    "typescript": "npm:[email protected]",
     "github:jspm/[email protected]": {
       "process": "npm:[email protected]"
     },

config.js

@@ -12,9 +12,16 @@ module.exports = function(config) {
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['jspm', 'jasmine'],
 
+		plugins: [
+			'karma-jasmine',
+			'karma-chrome-launcher',
+      'karma-typescript-preprocessor'
+		],
+
+
     jspm: {
       // Edit this to your needs
-      loadFiles: ['src/**/*.js', 'test/**/*.js']
+      loadFiles: ['src/**/*.ts', 'test/**/*.ts']
     },
 
 
@@ -30,19 +37,21 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'test/**/*.js': ['babel'],
-      'src/**/*.js': ['babel']
+      'test/**/*.ts': ['typescript'],
+      'src/**/*.ts': ['typescript']
     },
-    'babelPreprocessor': {
+    typescriptPreprocessor: {
       options: {
-        sourceMap: 'inline',
-        modules: 'system',
-        moduleIds: false,
-        loose: "all",
-        optional: [
-          "es7.decorators"
-        ]
-      }
+        sourceMap: false,
+        inlineSourceMap: true,
+        target: 'ES5',
+        module: 'system',
+        noExternalResolve: true,
+        noImplicitAny: false,
+        noEmitOnError: true,
+        experimentalDecorators: true
+      },
+      typings: ['jspm_packages/**/*.d.ts']
     },
 
     // test results reporter to use

karma.conf.js

@@ -29,31 +29,31 @@
       "aurelia-logging": "github:aurelia/logging@^0.8.0"
     },
     "devDependencies": {
-      "babel": "npm:babel-core@^5.1.13",
-      "babel-runtime": "npm:babel-runtime@^5.1.13",
-      "core-js": "npm:core-js@^0.9.4"
+      "core-js": "npm:core-js@^0.9.4",
+      "typescript": "npm:typescript@^1.6.2"
     }
   },
   "devDependencies": {
     "aurelia-tools": "^0.1.12",
-    "babel-dts-generator": "^0.2.9",
-    "babel-eslint": "^4.1.1",
     "conventional-changelog": "0.0.11",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
     "gulp-babel": "^5.2.1",
     "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.12.28",
     "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",

package.json

@@ -3,9 +3,7 @@ import * as LogManager from 'aurelia-logging';
 const logger = LogManager.getLogger('event-aggregator');
 
 class Handler {
-  constructor(messageType, callback) {
-    this.messageType = messageType;
-    this.callback = callback;
+  constructor(private messageType: any, private callback: Function) {
   }
 
   handle(message) {
@@ -18,7 +16,7 @@ class Handler {
 /**
 * Represents a disposable subsciption to an EventAggregator event.
 */
-interface Subscription {
+export interface Subscription {
   /**
   * Disposes the subscription.
   */
@@ -29,12 +27,13 @@ interface Subscription {
 * Enables loosely coupled publish/subscribe messaging.
 */
 export class EventAggregator {
+  private eventLookup: any = {};
+  private messageHandlers: Handler[] = [];
+  
   /**
   * Creates an instance of the EventAggregator class.
   */
   constructor() {
-    this.eventLookup = {};
-    this.messageHandlers = [];
   }
 
   /**
@@ -122,7 +121,7 @@ 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) {
@@ -144,6 +143,6 @@ export function includeEventsIn(obj: Object): EventAggregator {
 * 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));
 }