feat: prepare method "enableBabelTypeScriptPreset"

Author: Kocal

index.js

@@ -980,7 +980,7 @@ class Encore {
 
     /**
      * If enabled, a Preact preset will be applied to
-     * the generated Webpack configuration.
+     * the generated Webpack and Babel configuration.
      *
      * ```
      * Encore.enablePreactPreset()
@@ -1044,6 +1044,42 @@ class Encore {
         return this;
     }
 
+
+    /**
+     * If enabled, a TypeScript preset will be applied to
+     * the generated Webpack and Babel configuration.
+     *
+     * ```
+     * Encore.enableBabelTypeScriptPreset()
+     * ```
+     *
+     * This method let Babel handle your TypeScript code
+     * and can not be used with `Encore.enableTypeScriptLoader()`
+     * or `Encore.enableForkedTypeScriptTypesChecking()`.
+     *
+     * Since all types are removed by Babel,
+     * you must run `tsc --noEmit` yourself for types checking.
+     *
+     * The Babel TypeScript preset can be configured,
+     * see https://babeljs.io/docs/en/babel-preset-typescript#options
+     * for available options.
+     *
+     * For example:
+     * ```
+     * Encore.enableBabelTypeScriptPreset({
+     *     isTSX: true
+     * })
+     * ```
+     *
+     * @param {object} options
+     * @returns {Encore}
+     */
+    enableBabelTypeScriptPreset(options) {
+        webpackConfig.enableBabelTypeScriptPreset(options);
+
+        return this;
+    }
+
     /**
      * If enabled, the Vue.js loader is enabled.
      *

lib/WebpackConfig.js

@@ -109,6 +109,7 @@ class WebpackConfig {
         this.useEslintLoader = false;
         this.useTypeScriptLoader = false;
         this.useForkedTypeScriptTypeChecking = false;
+        this.useBabelTypeScriptPreset = false;
         this.useWebpackNotifier = false;
         this.useHandlebarsLoader = false;
 
@@ -647,6 +648,10 @@ class WebpackConfig {
     }
 
     enableTypeScriptLoader(callback = () => {}) {
+        if (this.useBabelTypeScriptPreset) {
+            throw new Error('Encore.enableTypeScriptLoader() can not be called when Encore.enableBabelTypeScriptPreset() has been called.');
+        }
+
         this.useTypeScriptLoader = true;
 
         if (typeof callback !== 'function') {
@@ -657,6 +662,9 @@ class WebpackConfig {
     }
 
     enableForkedTypeScriptTypesChecking(forkedTypeScriptTypesCheckOptionsCallback = () => {}) {
+        if (this.useBabelTypeScriptPreset) {
+            throw new Error('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableForkedTypeScriptTypesChecking() has been called.');
+        }
 
         if (typeof forkedTypeScriptTypesCheckOptionsCallback !== 'function') {
             throw new Error('Argument 1 to enableForkedTypeScriptTypesChecking() must be a callback function.');
@@ -667,6 +675,18 @@ class WebpackConfig {
             forkedTypeScriptTypesCheckOptionsCallback;
     }
 
+    enableBabelTypeScriptPreset(options = {}) {
+        if (this.useTypeScriptLoader) {
+            throw new Error('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableTypeScriptLoader() has been called.');
+        }
+
+        if (this.useForkedTypeScriptTypeChecking) {
+            throw new Error('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableForkedTypeScriptTypesChecking() has been called.');
+        }
+
+        this.useBabelTypeScriptPreset = true;
+    }
+
     enableVueLoader(vueLoaderOptionsCallback = () => {}, vueOptions = {}) {
         this.useVueLoader = true;
 

test/WebpackConfig.js

@@ -872,6 +872,15 @@ describe('WebpackConfig object', () => {
                 config.enableTypeScriptLoader('FOO');
             }).to.throw('must be a callback function');
         });
+
+        it('TypeScript can not be compiled by ts-loader is Babel is already handling TypeScript', () => {
+            const config = createConfig();
+            config.enableBabelTypeScriptPreset();
+
+            expect(function() {
+                config.enableTypeScriptLoader();
+            }).to.throw('Encore.enableTypeScriptLoader() can not be called when Encore.enableBabelTypeScriptPreset() has been called.');
+        });
     });
 
     describe('enableForkedTypeScriptTypesChecking', () => {
@@ -891,8 +900,37 @@ describe('WebpackConfig object', () => {
                 config.enableForkedTypeScriptTypesChecking('FOO');
             }).to.throw('must be a callback function');
         });
+
+        it('TypeScript can not be compiled by Babel if forked types checking is enabled', () => {
+            const config = createConfig();
+            config.enableForkedTypeScriptTypesChecking();
+
+            expect(function() {
+                config.enableBabelTypeScriptPreset();
+            }).to.throw('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableForkedTypeScriptTypesChecking() has been called.');
+        });
     });
 
+    describe('enableBabelTypeScriptPreset', () => {
+        it('TypeScript can not be compiled by Babel if ts-loader is already enabled', () => {
+            const config = createConfig();
+            config.enableTypeScriptLoader();
+
+            expect(function() {
+                config.enableBabelTypeScriptPreset();
+            }).to.throw('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableTypeScriptLoader() has been called.');
+        });
+
+        it('TypeScript can not be compiled by Babel if ts-loader is already enabled', () => {
+            const config = createConfig();
+            config.enableForkedTypeScriptTypesChecking();
+
+            expect(function() {
+                config.enableBabelTypeScriptPreset();
+            }).to.throw('Encore.enableBabelTypeScriptPreset() can not be called when Encore.enableForkedTypeScriptTypesChecking() has been called.');
+        });
+    })
+
     describe('enableVueLoader', () => {
         it('Call with no config', () => {
             const config = createConfig();