update dependencies

package.json

@@ -53,39 +53,41 @@
   },
   "devDependencies": {
     "@types/jasmine": "^2.8.6",
-    "awesome-typescript-loader": "^3.4.1",
-    "css-loader": "^0.28.9",
+    "cache-loader": "^1.2.2",
+    "css-loader": "^0.28.10",
     "extract-loader": "^1.0.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
-    "jasmine": "^2.9.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.0",
+    "jasmine": "^3.1.0",
     "jasmine-promises": "^0.4.1",
     "json-loader": "^0.5.7",
     "karma": "^2.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-jasmine": "^1.1.1",
     "karma-junit-reporter": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "^2.0.13",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.7.2",
-    "rimraf": "^2.6.2",
     "raw-loader": "^1.0.0-beta.0",
+    "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.20.1",
-    "stylelint": "^8.4.0",
-    "stylelint-config-standard": "^18.0.0",
-    "stylelint-scss": "^2.3.0",
+    "style-loader": "^0.20.2",
+    "stylelint": "^9.1.1",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-scss": "^2.4.0",
+    "thread-loader": "^1.1.5",
+    "ts-loader": "^4.0.0",
     "tslint": "^5.9.1",
-    "tslint-consistent-codestyle": "^1.11.0",
-    "tslint-eslint-rules": "^4.1.1",
+    "tslint-consistent-codestyle": "^1.11.1",
+    "tslint-eslint-rules": "^5.1.0",
     "typedoc": "^0.10.0",
-    "typescript": "^2.7.1",
-    "uglify-es": "^3.3.9",
-    "uglifyjs-webpack-plugin": "^1.1.8",
+    "typescript": "^2.7.2",
     "url-loader": "^0.6.2",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0"
   },
   "dependencies": {
     "@types/react": "^16.0.36",

tsconfig.json

@@ -25,8 +25,10 @@
     "noUnusedParameters": true,
     "strictNullChecks": true,
     "stripInternal": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
     "skipLibCheck": true,
-    "baseUrl": "../"
+    "esModuleInterop": true
   },
   "compileOnSave": false,
   "include": [
@@ -35,7 +37,6 @@
     "demo/**/*.ts",
     "demo/**/*.tsx",
     "tests/**/*.ts",
-    "index.ts",
     "tsd.d.ts"
   ]
 }

tsconfig_dev.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es6"
+  }
+}

tsd.d.ts

@@ -1,23 +1,21 @@
 //allow sass modules
