TS Plugin 5

packages/typescript-plugin/src/typescript-server-plugin.ts

@@ -10,7 +10,9 @@ const {
 const plugin = createAsyncLanguageServicePlugin(
   ['.gts', '.gjs', '.hbs'],
   (fileName: string) => {
-    if (fileName.endsWith('.gts')) {
+    if (fileName.endsWith('.hbs')) {
+      return 3 satisfies ts.ScriptKind.TS;
+    } else if (fileName.endsWith('.gts')) {
       return 3 satisfies ts.ScriptKind.TS;
     } else if (fileName.endsWith('.gjs')) {
       return 1 satisfies ts.ScriptKind.JS;

packages/vscode/package.json

@@ -162,6 +162,7 @@
       {
         "name": "@glint/typescript-plugin",
         "enableForWorkspaceTypeScriptVersions": true,
+        "configNamespace": "typescript",
         "languages": [
           "glimmer-ts",
           "glimmer-js"

test-packages/ts-plugin-test-app/package.json

@@ -10,6 +10,8 @@
   "description": "",
   "devDependencies": {
     "typescript": "*",
+    "@glint/core": "*",
+    "@glint/environment-ember-loose": "*",
     "@glint/typescript-plugin": "*"
   }
 }

test-packages/ts-plugin-test-app/src/ember-component.hbs

@@ -1,6 +1,28 @@
-{{! TODO: this isn't working yet }}
-{{foo}}
+<div ...attributes id={{unique-id}}>
+  {{this.required}}
+  {{this.optional}}
+  {{this.hasDefault}}
 
-<div>
-  {{this.bar}}
-</div>
+  {{@required}}
+  {{@optional}}
+  {{@hasDefault}}
+
+  {{!--
+    This pair of checks needs to work in this app, which uses DT types, and the
+    preview/stable types app which does *not*.
+  --}}
+  {{get this "required"}}
+
+  {{! @glint-expect-error: non-existent property }}
+  {{get this "unrelated"}}
+</div>
+
+{{#if this.showFunctionHelpers}}
+  {{! @glint-expect-error: missing arg }}
+  {{this.isLongString}}
+
+  {{! @glint-expect-error: wrong arg type }}
+  {{this.isLongString 123}}
+
+  {{this.isLongString 'hi'}}
+{{/if}}

test-packages/ts-plugin-test-app/src/ember-component.ts

@@ -1,3 +1,38 @@
-export default class EmberComponent {
-  foo = 123;
+/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+import Component from '@ember/component';
+
+export interface EmberComponentArgs {
+  required: string;
+  hasDefault?: string;
+  optional?: number;
+}
+
+export interface EmberComponentSignature {
+  Element: HTMLDivElement;
+  Args: EmberComponentArgs;
+}
+
+export default interface EmberComponent extends EmberComponentArgs {}
+export default class EmberComponent extends Component<EmberComponentSignature> {
+  public hasDefault = 'defaultValue';
+  public showFunctionHelpers = false;
+
+  public isLongString(value: string): boolean {
+    return value.length > 5;
+  }
+
+  public checkTypes(): unknown {
+    const required: string = this.required;
+    const hasDefault: string = this.hasDefault;
+    const optional: number | undefined = this.optional;
+
+    return { required, hasDefault, optional };
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    EmberComponent: typeof EmberComponent;
+    'ember-component': typeof EmberComponent;
+  }
 }

test-packages/ts-plugin-test-app/src/js-component.hbs

@@ -0,0 +1 @@
+{{this.message}}

test-packages/ts-plugin-test-app/src/js-component.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class MyComponent extends Component {
+  message = 'hi';
+}

test-packages/ts-plugin-test-app/src/wrapper-component.hbs

@@ -0,0 +1 @@
+{{yield (hash InnerComponent=(component "ember-component" required=@value))}}

test-packages/ts-plugin-test-app/src/wrapper-component.ts

@@ -0,0 +1,28 @@
+/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+import { ComponentLike, WithBoundArgs } from '@glint/template';
+import Component from '@ember/component';
+import EmberComponent from './ember-component';
+
+interface WrapperComponentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    value: string;
+  };
+  Blocks: {
+    default: [
+      {
+        InnerComponent: WithBoundArgs<typeof EmberComponent, 'required'>;
+        MaybeComponent?: ComponentLike<{ Args: { key: string } }>;
+        stringValue?: string;
+      },
+    ];
+  };
+}
+
+export default class WrapperComponent extends Component<WrapperComponentSignature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    WrapperComponent: typeof WrapperComponent;
+  }
+}