tech(systemjs): tricky mixing systemjs and requirejs, might need to migrate

public/app/core/controllers/all.js

-define([
-  './grafana_ctrl',
-  './search_ctrl',
-  './inspect_ctrl',
-  './json_editor_ctrl',
-  './login_ctrl',
-  './invited_ctrl',
-  './signup_ctrl',
-  './reset_password_ctrl',
-  './sidemenu_ctrl',
-  './error_ctrl',
-], function () {});

public/app/core/controllers/all.ts

+import grafanaCtrl from './grafana_ctrl';
+export {grafanaCtrl};
+
+// define([
+//   './grafana_ctrl',
+//   './search_ctrl',
+//   './inspect_ctrl',
+//   './json_editor_ctrl',
+//   './login_ctrl',
+//   './invited_ctrl',
+//   './signup_ctrl',
+//   './reset_password_ctrl',
+//   './sidemenu_ctrl',
+//   './error_ctrl',
+// ], function () {});

public/app/core/controllers/grafana_ctrl.js → public/app/core/controllers/grafana_ctrl.ts

-define([
-  'angular',
-  'lodash',
-  'jquery',
-  '../core_module',
-  'app/core/config',
-  'app/core/store',
-],
-function (angular, _, $, coreModule, config, store) {
-  "use strict";
-
-  coreModule.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) {
+///<reference path="../../headers/common.d.ts" />
+
+import angular = require('angular');
+import config = require('app/core/config');
+import store = require('app/core/store');
+import coreModule from '../core_module';
+
+coreModule.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, $rootScope, $controller, contextSrv) {
   console.log('grafana ctrl');
 
   $scope.init = function() {
@@ -97,7 +93,7 @@ function (angular, _, $, coreModule, config, store) {
         var totalRender = 0;
         var totalQuery = 0;
 
-          _.each($rootScope.performance.panels, function(panelTiming) {
+        _.each($rootScope.performance.panels, function(panelTiming: any) {
           totalRender += panelTiming.render;
           totalQuery += panelTiming.query;
         });
@@ -136,5 +132,7 @@ function (angular, _, $, coreModule, config, store) {
 
   $scope.init();
 
-  });
 });
+
+var grafanaCtrl = {};
+export default grafanaCtrl;

public/app/core/core.ts

@@ -21,7 +21,13 @@
 ///<amd-dependency path="./jquery_extended" />
 ///<amd-dependency path="./partials" />
 
-export * from './directives/array_join'
-export * from './directives/give_focus'
-export * from './filters/filters'
+import {arrayJoin} from './directives/array_join';
+import * as test from './controllers/all';
 
+// export * from './directives/give_focus'
+// export * from './filters/filters'
+//
+// import {Component} from 'angular2/angular2';
+// console.log(Component);
+
+export {arrayJoin, test};

public/app/core/core_module.ts

@@ -2,4 +2,4 @@
 
 import angular = require('angular');
 
-export = angular.module('grafana.core', ['ngRoute']);
+export default angular.module('grafana.core', ['ngRoute']);

public/app/core/directives/array_join.ts

@@ -2,7 +2,7 @@
 
 import angular = require('angular');
 import _ = require('lodash');
-import coreModule = require('../core_module');
+import coreModule from '../core_module';
 
 export function arrayJoin() {
   'use strict';

public/app/headers/angularjs/angularjs.d.ts

@@ -13,7 +13,6 @@ interface Function {
 }
 
 // Collapse angular into ng
-import ng = angular;
 // Support AMD require
 declare module 'angular' {
     var angular: angular.IAngularStatic;

public/app/headers/common.d.ts

 ///<reference path="require/require.d.ts" />
 ///<reference path="angularjs/angularjs.d.ts" />
 ///<reference path="lodash/lodash.d.ts" />
+///<reference path="angular2/angular2.d.ts" />
 ///<reference path="moment/moment.d.ts" />
 ///<reference path="es6-promise/es6-promise.d.ts" />
 
@@ -17,6 +18,11 @@ declare module 'app/core/utils/kbn' {
   export = kbn;
 }
 
+declare module 'app/core/store' {
+  var store : any;
+  export = store;
+}
+
 declare module 'angular-route' {
   var kbn : any;
   export = kbn;

public/app/headers/es6-promise/es6-promise.d.ts

@@ -5,6 +5,7 @@
 
 interface Thenable<R> {
     then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
+    then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => void): Thenable<U>;
 }
 
 declare class Promise<R> implements Thenable<R> {
@@ -28,6 +29,7 @@ declare class Promise<R> implements Thenable<R> {
 	 * @param onRejected called when/if "promise" rejects
 	 */
     then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => U | Thenable<U>): Promise<U>;
+    then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => void): Promise<U>;
 
 	/**
 	 * Sugar for promise.then(undefined, onRejected)

public/app/headers/rx/rx.d.ts

+// Type definitions for RxJS v2.5.3
+// Project: http://rx.codeplex.com/
+// Definitions by: gsino <http://www.codeplex.com/site/users/view/gsino>, Igor Oleinikov <https://github.com/Igorbek>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///<reference path="rx-lite.d.ts"/>
+
+declare module Rx {
+    export interface IScheduler {
+		catch(handler: (exception: any) => boolean): IScheduler;
+		catchException(handler: (exception: any) => boolean): IScheduler;
+	}
+
+    // Observer
+	export interface Observer<T> {
+		checked(): Observer<any>;
+	}
+
+	interface ObserverStatic {
+		/**
+		* Schedules the invocation of observer methods on the given scheduler.
+		* @param scheduler Scheduler to schedule observer messages on.
+		* @returns Observer whose messages are scheduled on the given scheduler.
+		*/
+		notifyOn<T>(scheduler: IScheduler): Observer<T>;
+	}
+
+	export interface Observable<T> {
+		observeOn(scheduler: IScheduler): Observable<T>;
+		subscribeOn(scheduler: IScheduler): Observable<T>;
+
+		amb(rightSource: Observable<T>): Observable<T>;
+		amb(rightSource: IPromise<T>): Observable<T>;
+		onErrorResumeNext(second: Observable<T>): Observable<T>;
+		onErrorResumeNext(second: IPromise<T>): Observable<T>;
+		bufferWithCount(count: number, skip?: number): Observable<T[]>;
+		windowWithCount(count: number, skip?: number): Observable<Observable<T>>;
+		defaultIfEmpty(defaultValue?: T): Observable<T>;
+		distinct(skipParameter: boolean, valueSerializer: (value: T) => string): Observable<T>;
+		distinct<TKey>(keySelector?: (value: T) => TKey, keySerializer?: (key: TKey) => string): Observable<T>;
+		groupBy<TKey, TElement>(keySelector: (value: T) => TKey, skipElementSelector?: boolean, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, T>>;
+		groupBy<TKey, TElement>(keySelector: (value: T) => TKey, elementSelector: (value: T) => TElement, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, TElement>>;
+		groupByUntil<TKey, TDuration>(keySelector: (value: T) => TKey, skipElementSelector: boolean, durationSelector: (group: GroupedObservable<TKey, T>) => Observable<TDuration>, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, T>>;
+		groupByUntil<TKey, TElement, TDuration>(keySelector: (value: T) => TKey, elementSelector: (value: T) => TElement, durationSelector: (group: GroupedObservable<TKey, TElement>) => Observable<TDuration>, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, TElement>>;
+	}
+
+	interface ObservableStatic {
+		using<TSource, TResource extends IDisposable>(resourceFactory: () => TResource, observableFactory: (resource: TResource) => Observable<TSource>): Observable<TSource>;
+		amb<T>(...sources: Observable<T>[]): Observable<T>;
+		amb<T>(...sources: IPromise<T>[]): Observable<T>;
+		amb<T>(sources: Observable<T>[]): Observable<T>;
+		amb<T>(sources: IPromise<T>[]): Observable<T>;
+		onErrorResumeNext<T>(...sources: Observable<T>[]): Observable<T>;
+		onErrorResumeNext<T>(...sources: IPromise<T>[]): Observable<T>;
+		onErrorResumeNext<T>(sources: Observable<T>[]): Observable<T>;
+		onErrorResumeNext<T>(sources: IPromise<T>[]): Observable<T>;
+	}
+
+	interface GroupedObservable<TKey, TElement> extends Observable<TElement> {
+		key: TKey;
+		underlyingObservable: Observable<TElement>;
+	}
+}
+
+declare module "rx" {
+    export = Rx
+}

public/app/headers/tsd.d.ts

 /// <reference path="es6-promise/es6-promise.d.ts" />
 /// <reference path="mocha/mocha.d.ts" />
 /// <reference path="zone/zone.d.ts" />
+/// <reference path="angular2/angular2.d.ts" />
+/// <reference path="rx/rx-lite.d.ts" />
+/// <reference path="rx/rx.d.ts" />

public/app/jspm.conf.js

@@ -34,7 +34,7 @@ System.config({
     "angular": "github:angular/bower-angular@1.4.5",
     "angular-route": "github:angular/bower-angular-route@1.4.5",
     "angular-sanitize": "github:angular/bower-angular-sanitize@1.4.5",
-    "angular2": "npm:angular2@2.0.0-alpha.54",
+    "angular2/angular2": "npm:angular2@2.0.0-alpha.54/bundles/angular2.dev",
     "babel": "npm:babel-core@5.8.34",
     "babel-runtime": "npm:babel-runtime@5.8.34",
     "core-js": "npm:core-js@1.2.6",

tasks/options/typescript.js

@@ -6,7 +6,7 @@ module.exports = function() {
       src: ['public/**/*.ts', 'public/test/**/*.ts', "!public/vendor/**/*.ts"],
       dest: 'public_gen/',
       options: {
-        module: 'amd', //or commonjs
+        module: 'system', //or commonjs
         target: 'es5', //or es3
         rootDir: 'public/',
         sourceRoot: 'public/',

tsd.json

@@ -6,13 +6,22 @@
   "bundle": "public/app/headers/tsd.d.ts",
   "installed": {
     "es6-promise/es6-promise.d.ts": {
-      "commit": "be0b6b394f77a59e192ad7cfec18078706e44db5"
+      "commit": "31e7317c9a0793857109236ef7c7f223305a8aa9"
     },
     "mocha/mocha.d.ts": {
       "commit": "055b3172e8eb374a75826710c4d08677872620d3"
     },
     "zone/zone.d.ts": {
       "commit": "055b3172e8eb374a75826710c4d08677872620d3"
+    },
+    "rx/rx.d.ts": {
+      "commit": "31e7317c9a0793857109236ef7c7f223305a8aa9"
+    },
+    "rx/rx-lite.d.ts": {
+      "commit": "31e7317c9a0793857109236ef7c7f223305a8aa9"
+    },
+    "angular2/angular2.d.ts": {
+      "commit": "31e7317c9a0793857109236ef7c7f223305a8aa9"
     }
   }
 }