tech(systemjs): starting work on systemjs bundling

package.json

@@ -10,6 +10,9 @@
     "url": "http://github.com/torkelo/grafana.git"
     "url": "http://github.com/torkelo/grafana.git"
   },
   },
   "devDependencies": {
   "devDependencies": {
+    "angular2": "2.0.0-beta.0",
+    "es6-promise": "^3.0.2",
+    "es6-shim": "^0.33.3",
     "expect.js": "~0.2.0",
     "expect.js": "~0.2.0",
     "glob": "~3.2.7",
     "glob": "~3.2.7",
     "grunt": "~0.4.0",
     "grunt": "~0.4.0",
@@ -32,6 +35,7 @@
     "grunt-karma": "~0.8.3",
     "grunt-karma": "~0.8.3",
     "grunt-ng-annotate": "^0.9.2",
     "grunt-ng-annotate": "^0.9.2",
     "grunt-string-replace": "~0.2.4",
     "grunt-string-replace": "~0.2.4",
+    "grunt-systemjs-builder": "^0.2.5",
     "grunt-tslint": "^2.5.0",
     "grunt-tslint": "^2.5.0",
     "grunt-typescript": "^0.8.0",
     "grunt-typescript": "^0.8.0",
     "grunt-usemin": "3.0.0",
     "grunt-usemin": "3.0.0",
@@ -48,15 +52,12 @@
     "karma-script-launcher": "0.1.0",
     "karma-script-launcher": "0.1.0",
     "load-grunt-tasks": "0.2.0",
     "load-grunt-tasks": "0.2.0",
     "mocha": "2.2.4",
     "mocha": "2.2.4",
+    "reflect-metadata": "0.1.2",
     "requirejs": "2.1.17",
     "requirejs": "2.1.17",
     "rjs-build-analysis": "0.0.3",
     "rjs-build-analysis": "0.0.3",
-    "tslint": "^2.5.0-beta",
-    "angular2": "2.0.0-beta.0",
-    "systemjs": "0.19.6",
-    "es6-promise": "^3.0.2",
-    "es6-shim": "^0.33.3",
-    "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
     "rxjs": "5.0.0-beta.0",
+    "systemjs": "0.19.6",
+    "tslint": "^2.5.0-beta",
     "zone.js": "0.5.10"
     "zone.js": "0.5.10"
   },
   },
   "engines": {
   "engines": {
@@ -74,6 +75,7 @@
     "karma-sinon": "^1.0.3",
     "karma-sinon": "^1.0.3",
     "lodash": "^2.4.1",
     "lodash": "^2.4.1",
     "sinon": "1.16.1",
     "sinon": "1.16.1",
+    "systemjs-builder": "^0.14.15",
     "typescript": "^1.7.5"
     "typescript": "^1.7.5"
   }
   }
 }
 }

public/app/core/utils/rangeutil.ts

 ///<reference path="../../headers/common.d.ts" />
 ///<reference path="../../headers/common.d.ts" />
 
 
-import moment = require('moment');
 import _ = require('lodash');
 import _ = require('lodash');
