Provide TypeScript compilation support when using ember-cli-typescript@4 or higher.

README.md

@@ -19,6 +19,7 @@ allow you to use latest Javascript in your Ember CLI project.
     + [Enabling Source Maps](#enabling-source-maps)
     + [Modules](#modules)
     + [Disabling Debug Tooling Support](#disabling-debug-tooling-support)
+    + [Enabling TypeScript Transpilation](#enabling-typescript-transpilation)
   * [Addon usage](#addon-usage)
     + [Adding Custom Plugins](#adding-custom-plugins)
     + [Additional Trees](#additional-trees)
@@ -121,6 +122,7 @@ interface EmberCLIBabelConfig {
     disablePresetEnv?: boolean;
     disableEmberModulesAPIPolyfill?: boolean;
     disableDecoratorTransforms?: boolean;
+    enableTypeScriptTransform?: boolean;
     extensions?: string[];
   };
 }
@@ -259,6 +261,38 @@ module.exports = function(defaults) {
 }
 ```
 
+#### Enabling TypeScript Transpilation
+
+The transform plugin required for Babel to transpile TypeScript will
+automatically be enabled when `ember-cli-typescript` >= 4.0 is installed.
+
+You can enable the TypeScript Babel transform manually *without*
+`ember-cli-typescript` by setting the `enableTypeScriptTransform` to `true`.
+
+NOTE: Setting this option to `true` is not compatible with
+`ember-cli-typescript` < 4.0 because of conflicting Babel plugin ordering
+constraints and is unnecessary because `ember-cli-typescript` < 4.0 adds the
+TypeScript Babel transform itself.
+
+NOTE: Setting this option to `true` does *not* enable type-checking. For
+integrated type-checking, you will need
+[`ember-cli-typescript`](https://ember-cli-typescript.com).
+
+In an app, manually enabling the TypeScript transform would look like:
+
+```js
+// ember-cli-build.js
+module.exports = function(defaults) {
+  let app = new EmberApp(defaults, {
+    'ember-cli-babel': {
+      enableTypeScriptTransform: true
+    }
+  });
+
+  return app.toTree();
+}
+```
+
 ### Addon usage
 
 #### Adding Custom Plugins

index.js

@@ -41,7 +41,8 @@ module.exports = {
     return this._cachedDebugTree.apply(null, arguments);
   },
 
-  transpileTree(inputTree, config) {
+  transpileTree(inputTree, _config) {
+    let config = _config || this._getAddonOptions();
     let description = `000${++count}`.slice(-3);
     let postDebugTree = this._debugTree(inputTree, `${description}:input`);
 
@@ -51,7 +52,15 @@ module.exports = {
       output = postDebugTree;
     } else {
       let BabelTranspiler = require('broccoli-babel-transpiler');
-      output = new BabelTranspiler(postDebugTree, options);
+      let transpilationInput = postDebugTree;
+
+      if (this._shouldHandleTypeScript(config)) {
+        let Funnel = require('broccoli-funnel');
+        let inputWithoutDeclarations = new Funnel(transpilationInput, { exclude: ['**/*.d.ts'] });
+        transpilationInput = this._debugTree(inputWithoutDeclarations, `${description}:filtered-input`);
+      }
+
+      output = new BabelTranspiler(transpilationInput, options);
     }
 
     return this._debugTree(output, `${description}:output`);
@@ -254,14 +263,16 @@ module.exports = {
   },
 
   _getExtensions(config) {
+    let shouldHandleTypeScript = this._shouldHandleTypeScript(config);
     let emberCLIBabelConfig = config['ember-cli-babel'] || {};
-    return emberCLIBabelConfig.extensions || ['js'];
+    return emberCLIBabelConfig.extensions || (shouldHandleTypeScript ? ['js', 'ts'] : ['js']);
   },
 
   _getBabelOptions(config) {
     let addonProvidedConfig = this._getAddonProvidedConfig(config);
     let shouldCompileModules = this._shouldCompileModules(config);
     let shouldIncludeHelpers = this._shouldIncludeHelpers(config);
+    let shouldHandleTypeScript = this._shouldHandleTypeScript(config);
     let shouldIncludeDecoratorPlugins = this._shouldIncludeDecoratorPlugins(config);
 
     let emberCLIBabelConfig = config['ember-cli-babel'];
@@ -292,8 +303,12 @@ module.exports = {
     let userPlugins = addonProvidedConfig.plugins;
     let userPostTransformPlugins = addonProvidedConfig.postTransformPlugins;
 
+    if (shouldHandleTypeScript) {
+      userPlugins = this._addTypeScriptPlugin(userPlugins.slice(), addonProvidedConfig.options);
+    }
+
     if (shouldIncludeDecoratorPlugins) {
-      userPlugins = this._addDecoratorPlugins(userPlugins.slice(), addonProvidedConfig.options);
+      userPlugins = this._addDecoratorPlugins(userPlugins.slice(), addonProvidedConfig.options, config);
     }
 
     options.plugins = [].concat(
@@ -320,13 +335,63 @@ module.exports = {
     return options;
   },
 
+  _shouldHandleTypeScript(config) {
+      let emberCLIBabelConfig = config['ember-cli-babel'] || {};
+      if (typeof emberCLIBabelConfig.enableTypeScriptTransform === 'boolean') {
+        return emberCLIBabelConfig.enableTypeScriptTransform;
+      }
+      let typeScriptAddon = this.parent.addons
+        && this.parent.addons.find(a => a.name === 'ember-cli-typescript');
+      return typeof typeScriptAddon !== 'undefined'
+        && semver.gte(typeScriptAddon.pkg.version, '4.0.0-alpha.1');
+  },
+
+  _buildClassFeaturePluginConstraints(constraints, config) {
+    // With versions of ember-cli-typescript < 4.0, class feature plugins like
+    // @babel/plugin-proposal-class-properties were run before the TS transform.
+    if (!this._shouldHandleTypeScript(config)) {
+      constraints.before = constraints.before || [];
+      constraints.before.push('@babel/plugin-transform-typescript');
+    }
+
+    return constraints;
+  },
+
+  _addTypeScriptPlugin(plugins) {
+    const { hasPlugin, addPlugin } = require('ember-cli-babel-plugin-helpers');
+
+    if (hasPlugin(plugins, '@babel/plugin-transform-typescript')) {
+      if (this.parent === this.project) {
+        this.project.ui.writeWarnLine(`${
+          this._parentName()
+        } has added the TypeScript transform plugin to its build, but ember-cli-babel provides this by default now when ember-cli-typescript >= 4.0 is installed! You can remove the transform, or the addon that provided it.`);
+      }
+    } else {
+      addPlugin(
+        plugins,
+        [
+          require.resolve('@babel/plugin-transform-typescript'),
+          { allowDeclareFields: true },
+        ],
+        {
+          before: [
+            '@babel/plugin-proposal-class-properties',
+            '@babel/plugin-proposal-private-methods',
+            '@babel/plugin-proposal-decorators',
+          ]
+        }
+      );
+    }
+    return plugins;
+  },
+
   _shouldIncludeDecoratorPlugins(config) {
     let customOptions = config['ember-cli-babel'] || {};
 
     return customOptions.disableDecoratorTransforms !== true;
   },
 
-  _addDecoratorPlugins(plugins, options) {
+  _addDecoratorPlugins(plugins, options, config) {
     const { hasPlugin, addPlugin } = require('ember-cli-babel-plugin-helpers');
 
     if (hasPlugin(plugins, '@babel/plugin-proposal-decorators')) {
@@ -339,9 +404,9 @@ module.exports = {
       addPlugin(
         plugins,
         [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-        {
-          before: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-typescript']
-        }
+        this._buildClassFeaturePluginConstraints({
+          before: ['@babel/plugin-proposal-class-properties']
+        }, config)
       );
     }
 
@@ -356,10 +421,9 @@ module.exports = {
       addPlugin(
         plugins,
         [require.resolve('@babel/plugin-proposal-class-properties'), { loose: options.loose || false }],
-        {
-          after: ['@babel/plugin-proposal-decorators'],
-          before: ['@babel/plugin-transform-typescript']
-        }
+        this._buildClassFeaturePluginConstraints({
+          after: ['@babel/plugin-proposal-decorators']
+        }, config)
       );
     }
 

node-tests/addon-test.js

@@ -635,6 +635,42 @@ describe('ember-cli-babel', function() {
       }));
     });
 
+    describe('TypeScript transpilation', function() {
+      beforeEach(function() {
+        this.addon.parent.addons.push({
+          name: 'ember-cli-typescript',
+          pkg: {
+            version: '4.0.0-alpha.1'
+          }
+        });
+      });
+
+      it('should transpile .ts files', co.wrap(function*() {
+        input.write({ 'foo.ts': `let foo: string = "hi";` });
+
+        subject = this.addon.transpileTree(input.path());
+        output = createBuilder(subject);
+
+        yield output.build();
+
+        expect(
+          output.read()
+        ).to.deep.equal({
+          'foo.js': `define("foo", [], function () {\n  "use strict";\n\n  var foo = "hi";\n});`
+        });
+      }));
+
+      it('should exclude .d.ts files', co.wrap(function*() {
+        input.write({ 'foo.d.ts': `declare let foo: string;` });
+
+        subject = this.addon.transpileTree(input.path());
+        output = createBuilder(subject);
+
+        yield output.build();
+
+        expect(output.read()).to.deep.equal({});
+      }))
+    });
 
     describe('_shouldDoNothing', function() {
       it("will no-op if nothing to do", co.wrap(function* () {
@@ -746,9 +782,65 @@ describe('ember-cli-babel', function() {
     });
   });
 
+  describe('_shouldHandleTypeScript', function() {
+    it('should return false by default', function() {
+      expect(this.addon._shouldHandleTypeScript({})).to.be.false;
+    });
+    it('should return true when ember-cli-typescript >= 4.0.0-alpha.1 is installed', function() {
+      this.addon.parent.addons.push({
+        name: 'ember-cli-typescript',
+        pkg: {
+          version: '4.0.0-alpha.1',
+        },
+      });
+      expect(this.addon._shouldHandleTypeScript({})).to.be.true;
+    });
+    it('should return false when ember-cli-typescript < 4.0.0-alpha.1 is installed', function() {
+      this.addon.parent.addons.push({
+        name: 'ember-cli-typescript',
+        pkg: {
+          version: '3.0.0',
+        },
+      });
+      expect(this.addon._shouldHandleTypeScript({})).to.be.false;
+    });
+    it('should return true when the TypeScript transform is manually enabled', function() {
+      expect(this.addon._shouldHandleTypeScript({ 'ember-cli-babel': { enableTypeScriptTransform: true } })).to.be.true;
+    });
+    it('should return false when the TypeScript transforms is manually disabled', function() {
+      expect(this.addon._shouldHandleTypeScript({ 'ember-cli-babel': { enableTypeScriptTransform: false } })).to.be.false;
+    });
+    it('should return false when the TypeScript transform is manually disabled, even when ember-cli-typescript >= 4.0.0-alpha.1 is installed', function() {
+      this.addon.parent.addons.push({
+        name: 'ember-cli-typescript',
+        pkg: {
+          version: '4.0.0-alpha.1',
+        },
+      });
+      expect(this.addon._shouldHandleTypeScript({ 'ember-cli-babel': { enableTypeScriptTransform: false } })).to.be.false;
+    });
+  });
+
+  describe('_addTypeScriptPlugin', function() {
+    it('should warn and not add the TypeScript plugin if already added', function() {
+      this.addon.project.ui = {
+        writeWarnLine(message) {
+          expect(message).to.match(/has added the TypeScript transform plugin to its build/);
+        }
+      };
+
+      expect(
+        this.addon._addTypeScriptPlugin([
+          ['@babel/plugin-transform-typescript']
+        ],
+        {}
+      ).length).to.equal(1, 'plugin was not added');
+    });
+  });
+
   describe('_addDecoratorPlugins', function() {
     it('should include babel transforms by default', function() {
-      expect(this.addon._addDecoratorPlugins([], {}).length).to.equal(2, 'plugins added correctly');
+      expect(this.addon._addDecoratorPlugins([], {}, {}).length).to.equal(2, 'plugins added correctly');
     });
 
     it('should include only fields if it detects decorators plugin', function() {
@@ -762,6 +854,7 @@ describe('ember-cli-babel', function() {
         this.addon._addDecoratorPlugins([
           ['@babel/plugin-proposal-decorators']
         ],
+        {},
         {}
       ).length).to.equal(2, 'plugins were not added');
     });
@@ -778,20 +871,35 @@ describe('ember-cli-babel', function() {
           [
             ['@babel/plugin-proposal-class-properties']
           ],
+          {},
           {}
         ).length
       ).to.equal(2, 'plugins were not added');
     });
 
     it('should use babel options loose mode for class properties', function() {
-      let strictPlugins = this.addon._addDecoratorPlugins([], {});
+      let strictPlugins = this.addon._addDecoratorPlugins([], {}, {});
 
       expect(strictPlugins[1][1].loose).to.equal(false, 'loose is false if no option is provided');
 
-      let loosePlugins = this.addon._addDecoratorPlugins([], { loose: true });
+      let loosePlugins = this.addon._addDecoratorPlugins([], { loose: true }, {});
 
       expect(loosePlugins[1][1].loose).to.equal(true, 'loose setting added correctly');
     });
+
+    it('should include class fields and decorators after typescript if handling typescript', function() {
+      this.addon._shouldHandleTypeScript = function() { return true; }
+      let plugins = this.addon._addDecoratorPlugins(['@babel/plugin-transform-typescript'], {}, {});
+      expect(plugins[0]).to.equal('@babel/plugin-transform-typescript', 'typescript still first');
+      expect(plugins.length).to.equal(3, 'class fields and decorators added');
+    });
+
+    it('should include class fields and decorators before typescript if not handling typescript', function() {
+      this.addon._shouldHandleTypeScript = function() { return false; }
+      let plugins = this.addon._addDecoratorPlugins(['@babel/plugin-transform-typescript'], {}, {});
+      expect(plugins.length).to.equal(3, 'class fields and decorators added');
+      expect(plugins[2]).to.equal('@babel/plugin-transform-typescript', 'typescript is now last');
+    });
   });
 
   describe('_shouldIncludeHelpers()', function() {
@@ -973,6 +1081,23 @@ describe('ember-cli-babel', function() {
     });
   });
 
+  describe('_getExtensions', function() {
+    it('defaults to js only', function() {
+      expect(this.addon._getExtensions({})).to.have.members(['js']);
+    });
+    it('adds ts automatically', function() {
+      this.addon._shouldHandleTypeScript = function() { return true; }
+      expect(this.addon._getExtensions({})).to.have.members(['js', 'ts']);
+    });
+    it('respects user-configured extensions', function() {
+      expect(this.addon._getExtensions({ 'ember-cli-babel': { extensions: ['coffee'] } })).to.have.members(['coffee']);
+    });
+    it('respects user-configured extensions even when adding TS plugin', function() {
+      this.addon._shouldHandleTypeScript = function() { return true; }
+      expect(this.addon._getExtensions({ 'ember-cli-babel': { extensions: ['coffee'] } })).to.have.members(['coffee']);
+    });
+  });
+
   describe('buildBabelOptions', function() {
     this.timeout(0);
 

package.json

@@ -45,6 +45,7 @@
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-transform-modules-amd": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/plugin-transform-typescript": "^7.8.3",
     "@babel/polyfill": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
     "@babel/runtime": "^7.8.3",