Reinstate GJS Support (#877)

Author: machty

packages/core/src/transform/diagnostics/augmentation.ts

@@ -18,10 +18,8 @@ export function augmentDiagnostics<T extends Diagnostic>(
     const start = diagnostic.start;
     const end = start + diagnostic.length;
 
-    // TODO: de-hardwire "disregard.gts" and consider the case of two-file components where
-    // the hardcoded source file name might be the hbs file.
     const rangeWithMappingAndSource = transformedModule.getTransformedRange(
-      'disregard.gts',
+      transformedModule.originalFileName,
       start,
       end,
     );

packages/core/src/transform/template/rewrite-module.ts

@@ -33,7 +33,7 @@ export type RewriteInput = { script: SourceFile; template?: SourceFile };
 //
 // 1. It doesn't break Organize Imports command
 // 2. It doesn't introduce any keywords/variables that'll show up in auto-complete suggestions
-const EXTENSION_FIXING_HEADER_HACK = `
+const EXTENSION_FIXING_HEADER_HACK_GTS = `
 // @ts-expect-error
 ({} as typeof import('./__glint-hacky-nonexistent.gts'));
 
@@ -42,6 +42,15 @@ const EXTENSION_FIXING_HEADER_HACK = `
 
 `;
 
+const EXTENSION_FIXING_HEADER_HACK_GJS = `
+// @ts-expect-error
+(/** @type {typeof import("./__glint-hacky-nonexistent.gts")} */ ({}))
+
+// @ts-expect-error
+(/** @type {typeof import("./__glint-hacky-nonexistent.gjs")} */ ({}))
+
+`;
+
 /**
  * Given the script and/or template that together comprise a component module,
  * returns a `TransformedModule` representing the combined result, with the
@@ -70,7 +79,7 @@ export function rewriteModule(
   let sparseSpans = completeCorrelatedSpans(partialSpans);
   let { contents, correlatedSpans } = calculateTransformedSource(script, sparseSpans);
 
-  return new TransformedModule(contents, errors, directives, correlatedSpans);
+  return new TransformedModule(contents, errors, directives, correlatedSpans, script.filename);
 }
 
 /**
@@ -94,7 +103,9 @@ function calculateCorrelatedSpans(
       originalStart: 0,
       originalLength: 0,
       insertionPoint: 0,
-      transformedSource: EXTENSION_FIXING_HEADER_HACK,
+      transformedSource: environment.isUntypedScript(script.filename)
+        ? EXTENSION_FIXING_HEADER_HACK_GJS
+        : EXTENSION_FIXING_HEADER_HACK_GTS,
     },
   ];
 

packages/core/src/transform/template/transformed-module.ts

@@ -68,6 +68,7 @@ export default class TransformedModule {
     public readonly errors: ReadonlyArray<TransformError>,
     public readonly directives: ReadonlyArray<Directive>,
     public readonly correlatedSpans: Array<CorrelatedSpan>,
+    public readonly originalFileName: string,
   ) {}
 
   public toDebugString(): string {

packages/core/src/volar/gts-virtual-code.ts

@@ -129,8 +129,11 @@ export class VirtualGtsCode implements VirtualCode {
     };
 
     const contents = snapshot.getText(0, length);
-
-    let script = { filename: 'disregard.gts', contents };
+    const isJavascript =
+      this.languageId === 'glimmer-js' || this.languageId === 'javascript.glimmer';
+    const embeddedLanguageId = isJavascript ? 'javascript' : 'typescript';
+    const filename = isJavascript ? 'root.gjs' : 'root.gts';
+    let script = { filename, contents };
     let template = undefined;
 
     const transformedModule = rewriteModule(
@@ -149,7 +152,7 @@ export class VirtualGtsCode implements VirtualCode {
         {
           embeddedCodes: [],
           id: 'ts',
-          languageId: 'typescript',
+          languageId: embeddedLanguageId,
           mappings,
           snapshot: new ScriptSnapshot(transformedModule.transformedContents),
           directives: transformedModule.directives,
@@ -213,7 +216,7 @@ export class VirtualGtsCode implements VirtualCode {
         {
           embeddedCodes: [],
           id: 'ts',
-          languageId: 'typescript',
+          languageId: embeddedLanguageId,
           mappings: [
             {
               // Hacked hardwired values for now.

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

@@ -144,7 +144,7 @@ function getCompletionsAtPosition<T>(
       const transformedModule: TransformedModule = root?.transformedModule;
       const completions = getCompletionsAtPosition(fileName, position, options, formattingSettings);
       const transformedRange = transformedModule?.getTransformedRange(
-        'disregard.gts',
+        transformedModule.originalFileName,
         position,
         position,
       );

packages/vscode/__fixtures__/ember-app-loose-and-gts/app/components/GreetingUntyped.gjs

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class Greeting extends Component {
+  message = 'Hello';
+
+  <template>
+    {{this.message}}, {{@target}}!
+  </template>
+}

packages/vscode/__fixtures__/ember-app-loose-and-gts/app/components/OtherUntyped.gjs

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import Colocated from './colocated-folder';
+import Greeting from './GreetingUntyped';
+
+export default class Other extends Component {
+  message = 'Hello';
+
+  <template>
+    <Greeting @target="World" />
+    <Colocated @target="World" />
+  </template>
+}

packages/vscode/__fixtures__/ember-app-loose-and-gts/tsconfig.json

@@ -4,7 +4,8 @@
     "target": "es2019",
     "module": "es2015",
     "moduleResolution": "bundler",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "checkJs": true
   },
   "glint": {
     "environment": ["ember-loose", "ember-template-imports"]

packages/vscode/__tests__/helpers/async.ts

@@ -2,7 +2,7 @@ export function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-export async function waitUntil(callback: () => unknown): Promise<void> {
+export async function waitUntil(callback: () => unknown, message?: string): Promise<void> {
   let start = Date.now();
   while (Date.now() - start < 15_000) {
     if (await callback()) {
@@ -12,5 +12,5 @@ export async function waitUntil(callback: () => unknown): Promise<void> {
     await sleep(500);
   }
 
-  throw new Error(`waitUntil condition never came true`);
+  throw new Error(`waitUntil condition never came true (${message})`);
 }

packages/vscode/__tests__/ts-plugin-tests/smoketest-ember-app-loose-and-gts.test.ts

@@ -34,7 +34,7 @@ describe('Smoke test: Loose Mode + GTS with TS Plugin Mode', () => {
         let scriptEditor = await window.showTextDocument(scriptURI, { viewColumn: ViewColumn.One });
 
         // Wait for a diagnostic to appear in the template
-        await waitUntil(() => languages.getDiagnostics(scriptURI).length);
+        await waitUntil(() => languages.getDiagnostics(scriptURI).length, 'diagnostic to appear');
 
         expect(languages.getDiagnostics(scriptURI)).toMatchObject([
           {
@@ -51,7 +51,10 @@ describe('Smoke test: Loose Mode + GTS with TS Plugin Mode', () => {
         });
 
         // Wait for the diagnostic to disappear
-        await waitUntil(() => languages.getDiagnostics(scriptURI).length == 0);
+        await waitUntil(
+          () => languages.getDiagnostics(scriptURI).length == 0,
+          'diagnostic to disappear',
+        );
       });
     });
   });