feat(language-service): [ivy] wrap ngtsc to handle typecheck files (#36930)

This commit adds a Compiler interface that wraps the actual ngtsc
compiler. The language-service specific compiler manages multiple
typecheck files using the Project interface, creating and adding
ScriptInfos as necessary.

This commit also adds `overrideInlineTemplate()` method to the mock
service so that we could test the Compiler diagnostics feature.

PR Close #36930

packages/language-service/ivy/test/BUILD.bazel

@@ -23,6 +23,9 @@ jasmine_node_test(
         "//packages/forms",
         "//packages/language-service/test:project",
     ],
+    tags = [
+        "ivy-only",
+    ],
     deps = [
         ":test_lib",
     ],

packages/language-service/ivy/test/diagnostic_spec.ts

@@ -0,0 +1,38 @@
+/**
+ * @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 ts from 'typescript/lib/tsserverlibrary';
+
+import {LanguageService} from '../language_service';
+
+import {APP_COMPONENT, setup} from './mock_host';
+
+describe('diagnostic', () => {
+  const {project, service, tsLS} = setup();
+  const ngLS = new LanguageService(project, tsLS);
+
+  beforeEach(() => {
+    service.reset();
+  });
+
+  it('should not produce error for AppComponent', () => {
+    const diags = ngLS.getSemanticDiagnostics(APP_COMPONENT);
+    expect(diags).toEqual([]);
+  });
+
+  it('should report member does not exist', () => {
+    const content = service.overwriteInlineTemplate(APP_COMPONENT, '{{ nope }}');
+    const diags = ngLS.getSemanticDiagnostics(APP_COMPONENT);
+    expect(diags.length).toBe(1);
+    const {category, file, start, length, messageText} = diags[0];
+    expect(category).toBe(ts.DiagnosticCategory.Error);
+    expect(file?.fileName).toBe(APP_COMPONENT);
+    expect(content.substring(start!, start! + length!)).toBe('nope');
+    expect(messageText).toBe(`Property 'nope' does not exist on type 'AppComponent'.`);
+  });
+});

packages/language-service/ivy/test/mock_host.ts

@@ -35,6 +35,7 @@ export const TSCONFIG = join(PROJECT_DIR, 'tsconfig.json');
 export const APP_COMPONENT = join(PROJECT_DIR, 'app', 'app.component.ts');
 export const APP_MAIN = join(PROJECT_DIR, 'app', 'main.ts');
 export const PARSING_CASES = join(PROJECT_DIR, 'app', 'parsing-cases.ts');
+export const TEST_TEMPLATE = join(PROJECT_DIR, 'app', 'test.ng');
 
 const NOOP_FILE_WATCHER: ts.FileWatcher = {
   close() {}
@@ -44,9 +45,14 @@ export const host: ts.server.ServerHost = {
   ...ts.sys,
   readFile(absPath: string, encoding?: string): string |
       undefined {
-        // TODO: Need to remove all annotations in templates like we do in
-        // MockTypescriptHost
-        return ts.sys.readFile(absPath, encoding);
+        const content = ts.sys.readFile(absPath, encoding);
+        if (content === undefined) {
+          return undefined;
+        }
+        if (absPath === APP_COMPONENT || absPath === PARSING_CASES || absPath === TEST_TEMPLATE) {
+          return removeReferenceMarkers(removeLocationMarkers(content));
+        }
+        return content;
       },
   watchFile(path: string, callback: ts.FileWatcherCallback): ts.FileWatcher {
     return NOOP_FILE_WATCHER;
@@ -109,16 +115,20 @@ class MockService {
 
   overwrite(fileName: string, newText: string): string {
     const scriptInfo = this.getScriptInfo(fileName);
-    this.overwritten.add(scriptInfo.fileName);
-    const snapshot = scriptInfo.getSnapshot();
-    scriptInfo.editContent(0, snapshot.getLength(), preprocess(newText));
-    const sameProgram = this.project.updateGraph();  // clear the dirty flag
-    if (sameProgram) {
-      throw new Error('Project should have updated program after overwrite');
-    }
+    this.overwriteScriptInfo(scriptInfo, preprocess(newText));
     return newText;
   }
 
+  overwriteInlineTemplate(fileName: string, newTemplate: string): string {
+    const scriptInfo = this.getScriptInfo(fileName);
+    const snapshot = scriptInfo.getSnapshot();
+    const originalContent = snapshot.getText(0, snapshot.getLength());
+    const newContent =
+        originalContent.replace(/template: `([\s\S]+)`/, `template: \`${newTemplate}\``);
+    this.overwriteScriptInfo(scriptInfo, preprocess(newContent));
+    return newContent;
+  }
+
   reset() {
     if (this.overwritten.size === 0) {
       return;
@@ -130,10 +140,6 @@ class MockService {
         throw new Error(`Failed to reload ${scriptInfo.fileName}`);
       }
     }
-    const sameProgram = this.project.updateGraph();
-    if (sameProgram) {
-      throw new Error('Project should have updated program after reset');
-    }
     this.overwritten.clear();
   }
 
@@ -144,9 +150,26 @@ class MockService {
     }
     return scriptInfo;
   }
+
+  private overwriteScriptInfo(scriptInfo: ts.server.ScriptInfo, newText: string) {
+    const snapshot = scriptInfo.getSnapshot();
+    scriptInfo.editContent(0, snapshot.getLength(), newText);
+    this.overwritten.add(scriptInfo.fileName);
+  }
 }
 
 const REGEX_CURSOR = /¦/g;
 function preprocess(text: string): string {
   return text.replace(REGEX_CURSOR, '');
 }
+
+const REF_MARKER = /«(((\w|\-)+)|([^ᐱ]*ᐱ(\w+)ᐱ.[^»]*))»/g;
+const LOC_MARKER = /\~\{(\w+(-\w+)*)\}/g;
+
+function removeReferenceMarkers(value: string): string {
+  return value.replace(REF_MARKER, '');
+}
+
+function removeLocationMarkers(value: string): string {
+  return value.replace(LOC_MARKER, '');
+}