Add support to enable TypeScript loader

* Add public api for enable loader.
* Add default options taken from ts-loader docs.
* Add loader to generated configuration.
* Update packages.json dependencies
* Add loader to loader features to check later.

Author: David Paz

index.js

@@ -341,6 +341,21 @@ module.exports = {
         return this;
     },
 
+    /**
+     * Call this if you plan on loading TypeScript files.
+     *
+     * Supported options:
+     * @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#available-options
+     *
+     * @param {object} options
+     * @return {exports}
+     */
+    enableTypeScriptLoader(options = {}) {
+        webpackConfig.enableTypeScriptLoader(options);
+
+        return this;
+    },
+
     /**
      * If enabled, the output directory is emptied between
      * each build (to remove old files).

lib/WebpackConfig.js

@@ -51,6 +51,21 @@ class WebpackConfig {
         this.babelConfigurationCallback = function() {};
         this.useReact = false;
         this.loaders = [];
+        this.useTypeScriptLoader = false;
+        this.typeScriptOptions = {
+            transpileOnly: false,
+            happyPackMode: false,
+            logInfoToStdOut: false,
+            logLevel: 'info',
+            silent: false,
+            ignoreDiagnostics: [],
+            compiler: 'typescript',
+            configFileName: 'tsconfig.json',
+            visualStudioErrorFormat: false,
+            compilerOptions: {},
+            entryFileIsJs: false,
+            appendTsSuffixTo: []
+        };
     }
 
     getContext() {
@@ -222,6 +237,18 @@ class WebpackConfig {
         this.useReact = true;
     }
 
+    enableTypeScriptLoader(options = {}) {
+        this.useTypeScriptLoader = true;
+
+        for (const optionKey of Object.keys(options)) {
+            if (!(optionKey in this.sassOptions)) {
+                throw new Error(`Invalid option "${optionKey}" passed to enableTypeScriptLoader(). Valid keys are ${Object.keys(this.typeScriptOptions).join(', ')}`);
+            }
+
+            this.typeScriptOptions[optionKey] = options[optionKey];
+        }
+    }
+
     cleanupOutputBeforeBuild() {
         this.cleanupOutput = true;
     }

lib/config-generator.js

@@ -154,6 +154,28 @@ class ConfigGenerator {
             });
         }
 
+        if (this.webpackConfig.useTypeScriptLoader) {
+            loaderFeatures.ensureLoaderPackagesExist('typescript');
+
+            this.webpackConfig.addLoader({
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        // @see https://babeljs.io/docs/usage/api/#options
+                        // @see https://github.com/babel/babel-loader#options
+                        options: babelConfig
+                    },
+                    {
+                        loader: 'ts-loader',
+                        // @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#available-options
+                        options: this.webpackConfig.typeScriptOptions
+                    }
+                ]
+            });
+        }
+
         this.webpackConfig.loaders.forEach((loader) => {
             rules.push(loader);
         });

lib/loader-features.js

@@ -35,6 +35,11 @@ const loaderFeatures = {
         method: 'enableReactPreset()',
         packages: ['babel-preset-react'],
         description: 'process React JS files'
+    },
+    typescript: {
+        method: 'enableTypeScriptLoader()',
+        packages: ['typescript', 'ts-loaders'],
+        description: 'process TypeScript files'
     }
 };