feat: provide snippets for attribute

Author: ivanwonder

client/src/client.ts

@@ -454,6 +454,12 @@ function constructArgs(ctx: vscode.ExtensionContext): string[] {
     args.push('--includeAutomaticOptionalChainCompletions');
   }
 
+  const includeCompletionsWithSnippetText =
+      config.get<boolean>('angular.suggest.includeCompletionsWithSnippetText');
+  if (includeCompletionsWithSnippetText) {
+    args.push('--includeCompletionsWithSnippetText');
+  }
+
   const tsdk: string|null = config.get('typescript.tsdk', null);
   const tsProbeLocations = getProbeLocations(tsdk, ctx.extensionPath);
   args.push('--tsProbeLocations', tsProbeLocations.join(','));

integration/lsp/ivy_spec.ts

@@ -572,6 +572,62 @@ describe('auto-apply optional chaining', () => {
   });
 });
 
+describe('insert snippet text', () => {
+  jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000; /* 10 seconds */
+
+  let client: MessageConnection;
+  beforeEach(async () => {
+    client = createConnection({
+      ivy: true,
+      includeCompletionsWithSnippetText: true,
+    });
+    // If debugging, set to
+    // - lsp.Trace.Messages to inspect request/response/notification, or
+    // - lsp.Trace.Verbose to inspect payload
+    client.trace(lsp.Trace.Off, createTracer());
+    client.listen();
+    await initializeServer(client);
+  });
+
+  afterEach(() => {
+    client.dispose();
+  });
+
+  it('should be able to complete for an attribute with the value is empty', async () => {
+    openTextDocument(client, FOO_TEMPLATE, `<my-app appOut></my-app>`);
+    const languageServiceEnabled = await waitForNgcc(client);
+    expect(languageServiceEnabled).toBeTrue();
+    const response = await client.sendRequest(lsp.CompletionRequest.type, {
+      textDocument: {
+        uri: FOO_TEMPLATE_URI,
+      },
+      position: {line: 0, character: 14},
+    }) as lsp.CompletionItem[];
+    const completion = response.find(i => i.label === '(appOutput)')!;
+    expect(completion.kind).toEqual(lsp.CompletionItemKind.Event);
+    expect(completion.insertText).toEqual('(appOutput)="$1"');
+    expect(completion.insertTextFormat).toEqual(lsp.InsertTextFormat.Snippet);
+    expect((completion.textEdit as lsp.TextEdit).newText).toEqual('appOut');
+  });
+
+  it('should not be included in the completion for an attribute with a value', async () => {
+    openTextDocument(client, FOO_TEMPLATE, `<my-app [appInput]="1"></my-app>`);
+    const languageServiceEnabled = await waitForNgcc(client);
+    expect(languageServiceEnabled).toBeTrue();
+    const response = await client.sendRequest(lsp.CompletionRequest.type, {
+      textDocument: {
+        uri: FOO_TEMPLATE_URI,
+      },
+      position: {line: 0, character: 17},
+    }) as lsp.CompletionItem[];
+    const completion = response.find(i => i.label === '[appInput]')!;
+    expect(completion.kind).toEqual(lsp.CompletionItemKind.Property);
+    expect(completion.insertText).toBeUndefined;
+    expect(completion.insertTextFormat).toBeUndefined;
+    expect((completion.textEdit as lsp.TextEdit).newText).toEqual('appInput');
+  });
+});
+
 function onNgccProgress(client: MessageConnection): Promise<string> {
   return new Promise(resolve => {
     client.onProgress(NgccProgressType, NgccProgressToken, (params: NgccProgress) => {

integration/lsp/test_utils.ts

@@ -16,6 +16,7 @@ import {PROJECT_PATH, SERVER_PATH} from '../test_constants';
 export interface ServerOptions {
   ivy: boolean;
   includeAutomaticOptionalChainCompletions?: boolean;
+  includeCompletionsWithSnippetText?: boolean;
 }
 
 export function createConnection(serverOptions: ServerOptions): MessageConnection {

package.json

@@ -118,6 +118,11 @@
           "type": "boolean",
           "default": true,
           "description": "Enable/disable showing completions on potentially undefined values that insert an optional chain call. Requires TS 3.7+ and strict null checks to be enabled."
+        },
+        "angular.suggest.includeCompletionsWithSnippetText": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable/disable snippet completions from angular language Server. Requires using TypeScript 4.3+ in the workspace."
         }
       }
     },
@@ -183,7 +188,7 @@
     "test:syntaxes": "yarn compile:syntaxes-test && yarn build:syntaxes && jasmine dist/syntaxes/test/driver.js"
   },
   "dependencies": {
-    "@angular/language-service": "13.0.0-next.3",
+    "@angular/language-service": "13.0.0-next.12",
     "typescript": "4.4.3",
     "vscode-jsonrpc": "6.0.0",
     "vscode-languageclient": "7.0.0",

server/package.json

@@ -15,7 +15,7 @@
     "ngserver": "./bin/ngserver"
   },
   "dependencies": {
-    "@angular/language-service": "13.0.0-next.3",
+    "@angular/language-service": "13.0.0-next.12",
     "vscode-jsonrpc": "6.0.0",
     "vscode-languageserver": "7.0.0",
     "vscode-uri": "3.0.2"

server/src/cmdline_utils.ts

@@ -38,6 +38,7 @@ interface CommandLineOptions {
   ngProbeLocations: string[];
   tsProbeLocations: string[];
   includeAutomaticOptionalChainCompletions: boolean;
+  includeCompletionsWithSnippetText: boolean;
 }
 
 export function parseCommandLine(argv: string[]): CommandLineOptions {
@@ -51,6 +52,7 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
     tsProbeLocations: parseStringArray(argv, '--tsProbeLocations'),
     includeAutomaticOptionalChainCompletions:
         hasArgument(argv, '--includeAutomaticOptionalChainCompletions'),
+    includeCompletionsWithSnippetText: hasArgument(argv, '--includeCompletionsWithSnippetText'),
   };
 }
 

server/src/completion.ts

@@ -125,6 +125,9 @@ export function tsCompletionEntryToLspCompletionItem(
     // range will include the dot. the `insertText` should be assigned to the `filterText` to filter
     // the completion items.
     item.filterText = entry.insertText;
+    if (entry.isSnippet) {
+      item.insertTextFormat = lsp.InsertTextFormat.Snippet;
+    }
   }
 
   item.data = {

server/src/server.ts

@@ -44,7 +44,8 @@ function main() {
     resolvedNgLsPath: ng.resolvedPath,
     ivy: isG3 ? true : options.ivy,
     logToConsole: options.logToConsole,
-    includeAutomaticOptionalChainCompletions: options.includeAutomaticOptionalChainCompletions
+    includeAutomaticOptionalChainCompletions: options.includeAutomaticOptionalChainCompletions,
+    includeCompletionsWithSnippetText: options.includeCompletionsWithSnippetText,
   });
 
   // Log initialization info

server/src/session.ts

@@ -31,6 +31,7 @@ export interface SessionOptions {
   ivy: boolean;
   logToConsole: boolean;
   includeAutomaticOptionalChainCompletions: boolean;
+  includeCompletionsWithSnippetText: boolean;
 }
 
 enum LanguageId {
@@ -55,6 +56,8 @@ export class Session {
   private readonly logToConsole: boolean;
   private readonly openFiles = new MruTracker();
   private readonly includeAutomaticOptionalChainCompletions: boolean;
+  private readonly includeCompletionsWithSnippetText: boolean;
+  private snippetSupport: boolean|undefined;
   // Tracks the spawn order and status of the `ngcc` processes. This allows us to ensure we enable
   // the LS in the same order the projects were created in.
   private projectNgccQueue: Array<{project: ts.server.Project, done: boolean}> = [];
@@ -72,6 +75,7 @@ export class Session {
   constructor(options: SessionOptions) {
     this.includeAutomaticOptionalChainCompletions =
         options.includeAutomaticOptionalChainCompletions;
+    this.includeCompletionsWithSnippetText = options.includeCompletionsWithSnippetText;
     this.logger = options.logger;
     this.ivy = options.ivy;
     this.logToConsole = options.logToConsole;
@@ -605,6 +609,8 @@ export class Session {
   }
 
   private onInitialize(params: lsp.InitializeParams): lsp.InitializeResult {
+    this.snippetSupport =
+        params.capabilities.textDocument?.completion?.completionItem?.snippetSupport;
     const serverOptions: ServerOptions = {
       logFile: this.logger.getLogFileName(),
     };
@@ -1007,10 +1013,14 @@ export class Session {
     const offset = lspPositionToTsPosition(scriptInfo, params.position);
 
     let options: ts.GetCompletionsAtPositionOptions = {};
-    if (this.includeAutomaticOptionalChainCompletions) {
+    const includeCompletionsWithSnippetText =
+        this.includeCompletionsWithSnippetText && this.snippetSupport;
+    if (this.includeAutomaticOptionalChainCompletions || includeCompletionsWithSnippetText) {
       options = {
         includeAutomaticOptionalChainCompletions: this.includeAutomaticOptionalChainCompletions,
-        includeCompletionsWithInsertText: this.includeAutomaticOptionalChainCompletions,
+        includeCompletionsWithSnippetText: includeCompletionsWithSnippetText,
+        includeCompletionsWithInsertText:
+            this.includeAutomaticOptionalChainCompletions || includeCompletionsWithSnippetText,
       };
     }
 

tsconfig.json

@@ -4,7 +4,8 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "esModuleInterop": true
   },
   "files": [],
   "references": [

yarn.lock

@@ -52,10 +52,10 @@
     yaml "^1.10.0"
     yargs "^17.0.0"
 
-"@angular/[email protected].3":
-  version "13.0.0-next.3"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-13.0.0-next.3.tgz#80aa3c0f0c1bfeabb04b11ba1a889461f0979cfc"
-  integrity sha512-etqLlMX0twVI2lZZhS4Kt3gEOmqq4FiAXEMSmpklJaXqKa4qVUrOqjgkNeAXr3vw/d/Knb4DVn7AQiIUoNNLgg==
+"@angular/[email protected].12":
+  version "13.0.0-next.12"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-13.0.0-next.12.tgz#e080fc9e58af9267d9c97abad15dbef4b8c0ea18"
+  integrity sha512-YUF/XsQ192tycaOzhYuTWwMx299zIGxENqQ1AVf8rp1TNnfr6csh+7LJ42j60MN44FmYXnIrVRV2+fp3jfhyBA==
 
 "@babel/code-frame@^7.0.0":
   version "7.12.13"