Merge pull request #1236 from NullVoxPopuli/ts-without-ec-ts

Support TypeScript without ember-cli-typescript

package.json

@@ -16,6 +16,7 @@
       "types/ember-cli-htmlbars",
       "tests/scenarios",
       "tests/app-template",
+      "tests/ts-app-template",
       "tests/addon-template",
       "tests/v2-addon-template"
     ],

packages/compat/src/compat-app.ts

@@ -233,23 +233,11 @@ class CompatAppAdapter implements AppAdapter<TreeNames> {
     // webpack's default is ['.wasm', '.mjs', '.js', '.json']. Keeping that
     // subset in that order is sensible, since many third-party libraries will
     // expect it to work that way.
-    let extensions = ['.wasm', '.mjs', '.js', '.json', '.hbs'];
-
-    // for now, this is hard-coded. If we see ember-cli-typescript, ts files are
-    // resolvable. Once we implement a preprocessor-registration build hook,
-    // this logic can be pushed down first into `@embroider/compat` (which can
-    // generate the appropriate hooks when it upcompiles ember-cli-typescript),
-    // and then later into ember-cli-typescript itself (which can ship a v2
-    // version with the hook).
     //
-    // Typescript is a slightly weird example of a preprocessor because it gets
-    // implemented in babel, so all we realy need to do is make the extension
-    // resolvable and there's no other "loader" or anything to apply.
-    if (this.activeAddonChildren().find(pkg => pkg.name === 'ember-cli-typescript')) {
-      extensions.unshift('.ts');
-    }
-
-    return extensions;
+    // For TS, we defer to ember-cli-babel, and the setting for
+    // "enableTypescriptTransform" can be set with and without
+    // ember-cli-typescript
+    return ['.wasm', '.mjs', '.js', '.json', '.hbs', '.ts'];
   }
 
   private *emberEntrypoints(htmlTreePath: string): IterableIterator<Asset> {

packages/compat/src/v1-app.ts

@@ -226,6 +226,7 @@ export default class V1App {
     const babelAddon = (this.app.project as any).findAddonByName('ember-cli-babel');
     const babelConfig = babelAddon.buildBabelOptions({
       'ember-cli-babel': {
+        ...this.app.options['ember-cli-babel'],
         includeExternalHelpers: true,
         compileModules: false,
         disableDebugTooling: false,

tests/scenarios/package.json

@@ -36,6 +36,7 @@
     "@embroider/router": "1.8.3",
     "@embroider/util": "1.8.3",
     "@rollup/plugin-babel": "^5.3.1",
+    "@tsconfig/ember": "1.0.1",
     "bootstrap": "^4.3.1",
     "broccoli-funnel": "^3.0.5",
     "broccoli-merge-trees": "^3.0.2",
@@ -47,6 +48,7 @@
     "ember-cli-beta": "npm:ember-cli@beta",
     "ember-cli-fastboot": "^3.2.0",
     "ember-cli-htmlbars-3": "npm:ember-cli-htmlbars@3",
+    "ember-cli-htmlbars-6": "npm:ember-cli-htmlbars@6",
     "ember-cli-htmlbars-inline-precompile": "^2.1.0",
     "ember-cli-latest": "npm:ember-cli@latest",
     "ember-composable-helpers": "^4.4.1",

tests/scenarios/scenarios.ts

@@ -55,5 +55,10 @@ export function baseApp() {
   return Project.fromDir(dirname(require.resolve('../app-template/package.json')), { linkDevDeps: true });
 }
 
+export function baseTSApp() {
+  return Project.fromDir(dirname(require.resolve('../ts-app-template/package.json')), { linkDevDeps: true });
+}
+
 export const appScenarios = supportMatrix(Scenarios.fromProject(baseApp));
+export const tsAppScenarios = supportMatrix(Scenarios.fromProject(baseTSApp));
 export const dummyAppScenarios = supportMatrix(Scenarios.fromProject(() => baseAddon('dummy-app')));

tests/scenarios/typescript-app-test.ts

@@ -0,0 +1,81 @@
+import { tsAppScenarios } from './scenarios';
+import { PreparedApp } from 'scenario-tester';
+import QUnit from 'qunit';
+import merge from 'lodash/merge';
+const { module: Qmodule, test } = QUnit;
+
+tsAppScenarios
+  .skip('lts_3_16')
+  .skip('lts_3_24')
+  .map('typescript-app', project => {
+    merge(project.files, {
+      app: {
+        components: {
+          'incrementer.ts': `
+            import Component from '@glimmer/component';
+            import { tracked } from '@glimmer/tracking';
+            import { action } from '@ember/object';
+
+            interface Signature {
+              Element: HTMLDivElement;
+              Blocks: {
+                default: [number]
+              }
+            }
+
+            export default class Incrementer extends Component<Signature> {
+              @tracked count = 0;
+
+              @action increment() { this.count++ }
+            }
+          `,
+          'incrementer.hbs': `
+            <div ...attributes>
+              <button {{on 'click' this.increment}}>increment</button>
+              {{yield this.count}}
+            </div>
+          `,
+        },
+      },
+      tests: {
+        rendering: {
+          'incrementer-test.ts': `
+            import { module, test } from 'qunit';
+            import { setupRenderingTest } from 'ember-qunit';
+            import { render, click } from '@ember/test-helpers';
+            import { hbs } from 'ember-cli-htmlbars';
+
+            module('Rendering', function (hooks) {
+              setupRenderingTest(hooks);
+
+              test('increments', async function (assert) {
+                await render(hbs\`
+                  <Incrementer as |count|>
+                    <out>{{count}}</out>
+                  </Incrementer>
+                \`);
+
+                assert.dom('out').hasText('0');
+
+                await click('button');
+                assert.dom('out').hasText('1');
+              });
+            });
+          `,
+        },
+      },
+    });
+  })
+  .forEachScenario(scenario => {
+    Qmodule(scenario.name, function (hooks) {
+      let app: PreparedApp;
+      hooks.before(async () => {
+        app = await scenario.prepare();
+      });
+
+      test(`yarn ember test`, async function (assert) {
+        let result = await app.execute(`ember test`);
+        assert.equal(result.exitCode, 0, result.output);
+      });
+    });
+  });

tests/ts-app-template/.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

tests/ts-app-template/.ember-cli

@@ -0,0 +1,15 @@
+{
+  /**
+    Ember CLI sends analytics information by default. The data is completely
+    anonymous, but there are times when you might want to disable this behavior.
+
+    Setting `disableAnalytics` to true will prevent any data from being sent.
+  */
+  "disableAnalytics": false,
+
+  /**
+  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
+}

tests/ts-app-template/.eslintignore

@@ -0,0 +1,25 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

tests/ts-app-template/.eslintrc.js

@@ -0,0 +1,54 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true,
+    },
+  },
+  plugins: ['ember'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
+  env: {
+    browser: true,
+  },
+  rules: {},
+  overrides: [
+    // node files
+    {
+      files: [
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './server/**/*.js',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      plugins: ['node'],
+      extends: ['plugin:node/recommended'],
+      rules: {
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off',
+      },
+    },
+    {
+      // test files
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
+  ],
+};

tests/ts-app-template/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/.env*
+/.pnp*
+/.sass-cache
+/.eslintcache
+/connect.lock
+/coverage/
+/libpeerconnection.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/

tests/ts-app-template/.template-lintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: 'recommended',
+};

tests/ts-app-template/.watchmanconfig

@@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["tmp", "dist"]
+}

tests/ts-app-template/README.md

@@ -0,0 +1,56 @@
+# ts-app-template
+
+This README outlines the details of collaborating on this Ember application.
+A short introduction of this app could easily go here.
+
+## Prerequisites
+
+You will need the following things properly installed on your computer.
+
+* [Git](https://git-scm.com/)
+* [Node.js](https://nodejs.org/) (with npm)
+* [Ember CLI](https://cli.emberjs.com/release/)
+* [Google Chrome](https://google.com/chrome/)
+
+## Installation
+
+* `git clone <repository-url>` this repository
+* `cd ts-app-template`
+* `npm install`
+
+## Running / Development
+
+* `ember serve`
+* Visit your app at [http://localhost:4200](http://localhost:4200).
+* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+
+### Code Generators
+
+Make use of the many generators for code, try `ember help generate` for more details
+
+### Running Tests
+
+* `ember test`
+* `ember test --server`
+
+### Linting
+
+* `npm run lint`
+* `npm run lint:fix`
+
+### Building
+
+* `ember build` (development)
+* `ember build --environment production` (production)
+
+### Deploying
+
+Specify what it takes to deploy your app.
+
+## Further Reading / Useful Links
+
+* [ember.js](https://emberjs.com/)
+* [ember-cli](https://cli.emberjs.com/release/)
+* Development Browser Extensions
+  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
+  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

tests/ts-app-template/app/app.ts

@@ -0,0 +1,12 @@
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from 'ts-app-template/config/environment';
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
+
+loadInitializers(App, config.modulePrefix);

tests/ts-app-template/app/config/environment.d.ts

@@ -0,0 +1,14 @@
+export default config;
+
+/**
+ * Type declarations for
+ *    import config from 'my-app/config/environment'
+ */
+declare const config: {
+  environment: string;
+  modulePrefix: string;
+  podModulePrefix: string;
+  locationType: 'history' | 'hash' | 'none' | 'auto';
+  rootURL: string;
+  APP: Record<string, unknown>;
+};