Merge pull request #80 from embroider-build/fix-typescript

Fix support for `--typescript`

.prettierrc.cjs

@@ -2,4 +2,12 @@
 
 module.exports = {
   singleQuote: true,
+  overrides: [
+    {
+      files: ['*.js', '*.ts', '*.cjs', '.mjs', '.cts', '.mts', '.cts'],
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
 };

eslint.config.mjs

@@ -10,6 +10,7 @@ export default [
   {
     files: [
       'files/*/app/**/*.js',
+      'files-override/**/*.mjs',
       'files-override/*/app/**/*.js',
       'files-override/*/tests/**/*.js',
     ],
@@ -24,6 +25,6 @@ export default [
   pluginJs.configs.recommended,
   eslintPluginPrettierRecommended,
   {
-    ignores: ['tests/fixture/*'],
+    ignores: ['tests/fixture/*', 'tests/fixture-ts/*'],
   },
 ];

files-override/shared/tests/index.html

@@ -31,7 +31,7 @@
 
     <script type="module">
       import { start } from './test-helper';
-      import.meta.glob("./**/*.{js,gjs,gts}", { eager: true });
+      import.meta.glob("./**/*.{js,ts,gjs,gts}", { eager: true });
       start();
     </script>
 

files-override/ts/app/app.ts

@@ -0,0 +1,13 @@
+import Application from '@ember/application';
+import compatModules from '@embroider/virtual/compat-modules';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from './config/environment';
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver.withModules(compatModules);
+}
+
+loadInitializers(App, config.modulePrefix, compatModules);

files-override/ts/eslint.config.mjs

@@ -0,0 +1,146 @@
+import globals from 'globals';
+import js from '@eslint/js';
+
+import ts from 'typescript-eslint';
+
+import ember from 'eslint-plugin-ember';
+import emberRecommended from 'eslint-plugin-ember/configs/recommended';
+import gjsRecommended from 'eslint-plugin-ember/configs/recommended-gjs';
+import gtsRecommended from 'eslint-plugin-ember/configs/recommended-gts';
+
+import prettier from 'eslint-plugin-prettier/recommended';
+import qunit from 'eslint-plugin-qunit';
+import n from 'eslint-plugin-n';
+
+import emberParser from 'ember-eslint-parser';
+import babelParser from '@babel/eslint-parser';
+
+const parserOptions = {
+  esm: {
+    js: {
+      ecmaFeatures: { modules: true },
+      ecmaVersion: 'latest',
+    },
+    ts: {
+      projectService: true,
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+};
+
+export default ts.config(
+  js.configs.recommended,
+  prettier,
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: parserOptions.esm.js,
+      globals: {
+        ...globals.browser,
+      },
+    },
+    plugins: {
+      ember,
+    },
+    rules: {
+      ...emberRecommended.rules,
+    },
+  },
+  {
+    files: ['**/*.ts'],
+    plugins: { ember },
+    languageOptions: {
+      parserOptions: parserOptions.esm.ts,
+    },
+    extends: [...ts.configs.strictTypeChecked, ...emberRecommended],
+  },
+  {
+    files: ['**/*.gjs'],
+    languageOptions: {
+      parser: emberParser,
+      parserOptions: parserOptions.esm.js,
+      globals: {
+        ...globals.browser,
+      },
+    },
+    plugins: {
+      ember,
+    },
+    rules: {
+      ...emberRecommended.rules,
+      ...gjsRecommended.rules,
+    },
+  },
+  {
+    files: ['**/*.gts'],
+    plugins: { ember },
+    languageOptions: {
+      parserOptions: parserOptions.esm.ts,
+    },
+    extends: [
+      ...ts.configs.strictTypeChecked,
+      ...emberRecommended,
+      ...gtsRecommended,
+    ],
+  },
+  {
+    files: ['tests/**/*-test.{js,gjs}'],
+    plugins: {
+      qunit,
+    },
+  },
+  /**
+   * CJS node files
+   */
+  {
+    files: [
+      '**/*.cjs',
+      'config/**/*.js',
+      'testem.js',
+      'testem*.js',
+      '.prettierrc.js',
+      '.stylelintrc.js',
+      '.template-lintrc.js',
+      'ember-cli-build.js',
+    ],
+    plugins: {
+      n,
+    },
+
+    languageOptions: {
+      sourceType: 'script',
+      ecmaVersion: 'latest',
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+  /**
+   * ESM node files
+   */
+  {
+    files: ['*.mjs'],
+    plugins: {
+      n,
+    },
+
+    languageOptions: {
+      sourceType: 'module',
+      ecmaVersion: 'latest',
+      parserOptions: parserOptions.esm.js,
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+  /**
+   * Settings
+   */
+  {
+    ignores: ['dist/', 'node_modules/', 'coverage/', '!**/.*'],
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error',
+    },
+  },
+);

files-override/ts/tests/test-helper.ts

@@ -0,0 +1,14 @@
+import Application from '<%= name %>/app';
+import config from '<%= name %>/config/environment';
+import * as QUnit from 'qunit';
+import { setApplication } from '@ember/test-helpers';
+import { setup } from 'qunit-dom';
+import { start as qunitStart } from 'ember-qunit';
+
+export function start() {
+  setApplication(Application.create(config.APP));
+
+  setup(QUnit.assert);
+
+  qunitStart();
+}

files-override/ts/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "app", "tests", "types"
+  ],
+  "glint": {
+    "environment": [
+      "ember-loose",
+      "ember-template-imports"
+    ]
+  },
+  "compilerOptions": {
+    "allowJs": true,
+    /**
+      https://www.typescriptlang.org/tsconfig#noEmitOnError
+      Do not block emit on TS errors.
+    */
+    "noEmitOnError": false,
+
+    "declaration": false,
+    "declarationMap": false,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
+
+      We want our tooling to know how to resolve our custom files so the appropriate plugins
+      can do the proper transformations on those files.
+    */
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "<%= name %>/tests/*": [
+        "./tests/*"
+      ],
+      "<%= name %>/*": [
+        "./app/*"
+      ],
+      "*": [
+        "./types/*"
+      ]
+    },
+    "types": [
+      "ember-source/types"
+    ]
+  },
+}

files-override/ts/types/index.d.ts

@@ -0,0 +1 @@
+/// <reference types="@embroider/core/virtual" />

files/ts/app/templates/application.gts

@@ -0,0 +1,18 @@
+import Route from 'ember-route-template';
+import { pageTitle } from 'ember-page-title';
+<% if (welcome) {%>import { WelcomePage } from 'ember-welcome-page';<% } %>
+
+export default Route(
+  <template>
+    {{pageTitle "<%= namespace %>"}}
+    <% if (welcome) { %>
+    {{outlet}}
+
+    {{! The following component displays Ember's default welcome message. }}
+    <WelcomePage />
+    {{! Feel free to remove this! }}<% } else { %>
+    <h2 id="title">Welcome to Ember</h2>
+
+    {{outlet}}<% } %>
+  </template>
+);

files/ts/babel.config.cjs

@@ -0,0 +1,50 @@
+const {
+  babelCompatSupport,
+  templateCompatSupport,
+} = require('@embroider/compat/babel');
+
+module.exports = {
+  plugins: [
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        compilerPath: 'ember-source/dist/ember-template-compiler.js',
+        enableLegacyModules: [
+          'ember-cli-htmlbars',
+          'ember-cli-htmlbars-inline-precompile',
+          'htmlbars-inline-precompile',
+        ],
+        transforms: [...templateCompatSupport()],
+      },
+    ],
+    [
+      'module:decorator-transforms',
+      {
+        runtime: {
+          import: require.resolve('decorator-transforms/runtime-esm'),
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        absoluteRuntime: __dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...babelCompatSupport(),
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+};