feat: completion for custom element tag name and event (#2300)

For #1560 and #2245. Adding completion for element tag name from custom type definition and some small performance tweaks with completion.

#1560 is already showing but needed some TextEdit so it doesn't end up with on:on:input

Author: jasonlyu123

packages/language-server/src/lib/documents/utils.ts

@@ -3,6 +3,7 @@ import { Position, Range } from 'vscode-languageserver';
 import { Node, HTMLDocument } from 'vscode-html-languageservice';
 import * as path from 'path';
 import { parseHtml } from './parseHtml';
+import { Document } from './Document';
 
 export interface TagInformation {
     content: string;
@@ -396,8 +397,14 @@ export function getWordAt(
 /**
  * Returns start/end offset of a text into a range
  */
-export function toRange(str: string, start: number, end: number): Range {
-    return Range.create(positionAt(start, str), positionAt(end, str));
+export function toRange(str: string, start: number, end: number): Range;
+export function toRange(str: Document, start: number, end: number): Range;
+export function toRange(str: string | Document, start: number, end: number): Range {
+    if (typeof str === 'string') {
+        return Range.create(positionAt(start, str), positionAt(end, str));
+    }
+
+    return Range.create(str.positionAt(start), str.positionAt(end));
 }
 
 /**

packages/language-server/src/plugins/html/HTMLPlugin.ts

@@ -314,7 +314,7 @@ export class HTMLPlugin
         }
         const tagNameStart = node.start + '<'.length;
 
-        return toRange(document.getText(), tagNameStart, tagNameStart + node.tag.length);
+        return toRange(document, tagNameStart, tagNameStart + node.tag.length);
     }
 
     getLinkedEditingRanges(document: Document, position: Position): LinkedEditingRanges | null {

packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts

@@ -62,10 +62,7 @@ import { LSAndTSDocResolver } from './LSAndTSDocResolver';
 import { ignoredBuildDirectories } from './SnapshotManager';
 import { CallHierarchyProviderImpl } from './features/CallHierarchyProvider';
 import { CodeActionsProviderImpl } from './features/CodeActionsProvider';
-import {
-    CompletionEntryWithIdentifier,
-    CompletionsProviderImpl
-} from './features/CompletionProvider';
+import { CompletionResolveInfo, CompletionsProviderImpl } from './features/CompletionProvider';
 import { DiagnosticsProviderImpl } from './features/DiagnosticsProvider';
 import { FindComponentReferencesProviderImpl } from './features/FindComponentReferencesProvider';
 import { FindFileReferencesProviderImpl } from './features/FindFileReferencesProvider';
@@ -116,7 +113,7 @@ export class TypeScriptPlugin
         CallHierarchyProvider,
         FoldingRangeProvider,
         OnWatchFileChanges,
-        CompletionsProvider<CompletionEntryWithIdentifier>,
+        CompletionsProvider<CompletionResolveInfo>,
         UpdateTsOrJsFile
 {
     __name = 'ts';
@@ -325,7 +322,7 @@ export class TypeScriptPlugin
         position: Position,
         completionContext?: CompletionContext,
         cancellationToken?: CancellationToken
-    ): Promise<AppCompletionList<CompletionEntryWithIdentifier> | null> {
+    ): Promise<AppCompletionList<CompletionResolveInfo> | null> {
         if (!this.featureEnabled('completions')) {
             return null;
         }
@@ -355,9 +352,9 @@ export class TypeScriptPlugin
 
     async resolveCompletion(
         document: Document,
-        completionItem: AppCompletionItem<CompletionEntryWithIdentifier>,
+        completionItem: AppCompletionItem<CompletionResolveInfo>,
         cancellationToken?: CancellationToken
-    ): Promise<AppCompletionItem<CompletionEntryWithIdentifier>> {
+    ): Promise<AppCompletionItem<CompletionResolveInfo>> {
         return this.completionProvider.resolveCompletion(
             document,
             completionItem,