feat(build): add webpack with ES2015 modules

Massive changes to bundle vendor and app libs using webpack, using
ES2015 modules (import). The resources, js and css, are loaded from
the folder "build"; html files, the templates, are not bundled.

This step helps the migration towards Angular.

To contribute the developer needs to watch the changes with the
command "npm run watch", creating new bundle files.

Known issues:

- crosshair disabled in candles chart due to d3 event and techan
issues in ES2015 module compatibility

karma.conf.js

@@ -8,12 +8,11 @@ module.exports = config => {
         frameworks: ["mocha", "chai"],
 
         files: [
-            "node_modules/angular/angular.js",
-
+            "build/vendor.bundle.js",
             "node_modules/angular-mocks/angular-mocks.js",
 
-            "src/client/app/**/*.module.js",
-            "src/client/app/**/*.js"
+            "build/app.bundle.js",
+            "src/client/app/**/*.spec.js"
         ],
 
         exclude: [

package.json

@@ -48,17 +48,23 @@
         "electron": "electron .",
         "lint": "eslint main.js karma.conf.js src/**/*.js",
         "karma": "karma start --single-run",
-        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+        "webpack": "webpack",
+        "watch": "webpack --watch"
     },
     "devDependencies": {
         "conventional-changelog-cli": "^1.2.0",
+        "css-loader": "^0.26.1",
         "eslint": "^3.15.0",
         "eslint-plugin-angular": "^1.6.1",
+        "extract-text-webpack-plugin": "^2.0.0-rc.3",
         "mocha": "^3.2.0",
         "chai": "^3.5.0",
         "karma": "^1.4.1",
         "karma-mocha": "^1.3.0",
         "karma-chai": "^0.1.0",
-        "karma-chrome-launcher": "^2.0.0"
+        "karma-chrome-launcher": "^2.0.0",
+        "uglify-js": "mishoo/UglifyJS2#harmony",
+        "webpack": "^2.2.1"
     }
 }

src/client/.eslintrc.yml

@@ -1,3 +1,6 @@
+parserOptions:
+    sourceType: "module"
+
 env:
     browser: true
     mocha: true
@@ -42,7 +45,7 @@ rules:
     angular/no-cookiestore: "error"
     angular/no-jquery-angularelement: "error"
     angular/no-private-call: "error"
-    angular/no-service-method: "error"
+    angular/no-service-method: "off"
     angular/no-services: ["error", ["$http", "$resource", "Restangular"]]
     angular/on-watch: "error"
     angular/rest-service: "off"

src/client/app/common/app.component.js

@@ -1,12 +1,6 @@
-"use strict";
+import { AppController } from "./app.controller";
 
-{
-    const app = {
-        templateUrl: "app/common/app.html",
-        controller: "AppController"
-    };
-
-    angular
-        .module("common")
-        .component("app", app);
-}
+export const appComponent = {
+    templateUrl: "app/common/app.html",
+    controller: AppController
+};

src/client/app/common/app.config.js

@@ -1,47 +1,38 @@
-"use strict";
+export function appConfig($httpProvider, $locationProvider) {
+    const interceptors = $httpProvider.interceptors;
 
-{
-    angular
-        .module("common")
-        .config(config);
+    interceptors.push(["$q", "$rootScope", ($q, $rootScope) => {
+        let nLoadings = 0;
 
-    config.$inject = ["$httpProvider", "$locationProvider"];
-    function config($httpProvider, $locationProvider) {
-        const interceptors = $httpProvider.interceptors;
+        return {
+            request(request) {
+                nLoadings += 1;
 
-        interceptors.push(["$q", "$rootScope", ($q, $rootScope) => {
-            let nLoadings = 0;
+                $rootScope.isLoadingView = true;
 
-            return {
-                request(request) {
-                    nLoadings += 1;
+                return request;
+            },
 
-                    $rootScope.isLoadingView = true;
-
-                    return request;
-                },
-
-                response(response) {
-                    nLoadings -= 1;
-                    if (nLoadings === 0) {
-                        $rootScope.isLoadingView = false;
-                    }
-
-                    return response;
-                },
+            response(response) {
+                nLoadings -= 1;
+                if (nLoadings === 0) {
+                    $rootScope.isLoadingView = false;
+                }
 
-                responseError(response) {
-                    nLoadings -= 1;
-                    if (!nLoadings) {
-                        $rootScope.isLoadingView = false;
-                    }
+                return response;
+            },
 
-                    return $q.reject(response);
+            responseError(response) {
+                nLoadings -= 1;
+                if (!nLoadings) {
+                    $rootScope.isLoadingView = false;
                 }
-            };
-        }]);
 
-        $locationProvider.html5Mode(true);
-    }
+                return $q.reject(response);
+            }
+        };
+    }]);
 
+    $locationProvider.html5Mode(true);
 }
+appConfig.$inject = ["$httpProvider", "$locationProvider"];

src/client/app/common/app.controller.js

@@ -1,22 +1,14 @@
-"use strict";
-
-{
-    angular
-        .module("common")
-        .controller("AppController", AppController);
-
-    AppController.$inject = [];
-    function AppController() {
-        const vm = this;
-
-        vm.tabSelectedIndex = 0;
+export class AppController {
+    $onInit() {
+        this.tabSelectedIndex = 0;
+    }
 
-        vm.next = () => {
-            vm.tabSelectedIndex = Math.min(vm.tabSelectedIndex + 1, 6);
-        };
-        vm.previous = () => {
-            vm.tabSelectedIndex = Math.max(vm.tabSelectedIndex - 1, 0);
-        };
+    next() {
+        this.tabSelectedIndex = Math.min(this.tabSelectedIndex + 1, 6);
     }
 
+    previous() {
+        this.tabSelectedIndex = Math.max(this.tabSelectedIndex - 1, 0);
+    }
 }
+AppController.$inject = [];

src/client/app/common/app.module.js

@@ -1,6 +1,15 @@
-"use strict";
+import "./app.css";
 
-angular
-    .module("common", [
-        "ngMaterial"
-    ]);
+import angular from "angular";
+import material from "angular-material";
+
+import { appComponent } from "./app.component";
+import { appConfig } from "./app.config";
+
+export const app = angular
+    .module("common.app", [
+        material
+    ])
+    .component("app", appComponent)
+    .config(appConfig)
+    .name;

src/client/app/common/common.module.js

@@ -0,0 +1,9 @@
+import angular from "angular";
+
+import { app } from "./app.module";
+
+export const common = angular
+    .module("common", [
+        app
+    ])
+    .name;

src/client/app/components/account/account.component.js

@@ -0,0 +1,6 @@
+import { AccountController } from "./account.controller";
+
+export const accountComponent = {
+    templateUrl: "app/components/account/account.html",
+    controller: AccountController
+};

src/client/app/components/account/account.controller.js

@@ -0,0 +1,10 @@
+export class AccountController {
+    constructor(AccountService) {
+        this.AccountService = AccountService;
+    }
+
+    $onInit() {
+        this.account = this.AccountService.getAccount();
+    }
+}
+AccountController.$inject = ["AccountsService"];

src/client/app/components/account/account.module.js

@@ -1,4 +1,10 @@
-"use strict";
+import angular from "angular";
 
-angular
-    .module("components.account", []);
+import { accountComponent } from "./account.component";
+import { AccountsService } from "./accounts.service";
+
+export const account = angular
+    .module("components.account", [])
+    .component("account", accountComponent)
+    .service("AccountsService", AccountsService)
+    .name;