[ENHANCEMENT] Add support for --typescript flag to app and addon blueprints

blueprints/addon/index.js

@@ -29,6 +29,8 @@ module.exports = {
   description,
   appBlueprintName: 'app',
 
+  shouldTransformTypeScript: true,
+
   filesToRemove: [
     'tests/dummy/app/styles/.gitkeep',
     'tests/dummy/app/templates/.gitkeep',
@@ -100,13 +102,20 @@ module.exports = {
     this.ui.writeLine(prependEmoji('✨', `Creating a new Ember addon in ${chalk.yellow(process.cwd())}:`));
   },
 
-  afterInstall() {
+  async afterInstall(options) {
     let packagePath = path.join(this.path, 'files', 'package.json');
     let bowerPath = path.join(this.path, 'files', 'bower.json');
 
     [packagePath, bowerPath].forEach((filePath) => {
       fs.removeSync(filePath);
     });
+
+    if (options.typescript) {
+      await this.addAddonToProject({
+        name: 'ember-cli-typescript',
+        blueprintOptions: { ...options, save: true },
+      });
+    }
   },
 
   locals(options) {
@@ -132,6 +141,7 @@ module.exports = {
           options.welcome && '"--welcome"',
           options.yarn && '"--yarn"',
           options.ciProvider && `"--ci-provider=${options.ciProvider}"`,
+          options.typescript && `"--typescript"`,
         ]
           .filter(Boolean)
           .join(',\n            ') +
@@ -154,6 +164,7 @@ module.exports = {
       embroider: false,
       lang: options.lang,
       ciProvider: options.ciProvider,
+      typescript: options.typescript,
     };
   },
 

blueprints/app/files/.ember-cli

@@ -11,5 +11,5 @@
     Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
-  "isTypeScriptProject": false
+  "isTypeScriptProject": <%= typescript ? 'true' : 'false' %>
 }

blueprints/app/files/.eslintrc.js

@@ -2,15 +2,15 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '<%= typescript ? '@typescript-eslint/parser' : 'babel-eslint' %>',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true,
     },
   },
