feat: generate the import declaration for the completion item code actions

In the completion item, the `additionalTextEdits` can only be included the changes about the
current file, the other changes should be inserted by the vscode command.

For example, when the user selects a component in an HTML file, the extension inserts the
selector in the HTML file and auto-generates the import declaration in the TS file.

Author: ivanwonder

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

@@ -2,7 +2,7 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=974837034
-pnpm-lock.yaml=915470004
-yarn.lock=1032276408
-package.json=-1247013691
+pnpm-lock.yaml=1771343819
+yarn.lock=1590538245
+package.json=984232835
 pnpm-workspace.yaml=1711114604

.circleci/config.yml

@@ -9,7 +9,7 @@ jobs:
         type: enum
         enum: ['package.json', 'builds-repo']
     docker:
-      - image: cimg/node:18.13.0
+      - image: cimg/node:18.19.1
     environment:
       # TODO: Remove when pnpm is exclusively used.
       ASPECT_RULES_JS_FROZEN_PNPM_LOCK: '1'

client/src/client.ts

@@ -176,6 +176,16 @@ export class AngularLanguageClient implements vscode.Disposable {
     };
   }
 
+  async applyWorkspaceEdits(workspaceEdits: lsp.WorkspaceEdit[]) {
+    for (const edit of workspaceEdits) {
+      const workspaceEdit = this.client?.protocol2CodeConverter.asWorkspaceEdit(edit);
+      if (workspaceEdit === undefined) {
+        continue;
+      }
+      await vscode.workspace.applyEdit(workspaceEdit);
+    }
+  }
+
   private async isInAngularProject(doc: vscode.TextDocument): Promise<boolean> {
     if (this.client === null) {
       return false;

client/src/commands.ts

@@ -7,6 +7,7 @@
  */
 
 import * as vscode from 'vscode';
+import * as lsp from 'vscode-languageclient/node';
 
 import {OpenJsDocLinkCommand_Args, OpenJsDocLinkCommandId, ServerOptions} from '../../common/initialize';
 
@@ -191,6 +192,16 @@ function openJsDocLinkCommand(): Command<OpenJsDocLinkCommand_Args> {
   };
 }
 
+function applyCodeActionCommand(ngClient: AngularLanguageClient): Command {
+  return {
+    id: 'angular.applyCompletionCodeAction',
+    isTextEditorCommand: false,
+    async execute(args: lsp.WorkspaceEdit[]) {
+      await ngClient.applyWorkspaceEdits(args);
+    },
+  };
+}
+
 /**
  * Register all supported vscode commands for the Angular extension.
  * @param client language client
@@ -205,6 +216,7 @@ export function registerCommands(
     goToComponentWithTemplateFile(client),
     goToTemplateForComponent(client),
     openJsDocLinkCommand(),
+    applyCodeActionCommand(client),
   ];
 
   for (const command of commands) {

integration/lsp/ivy_spec.ts

@@ -14,7 +14,7 @@ import {URI} from 'vscode-uri';
 
 import {ProjectLanguageService, ProjectLanguageServiceParams, SuggestStrictMode, SuggestStrictModeParams} from '../../common/notifications';
 import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject} from '../../common/requests';
-import {APP_COMPONENT, APP_COMPONENT_URI, FOO_COMPONENT, FOO_COMPONENT_URI, FOO_TEMPLATE, FOO_TEMPLATE_URI, IS_BAZEL, PROJECT_PATH, TSCONFIG} from '../test_constants';
+import {APP_COMPONENT, APP_COMPONENT_MODULE_URI, APP_COMPONENT_URI, BAR_COMPONENT, BAR_COMPONENT_URI, FOO_COMPONENT, FOO_COMPONENT_URI, FOO_TEMPLATE, FOO_TEMPLATE_URI, IS_BAZEL, PROJECT_PATH, TSCONFIG} from '../test_constants';
 
 import {convertPathToFileUrl, createConnection, createTracer, initializeServer, openTextDocument} from './test_utils';
 
@@ -580,6 +580,56 @@ export class AppComponent {
     });
     expect(componentResponse).toBe(true);
   })
+
+  describe('auto-import component', () => {
+    it('should generate import in the different file', async () => {
+      openTextDocument(client, FOO_TEMPLATE, `<bar-`);
+      const response = await client.sendRequest(lsp.CompletionRequest.type, {
+        textDocument: {
+          uri: FOO_TEMPLATE_URI,
+        },
+        position: {line: 0, character: 5},
+      }) as lsp.CompletionItem[];
+      const libPostResponse = response.find(res => res.label === 'bar-component')!;
+      const detail = await client.sendRequest(lsp.CompletionResolveRequest.type, libPostResponse);
+      expect(detail.command?.command).toEqual('angular.applyCompletionCodeAction');
+      expect(detail.command?.arguments?.[0])
+          .toEqual(([{
+            'changes': {
+              [APP_COMPONENT_MODULE_URI]: [
+                {
+                  'newText': '\nimport { BarComponent } from "./bar.component";',
+                  'range':
+                      {'start': {'line': 5, 'character': 45}, 'end': {'line': 5, 'character': 45}}
+                },
+                {
+                  'newText': 'imports: [\n    CommonModule,\n    PostModule,\n    BarComponent\n]',
+                  'range':
+                      {'start': {'line': 8, 'character': 2}, 'end': {'line': 11, 'character': 3}}
+                }
+              ]
+            }
+          }]
+
+                    ));
+    });
+
+    it('should generate import in the current file', async () => {
+      openTextDocument(client, BAR_COMPONENT);
+      const response = await client.sendRequest(lsp.CompletionRequest.type, {
+        textDocument: {
+          uri: BAR_COMPONENT_URI,
+        },
+        position: {line: 13, character: 16},
+      }) as lsp.CompletionItem[];
+      const libPostResponse = response.find(res => res.label === 'baz-component')!;
+      const detail = await client.sendRequest(lsp.CompletionResolveRequest.type, libPostResponse);
+      expect(detail.additionalTextEdits).toEqual([{
+        'newText': ',\n    imports: [BazComponent]',
+        'range': {'start': {'line': 14, 'character': 20}, 'end': {'line': 14, 'character': 20}}
+      }]);
+    });
+  });
 });
 
 describe('auto-apply optional chaining', () => {

integration/project/app/bar.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'baz-component',
+    template: `<h1>Hello {{name}}</h1>`,
+    standalone: true
+})
+export class BazComponent {
+    name = 'Angular';
+}
+
+@Component({
+    selector: 'bar-component',
+    template: `<`,
+    standalone: true
+})
+export class BarComponent {
+    name = 'Angular';
+}

integration/test_constants.ts

@@ -9,6 +9,10 @@ export const SERVER_PATH = IS_BAZEL ? join(PACKAGE_ROOT, 'server', 'index.js') :
 export const PROJECT_PATH = join(PACKAGE_ROOT, 'integration', 'project');
 export const APP_COMPONENT = join(PROJECT_PATH, 'app', 'app.component.ts');
 export const APP_COMPONENT_URI = convertPathToFileUrl(APP_COMPONENT);
+export const BAR_COMPONENT = join(PROJECT_PATH, 'app', 'bar.component.ts');
+export const BAR_COMPONENT_URI = convertPathToFileUrl(BAR_COMPONENT);
+export const APP_COMPONENT_MODULE = join(PROJECT_PATH, 'app', 'app.module.ts');
+export const APP_COMPONENT_MODULE_URI = convertPathToFileUrl(APP_COMPONENT_MODULE);
 export const FOO_TEMPLATE = join(PROJECT_PATH, 'app', 'foo.component.html');
 export const FOO_TEMPLATE_URI = convertPathToFileUrl(FOO_TEMPLATE);
 export const FOO_COMPONENT = join(PROJECT_PATH, 'app', 'foo.component.ts');

package.json

@@ -230,7 +230,7 @@
     "test:legacy-syntaxes": "yarn compile:syntaxes-test && yarn build:syntaxes && jasmine dist/syntaxes/test/driver.js"
   },
   "dependencies": {
-    "@angular/language-service": "18.1.0-next.0",
+    "@angular/language-service": "18.1.0-next.2",
     "typescript": "5.4.5",
     "vscode-html-languageservice": "^4.2.5",
     "vscode-jsonrpc": "6.0.0",

pnpm-lock.yaml

@@ -15,7 +15,7 @@
     "ngserver": "./bin/ngserver"
   },
   "dependencies": {
-    "@angular/language-service": "18.1.0-next.1",
+    "@angular/language-service": "18.1.0-next.2",
     "vscode-html-languageservice": "^4.2.5",
     "vscode-jsonrpc": "6.0.0",
     "vscode-languageserver": "7.0.0",