Support standalone templates in @glint/cli

Author: dfreeman

packages/cli/__tests__/check.test.ts

@@ -75,7 +75,7 @@ describe('single-pass typechecking', () => {
     `);
   });
 
-  test('reports diagnostics for a template type error', async () => {
+  test('reports diagnostics for an inline template type error', async () => {
     let code = stripIndent`
       import Component, { hbs } from '@glimmerx/component';
 
@@ -113,6 +113,46 @@ describe('single-pass typechecking', () => {
     `);
   });
 
+  test('reports diagnostics for a companion template type error', async () => {
+    project.write('.glintrc', 'environment: ember-loose\n');
+
+    let script = stripIndent`
+      import Component from '@ember/component';
+
+      export interface MyComponentArgs {
+        message: string;
+      }
+
+      export default class MyComponent extends Component<MyComponentArgs> {
+        target = 'World!';
+      }
+    `;
+
+    let template = stripIndent`
+      {{@message}}, {{this.targett}}
+    `;
+
+    project.write('my-component.ts', script);
+    project.write('my-component.hbs', template);
+
+    let checkResult = await project.check({ reject: false });
+
+    expect(checkResult.exitCode).toBe(1);
+    expect(checkResult.stdout).toEqual('');
+    expect(stripAnsi(checkResult.stderr)).toMatchInlineSnapshot(`
+      "my-component.hbs:1:22 - error TS2551: Property 'targett' does not exist on type 'MyComponent'. Did you mean 'target'?
+
+      1 {{@message}}, {{this.targett}}
+                             ~~~~~~~
+
+        my-component.ts:8:3
+          8   target = 'World!';
+              ~~~~~~
+          'target' is declared here.
+      "
+    `);
+  });
+
   test('honors .glintrc configuration', async () => {
     let code = stripIndent`
       import Component, { hbs } from '@glimmerx/component';

packages/cli/__tests__/utils/project.ts

@@ -49,6 +49,10 @@ export default class Project {
     return fs.readFileSync(this.filePath(fileName), 'utf-8');
   }
 
+  public remove(fileName: string): void {
+    fs.unlinkSync(this.filePath(fileName));
+  }
+
   public async destroy(): Promise<void> {
     fs.rmdirSync(this.rootDir, { recursive: true });
   }

packages/cli/__tests__/watch.test.ts

@@ -166,4 +166,54 @@ describe('watched typechecking', () => {
 
     await watch.terminate();
   });
+
+  test('reports on errors introduced and cleared in a companion template', async () => {
+    project.write('.glintrc', 'environment: ember-loose\n');
+    project.write('index.ts', 'import "@glint/environment-ember-loose/types";');
+
+    let script = stripIndent`
+      import Component from '@ember/component';
+
+      export interface MyComponentArgs {
+        message: string;
+      }
+
+      export default class MyComponent extends Component<MyComponentArgs> {
+        target = 'World!';
+      }
+    `;
+
+    let template = stripIndent`
+      {{@message}}, {{this.target}}
+    `;
+
+    project.write('my-component.ts', script);
+
+    let watch = project.watch({ reject: true });
+
+    let output = await watch.awaitOutput('Watching for file changes.');
+    expect(output).toMatch('Found 0 errors.');
+
+    project.write('my-component.hbs', template.replace('target', 'tarrget'));
+
+    output = await watch.awaitOutput('Watching for file changes.');
+    expect(output).toMatch('Found 1 error.');
+
+    project.write('my-component.hbs', template);
+
+    output = await watch.awaitOutput('Watching for file changes.');
+    expect(output).toMatch('Found 0 errors.');
+
+    project.write('my-component.hbs', template.replace('@message', '@messagee'));
+
+    output = await watch.awaitOutput('Watching for file changes.');
+    expect(output).toMatch('Found 1 error.');
+
+    project.remove('my-component.hbs');
+
+    output = await watch.awaitOutput('Watching for file changes.');
+    expect(output).toMatch('Found 0 errors.');
+
+    await watch.terminate();
+  });
 });

packages/cli/package.json

@@ -22,7 +22,6 @@
   "dependencies": {
     "@glint/config": "^0.2.1",
     "@glint/transform": "^0.2.1",
-    "debug": "^4.1.1",
     "resolve": "^1.17.0",
     "yargs": "^15.3.1"
   },

packages/cli/src/perform-check.ts

@@ -46,9 +46,7 @@ function createCompilerHost(
   transformManager: TransformManager
 ): ts.CompilerHost {
   let host = ts.createCompilerHost(options);
-  host.readFile = function (filename) {
-    return transformManager.readFile(filename);
-  };
+  host.readFile = transformManager.readFile;
   return host;
 }
 

packages/cli/src/perform-watch.ts

@@ -27,9 +27,8 @@ function sysForWatchCompilerHost(
 ): typeof ts.sys {
   return {
     ...ts.sys,
-    readFile(path, encoding) {
-      return transformManager.readFile(path, encoding);
-    },
+    watchFile: transformManager.watchFile,
+    readFile: transformManager.readFile,
   };
 }
 

packages/cli/src/transform-manager.ts

@@ -1,6 +1,7 @@
 import { TransformedModule, rewriteModule, rewriteDiagnostic } from '@glint/transform';
 import type ts from 'typescript';
 import { GlintConfig } from '@glint/config';
+import { assert } from '@glint/transform/lib/util';
 
 export default class TransformManager {
   private transformedModules = new Map<string, TransformedModule>();
@@ -29,27 +30,65 @@ export default class TransformManager {
     );
   }
 
-  public readFile(filename: string, encoding?: string): string | undefined {
+  public watchFile = (
+    path: string,
+    callback: ts.FileWatcherCallback,
+    pollingInterval?: number,
+    options?: ts.WatchOptions
+  ): ts.FileWatcher => {
+    const { watchFile } = this.ts.sys;
+    assert(watchFile);
+
+    let rootWatcher = watchFile(path, callback, pollingInterval, options);
+    let templatePaths = this.glintConfig.environment.getPossibleTemplatePaths(path);
+
+    if (this.glintConfig.includesFile(path) && templatePaths.length) {
+      let templateWatchers = templatePaths.map((candidate) =>
+        watchFile(candidate, (_, event) => callback(path, event), pollingInterval, options)
+      );
+
+      return {
+        close() {
+          rootWatcher.close();
+          templateWatchers.forEach((watcher) => watcher.close());
+        },
+      };
+    }
+
+    return rootWatcher;
+  };
+
+  public readFile = (filename: string, encoding?: string): string | undefined => {
     let contents = this.ts.sys.readFile(filename, encoding);
     let config = this.glintConfig;
 
     if (
       contents &&
       filename.endsWith('.ts') &&
       !filename.endsWith('.d.ts') &&
-      config.includesFile(filename) &&
-      config.environment.moduleMayHaveTagImports(contents)
+      config.includesFile(filename)
     ) {
+      let mayHaveTaggedTemplates = contents && config.environment.moduleMayHaveTagImports(contents);
+      let templateCandidates = config.environment.getPossibleTemplatePaths(filename);
+      let templatePath = templateCandidates.find((candidate) => this.ts.sys.fileExists(candidate));
+      if (!mayHaveTaggedTemplates && !templatePath) {
+        return contents;
+      }
+
       let script = { filename, contents };
-      let transformedModule = rewriteModule({ script }, config.environment);
+      let template = templatePath
+        ? { filename: templatePath, contents: this.ts.sys.readFile(templatePath) ?? '' }
+        : undefined;
+
+      let transformedModule = rewriteModule({ script, template }, config.environment);
       if (transformedModule) {
         this.transformedModules.set(filename, transformedModule);
         return transformedModule.transformedContents;
       }
     }
 
     return contents;
-  }
+  };
 
   private readonly formatDiagnosticHost: ts.FormatDiagnosticsHost = {
     getCanonicalFileName: (name) => name,