feature #694 Add Encore.enableBabelTypeScriptPreset() to "compile" TypeScript with Babel (Kocal)

This PR was squashed before being merged into the master branch (closes #694).

Discussion
----------

Add Encore.enableBabelTypeScriptPreset() to "compile" TypeScript with Babel

See #691, I thought it can be interesting to have a test here.

Using Babel to "compile" TypeScript is faster than using `ts-loader` or `tsc` directly, because in fact, it literally remove types annotations.

To continue to check types, you have to run `tsc --emitDeclarationOnly` manually (or in a CI). But this is not part of the PR.

To migrate an already existing TypeScript app, you just have to configure `babel-loader` to run over `.tsx?` file like this:
```diff
Encore
-  .enableTypeScriptLoader()
+  .configureLoaderRule('javascript', loader => {
+    loader.test = /.(j|t)sx?$/; // let Babel to run over .tsx? files too
+  })
```

Install some dependencies: `yarn add --dev @babel/preset-typescript @babel/plugin-proposal-class-properties`.

And modify your Babel configuration:
```diff
{
    "presets": [
        "@babel/env",
+        "@babel/typescript"
    ],
+    "plugins": [
+        "@babel/proposal-class-properties"
+    ]
}
```

Maybe I can update `Encore.configureBabel()` and add an option to runs over TypeScript files too... like I did in #574, something like this:
```js
Encore
  .configureBabel(null, {
    typescript: true
  })
```

I've also changed the legacy import/export (`import a = require('...')` to `import a from '...'`). Because it's the legacy way (ES6 imports are very fine) and the Babel TypeScript was not compatible with them:
![Capture d’écran de 2020-02-07 22-06-11](https://user-images.githubusercontent.com/2103975/74066752-0a323100-49f8-11ea-91b8-cfdbc6de28a2.png)

**EDIT :** Added `Encore.enableBabelTypeScriptPreset()` that do all the job for us! :)

```js
// simple usage
Encore.enableBabelTypeScriptPreset();

// configure TypeScript preset (https://babeljs.io/docs/en/babel-preset-typescript#options)
Encore.enableBabelTypeScriptPreset({
  isTSX: true;
})
```

`Encore.enableBabelTypeScriptPreset()` can not be used aside `Encore.enableTypeScriptLoader()` or `Encore.enableForkedTypeScriptTypesChecking()`.

Commits
-------

bdd553a chore: typo
96a666b feat: implement Encore.enableBabelTypeScriptPreset()
6f992b0 feat: prepare method "enableBabelTypeScriptPreset"
8238c32 fixture: add code that only works in TypeScript
66067a0 test: add test for TypeScript "compilation" with Babel
2e21d4f chore(deps-dev): install Babel TypeScript preset, with class properties plugin
e053a5e fix(fixtures): use "better" syntax for TypeScript import/export

Author: weaverryan

fixtures/js/index.ts

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

fixtures/js/render.ts

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

fixtures/js/render2.tsx

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

fixtures/js/tsconfig.json

@@ -1,3 +1,5 @@
 {
-  "compilerOptions": {}
-}
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true
+  }
+}

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;
 
@@ -130,6 +131,7 @@ class WebpackConfig {
             useBuiltIns: false,
             corejs: null,
         };
+        this.babelTypeScriptPresetOptions = {};
         this.vueOptions = {
             useJsx: false,
         };
@@ -647,6 +649,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 +663,9 @@ class WebpackConfig {
     }
 
     enableForkedTypeScriptTypesChecking(forkedTypeScriptTypesCheckOptionsCallback = () => {}) {
+        if (this.useBabelTypeScriptPreset) {
+            throw new Error('Encore.enableForkedTypeScriptTypesChecking() can not be called when Encore.enableBabelTypeScriptPreset() has been called.');
+        }
 
         if (typeof forkedTypeScriptTypesCheckOptionsCallback !== 'function') {
             throw new Error('Argument 1 to enableForkedTypeScriptTypesChecking() must be a callback function.');
@@ -667,6 +676,19 @@ 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;
+        this.babelTypeScriptPresetOptions = options;
+    }
+
     enableVueLoader(vueLoaderOptionsCallback = () => {}, vueOptions = {}) {
         this.useVueLoader = true;
 

lib/config-generator.js

@@ -250,8 +250,7 @@ class ConfigGenerator {
 
         let rules = [
             applyRuleConfigurationCallback('javascript', {
-                // match .js and .jsx
-                test: /\.jsx?$/,
+                test: babelLoaderUtil.getTest(this.webpackConfig),
                 exclude: this.webpackConfig.babelOptions.exclude,
                 use: babelLoaderUtil.getLoaders(this.webpackConfig)
             }),

lib/features.js

@@ -78,6 +78,15 @@ const features = {
         ],
         description: 'check TypeScript types in a separate process'
     },
+    'typescript-babel': {
+        method: 'enableBabelTypeScriptPreset',
+        packages: [
+            { name: 'typescript' },
+            { name: '@babel/preset-typescript', enforce_version: true },
+            { name: '@babel/plugin-proposal-class-properties', enforce_version: true },
+        ],
+        description: 'process TypeScript files with Babel'
+    },
     vue: {
         method: 'enableVueLoader()',
         // vue is needed so the end-user can do things

lib/loaders/babel.js

@@ -58,6 +58,13 @@ module.exports = {
                 plugins: ['@babel/plugin-syntax-dynamic-import']
             });
 
+            if (webpackConfig.useBabelTypeScriptPreset) {
+                loaderFeatures.ensurePackagesExistAndAreCorrectVersion('typescript-babel');
+
+                babelConfig.presets.push(['@babel/preset-typescript', webpackConfig.babelTypeScriptPresetOptions]);
+                babelConfig.plugins.push('@babel/plugin-proposal-class-properties');
+            }
+
             if (webpackConfig.useReact) {
                 loaderFeatures.ensurePackagesExistAndAreCorrectVersion('react');
 
@@ -95,5 +102,21 @@ module.exports = {
                 options: babelConfig
             }
         ];
+    },
+
+    /**
+     * @param {WebpackConfig} webpackConfig
+     * @return {RegExp} to use for eslint-loader `test` rule
+     */
+    getTest(webpackConfig) {
+        const extensions = [
+            'jsx?', // match .js and .jsx
+        ];
+
+        if (webpackConfig.useBabelTypeScriptPreset) {
+            extensions.push('tsx?'); // match .ts and .tsx
+        }
+
+        return new RegExp(`\\.(${extensions.join('|')})$`);
     }
 };

package.json

@@ -55,7 +55,9 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
     "@vue/babel-preset-jsx": "^1.0.0-beta.3",
     "autoprefixer": "^8.5.0",