feat: client-side implementation for ngcc feature

This commit implements the client-side work to support the ngcc feature.

The idea is as follows:

1. Client receives notification from server
2. Client runs ngcc
3. Client sends notification to server once ngcc is done

As part of this work, we implement our own progress reporter to show
each step of the ngcc compilation.

Author: kyliau

client/src/command-ngcc.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {spawn} from 'child_process';
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+function resolveNgccFrom(directory: string): string|null {
+  try {
+    return require.resolve(`@angular/compiler-cli/ngcc/main-ngcc.js`, {
+      paths: [directory],
+    });
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Resolve ngcc from the directory that contains the specified `tsconfig` and
+ * run ngcc.
+ */
+export async function resolveAndRunNgcc(
+    tsconfig: string, progress: vscode.Progress<string>): Promise<void> {
+  const directory = path.dirname(tsconfig);
+  const ngcc = resolveNgccFrom(directory);
+  if (!ngcc) {
+    throw new Error(`Failed to resolve ngcc from ${directory}`);
+  }
+  const childProcess = spawn(
+      ngcc,
+      [
+        '--tsconfig',
+        tsconfig,
+      ],
+      {
+        cwd: directory,
+      });
+
+  childProcess.stdout.on('data', (data: Buffer) => {
+    for (let entry of data.toString().split('\n')) {
+      entry = entry.trim();
+      if (entry) {
+        progress.report(entry);
+      }
+    }
+  });
+
+  return new Promise((resolve, reject) => {
+    childProcess.on('error', (error: Error) => {
+      reject(error);
+    });
+    childProcess.on('close', (code: number) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        throw new Error(`ngcc for ${tsconfig} returned exit code ${code}`);
+      }
+    });
+  });
+}

client/src/extension.ts

@@ -11,9 +11,11 @@ import * as path from 'path';
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient';
 
-import {projectLoadingNotification} from '../../common/out/notifications';
+import * as notification from '../../common/out/notifications';
 
+import {resolveAndRunNgcc} from './command-ngcc';
 import {registerCommands} from './commands';
