fix(language-service): provide dom event completions (#43299)

Native DOM events were previously not included in the completions
because the dom schema registry would filter out events completely. This
change updates the registry to include events in the private
element->property map and excludes events from lookups outside of the
new `allKnownEventsOfElement` function.

fixes angular/vscode-ng-language-service#1479

PR Close #43299

Author: atscott

packages/compiler-cli/src/ngtsc/typecheck/api/checker.ts

@@ -153,6 +153,11 @@ export interface TemplateTypeChecker {
    */
   getPotentialDomBindings(tagName: string): {attribute: string, property: string}[];
 
+  /**
+   * Retrieve any potential DOM events.
+   */
+  getPotentialDomEvents(tagName: string): string[];
+
   /**
    * Retrieve the type checking engine's metadata for the given directive class, if available.
    */

packages/compiler-cli/src/ngtsc/typecheck/src/checker.ts

@@ -582,6 +582,10 @@ export class TemplateTypeCheckerImpl implements TemplateTypeChecker {
                           }));
   }
 
+  getPotentialDomEvents(tagName: string): string[] {
+    return REGISTRY.allKnownEventsOfElement(tagName);
+  }
+
   private getScopeData(component: ts.ClassDeclaration): ScopeData|null {
     if (this.scopeCache.has(component)) {
       return this.scopeCache.get(component)!;

packages/compiler/src/schema/dom_element_schema_registry.ts

@@ -14,6 +14,7 @@ import {dashCaseToCamelCase} from '../util';
 import {SECURITY_SCHEMA} from './dom_security_schema';
 import {ElementSchemaRegistry} from './element_schema_registry';
 
+const EVENT = 'event';
 const BOOLEAN = 'boolean';
 const NUMBER = 'number';
 const STRING = 'string';
@@ -249,30 +250,36 @@ const _PROP_TO_ATTR: {[name: string]: string} =
 
 export class DomElementSchemaRegistry extends ElementSchemaRegistry {
   private _schema: {[element: string]: {[property: string]: string}} = {};
+  // We don't allow binding to events for security reasons. Allowing event bindings would almost
+  // certainly introduce bad XSS vulnerabilities. Instead, we store events in a separate schema.
+  private _eventSchema: {[element: string]: Set<string>} = {};
 
   constructor() {
     super();
     SCHEMA.forEach(encodedType => {
       const type: {[property: string]: string} = {};
+      const events: Set<string> = new Set();
       const [strType, strProperties] = encodedType.split('|');
       const properties = strProperties.split(',');
       const [typeNames, superName] = strType.split('^');
-      typeNames.split(',').forEach(tag => this._schema[tag.toLowerCase()] = type);
+      typeNames.split(',').forEach(tag => {
+        this._schema[tag.toLowerCase()] = type;
+        this._eventSchema[tag.toLowerCase()] = events;
+      });
       const superType = superName && this._schema[superName.toLowerCase()];
       if (superType) {
         Object.keys(superType).forEach((prop: string) => {
           type[prop] = superType[prop];
         });
+        for (const superEvent of this._eventSchema[superName.toLowerCase()]) {
+          events.add(superEvent);
+        }
       }
       properties.forEach((property: string) => {
         if (property.length > 0) {
           switch (property[0]) {
             case '*':
-              // We don't yet support events.
-              // If ever allowing to bind to events, GO THROUGH A SECURITY REVIEW, allowing events
-              // will
-              // almost certainly introduce bad XSS vulnerabilities.
-              // type[property.substring(1)] = EVENT;
+              events.add(property.substring(1));
               break;
             case '!':
               type[property.substring(1)] = BOOLEAN;
@@ -400,6 +407,10 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
     return Object.keys(elementProperties).map(prop => _PROP_TO_ATTR[prop] ?? prop);
   }
 
+  allKnownEventsOfElement(tagName: string): string[] {
+    return Array.from(this._eventSchema[tagName.toLowerCase()] ?? []);
+  }
+
   override normalizeAnimationStyleProperty(propName: string): string {
     return dashCaseToCamelCase(propName);
   }

packages/language-service/ivy/attribute_completions.ts

@@ -32,6 +32,11 @@ export enum AttributeCompletionKind {
    */
   DomProperty,
 
+  /**
+   * Completion of an event from the DOM schema.
+   */
+  DomEvent,
+
   /**
    * Completion of an attribute that results in a new directive being matched on an element.
    */
@@ -87,6 +92,15 @@ export interface DomPropertyCompletion {
   property: string;
 }
 
+export interface DomEventCompletion {
+  kind: AttributeCompletionKind.DomEvent;
+
+  /**
+   * Name of the DOM event
+   */
+  eventName: string;
+}
+
 /**
  * Completion of an attribute which results in a new directive being matched on an element.
  */
@@ -163,8 +177,9 @@ export interface DirectiveOutputCompletion {
  *
  * Disambiguated by the `kind` property into various types of completions.
  */
-export type AttributeCompletion = DomAttributeCompletion|DomPropertyCompletion|
-    DirectiveAttributeCompletion|DirectiveInputCompletion|DirectiveOutputCompletion;
+export type AttributeCompletion =
+    DomAttributeCompletion|DomPropertyCompletion|DirectiveAttributeCompletion|
+    DirectiveInputCompletion|DirectiveOutputCompletion|DomEventCompletion;
 
 /**
  * Given an element and its context, produce a `Map` of all possible attribute completions.
@@ -345,8 +360,13 @@ export function buildAttributeCompletionTable(
         });
       }
     }
+    for (const event of checker.getPotentialDomEvents(element.name)) {
+      table.set(event, {
+        kind: AttributeCompletionKind.DomEvent,
+        eventName: event,
+      });
+    }
   }
-
   return table;
 }
 
@@ -466,6 +486,16 @@ export function addAttributeCompletionEntries(
           replacementSpan,
         });
       }
+      break;
+    }
+    case AttributeCompletionKind.DomEvent: {
+      entries.push({
+        kind: unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.EVENT),
+        name: `(${completion.eventName})`,
+        sortText: completion.eventName,
+        replacementSpan,
+      });
+      break;
     }
   }
 }
@@ -474,6 +504,7 @@ export function getAttributeCompletionSymbol(
     completion: AttributeCompletion, checker: ts.TypeChecker): ts.Symbol|null {
   switch (completion.kind) {
     case AttributeCompletionKind.DomAttribute:
+    case AttributeCompletionKind.DomEvent:
     case AttributeCompletionKind.DomProperty:
       return null;
     case AttributeCompletionKind.DirectiveAttribute:

packages/language-service/ivy/completions.ts

@@ -568,6 +568,11 @@ export class CompletionBuilder<N extends TmplAstNode|AST> {
       // the user is completing on a property binding `[foo|]`, don't offer output event
       // completions.
       switch (completion.kind) {
+        case AttributeCompletionKind.DomEvent:
+          if (this.node instanceof TmplAstBoundAttribute) {
+            continue;
+          }
+          break;
         case AttributeCompletionKind.DomAttribute:
         case AttributeCompletionKind.DomProperty:
           if (this.node instanceof TmplAstBoundEvent) {
@@ -644,6 +649,7 @@ export class CompletionBuilder<N extends TmplAstNode|AST> {
     let documentation: ts.SymbolDisplayPart[]|undefined = undefined;
     let info: DisplayInfo|null;
     switch (completion.kind) {
+      case AttributeCompletionKind.DomEvent:
       case AttributeCompletionKind.DomAttribute:
       case AttributeCompletionKind.DomProperty:
         // TODO(alxhub): ideally we would show the same documentation as quick info here. However,

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

@@ -506,6 +506,21 @@ describe('completions', () => {
               ['[value]']);
         });
 
+        it('should return event completion', () => {
+          const {templateFile} = setup(`<button ></button>`, ``);
+          templateFile.moveCursorToText(`<button ¦>`);
+          const completions = templateFile.getCompletionsAtPosition();
+          expectContain(completions, DisplayInfoKind.EVENT, ['(click)']);
+        });
+
+        it('should return event completion with empty parens', () => {
+          const {templateFile} = setup(`<button ()></button>`, ``);
+          templateFile.moveCursorToText(`<button (¦)>`);
+          const completions = templateFile.getCompletionsAtPosition();
+          expectContain(completions, DisplayInfoKind.EVENT, ['(click)']);
+        });
+
+
         it('should return completions for a partial attribute', () => {
           const {appFile} = setupInlineTemplate(`<input val>`, '');
           appFile.moveCursorToText('<input val¦>');
@@ -536,6 +551,13 @@ describe('completions', () => {
               ['value']);
           expectReplacementText(completions, appFile.contents, 'val');
         });
+
+        it('should return completions inside an event binding', () => {
+          const {templateFile} = setup(`<button (cl)=''></button>`, ``);
+          templateFile.moveCursorToText(`(cl¦)=''`);
+          const completions = templateFile.getCompletionsAtPosition();
+          expectContain(completions, DisplayInfoKind.EVENT, ['(click)']);
+        });
       });
 
       describe('directive present', () => {