fix: only give html provider completions for inline templates (#1369)

Our client-side middleware retrieves html provider completions for
inline templates because the template string is not otherwise detected
as HTML by the registered HTML providers. We should only create this
virtual document and retrieve HTML provider results for typescript
files.

Fixes #1357

Author: atscott

client/src/client.ts

@@ -104,13 +104,18 @@ export class AngularLanguageClient implements vscode.Disposable {
 
           const angularResultsPromise = next(document, position, token);
 
-          const vdocUri = this.createVirtualHtmlDoc(document);
-          const htmlProviderResultsPromise = vscode.commands.executeCommand<vscode.Hover[]>(
-              'vscode.executeHoverProvider', vdocUri, position);
+          // Include results for inline HTML via virtual document and native html providers.
+          if (document.languageId === 'typescript') {
+            const vdocUri = this.createVirtualHtmlDoc(document);
+            const htmlProviderResultsPromise = vscode.commands.executeCommand<vscode.Hover[]>(
+                'vscode.executeHoverProvider', vdocUri, position);
+
+            const [angularResults, htmlProviderResults] =
+                await Promise.all([angularResultsPromise, htmlProviderResultsPromise]);
+            return angularResults ?? htmlProviderResults?.[0];
+          }
 
-          const [angularResults, htmlProviderResults] =
-              await Promise.all([angularResultsPromise, htmlProviderResultsPromise]);
-          return angularResults ?? htmlProviderResults?.[0];
+          return angularResultsPromise;
         },
         provideSignatureHelp: async (
             document: vscode.TextDocument, position: vscode.Position,
@@ -133,17 +138,21 @@ export class AngularLanguageClient implements vscode.Disposable {
           const angularCompletionsPromise = next(document, position, context, token) as
               Promise<vscode.CompletionItem[]|null|undefined>;
 
-          const vdocUri = this.createVirtualHtmlDoc(document);
-          // This will not include angular stuff because the vdoc is not associated with an angular
-          // component
-          const htmlProviderCompletionsPromise =
-              vscode.commands.executeCommand<vscode.CompletionList>(
-                  'vscode.executeCompletionItemProvider', vdocUri, position,
-                  context.triggerCharacter);
-          const [angularCompletions, htmlProviderCompletions] =
-              await Promise.all([angularCompletionsPromise, htmlProviderCompletionsPromise]);
-
-          return [...(angularCompletions ?? []), ...(htmlProviderCompletions?.items ?? [])];
+          // Include results for inline HTML via virtual document and native html providers.
+          if (document.languageId === 'typescript') {
+            const vdocUri = this.createVirtualHtmlDoc(document);
+            // This will not include angular stuff because the vdoc is not associated with an
+            // angular component
+            const htmlProviderCompletionsPromise =
+                vscode.commands.executeCommand<vscode.CompletionList>(
+                    'vscode.executeCompletionItemProvider', vdocUri, position,
+                    context.triggerCharacter);
+            const [angularCompletions, htmlProviderCompletions] =
+                await Promise.all([angularCompletionsPromise, htmlProviderCompletionsPromise]);
+            return [...(angularCompletions ?? []), ...(htmlProviderCompletions?.items ?? [])];
+          }
+
+          return angularCompletionsPromise;
         }
       }
     };

integration/e2e/completion_spec.ts

@@ -0,0 +1,18 @@
+
+import * as vscode from 'vscode';
+
+import {activate, COMPLETION_COMMAND, FOO_TEMPLATE_URI} from './helper';
+
+describe('Angular Ivy LS completions', () => {
+  beforeAll(async () => {
+    await activate(FOO_TEMPLATE_URI);
+  });
+
+  it(`does not duplicate HTML completions in external templates`, async () => {
+    const position = new vscode.Position(0, 0);
+    const completionItem = await vscode.commands.executeCommand<vscode.CompletionList>(
+        COMPLETION_COMMAND, FOO_TEMPLATE_URI, position);
+    const regionCompletions = (completionItem?.items?.filter(i => i.label === '#region') ?? []);
+    expect(regionCompletions.length).toBe(1);
+  });
+});

integration/e2e/helper.ts

@@ -1,4 +1,11 @@
 import * as vscode from 'vscode';
+import {APP_COMPONENT, FOO_TEMPLATE} from '../test_constants';
+
+export const COMPLETION_COMMAND = 'vscode.executeCompletionItemProvider';
+export const HOVER_COMMAND = 'vscode.executeHoverProvider';
+export const DEFINITION_COMMAND = 'vscode.executeDefinitionProvider';
+export const APP_COMPONENT_URI = vscode.Uri.file(APP_COMPONENT);
+export const FOO_TEMPLATE_URI = vscode.Uri.file(FOO_TEMPLATE);
 
 function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));

integration/e2e/hover_spec.ts

@@ -0,0 +1,16 @@
+import * as vscode from 'vscode';
+
+import {activate, FOO_TEMPLATE_URI, HOVER_COMMAND} from './helper';
+
+describe('Angular Ivy LS quick info', () => {
+  beforeAll(async () => {
+    await activate(FOO_TEMPLATE_URI);
+  });
+
+  it(`returns quick info from built in extension for class in template`, async () => {
+    const position = new vscode.Position(1, 8);
+    const quickInfo = await vscode.commands.executeCommand<vscode.Hover[]>(
+        HOVER_COMMAND, FOO_TEMPLATE_URI, position);
+    expect(quickInfo?.length).toBe(1);
+  });
+});

integration/project/app/foo.component.html

@@ -1 +1,4 @@
 {{title | uppercase}}
+<span class="subtitle">
+    subtitle
+</span>