feature #50 Add support to enableTypescriptLoader (davidmpaz, weaverryan)

This PR was merged into the master branch.

Discussion
----------

Add support to enableTypescriptLoader

Hi,

please would you consider adding this to main stream?

this add public API to enable TypeScript loader ([ts-loader](https://github.com/TypeStrong/ts-loader)). It follows much of what is described in #9

Cuurrently only add vanilla loader as described in [here](https://github.com/TypeStrong/ts-loader/blob/master/examples/vanilla/webpack.config.js) playing side by side with babel.

Future work would be to include also support to `happypack` and `fork-ts-checker-webpack-plugin`

Thanks in advance

Commits
-------

6d5dee8 Fixing bad merge
35d9e6f Merge branch 'master' into typescript
82e17e3 Remove unnecessary functional test
4d5319d Update yarn.lock with typescript deps
144acd2 Cleaning up unnecessary code.
f6bc6e7 Rename to enableTypeScriptLoader
facc132 Remove package-lock.json
25b9f18 Remove duplicated default configuration options
23619b2 Add test for error handling on missing ts loader
d887a79 Add typescript to missing loader error handling
61370ac Add .ts & .tsx to resolved extension
6ec2b52 Revert "Add .idea directory to gitignore rules"
356aaa2 Make tests check for content in browser context
822ceff Improve tests for compiling .tsx files
ae1bea3 Update packages-lock.json file
a02d8ab Add .idea directory to gitignore rules
32c2853 Revert accidental version change
846d142 Update tests to take into account refactoring
b43f5c9 Refactor to favor configure by callback
1352d1c Add missing extensions to config.resolve
7e8c118 Fix copy'n paste errors
58b7ef7 Add unit and functional test for TypeScript loader
fc26e1b Add support to enable TypeScript loader

Author: weaverryan

fixtures/js/index.ts

@@ -0,0 +1,3 @@
+import render = require('./render');
+
+render();

fixtures/js/render.ts

@@ -0,0 +1,5 @@
+function render() {
+    document.getElementById('app').innerHTML = "<h1>Welcome to Your TypeScript App</h1>";
+}
+
+export = render;

fixtures/js/render2.tsx

@@ -0,0 +1,5 @@
+function render() {
+    document.getElementById('app').innerHTML = "<h1>Welcome to Your TypeScript App</h1>";
+}
+
+export = render;

fixtures/js/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "compilerOptions": {}
+}

index.js

@@ -342,6 +342,23 @@ module.exports = {
         return this;
     },
 
+    /**
+     * Call this if you plan on loading TypeScript files.
+     *
+     * Encore.enableTypeScriptLoader(function(tsConfig) {
+     *      // change the tsConfig
+     * });
+     *
+     * Supported configuration options:
+     * @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#available-options
+     *
+     * @param {function} callback
+     * @return {exports}
+     */
+    enableTypeScriptLoader(callback) {
+        webpackConfig.enableTypeScriptLoader(callback);
+    }
+
     /**
      * If enabled, the Vue.js loader is enabled.
      *

lib/WebpackConfig.js

@@ -53,6 +53,8 @@ class WebpackConfig {
         this.useVueLoader = false;
         this.vueLoaderOptionsCallback = () => {};
         this.loaders = [];
+        this.useTypeScriptLoader = false;
+        this.tsConfigurationCallback = function() {};
     }
 
     getContext() {
@@ -224,6 +226,16 @@ class WebpackConfig {
         this.useReact = true;
     }
 
+    enableTypeScriptLoader(callback) {
+        this.useTypeScriptLoader = true;
+
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to enableTypeScriptLoader() must be a callback function.');
+        }
+
+        this.tsConfigurationCallback = callback;
+    }
+
     enableVueLoader(vueLoaderOptionsCallback = () => {}) {
         this.useVueLoader = true;
 

lib/config-generator.js

@@ -29,6 +29,7 @@ const cssLoaderUtil = require('./loaders/css');
 const sassLoaderUtil = require('./loaders/sass');
 const lessLoaderUtil = require('./loaders/less');
 const babelLoaderUtil = require('./loaders/babel');
+const tsLoaderUtil = require('./loaders/typescript');
 const vueLoaderUtil = require('./loaders/vue');
 
 class ConfigGenerator {
@@ -72,7 +73,7 @@ class ConfigGenerator {
         config.stats = this.buildStatsConfig();
 
         config.resolve = {
-            extensions: ['.js', '.jsx', '.vue'],
+            extensions: ['.js', '.jsx', '.vue', '.ts', '.tsx'],
             alias: {}
         };
 
@@ -161,6 +162,14 @@ class ConfigGenerator {
             });
         }
 
+        if (this.webpackConfig.useTypeScriptLoader) {
+            this.webpackConfig.addLoader({
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: tsLoaderUtil.getLoaders(this.webpackConfig)
+            });
+        }
+
         this.webpackConfig.loaders.forEach((loader) => {
             rules.push(loader);
         });

lib/friendly-errors/transformers/missing-loader.js

@@ -49,6 +49,10 @@ function transform(error) {
         case 'jsx':
             error.loaderName = 'react';
             break;
+        case 'tsx':
+        case 'ts':
+            error.loaderName = 'typescript';
+            break;
         // add more as needed
         default:
             return error;

lib/loader-features.js

@@ -36,6 +36,11 @@ const loaderFeatures = {
         packages: ['babel-preset-react'],
         description: 'process React JS files'
     },
+    typescript: {
+        method: 'enableTypeScriptLoader()',
+        packages: ['typescript', 'ts-loader'],
+        description: 'process TypeScript files'
+    },
     vue: {
         method: 'enableVueLoader()',
         // vue is needed so the end-user can do things

lib/loaders/typescript.js

@@ -0,0 +1,46 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../loader-features');
+const babelLoader = require('./babel');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {Array} of loaders to use for TypeScript
+ */
+module.exports = {
+    getLoaders(webpackConfig) {
+        loaderFeatures.ensureLoaderPackagesExist('typescript');
+
+        // some defaults
+        let config = {
+            silent: true,
+        };
+
+        // allow for ts-loader config to be controlled
+        webpackConfig.tsConfigurationCallback.apply(
+            // use config as the this variable
+            config,
+            [config]
+        );
+
+        // use ts alongside with babel
+        // @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#babel
+        let loaders = babelLoader.getLoaders(webpackConfig);
+        return loaders.concat([
+            {
+                loader: 'ts-loader',
+                // @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#available-options
+                options: config
+            }
+        ]);
+    }
+};

package.json

@@ -39,7 +39,7 @@
     "loader-utils": "^1.1.0",
     "lodash": ">=3.5 <5",
     "pkg-up": "^1.0.0",
-    "pretty-error": "^2.1.0",
+    "pretty-error": "^2.1.1",
     "resolve-url-loader": "^2.0.2",
     "style-loader": "^0.13.2",
     "webpack": "^2.2.0",
@@ -64,6 +64,8 @@
     "postcss-loader": "^1.3.3",
     "sass-loader": "^6.0.3",
     "sinon": "^2.3.4",
+    "ts-loader": "^2.1.0",
+    "typescript": "^2.3.4",
     "vue": "^2.3.4",
     "vue-loader": "^12.2.1",
     "vue-template-compiler": "^2.3.4",

test/WebpackConfig.js

@@ -278,6 +278,27 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('enableTypeScriptLoader', () => {
+        it('Calling method sets it', () => {
+            const config = createConfig();
+            const testCallback = () => {};
+            config.enableTypeScriptLoader(testCallback);
+            expect(config.tsConfigurationCallback).to.equal(testCallback);
+        });
+
+        it('Calling with non-callback throws an error', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.enableTypeScriptLoader('FOO');
+            }).to.throw('must be a callback function');
+
+            expect(() => {
+                config.enableTypeScriptLoader();
+            }).to.throw('must be a callback function');
+        });
+    });
+
     describe('addPlugin', () => {
         it('extends the current registered plugins', () => {
             const config = createConfig();

test/friendly-errors/transformers/missing-loader.js

@@ -60,5 +60,18 @@ describe('transform/missing-loader', () => {
             expect(actualError.type).to.deep.equal('loader-not-enabled');
             expect(actualError.loaderName).to.deep.equal('sass');
         });
+
+        it('Typescript error is properly transformed', () => {
+            const startError = {
+                name: 'ModuleParseError',
+                message: 'You may need an appropriate loader',
+                file: '/path/to/file.ts'
+            };
+            const actualError = transform(Object.assign({}, startError));
+
+            expect(actualError.name).to.deep.equal('Loader not enabled');
+            expect(actualError.type).to.deep.equal('loader-not-enabled');
+            expect(actualError.loaderName).to.deep.equal('typescript');
+        });
     });
 });