-  plugins: ['ember'],
+  plugins: ['ember'<% if (typescript) { %>, '@typescript-eslint'<% } %>],
   extends: [
     'eslint:recommended',
     'plugin:ember/recommended',
@@ -21,7 +21,16 @@ module.exports = {
   },
   rules: {},
   overrides: [
-    // node files
+<% if (typescript) { %>    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {},
+    },
+<% } %>    // node files
     {
       files: [
         './.eslintrc.js',

blueprints/app/files/app/router.js → blueprints/app/files/app/router.ts

@@ -6,4 +6,6 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {<% if (typescript) { %>
+  // Add route declarations here
+<% } %>});

blueprints/app/files/package.json

@@ -17,7 +17,8 @@
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
-    "lint:js:fix": "eslint . --fix",
+    "lint:js:fix": "eslint . --fix",<% if (typescript) { %>
+    "lint:types": "tsc --noEmit",<% } %>
     "start": "ember serve",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test"
@@ -29,8 +30,10 @@
     "@embroider/core": "^1.8.3",
     "@embroider/webpack": "^1.8.3<% } %>",
     "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "babel-eslint": "^10.1.0",
+    "@glimmer/tracking": "^1.1.2",<% if (typescript) { %>
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",<% } else { %>
+    "babel-eslint": "^10.1.0",<% } %>
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^7.4.0",
     "ember-auto-import": "^2.4.2",

blueprints/app/files/tests/helpers/index.ts

@@ -0,0 +1,43 @@
+import {
+  setupApplicationTest as upstreamSetupApplicationTest,
+  setupRenderingTest as upstreamSetupRenderingTest,
+  setupTest as upstreamSetupTest,
+  SetupTestOptions,
+} from 'ember-qunit';
+
+// This file exists to provide wrappers around ember-qunit's / ember-mocha's
+// test setup functions. This way, you can easily extend the setup that is
+// needed per test type.
+
+function setupApplicationTest(hooks: NestedHooks, options?: SetupTestOptions) {
+  upstreamSetupApplicationTest(hooks, options);
+
+  // Additional setup for application tests can be done here.
+  //
+  // For example, if you need an authenticated session for each
+  // application test, you could do:
+  //
+  // hooks.beforeEach(async function () {
+  //   await authenticateSession(); // ember-simple-auth
+  // });
+  //
+  // This is also a good place to call test setup functions coming
+  // from other addons:
+  //
+  // setupIntl(hooks); // ember-intl
+  // setupMirage(hooks); // ember-cli-mirage
+}
+
+function setupRenderingTest(hooks: NestedHooks, options?: SetupTestOptions) {
+  upstreamSetupRenderingTest(hooks, options);
+
+  // Additional setup for rendering tests can be done here.
+}
+
+function setupTest(hooks: NestedHooks, options?: SetupTestOptions) {
+  upstreamSetupTest(hooks, options);
+
+  // Additional setup for unit tests can be done here.
+}
+
+export { setupApplicationTest, setupRenderingTest, setupTest };

blueprints/app/index.js

@@ -8,6 +8,8 @@ const directoryForPackageName = require('../../lib/utilities/directory-for-packa
 module.exports = {
   description: 'The default blueprint for ember-cli projects.',
 
+  shouldTransformTypeScript: true,
+
   filesToRemove: [
     'app/styles/.gitkeep',
     'app/templates/.gitkeep',
@@ -37,6 +39,7 @@ module.exports = {
           options.yarn && '"--yarn"',
           embroider && '"--embroider"',
           options.ciProvider && `"--ci-provider=${options.ciProvider}"`,
+          options.typescript && `"--typescript"`,
         ]
           .filter(Boolean)
           .join(',\n            ') +
@@ -56,6 +59,7 @@ module.exports = {
       embroider,
       lang: options.lang,
       ciProvider: options.ciProvider,
+      typescript: options.typescript,
     };
   },
 
@@ -82,4 +86,10 @@ module.exports = {
     this.ui.writeLine('');
     this.ui.writeLine(prependEmoji('✨', `Creating a new Ember app in ${chalk.yellow(process.cwd())}:`));
   },
+
+  async afterInstall(options) {
+    if (options.typescript) {
+      await this.addAddonToProject({ name: 'ember-cli-typescript', blueprintOptions: options });
+    }
+  },
 };

lib/commands/addon.js

@@ -26,6 +26,7 @@ module.exports = NewCommand.extend({
       default: 'github',
       description: 'Installs the default CI blueprint. Either Travis or Github Actions is supported.',
     },
+    { name: 'typescript', type: Boolean, default: false, description: 'Set up the addon to use TypeScript' },
   ],
 
   anonymousOptions: ['<addon-name>'],

lib/commands/init.js

@@ -42,6 +42,7 @@ module.exports = Command.extend({
       default: 'github',
       description: 'Installs the default CI blueprint. Either Travis or Github Actions is supported.',
     },
+    { name: 'typescript', type: Boolean, default: false, description: 'Set up the app to use TypeScript' },
   ],
 
   anonymousOptions: ['<glob-pattern>'],

lib/commands/new.js

@@ -47,6 +47,7 @@ module.exports = Command.extend({
       aliases: ['i'],
       description: 'Create a new Ember app/addon in an interactive way.',
     },
+    { name: 'typescript', type: Boolean, default: false, description: 'Set up the app to use TypeScript' },
   ],
 
   anonymousOptions: ['<app-name>'],

lib/models/blueprint.js

@@ -490,7 +490,7 @@ let Blueprint = CoreObject.extend({
       // it's possible for people to set `{typescript: true}` in their `.ember-cli` file, which would
       // then erroneously trigger this message every time they generate a JS blueprint even though
       // they didn't pass the flag.
-      if (options.typescript === true) {
+      if (options.typescript === true && isJavaScriptFile(fileInfo.outputPath)) {
         this.ui.writeLine(
           chalk.yellow(
             "You passed the '--typescript' flag but there is no TypeScript blueprint available. " +
@@ -1319,6 +1319,25 @@ let Blueprint = CoreObject.extend({
     let installText = packages.length > 1 ? 'install addons' : 'install addon';
     this._writeStatusToUI(chalk.green, installText, taskOptions['packages'].join(', '));
 
+    if (!this.project.isEmberCLIProject()) {
+      // our blueprint ran *outside* an ember-cli project. So the only way this
+      // makes sense if the blueprint generated a new project, which we're now
+      // ready to add some addons into. So we need to switch from "outside" mode
+      // to "inside" by reinitializing the Project.
+      //
+      // One might think the cache clear is unnecessary, because in theory the
+      // caches should be shareable, but in practice the new Project we create
+      // below will have the same root dir as the NullProject and that makes bad
+      // things happen.
+      this.project.packageInfoCache._clear();
+      const Project = require('../../lib/models/project');
+      this.project = taskOptions.blueprintOptions.project = Project.closestSync(
+        this.project.root,
+        this.project.ui,
+        this.project.cli
+      );
+    }
+
     return this.taskFor('addon-install').run(taskOptions);
   },
 
@@ -1811,4 +1830,8 @@ function isTypeScriptFile(filePath) {
   return path.extname(filePath) === '.ts';
 }
 
+function isJavaScriptFile(filePath) {
+  return path.extname(filePath) === '.js';
+}
+
 module.exports = Blueprint;

lib/models/project.js

@@ -311,7 +311,7 @@ class Project {
     if (fs.existsSync(`${targetsPath}.js`)) {
       this._targets = this.require(targetsPath);
     } else {
-      this._targets = require('../../blueprints/app/files/config/targets');
+      this._targets = { browsers: ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'] };
     }
     return this._targets;
   }
@@ -496,6 +496,7 @@ class Project {
       return;
     }
     this._addonsInitialized = true;
+    this._didDiscoverAddons = false;
 
     logger.info('initializeAddons for: %s', this.name());
 

tests/acceptance/init-test.js

@@ -47,10 +47,12 @@ describe('Acceptance: ember init', function () {
     process.chdir(root);
   });
 
-  function confirmBlueprinted() {
+  function confirmBlueprinted(typescript = false) {
     let blueprintPath = path.join(root, 'blueprints', 'app', 'files');
     // ignore .travis.yml
-    let expected = walkSync(blueprintPath, { ignore: ['.travis.yml'] }).sort();
+    let expected = walkSync(blueprintPath, { ignore: ['.travis.yml'] })
+      .map((name) => (typescript ? name : name.replace(/\.ts$/, '.js')))
+      .sort();
     let actual = walkSync('.').sort();
 
     forEach(Blueprint.renamedFiles, function (destFile, srcFile) {