Refactor to favor configure by callback

Remove options and add callback for configuraiton * Add new loader util for typescript. * Refactor public API signature.
symfony · Jun 24, 2017 · b43f5c9 · b43f5c9
1 parent 1352d1c
commit b43f5c9
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 41 deletions.
diff --git a/index.js b/index.js
@@ -344,14 +344,18 @@ module.exports = {
     /**
      * Call this if you plan on loading TypeScript files.
      *
-     * Supported options:
+     * Encore.configureTypeScript(function(tsConfig) {
+     *      // change the tsConfig
+     * });
+     *
+     * Supported configuration options:
      * @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#available-options
      *
-     * @param {object} options
+     * @param {function} callback
      * @return {exports}
      */
-    enableTypeScriptLoader(options = {}) {
-        webpackConfig.enableTypeScriptLoader(options);
+    configureTypeScript(callback) {
+        webpackConfig.configureTypeScript(callback);
 
         return this;
     },

diff --git a/lib/WebpackConfig.js b/lib/WebpackConfig.js
@@ -52,20 +52,7 @@ class WebpackConfig {
         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: []
-        };
+        this.tsConfigurationCallback = function() {};
     }
 
     getContext() {
@@ -237,16 +224,14 @@ class WebpackConfig {
         this.useReact = true;
     }
 
-    enableTypeScriptLoader(options = {}) {
+    configureTypeScript(callback) {
         this.useTypeScriptLoader = true;
 
-        for (const optionKey of Object.keys(options)) {
-            if (!(optionKey in this.typeScriptOptions)) {
-                throw new Error(`Invalid option "${optionKey}" passed to enableTypeScriptLoader(). Valid keys are ${Object.keys(this.typeScriptOptions).join(', ')}`);
-            }
-
-            this.typeScriptOptions[optionKey] = options[optionKey];
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to configureTypeScript() must be a callback function.');
         }
+
+        this.tsConfigurationCallback = callback;
     }
 
     cleanupOutputBeforeBuild() {

diff --git a/lib/config-generator.js b/lib/config-generator.js
@@ -26,6 +26,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');
 
 class ConfigGenerator {
     /**
@@ -160,24 +161,10 @@ 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
-                    }
-                ]
+                use: tsLoaderUtil.getLoaders(this.webpackConfig)
             });
         }
 

diff --git a/lib/loader-features.js b/lib/loader-features.js
@@ -37,7 +37,7 @@ const loaderFeatures = {
         description: 'process React JS files'
     },
     typescript: {
-        method: 'enableTypeScriptLoader()',
+        method: 'configureTypeScript()',
         packages: ['typescript', 'ts-loader'],
         description: 'process TypeScript files'
     }

diff --git a/lib/loaders/typescript.js b/lib/loaders/typescript.js
@@ -0,0 +1,50 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * 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 = {
+            transpileOnly: false,
+            happyPackMode: false,
+            logInfoToStdOut: false,
+            logLevel: 'info',
+            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
+            }
+        ]);
+    }
+};