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

[Kocal]

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:

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:

{
    "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:

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:

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

// 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().

[Lyrkan]

I noticed that the tested .ts files don't actually contain anything that only works in Typescript. It wasn't a big deal for the previous test cases because we knew everything went through the TypeScript compiler anyway but maybe that should be added for this one?

[Kocal]

I've added a small TypeScript-specific code, and tests pass fine.
It should be ok now 👍

[weaverryan]

Wait a second :).

If Babel is a better way to compile Typescript - I was just reading this article https://iamturns.com/typescript-babel/ - then why not make it a first-class citizen? Maybe we add a new:

Encore.enableBabelTypeScriptPreset()

And it takes care of everything for you:

1. The warning on what you need to install
2. Adding the preset to your Babel config (similar to what we do with enableReactPreset() and (I guess?) also the @babel/proposal-class-properties plugin
3. Tweak the babel loader test to include .tsx? files

WDYT?

[Kocal]

I don't know if it's a better way to compile TypeScript with Babel, but that's an interesting alternative.

But note that you lose TypeScript power at compilation since every types are removed during transpilation. You need to run tsc manually to check your .ts files (it can be done in CI for example), we should document it.

However, Encore.enableBabelTypeScriptPreset() sounds nice if it can make our life easier 😄

I will try to work on it tonight :)

[Kocal]

@weaverryan I've added support to Encore.enableBabelTypeScriptPreset()

[Lyrkan]

Hi @Kocal,

👍 for an enableBabelTypeScriptPreset() method :)

Really minor comment + maybe a test should also be added in the test/config-generator.js file? (similar to the one called "with configureBabelPresetEnv()")

[Kocal]

Hi @Lyrkan, thanks for your review.
I fixed the error message and added two tests in config-generator.js.

[weaverryan]

This is really, really nice work. Thank you for an awesome new feature @Kocal!

[jennevdmeer]

I ran into this trying to help someone on slack. #691 mentions to create a PR/issue for symfony-docs. Has said documentation ever been done? I could not find anything about it.

[weaverryan]

I am guessing that's correct!