+import {withProgress} from './progress-reporter';
 
 export function activate(context: vscode.ExtensionContext) {
   // If the extension is launched in debug mode then the debug server options are used
@@ -53,29 +55,50 @@ export function activate(context: vscode.ExtensionContext) {
   // client can be deactivated on extension deactivation
   context.subscriptions.push(...registerCommands(client), client.start());
 
-  client.onDidChangeState((e) => {
-    let task: {resolve: () => void}|undefined;
-    if (e.newState == lsp.State.Running) {
-      client.onNotification(projectLoadingNotification.start, () => {
-        if (task) {
-          task.resolve();
-          task = undefined;
-        }
-        vscode.window.withProgress(
-            {
-              location: vscode.ProgressLocation.Window,
-              title: 'Initializing Angular language features',
-            },
-            () => new Promise((resolve) => {
-              task = {resolve};
-            }));
-      });
+  client.onDidChangeState((e: lsp.StateChangeEvent) => {
+    if (e.newState === lsp.State.Running) {
+      registerNotificationHandlers(client);
+    }
+  });
+}
 
-      client.onNotification(projectLoadingNotification.finish, () => {
-        if (task) {
-          task.resolve();
-          task = undefined;
-        }
+function registerNotificationHandlers(client: lsp.LanguageClient) {
+  client.onNotification(notification.ProjectLoadingStart, () => {
+    vscode.window.withProgress(
+        {
+          location: vscode.ProgressLocation.Window,
+          title: 'Initializing Angular language features',
+        },
+        () => new Promise((resolve) => {
+          client.onNotification(notification.ProjectLoadingFinish, resolve);
+        }),
+    );
+  });
+
+  client.onNotification(notification.RunNgcc, async (params: notification.RunNgccParams) => {
+    const {configFilePath} = params;
+    try {
+      await withProgress(
+          {
+            location: vscode.ProgressLocation.Window,
+            title: `Running ngcc for project ${configFilePath}`,
+            cancellable: false,
+          },
+          (progress: vscode.Progress<string>) => {
+            return resolveAndRunNgcc(configFilePath, progress);
+          },
+      );
+      client.sendNotification(notification.NgccComplete, {
+        configFilePath,
+        success: true,
+      });
+    } catch (e) {
+      vscode.window.showWarningMessage(
+          `Failed to run ngcc. Ivy language service might not function correctly. Please see the log file for more information.`);
+      client.sendNotification(notification.NgccComplete, {
+        configFilePath,
+        success: false,
+        error: e.message,
       });
     }
   });

client/src/progress-reporter.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as vscode from 'vscode';
+
+const EMPTY_DISPOSABLE = vscode.Disposable.from();
+
+class ProgressReporter implements vscode.Progress<unknown> {
+  private lastMessage: vscode.Disposable = EMPTY_DISPOSABLE;
+
+  report(value: unknown) {
+    this.lastMessage.dispose();  // clear the last message
+    // See https://code.visualstudio.com/api/references/icons-in-labels for
+    // icons available in vscode. "~spin" animates the icon.
+    this.lastMessage = vscode.window.setStatusBarMessage(`$(loading~spin) Angular: ${value}`);
+  }
+
+  finish() {
+    this.lastMessage.dispose();
+    this.lastMessage = EMPTY_DISPOSABLE;
+  }
+}
+
+interface Task<R> {
+  (progress: vscode.Progress<string>): Promise<R>;
+}
+
+/**
+ * Show progress in the editor. Progress is shown while running the given `task`
+ * callback and while the promise it returns is in the pending state.
+ * If the given `task` returns a rejected promise, this function will reject with
+ * the same promise.
+ */
+export async function withProgress<R>(options: vscode.ProgressOptions, task: Task<R>): Promise<R> {
+  // Although not strictly compatible, the signature of this function follows
+  // the signature of vscode.window.withProgress() to make it easier to switch
+  // to the official API if we choose to do so later.
+  const reporter = new ProgressReporter();
+  if (options.title) {
+    reporter.report(options.title);
+  }
+  try {
+    return await task(reporter);
+  } finally {
+    reporter.finish();
+  }
+}

common/notifications.ts

@@ -6,9 +6,31 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NotificationType0} from 'vscode-jsonrpc';
+import {NotificationType, NotificationType0} from 'vscode-jsonrpc';
 
-export const projectLoadingNotification = {
-  start: new NotificationType0('angular/projectLoadingStart'),
-  finish: new NotificationType0('angular/projectLoadingFinish')
+export const ProjectLoadingStart = new NotificationType0('angular/projectLoadingStart');
+export const ProjectLoadingFinish = new NotificationType0('angular/projectLoadingFinish');
+
+export interface ProjectLanguageServiceParams {
+  projectName: string;
+  languageServiceEnabled: boolean;
+}
+
+export const ProjectLanguageService =
+    new NotificationType<ProjectLanguageServiceParams>('angular/projectLanguageService');
+
+export interface RunNgccParams {
+  configFilePath: string;
+}
+
+export const RunNgcc = new NotificationType<RunNgccParams>('angular/runNgcc');
+
+export type NgccCompleteParams = {
+  configFilePath: string; success: true;
+}|{
+  configFilePath: string;
+  success: false;
+  error: string;
 };
+
+export const NgccComplete = new NotificationType<NgccCompleteParams>('angular/ngccComplete');

server/src/session.ts

@@ -9,7 +9,7 @@
 import * as ts from 'typescript/lib/tsserverlibrary';
 import * as lsp from 'vscode-languageserver';
 
-import {projectLoadingNotification} from '../../common/out/notifications';
+import * as notification from '../../common/out/notifications';
 
 import {tsCompletionEntryToLspCompletionItem} from './completion';
 import {tsDiagnosticToLspDiagnostic} from './diagnostic';
@@ -114,7 +114,7 @@ export class Session {
     switch (event.eventName) {
       case ts.server.ProjectLoadingStartEvent:
         this.isProjectLoading = true;
-        this.connection.sendNotification(projectLoadingNotification.start);
+        this.connection.sendNotification(notification.ProjectLoadingStart);
         this.logger.info(`Loading new project: ${event.data.reason}`);
         break;
       case ts.server.ProjectLoadingFinishEvent: {
@@ -125,7 +125,7 @@ export class Session {
         } finally {
           if (this.isProjectLoading) {
             this.isProjectLoading = false;
-            this.connection.sendNotification(projectLoadingNotification.finish);
+            this.connection.sendNotification(notification.ProjectLoadingFinish);
           }
         }
         break;
@@ -269,7 +269,7 @@ export class Session {
     } catch (error) {
       if (this.isProjectLoading) {
         this.isProjectLoading = false;
-        this.connection.sendNotification(projectLoadingNotification.finish);
+        this.connection.sendNotification(notification.ProjectLoadingFinish);
       }
       if (error.stack) {
         this.error(error.stack);