support ts, gts and gjs in vite

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "clean": "git clean -x -f",
     "compile": "tsc",
+    "dev": "tsc --watch",
     "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
     "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
     "lint:eslint": "eslint . --cache --report-unused-disable-directives",

packages/compat/src/compat-app-builder.ts

@@ -199,7 +199,7 @@ export class CompatAppBuilder {
     // 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', '.ts', '.hbs', '.hbs.js'];
+    return ['.wasm', '.mjs', '.js', '.json', '.ts', '.hbs', '.hbs.js', '.gjs', '.gts'];
   }
 
   private *emberEntrypoints(htmlTreePath: string): IterableIterator<Asset> {

packages/core/src/module-resolver.ts

@@ -546,12 +546,22 @@ export class Resolver {
   }
 
   private *componentJSCandidates(inPackageName: string) {
+    const extensions = ['.ts', '.gjs', '.gts'];
     yield { prefix: '/components/', suffix: '' };
     yield { prefix: '/components/', suffix: '/component' };
 
+    for (const ext of extensions) {
+      yield { prefix: '/components/', suffix: ext };
+      yield { prefix: '/components/', suffix: `/index${ext}` };
+      yield { prefix: '/components/', suffix: `/component${ext}` };
+    }
+
     let pods = this.podPrefix(inPackageName);
     if (pods) {
       yield { prefix: `${pods}/components/`, suffix: '/component' };
+      for (const ext of extensions) {
+        yield { prefix: `${pods}/components/`, suffix: `/component${ext}` };
+      }
     }
   }
 

packages/vite/src/esbuild-resolver.ts

@@ -48,7 +48,7 @@ export function esBuildResolver(root = process.cwd()): EsBuildPlugin {
         return { contents: runMacros(src, path, macrosConfig) };
       });
 
-      build.onLoad({ filter: /\.gjs$/ }, async ({ path: filename }) => {
+      build.onLoad({ filter: /\.g[jt]s$/ }, async ({ path: filename }) => {
         const code = readFileSync(filename, 'utf8');
 
         const result = transform(preprocessor.process(code, filename), {
@@ -79,7 +79,7 @@ export function esBuildResolver(root = process.cwd()): EsBuildPlugin {
         return { contents };
       });
 
-      build.onLoad({ filter: /\.js$/ }, ({ path, namespace }) => {
+      build.onLoad({ filter: /\.[jt]s$/ }, ({ path, namespace }) => {
         let src: string;
         if (namespace === 'embroider') {
           src = virtualContent(path, resolverLoader.resolver);

packages/vite/src/optimize-deps.ts

@@ -8,7 +8,7 @@ export interface OptimizeDeps {
 export function optimizeDeps(): OptimizeDeps {
   return {
     exclude: ['@embroider/macros'],
-    extensions: ['.hbs', '.gjs'],
+    extensions: ['.hbs', '.gjs', '.gts'],
     esbuildOptions: {
       plugins: [esBuildResolver()],
     },

packages/vite/src/template-tag.ts

@@ -2,13 +2,13 @@ import { createFilter } from '@rollup/pluginutils';
 import type { Plugin } from 'vite';
 import { Preprocessor } from 'content-tag';
 
-const gjsFilter = createFilter('**/*.gjs?(\\?)*');
+const gjsFilter = createFilter('**/*.{gjs,gts}?(\\?)*');
 
 export function templateTag(): Plugin {
   let preprocessor = new Preprocessor();
 
   function candidates(id: string) {
-    return [id + '.gjs'];
+    return [id + '.gjs', id + '.gts'];
   }
 
   return {

packages/vite/tests/optimize-deps.test.ts

@@ -23,6 +23,7 @@ describe('optimizeDeps', function () {
         "extensions": [
           ".hbs",
           ".gjs",
+          ".gts",
         ],
       }
     `

tests/scenarios/vite-app-test.ts

@@ -60,6 +60,8 @@ viteAppScenarios
         assert.equal(result.exitCode, 0, result.output);
         console.log(result.output);
         assert.ok(result.output.includes('should have Yay for gjs!'), 'should have tested');
+        assert.ok(result.output.includes(' -- from gjs test file'), 'should have tested with gjs file');
+        assert.ok(result.output.includes(' -- from gts test file'), 'should have tested with gts file');
         const depCache = readdirSync(
           join(app.dir, 'node_modules', '.embroider', 'rewritten-app', 'node_modules', '.vite', 'deps')
         );

tests/vite-app/app/components/example.hbs

@@ -1 +1 @@
-<div>hey {{@message}} <this.Fancy /></div>
+<div>hey {{@message}} <Fancy /></div>

tests/vite-app/app/components/fancy.gts

@@ -0,0 +1,2 @@
+<template>Yay for gts!</template>
+

tests/vite-app/app/components/fancy2.gjs

@@ -0,0 +1 @@
+<template>Yay for gjs!</template>

tests/vite-app/tests/integration/example-test.js

@@ -6,11 +6,11 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | Example', (hooks) => {
   setupRenderingTest(hooks);
 
-  test('should have Yay for gjs!', async function (assert) {
+  test('should have Yay for gts!', async function (assert) {
     await render(hbs`
     <Example></Example>
     `);
     await rerender();
-    assert.dom().includesText('Yay for gjs!');
+    assert.dom().includesText('Yay for gts!');
   });
 });

tests/vite-app/tests/integration/fany-test-gjs.gjs

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click, rerender, settled } from '@ember/test-helpers';
+import Fancy from 'vite-app/components/fancy2';
+
+
+module('Integration | Component | Fany -- from gjs test file', (hooks) => {
+  setupRenderingTest(hooks);
+
+  test('should have Yay for gts!', async function(assert) {
+    await render(<template>
+  <Fancy @type="primary2"></Fancy>
+</template>);
+    await rerender()
+
+    assert.dom().hasText('Yay for gjs!');
+  });
+});
+
+
+
+

tests/vite-app/tests/integration/fany-test.gts

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, rerender } from '@ember/test-helpers';
+import Fancy from 'vite-app/components/fancy';
+
+
+module('Integration | Component | Fany -- from gts test file', (hooks) => {
+  setupRenderingTest(hooks);
+
+  test('should have Yay for gts!', async function(assert) {
+    await render(<template>
+  <Fancy @type="primary2"></Fancy>
+</template>);
+    await rerender()
+
+    assert.dom().hasText('Yay for gts!');
+  });
+});
+
+
+
+

tests/vite-app/tests/integration/fany2-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, rerender } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | Fany2', (hooks) => {
+  setupRenderingTest(hooks);
+
+  test('should have Yay for gjs!', async function (assert) {
+    await render(hbs`
+    <Fancy @type="primary2"></Fancy>
+    <Fancy2 @type="primary2"></Fancy2>
+    `);
+    await rerender();
+
+    assert.dom().includesText('Yay for gts!');
+    assert.dom().includesText('Yay for gjs!');
+  });
+});

tests/vite-app/vite.config.mjs

@@ -13,6 +13,8 @@ const root = "node_modules/.embroider/rewritten-app";
 
 export default defineConfig({
   root,
+  // esbuild in vite does not support decorators
+  esbuild: false,
   plugins: [
     hbs(),
     templateTag(),
@@ -26,7 +28,7 @@ export default defineConfig({
       // javascript but the javascript still also needs babel, but we don't want
       // to rename them because vite isn't great about knowing how to hot-reload
       // them if we resolve them to made-up names.
-      extensions: [".gjs", ".js", ".hbs"],
+      extensions: [".gjs", ".js", ".hbs", ".ts", ".gts"],
     }),
   ],
   optimizeDeps: optimizeDeps(),