-import angular = require('angular');
+
+import angular from 'angular';
+import moment from 'moment';
 import * as dateMath from './datemath';
 import * as dateMath from './datemath';
 
 
 var spans = {
 var spans = {

public/app/features/dashboard/timepicker/timepicker.ts

 ///<reference path="../../../headers/common.d.ts" />
 ///<reference path="../../../headers/common.d.ts" />
 ///<amd-dependency path="./input_date" name="inputDate" />
 ///<amd-dependency path="./input_date" name="inputDate" />
 
 
-import angular = require('angular');
 import _ = require('lodash');
 import _ = require('lodash');
-import moment = require('moment');
 import kbn = require('app/core/utils/kbn');
 import kbn = require('app/core/utils/kbn');
 
 
+import angular from 'angular';
+import moment from 'moment';
 import * as dateMath from 'app/core/utils/datemath';
 import * as dateMath from 'app/core/utils/datemath';
 import * as rangeUtil from 'app/core/utils/rangeutil';
 import * as rangeUtil from 'app/core/utils/rangeutil';
 
 

public/app/grafana_app.ts

@@ -17,6 +17,9 @@ import bootstrap = require('bootstrap');
 import kbn = require('app/core/utils/kbn');
 import kbn = require('app/core/utils/kbn');
 import config = require('app/core/config');
 import config = require('app/core/config');
 
 
+// import {Component} from 'vendor/npm/angular2/core';
+// console.log(Component);
+
 export class GrafanaApp {
 export class GrafanaApp {
   registerFunctions: any;
   registerFunctions: any;
   ngModuleDependencies: any[];
   ngModuleDependencies: any[];

public/app/plugins/panels/table/editor.ts

 ///<reference path="../../../headers/common.d.ts" />
 ///<reference path="../../../headers/common.d.ts" />
 
 
-import angular = require('angular');
-import $ = require('jquery');
 import _ = require('lodash');
 import _ = require('lodash');
 import kbn = require('app/core/utils/kbn');
 import kbn = require('app/core/utils/kbn');
-import moment = require('moment');
 
 
+import $ from 'jquery';
+import moment from 'moment';
+import angular from 'angular';
 import {transformers} from './transformers';
 import {transformers} from './transformers';
 
 
 export class TablePanelEditorCtrl {
 export class TablePanelEditorCtrl {

public/app/plugins/panels/table/module.ts

 ///<reference path="../../../headers/common.d.ts" />
 ///<reference path="../../../headers/common.d.ts" />
 
 
-import angular = require('angular');
-import $ = require('jquery');
 import _ = require('lodash');
 import _ = require('lodash');
 import kbn = require('app/core/utils/kbn');
 import kbn = require('app/core/utils/kbn');
-import moment = require('moment');
 
 
+import $ from 'jquery';
+import moment from 'moment';
+import angular from 'angular';
 import {TablePanelCtrl} from './controller';
 import {TablePanelCtrl} from './controller';
 import {TableRenderer} from './renderer';
 import {TableRenderer} from './renderer';
 import {tablePanelEditor} from './editor';
 import {tablePanelEditor} from './editor';

public/app/plugins/panels/table/renderer.ts

@@ -2,7 +2,7 @@
 
 
 import _ = require('lodash');
 import _ = require('lodash');
 import kbn = require('app/core/utils/kbn');
 import kbn = require('app/core/utils/kbn');
-import moment = require('moment');
+import moment from 'moment';
 
 
 export class TableRenderer {
 export class TableRenderer {
   formaters: any[];
   formaters: any[];

public/app/systemjs.conf.js

 System.config({
 System.config({
   defaultJSExtenions: true,
   defaultJSExtenions: true,
+  baseURL: 'public',
   paths: {
   paths: {
-    'moment': 'public/vendor/moment.js',
-    "jquery": "public/vendor/jquery/dist/jquery.js",
-    'lodash-src': 'public/vendor/lodash.js',
-    "lodash": 'public/app/core/lodash_extended.js',
-    "angular": "public/vendor/angular/angular.js",
-    "bootstrap": "public/vendor/bootstrap/bootstrap.js",
-    'angular-route':          'public/vendor/angular-route/angular-route.js',
-    'angular-sanitize':       'public/vendor/angular-sanitize/angular-sanitize.js',
-    "angular-ui":             "public/vendor/angular-ui/ui-bootstrap-tpls.js",
-    "angular-strap":          "public/vendor/angular-other/angular-strap.js",
-    "angular-dragdrop":       "public/vendor/angular-native-dragdrop/draganddrop.js",
-    "angular-bindonce":       "public/vendor/angular-bindonce/bindonce.js",
-    "spectrum": "public/vendor/spectrum.js",
-    "bootstrap-tagsinput": "public/vendor/tagsinput/bootstrap-tagsinput.js",
+    'moment': 'vendor/moment.js',
+    "jquery": "vendor/jquery/dist/jquery.js",
+    'lodash-src': 'vendor/lodash.js',
+    "lodash": 'app/core/lodash_extended.js',
+    "angular": "vendor/angular/angular.js",
+    "bootstrap": "vendor/bootstrap/bootstrap.js",
+    'angular-route':          'vendor/angular-route/angular-route.js',
+    'angular-sanitize':       'vendor/angular-sanitize/angular-sanitize.js',
+    "angular-ui":             "vendor/angular-ui/ui-bootstrap-tpls.js",
+    "angular-strap":          "vendor/angular-other/angular-strap.js",
+    "angular-dragdrop":       "vendor/angular-native-dragdrop/draganddrop.js",
+    "angular-bindonce":       "vendor/angular-bindonce/bindonce.js",
+    "spectrum": "vendor/spectrum.js",
+    "bootstrap-tagsinput": "vendor/tagsinput/bootstrap-tagsinput.js",
     "jquery.flot": "vendor/flot/jquery.flot",
     "jquery.flot": "vendor/flot/jquery.flot",
     "jquery.flot.pie": "vendor/flot/jquery.flot.pie",
     "jquery.flot.pie": "vendor/flot/jquery.flot.pie",
     "jquery.flot.events": "vendor/flot/jquery.flot.events",
     "jquery.flot.events": "vendor/flot/jquery.flot.events",
@@ -36,9 +37,6 @@ System.config({
   },
   },
 
 
   map: {
   map: {
-    'vendor/npm/angular2': 'angular2',
-    app: 'public/app',
-    vendor: 'public/vendor',
   },
   },
 
 
   meta: {
   meta: {

public/vendor/moment.js

@@ -2788,7 +2788,6 @@
             globalScope.moment = moment;
             globalScope.moment = moment;
         }
         }
     }
     }
-    debugger;
 
 
     // CommonJS module is defined
     // CommonJS module is defined
     if (hasModule) {
     if (hasModule) {

public/views/index.html

@@ -62,6 +62,8 @@
 	<script src="[[.AppSubUrl]]/public/vendor/npm/es6-promise/dist/es6-promise.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/es6-promise/dist/es6-promise.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/rxjs/bundles/Rx.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/rxjs/bundles/Rx.js"></script>
+	<script src="[[.AppSubUrl]]/public/vendor/npm/angular2/bundles/angular2-polyfills.js"></script>
+	<script src="[[.AppSubUrl]]/public/vendor/npm/angular2/bundles/angular2.dev.js"></script>
 	<script src="[[.AppSubUrl]]/public/app/systemjs.conf.js"></script>
 	<script src="[[.AppSubUrl]]/public/app/systemjs.conf.js"></script>
 	<!-- endbuild -->
 	<!-- endbuild -->
 
 

tasks/systemjs_task.js

+module.exports = function(grunt) {
+  "use strict";
+
+  grunt.registerTask('systemjs:build', function() {
+    var path = require("path");
+    var Builder = require('systemjs-builder');
+    var done = this.async();
+
+    // optional constructor options
+    // sets the baseURL and loads the configuration file
+    var builder = new Builder('public_gen', 'public_gen/app/systemjs.conf.js');
+    console.log('Starting systemjs-builder');
+
+    builder
+      .bundle('app/app', 'public_gen/app/app.js')
+      .then(function() {
+        console.log('Build complete');
+        done();
+      })
+      .catch(function(err) {
+        console.log('Build error');
+        console.log(err);
+        done();
+      });
+  });
+
+};