test/functional.js

@@ -45,7 +45,7 @@ describe('Functional tests using webpack', function() {
         testSetup.emptyTmpDir();
     });
 
-    describe('Basic scenarios', () => {
+    describe('Basic scenarios.', () => {
 
         it('Builds a few simple entries file + manifest.json', (done) => {
             const config = createWebpackConfig('web/build', 'dev');
@@ -583,6 +583,40 @@ module.exports = {
             });
         });
 
+        it('When configured, TypeScript is compiled!', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addEntry('main', ['./js/render.ts', './js/index.ts']);
+            const testCallback = () => {};
+            config.enableTypeScriptLoader(testCallback);
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // check that ts-loader transformed the ts file
+                webpackAssert.assertOutputFileContains(
+                    'main.js',
+                    'document.getElementById(\'app\').innerHTML = "<h1>Welcome to Your TypeScript App</h1>";'
+                );
+
+                expect(config.outputPath).to.be.a.directory().with.deep.files([
+                    'main.js',
+                    'manifest.json'
+                ]);
+
+                testSetup.requestTestPage(
+                    path.join(config.getContext(), 'www'),
+                    [
+                        'build/main.js'
+                    ],
+                    (browser) => {
+
+                        // assert that the ts module rendered
+                        browser.assert.text('#app h1', 'Welcome to Your TypeScript App');
+                        done();
+                    }
+                );
+            });
+        });
+
         it('The output directory is cleaned between builds', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');

test/loaders/typescript.js

@@ -0,0 +1,51 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const expect = require('chai').expect;
+const WebpackConfig = require('../../lib/WebpackConfig');
+const RuntimeConfig = require('../../lib/config/RuntimeConfig');
+const tsLoader = require('../../lib/loaders/typescript');
+
+function createConfig() {
+    const runtimeConfig = new RuntimeConfig();
+    runtimeConfig.context = __dirname;
+    runtimeConfig.babelRcFileExists = false;
+
+    return new WebpackConfig(runtimeConfig);
+}
+
+describe('loaders/typescript', () => {
+    it('getLoaders() basic usage', () => {
+        const config = createConfig();
+        config.enableTypeScriptLoader(function(config) {
+            config.foo = 'bar';
+        });
+
+        const actualLoaders = tsLoader.getLoaders(config);
+        expect(actualLoaders).to.have.lengthOf(2);
+        // callback is used
+        expect(actualLoaders[1].options.foo).to.equal('bar');
+    });
+
+    it('getLoaders() check defaults configuration values', () => {
+        const config = createConfig();
+        config.enableTypeScriptLoader(function(config) {
+            config.foo = 'bar';
+        });
+
+        const actualLoaders = tsLoader.getLoaders(config);
+        // callback is used
+        expect(actualLoaders[1].options.foo).to.equal('bar');
+        // defaults
+        expect(actualLoaders[1].options.silent).to.be.true;
+    });
+
+});

yarn.lock

@@ -5281,6 +5281,15 @@ tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
 
+ts-loader@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-2.2.0.tgz#e5fd8f29b967c4fb42abc76396aa8127a1e49924"
+  dependencies:
+    colors "^1.0.3"
+    enhanced-resolve "^3.0.0"
+    loader-utils "^1.0.2"
+    semver "^5.0.1"
+
 [email protected]:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -5324,6 +5333,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.3.4:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.0.tgz#aef5a8d404beba36ad339abf079ddddfffba86dd"
+
 uglify-js@^2.8.27:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"