Merge pull request #677 from machty/machty-auto-import

Auto Imports, remove JS/TS config

.vscode/launch.json

@@ -2,7 +2,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Extension",
+      "name": "Debug Extension (Glint + TS)",
       "type": "extensionHost",
       "request": "launch",
       "preLaunchTask": "npm: build",
@@ -16,6 +16,24 @@
         "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode",
         "${workspaceFolder}/test-packages"
       ]
+    },
+    {
+      "name": "Debug Extension (Glint Only, No TS)",
+      "type": "extensionHost",
+      "request": "launch",
+      "preLaunchTask": "npm: build",
+      "autoAttachChildProcesses": true,
+      "runtimeExecutable": "${execPath}",
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "!**/node_modules/**"
+      ],
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode",
+        "--disable-extension",
+        "vscode.typescript-language-features",
+        "${workspaceFolder}/test-packages"
+      ]
     }
   ]
 }

CONTRIBUTING.md

@@ -17,3 +17,69 @@ Glint is a family of packages which all live in this repo as a Yarn workspace. T
 - Read the project’s [ARCHITECTURE.md](./ARCHITECTURE.md) to understand the basics of how the code base works.
 
 Once you have made changes and added tests to confirm they work correctly, you can then open a PR and we'll work with you to polish it up and get it landed!
+
+# Common Debugging Scenarios
+
+## How to run glint-language-server locally?
+
+If you would like to connect your editor to a locally running version of the Glint language server, first start the `tsc` compiler in watch mode from the root folder of the Glint repo:
+
+```
+tsc --build --watch
+```
+
+Then you can configure your editor to point to the absolute path of the `./packages/core` folder within this repo when launching the language server. For VSCode users, this means opening your user preferences (after having already installed the Glint VSCode extension) and setting "Glint: Library Path" (aka `glint.libraryPath`) to the absolute path of the `packages/core` folder, e.g. `/Users/machty/code/glint/packages/core`.
+
+With the running `tsc --build --watch` command, the language server will rebuild when any source code files change. _Important_: after any source code file change and subsequent rebuild, you will need to restart the language server from within your editor in order for the changes to be reflected in your editor. In VSCode, this means running "Glint: Restart Glint Server" from the Command Palette.
+
+## How to run glint-language-server locally in debug mode?
+
+There are a few VSCode Launch Configurations within `./vscode/launch.json` that are handy for debugging:
+
+- Both will enable the TS/JS debugger on both the language server and the client-side VSCode extension code, meaning the debug breakpoints will pause execution to allow you to debug things like text completions
+- Debug Extension (Glint + TS)
+  - This spins up a VSCode window with both Glint and the built-in TS language server running.
+  - In this mode, both language servers will provide duplicate completions and suggestions, which can be useful for testing out feature parity between Glint and TS
+- Debug Extension (Glint Only)
+  - This is useful for testing out the "takeover" mode of running Glint, where Glint is responsible for providing all of the language features (debugging, diagnostics, etc); this is the ideal way to run Glint, but at the time of writing we have not yet achieved feature parity with built-in TS
+- By default these extensions will launch the VSCode Extension Host in the `test-packages` subfolder, which have Ember and Glimmerx apps that you can do some basic testing on
+- _TIP_: you can open any workspace with the Extension Host, meaning you can even debug the language server with breakpoints on a totally separate Ember repo, for example.
+- _NOTE_: debugging takes place within the `glint` workspace, i.e. if you are debugging completions, you'd trigger a completion within the Extension Host, and the breakpoint would pause within the Glint workspace VSCode instance.
+
+These launch configurations can be run via the Run and Debug tab in VSCode.
+
+## How to test out the VSCode extension locally?
+
+Firstly, there is an entire suite of integration tests that will spin up instances of VSCode and test out the VSCode Glint extension. These can be run from the `packages/vscode` directory via:
+
+```
+yarn run test
+```
+
+Secondly, the Launch Configurations described above (I believe) will run your client-side extension code in debug mode, along with the language server.
+
+## How to see the transformed Intermediate Representation (IR) code of a template
+
+Glint transforms template code into TypeScript code so that it can be type-checked by the vanilla TS compiler. Transformed IR code looks something like:
+
+```ts
+static {
+({} as typeof import("@glint/environment-ember-loose/-private/dsl")
+       .templateForBackingValue(this, function(𝚪, χ: typeof import("@glint/environment-ember-loose/-private/dsl")) {
+  {
+    const 𝛄 = χ.emitComponent(χ.resolve(χ.Globals["FooComponent"])
+      ({ desc: "notchHeight _ footer", ...χ.NamedArgsMarker }));
+    𝛄;
+    {
+      const [] = 𝛄.blockParams["default"];
+      {
+  // ...
+```
+
+Sometimes it is useful to see the IR of any .hbs template or .gts/.gjs file for debugging purposes; if you're using VSCode you can see the IR by:
+
+1. Enable "Glint: Debug" in your VSCode user preferences
+2. Run the "Glint: Show IR for Debugging" command
+
+Your template code will be replaced by the IR directly in your editor window.
+

