Add tests for --typescript

Update dependency manipulation

use npx, because I don't have globally installed things

Use a separate fixture directory for the TS output

Silly linting

More gts -- compat with hbs and TS can be later

TS tests pass

Split JS and TS files so they're easier to grok

Update files-override lints

Another test port 0

Move more files to shared

Move more files to shared

Make the fixture-ts folder *all* TS

Combine tests, since it was 99% duplication

Lints

WIP

WIP

Update index.js

Co-authored-by: Alon Bukai <[email protected]>

Update index.js

Co-authored-by: Alon Bukai <[email protected]>

Update index.js

Co-authored-by: Alon Bukai <[email protected]>

Fix TS Lint config

Add util for testing the app with fixtures

Fix linting

hmm

Tests pass

Update helpers.mjs

.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/js/tests/index.html → 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/js/vite.config.mjs → files-override/shared/vite.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite";
 import {
   resolver,
   hbs,
@@ -8,18 +8,18 @@ import {
   compatPrebuild,
   assets,
   contentFor,
-} from '@embroider/vite';
-import { babel } from '@rollup/plugin-babel';
+} from "@embroider/vite";
+import { babel } from "@rollup/plugin-babel";
 
 const extensions = [
-  '.mjs',
-  '.gjs',
-  '.js',
-  '.mts',
-  '.gts',
-  '.ts',
-  '.hbs',
-  '.json',
+  ".mjs",
+  ".gjs",
+  ".js",
+  ".mts",
+  ".gts",
+  ".ts",
+  ".hbs",
+  ".json",
 ];
 
 export default defineConfig(({ mode }) => {
@@ -37,7 +37,7 @@ export default defineConfig(({ mode }) => {
       contentFor(),
 
       babel({
-        babelHelpers: 'runtime',
+        babelHelpers: "runtime",
         extensions,
       }),
     ],
@@ -46,12 +46,12 @@ export default defineConfig(({ mode }) => {
       port: 4200,
     },
     build: {
-      outDir: 'dist',
+      outDir: "dist",
       rollupOptions: {
         input: {
-          main: 'index.html',
+          main: "index.html",
           ...(shouldBuildTests(mode)
-            ? { tests: 'tests/index.html' }
+            ? { tests: "tests/index.html" }
             : undefined),
         },
       },
@@ -60,5 +60,5 @@ export default defineConfig(({ mode }) => {
 });
 
 function shouldBuildTests(mode) {
-  return mode !== 'production' || process.env.FORCE_BUILD_TESTS;
+  return mode !== "production" || process.env.FORCE_BUILD_TESTS;
 }

files-override/ts/app/app.ts

@@ -0,0 +1,18 @@
+import Application from '@ember/application';
+// @ts-expect-error - TODO: add types to compatModules
+import compatModules from '@embroider/core/entrypoint';
+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;
+  // TODO: remove lint disable when we have types for compatModules
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  Resolver = Resolver.withModules(compatModules);
+}
+
+// TODO: remove lint disable when we have types for compatModules
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+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,46 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "app/**/*",
+    "tests/**/*",
+  ],
+  "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/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>
+);