-declare module "*.scss" {
-  const content:string;
+declare module '*.scss' {
+  const content: string;
   export default content;
 }
-declare module "*.png";
+declare module '*.png';
 //allow html dependencies
-declare module "*.html" {
-  const content:string;
+declare module '*.html' {
+  const content: string;
   export default content;
 }
 //allow json dependencies
-declare module "*.json";
+declare module '*.json';
 //allow file dependencies
-declare module "file-loader!*";
+declare module 'file-loader!*';
 //allow file dependencies
-declare module "raw-loader!*";
+declare module 'raw-loader!*';
 //allow url dependencies
-declare module "url-loader!*";
+declare module 'url-loader!*';
 //allow html dependencies
-declare module "imports-loader!*";
-
-declare module "fast-deep-equal";
+declare module 'imports-loader!*';

webpack.config.js

@@ -1,10 +1,9 @@
-
 const resolve = require('path').resolve;
 const pkg = require('./package.json');
 const webpack = require('webpack');
 const fs = require('fs');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const now = new Date();
 const prefix = (n) => n < 10 ? ('0' + n) : n.toString();
@@ -17,50 +16,43 @@ const banner = '/*! ' + (pkg.title || pkg.name) + ' - v' + pkg.version + ' - ' +
   '* Copyright (c) ' + year + ' ' + pkg.author.name + ';' +
   ' Licensed ' + pkg.license + '*/\n';
 
-
-//list of loaders and their mappings
-const webpackloaders = [
-  {test: /\.s?css$/, loader: 'style-loader!css-loader!sass-loader'},
-  {test: /\.tsx?$/, loader: 'awesome-typescript-loader'},
-  {
-    test: /\.(png|jpg)$/,
-    loader: 'url-loader',
-    options: {
-      limit: 20000 //inline <= 10kb
-    }
-  },
-  {
-    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-    loader: 'url-loader',
-    options: {
-      limit: 20000, //inline <= 10kb
-      mimetype: 'application/font-woff'
-    }
-  },
-  {
-    test: /\.svg(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-    loader: 'url-loader',
-    options: {
-      limit: 20000, //inline <= 10kb
-      mimetype: 'image/svg+xml'
-    }
-  },
-  {test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader'}
-];
-
 /**
  * generate a webpack configuration
  */
-function generateWebpack(options) {
-  const base = {
+module.exports = (env) => {
+
+  const tsLoader = [{
+      loader: 'cache-loader'
+    },
+    {
+      loader: 'thread-loader',
+      options: {
+        // there should be 1 cpu for the fork-ts-checker-webpack-plugin
+        workers: require('os').cpus().length - 1,
+      },
+    },
+    {
+      loader: 'ts-loader',
+      options: {
+        configFile: env === 'dev' ? 'tsconfig_dev.json' : 'tsconfig.json',
+        happyPackMode: true // IMPORTANT! use happyPackMode mode to speed-up  compilation and reduce errors reported to webpack
+      }
+    }
+  ];
+
+  if (process.env.CI) {
+    tsLoader.splice(0, 2); // just the loader no optimization
+  }
+
+  return {
     entry: {
       LineUpJSx: './src/index.tsx',
       builder2: './demo/builder2.tsx',
       builder3: './demo/builder3.tsx'
     },
     output: {
       path: resolve(__dirname, 'build'),
-      filename: `[name]${options.min && !options.nosuffix ? '.min' : ''}.js`,
+      filename: `[name].js`,
       chunkFilename: '[chunkhash].js',
       publicPath: '', //no public path = relative
       library: 'LineUpJS',
@@ -73,99 +65,83 @@ function generateWebpack(options) {
       symlinks: false
     },
     plugins: [
+      new webpack.BannerPlugin({
+        banner: banner,
+        raw: true
+      }),
       //define magic constants that are replaced
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(options.isProduction ? 'production': 'development'),
         __VERSION__: JSON.stringify(pkg.version),
         __LICENSE__: JSON.stringify(pkg.license),
-        __BUILD_ID__: JSON.stringify(buildId),
-        __DEBUG__: options.isDev || options.isTest,
-        __TEST__: options.isTest,
-        __PRODUCTION__: options.isProduction,
-        __APP_CONTEXT__: JSON.stringify('/')
+        __BUILD_ID__: JSON.stringify(buildId)
+      }),
+      new ExtractTextPlugin({
+        filename: `[name].css`
+      }),
+      new ForkTsCheckerWebpackPlugin({
+        checkSyntacticErrors: true
       })
-      //rest depends on type
     ],
     externals: { //react always external
-      react: { amd: 'react', root: 'React', commonjs: 'react', commonjs2: 'react' },
-      'react-dom': { amd: 'react-dom', root: 'ReactDOM', commonjs: 'react-dom', commonjs2: 'react-dom' }
-},
+      react: {
+        amd: 'react',
+        root: 'React',
+        commonjs: 'react',
+        commonjs2: 'react'
+      },
+      'react-dom': {
+        amd: 'react-dom',
+        root: 'ReactDOM',
+        commonjs: 'react-dom',
+        commonjs2: 'react-dom'
+      }
+    },
     module: {
-      loaders: webpackloaders.slice()
+      rules: [{
+          test: /\.s?css$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: ['css-loader', 'sass-loader']
+          })
+        },
+        {
+          test: /\.tsx?$/,
+          use: tsLoader
+        },
+        {
+          test: /\.(png|jpg)$/,
+          loader: 'url-loader',
+          options: {
+            limit: 20000 //inline <= 10kb
+          }
+        },
+        {
+          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: 'url-loader',
+          options: {
+            limit: 20000, //inline <= 20kb
+            mimetype: 'application/font-woff'
+          }
+        },
+        {
+          test: /\.svg(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: 'url-loader',
+          options: {
+            limit: 10000, //inline <= 10kb
+            mimetype: 'image/svg+xml'
+          }
+        },
+        {
+          test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: 'file-loader'
+        }
+      ]
     },
     watchOptions: {
-      aggregateTimeout: 500,
       ignored: /node_modules/
     },
     devServer: {
       contentBase: 'demo'
     }
   };
-
-  if (options.isProduction) {
-      base.plugins.unshift(new webpack.BannerPlugin({
-        banner: banner,
-        raw: true
-      }));
-  }
-
-  if (!options.isTest) {
-    //extract the included css file to own file
-    const p = new ExtractTextPlugin({
-      filename: `[name]${options.min && !options.nosuffix ? '.min' : ''}.css`,
-      allChunks: true // there seems to be a bug in dynamically loaded chunk styles are not loaded, workaround: extract all styles from all chunks
-    });
-    base.plugins.push(p);
-    base.module.loaders[0] = Object.assign({}, base.module.loaders[0], {loader: p.extract(['css-loader', 'sass-loader'])});
-  }
-  if (options.min) {
-    //use a minifier
-    base.plugins.push(
-      new webpack.LoaderOptionsPlugin({
-        minimize: true,
-        debug: false
-      }),
-      new UglifyJsPlugin({
-        uglifyOptions: {
-          ecma: 6,
-          mange: true,
-          compress: true,
-          warnings: true
-        },
-        extractComments: false
-      }));
-  } else if (options.isDev) {
-    //generate source maps
-    base.devtool = 'source-map';
-  }
-  return base;
-}
-
-function generateWebpackConfig(env) {
-  const isTest = env === 'test';
-  const isProduction = env === 'prod';
-  const isDev = !isProduction && !isTest;
-
-  const base = {
-    isProduction,
-    isDev,
-    isTest
-  };
-
-  //single generation
-  if (isDev || isTest) {
-    return generateWebpack(base);
-  } else { //isProduction
-    return [
-      //plain
-      generateWebpack(base),
-      //minified
-      generateWebpack(Object.assign({}, base, {
-        min: true
-      }))
-    ];
-  }
-}
-
-module.exports = generateWebpackConfig;
-module.exports.generateWebpack = generateWebpack;
+};