feat(language-service): enable auto-apply optional chaining on nullable symbol

Author: ivanwonder

client/src/client.ts

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

integration/lsp/viewengine_spec.ts

@@ -65,6 +65,7 @@ describe('Angular language server', () => {
         },
         newText: 'charAt()',
       },
+      filterText: 'charAt()',
       // The 'data' field is only meaningful in Ivy mode.
       data: jasmine.anything(),
     });

package.json

@@ -99,6 +99,11 @@
           ],
           "default": "off",
           "description": "Traces the communication between VS Code and the Angular language server."
+        },
+        "angular.suggest.includeAutomaticOptionalChainCompletions": {
+          "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."
         }
       }
     },

server/src/cmdline_utils.ts

@@ -37,6 +37,7 @@ interface CommandLineOptions {
   logToConsole: boolean;
   ngProbeLocations: string[];
   tsProbeLocations: string[];
+  includeAutomaticOptionalChainCompletions: boolean;
 }
 
 export function parseCommandLine(argv: string[]): CommandLineOptions {
@@ -48,6 +49,8 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
     logToConsole: hasArgument(argv, '--logToConsole'),
     ngProbeLocations: parseStringArray(argv, '--ngProbeLocations'),
     tsProbeLocations: parseStringArray(argv, '--tsProbeLocations'),
+    includeAutomaticOptionalChainCompletions:
+        hasArgument(argv, '--includeAutomaticOptionalChainCompletions'),
   };
 }
 

server/src/completion.ts

@@ -120,6 +120,11 @@ export function tsCompletionEntryToLspCompletionItem(
   const insertText = entry.insertText || entry.name;
   item.textEdit = createTextEdit(scriptInfo, entry, position, insertText, insertReplaceSupport);
 
+  // If the user enables the config `includeAutomaticOptionalChainCompletions`, the `insertText`
+  // range will include the dot. the `insertText` should be assigned to the `filterText` to filter
+  // the completion items.
+  item.filterText = entry.insertText;
+
   item.data = {
     kind: 'ngCompletionOriginData',
     filePath: scriptInfo.fileName,

server/src/server.ts

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

server/src/session.ts

@@ -30,6 +30,7 @@ export interface SessionOptions {
   resolvedNgLsPath: string;
   ivy: boolean;
   logToConsole: boolean;
+  includeAutomaticOptionalChainCompletions: boolean;
 }
 
 enum LanguageId {
@@ -53,6 +54,7 @@ export class Session {
   private readonly configuredProjToExternalProj = new Map<string, string>();
   private readonly logToConsole: boolean;
   private readonly openFiles = new MruTracker();
+  private readonly includeAutomaticOptionalChainCompletions: boolean;
   // 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}> = [];
@@ -68,6 +70,8 @@ export class Session {
   private clientCapabilities: lsp.ClientCapabilities = {};
 
   constructor(options: SessionOptions) {
+    this.includeAutomaticOptionalChainCompletions =
+        options.includeAutomaticOptionalChainCompletions;
     this.logger = options.logger;
     this.ivy = options.ivy;
     this.logToConsole = options.logToConsole;
@@ -978,11 +982,17 @@ export class Session {
     }
     const {languageService, scriptInfo} = lsInfo;
     const offset = lspPositionToTsPosition(scriptInfo, params.position);
-    const completions = languageService.getCompletionsAtPosition(
-        scriptInfo.fileName, offset,
-        {
-            // options
-        });
+
+    let options: ts.GetCompletionsAtPositionOptions = {};
+    if (this.includeAutomaticOptionalChainCompletions) {
+      options = {
+        includeAutomaticOptionalChainCompletions: this.includeAutomaticOptionalChainCompletions,
+        includeCompletionsWithInsertText: this.includeAutomaticOptionalChainCompletions,
+      };
+    }
+
+    const completions =
+        languageService.getCompletionsAtPosition(scriptInfo.fileName, offset, options);
     if (!completions) {
       return;
     }