README.md

@@ -39,3 +39,7 @@ Similarly, `glint-language-server` can be used by editor integrations to expose
 The language server can also enable your editor to provide other richer help, such as type information on hover, automated refactoring, and more. See [the VS Code extension README](packages/vscode) for further examples.
 
 [using-glint]: https://typed-ember.gitbook.io/glint/getting-started#using-glint
+
+## Debugging Glint
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on how to run and debug the Glint language server and VSCode extension locally.

packages/core/__tests__/language-server/completions.test.ts

@@ -155,6 +155,141 @@ describe('Language Server: Completions', () => {
     expect(details.detail).toEqual('(property) MyComponent.message: string');
   });
 
+  test('auto imports', () => {
+    project.write({
+      'other.ts': stripIndent`
+        export let foobar = 123;
+      `,
+      'index.ts': stripIndent`
+        import { thing } from 'nonexistent';
+
+        let a = foo
+      `,
+    });
+
+    const preferences = {
+      includeCompletionsForModuleExports: true,
+      allowIncompleteCompletions: true,
+    };
+
+    let server = project.startLanguageServer();
+    let completions = server.getCompletions(
+      project.fileURI('index.ts'),
+      {
+        line: 2,
+        character: 11,
+      },
+      {},
+      preferences
+    );
+
+    let importCompletion = completions?.find(
+      (k) => k.kind == CompletionItemKind.Variable && k.label == 'foobar'
+    );
+
+    let details = server.getCompletionDetails(importCompletion!, {}, preferences);
+
+    expect(details.detail).toEqual('Add import from "./other"\n\nlet foobar: number');
+
+    expect(details.additionalTextEdits?.length).toEqual(1);
+    expect(details.additionalTextEdits?.[0].newText).toMatch("import { foobar } from './other';");
+    expect(details.additionalTextEdits?.[0].range).toEqual({
+      start: { line: 1, character: 0 },
+      end: { line: 1, character: 0 },
+    });
+    expect(details?.documentation).toEqual({
+      kind: 'markdown',
+      value: '',
+    });
+    expect(details?.labelDetails?.description).toEqual('./other');
+  });
+
+  test('auto imports with documentation and tags', () => {
+    project.write({
+      'other.ts': stripIndent`
+        /**
+         * This is a doc comment
+         * @param foo
+         */
+        export let foobar = 123;
+      `,
+      'index.ts': stripIndent`
+        import { thing } from 'nonexistent';
+
+        let a = foo
+      `,
+    });
+
+    const preferences = {
+      includeCompletionsForModuleExports: true,
+      allowIncompleteCompletions: true,
+    };
+
+    let server = project.startLanguageServer();
+    let completions = server.getCompletions(
+      project.fileURI('index.ts'),
+      {
+        line: 2,
+        character: 11,
+      },
+      {},
+      preferences
+    );
+
+    let importCompletion = completions?.find(
+      (k) => k.kind == CompletionItemKind.Variable && k.label == 'foobar'
+    );
+
+    let details = server.getCompletionDetails(importCompletion!, {}, preferences);
+
+    expect(details.detail).toEqual('Add import from "./other"\n\nlet foobar: number');
+
+    expect(details.additionalTextEdits?.length).toEqual(1);
+    expect(details.additionalTextEdits?.[0].newText).toMatch("import { foobar } from './other';");
+    expect(details.additionalTextEdits?.[0].range).toEqual({
+      start: { line: 1, character: 0 },
+      end: { line: 1, character: 0 },
+    });
+    expect(details?.documentation).toEqual({
+      kind: 'markdown',
+      value: 'This is a doc comment\n\n*@param* `foo`',
+    });
+  });
+
+  test('auto import - import statements - ensure all completions are resolvable', () => {
+    project.write({
+      'other.ts': stripIndent`
+        export let foobar = 123;
+      `,
+      'index.ts': stripIndent`
+        import foo
+      `,
+    });
+
+    const preferences = {
+      includeCompletionsForModuleExports: true,
+      allowIncompleteCompletions: true,
+      includeCompletionsForImportStatements: true,
+      includeCompletionsWithInsertText: true, // needs to be present for `includeCompletionsForImportStatements` to work
+    };
+
+    let server = project.startLanguageServer();
+    let completions = server.getCompletions(
+      project.fileURI('index.ts'),
+      {
+        line: 0,
+        character: 10,
+      },
+      {},
+      preferences
+    );
+
+    completions?.forEach((completion) => {
+      let details = server.getCompletionDetails(completion, {}, preferences);
+      expect(details).toBeTruthy();
+    });
+  });
+
   test('referencing own args', async () => {
     let code = stripIndent`
       import Component, { hbs } from '@glimmerx/component';