feat(build): updated webpack config

installed tslint\eslint valorsoft configs for linters
added travis.ci build configuration
updated index.html for latst html-webpack plugin

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./node_modules/eslint-config-valorsoft/.eslintrc.json",
+  "env": {
+    "node": true
+  }
+}

.travis.yml

@@ -0,0 +1,21 @@
+language: node_js
+node_js:
+  - "5"
+
+before_install:
+- npm install -g npm@latest
+
+script:
+- npm run flow.install:typings
+- npm test
+
+addons:
+  # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ )
+  sauce_connect: true
+  firefox: "42.0"
+  apt:
+    sources:
+    - ubuntu-toolchain-r-test
+    # required by node-gyp to build some packages
+    packages:
+    - g++-4.8

demo/components/charts/line-chart-demo.ts

@@ -60,7 +60,7 @@ export class LineChartDemo {
   private lineChartType:string = 'Line';
 
   private randomize() {
-    let _lineChartData = [];
+    let _lineChartData:Array<any> = [];
     for (let i = 0; i < this.lineChartData.length; i++) {
       _lineChartData[i] = [];
       for (let j = 0; j < this.lineChartData[i].length; j++) {

demo/index.html

@@ -12,7 +12,7 @@
 
   <!--link to bootstrap.css-->
   <link rel="stylesheet" href="assets/css/prism-okaidia.css">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/style.css">
 
   <style media="screen">
@@ -35,10 +35,11 @@
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
   <!-- Angular2 files -->
-  <script src="/build/angular2.js"></script>
+  <!--<script src="/build/angular2.js"></script>-->
   <!-- Angular2 chart script -->
-  <script src="/build/angular2-charts.js"></script>
+  <!--<script src="/build/angular2-charts.js"></script>-->
   <!-- App script -->
-  <script src="/build/angular2-charts-demo.js"></script>
+  <!--<script src="/build/angular2-charts-demo.js"></script>-->
+  <!--<script src="/node_modules/chart.js/Chart.min.js"></script>-->
 </body>
 </html>

demo/index.ts

@@ -1,4 +1,3 @@
-///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
 import {bootstrap} from 'angular2/bootstrap';
 import {Component} from 'angular2/core';
 import {NgClass} from 'angular2/common';

package.json

@@ -49,7 +49,7 @@
     "angular2": "2.0.0-beta.14"
   },
   "dependencies": {
-    "chart.js": "1.1.1"
+    "chart.js": "1.0.2"
   },
   "devDependencies": {
     "angular2": "2.0.0-beta.14",
@@ -58,10 +58,12 @@
     "chart.js": "1.0.2",
     "clean-webpack-plugin": "0.1.8",
     "compression-webpack-plugin": "0.3.1",
+    "copy-webpack-plugin": "1.1.1",
     "cpy-cli": "1.0.0",
     "del-cli": "0.2.0",
+    "es6-promise": "3.1.2",
     "es6-shim": "0.35.0",
-    "eslint": "2.7.0",
+    "eslint-config-valorsoft": "0.0.10",
     "exports-loader": "0.6.3",
     "gulp": "3.9.1",
     "gulp-clean": "0.3.2",
@@ -70,6 +72,7 @@
     "gulp-tsc": "1.1.5",
     "gulp-tslint": "4.3.5",
     "html-loader": "0.4.3",
+    "html-webpack-plugin": "2.15.0",
     "markdown-loader": "0.1.7",
     "marked": "0.3.5",
     "ng2-bootstrap": "1.0.11",
@@ -83,7 +86,7 @@
     "systemjs-builder": "0.15.15",
     "transfer-webpack-plugin": "0.1.4",
     "ts-loader": "0.8.2",
-    "tslint": "3.7.4",
+    "tslint-config-valorsoft": "0.0.3",
     "typescript": "1.8.10",
     "typings": "0.7.12",
     "webpack": "1.12.15",

tslint.json

@@ -1,54 +1,4 @@
 {
-  "rules": {
-    "class-name": true,
-    "comment-format": [true, "check-space"],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [true, "spaces"],
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [false, 140],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unused-expression": true,
-    "no-unused-variable": false,
-    "no-unreachable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "one-line": [true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [true, "single"],
-    "radix": true,
-    "semicolon": true,
-    "triple-equals": [true, "allow-null-check"],
-    "variable-name": false,
-    "whitespace": [true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator"
-    ]
-  }
+  "extends": "./node_modules/tslint-config-valorsoft/tslint.json",
+  "rulesDirectory": "./node_modules/codelyzer/dist/src"
 }

webpack.config.js

@@ -1,36 +1,35 @@
-var path = require('path');
-var marked = require('marked');
-var webpack = require('webpack');
+/* eslint global-require: 0 */
+'use strict';
 
-var Clean = require('clean-webpack-plugin');
-var CompressionPlugin = require('compression-webpack-plugin');
-var TransferWebpackPlugin = require('transfer-webpack-plugin');
+const path = require('path');
+const marked = require('marked');
+const webpack = require('webpack');
+const reqPrism = require('prismjs');
+const CompressionPlugin = require('compression-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // marked renderer hack
-marked.Renderer.prototype.code = function (code, lang) {
-  var out = this.options.highlight(code, lang);
+marked.Renderer.prototype.code = function renderCode(code, lang) {
+  const out = this.options.highlight(code, lang);
+  const classMap = this.options.langPrefix + lang;
 
   if (!lang) {
-    return '<pre><code>' + out + '\n</code></pre>';
+    return `<pre><code>${out}\n</code></pre>`;
   }
-
-  var classMap = this.options.langPrefix + lang;
-  return '<pre class="' + classMap + '"><code class="' + classMap + '">' + out + '\n</code></pre>\n';
+  return `<pre class="${classMap}"><code class="${classMap}">${out}\n</code></pre>\n`;
 };
 
 /*eslint no-process-env:0, camelcase:0*/
-var isProduction = (process.env.NODE_ENV || 'development') === 'production';
-
-var src = 'demo';
-//var absSrc = path.join(__dirname, src);
-var dest = '/build';
-var absDest = path.join(__dirname, dest);
+const isProduction = (process.env.NODE_ENV || 'development') === 'production';
+const devtool = process.env.NODE_ENV === 'test' ? 'inline-source-map' : 'source-map';
+const dest = 'demo-build';
+const absDest = root(dest);
 
-var config = {
+const config = {
   // isProduction ? 'source-map' : 'evale',
-  devtool: 'source-map',
-  debug: true,
-  cache: true,
+  devtool,
+  debug: false,
 
   verbose: true,
   displayErrorDetails: true,
@@ -41,21 +40,23 @@ var config = {
   },
 
   resolve: {
+    cache: false,
     root: __dirname,
-    extensions: ['', '.ts', '.js', '.json'],
-    alias: {}
+    extensions: ['', '.ts', '.js', '.json']
   },
 
   entry: {
     angular2: [
       // Angular 2 Deps
-      'zone.js/dist/zone',
+      'es6-shim',
+      'es6-promise',
+      'zone.js',
       'reflect-metadata',
       'angular2/common',
       'angular2/core'
     ],
     'angular2-charts': ['ng2-charts'],
-    'angular2-charts-demo': 'demo'
+    'angular2-bootstrap-demo': 'demo'
   },
 
   output: {
@@ -70,20 +71,19 @@ var config = {
     inline: true,
     colors: true,
     historyApiFallback: true,
-    contentBase: src,
-    publicPath: dest
+    contentBase: dest,
+    //publicPath: dest,
+    watchOptions: {aggregateTimeout: 300, poll: 1000}
   },
 
   markdownLoader: {
     langPrefix: 'language-',
-    highlight: function (code, lang) {
-      var language = !lang || lang === 'html' ? 'markup' : lang;
-      if (!global.Prism) {
-        global.Prism = require('prismjs');
-      }
-      var Prism = global.Prism;
+    highlight(code, lang) {
+      const language = !lang || lang === 'html' ? 'markup' : lang;
+      const Prism = global.Prism || reqPrism;
+
       if (!Prism.languages[language]) {
-        require('prismjs/components/prism-' + language + '.js');
+        require(`prismjs/components/prism-${language}.js`);
       }
       return Prism.highlight(code, Prism.languages[language]);
     }
@@ -92,64 +92,65 @@ var config = {
     loaders: [
       // support markdown
       {test: /\.md$/, loader: 'html?minimize=false!markdown'},
-
       // Support for *.json files.
       {test: /\.json$/, loader: 'json'},
-
       // Support for CSS as raw text
       {test: /\.css$/, loader: 'raw'},
-
       // support for .html as raw text
       {test: /\.html$/, loader: 'raw'},
-
       // Support for .ts files.
       {
         test: /\.ts$/,
         loader: 'ts',
-        exclude: [
-          /\.min\.js$/,
-          /\.spec\.ts$/,
-          /\.e2e\.ts$/,
-          /web_modules/,
-          /test/
-        ]
+        query: {
+          compilerOptions: {
+            removeComments: true,
+            noEmitHelpers: false
+          }
+        },
+        exclude: [/\.(spec|e2e)\.ts$/]
       }
     ],
     noParse: [
       /rtts_assert\/src\/rtts_assert/,
-      /reflect-metadata/
+      /reflect-metadata/,
+      /zone\.js\/dist\/zone-microtask/
     ]
   },
 
   plugins: [
-    new Clean(['build']),
+    //new Clean([dest]),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(true),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'angular2',
       minChunks: Infinity,
       filename: 'angular2.js'
     }),
-    new webpack.optimize.DedupePlugin({
-      __isProduction: isProduction
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin()
+    // static assets
+    new CopyWebpackPlugin([{from: 'demo/favicon.ico', to: 'favicon.ico'}]),
+    new CopyWebpackPlugin([{from: 'demo/assets', to: 'assets'}]),
+    // generating html
+    new HtmlWebpackPlugin({template: 'demo/index.html'})
   ],
-  pushPlugins: function () {
+  pushPlugins() {
     if (!isProduction) {
       return;
     }
-
-    this.plugins.push.apply(this.plugins, [
+    const plugins = [
       //production only
       new webpack.optimize.UglifyJsPlugin({
+        beautify: false,
+        mangle: false,
+        comments: false,
         compress: {
-          warnings: false,
-          drop_debugger: false
-        },
-        output: {
-          comments: false
-        },
-        beautify: false
+          screw_ie8: true
+          //warnings: false,
+          //drop_debugger: false
+        }
+        //verbose: true,
+        //beautify: false,
+        //quote_style: 3
       }),
       new CompressionPlugin({
         asset: '{file}.gz',
@@ -158,10 +159,19 @@ var config = {
         threshold: 10240,
         minRatio: 0.8
       })
-    ]);
+    ];
+
+    this
+      .plugins
+      .push
+      .apply(plugins);
   }
 };
 
 config.pushPlugins();
 
 module.exports = config;
+
+function root(partialPath) {
+  return path.join(__dirname, partialPath);
+}