(feat) ComponentEvents interface

This adds the possibility to use a reserved interface name `ComponentEvents` and define all possible events within it.
Also adds autocompletion for these events.
Also disables autocompletions from HTMLPlugin on component tags.

sveltejs#424 sveltejs#304

Author: Simon Holthausen

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

@@ -63,14 +63,24 @@ export class HTMLPlugin implements HoverProvider, CompletionsProvider {
         this.lang.setCompletionParticipants([
             getEmmetCompletionParticipants(document, position, 'html', {}, emmetResults),
         ]);
-        const results = this.lang.doComplete(document, position, html);
+        const results = this.isInComponentTag(html, document, position)
+            ? // Only allow emmet inside component element tags.
+              // Other attributes/events would be false positives.
+              CompletionList.create([])
+            : this.lang.doComplete(document, position, html);
         return CompletionList.create(
             [...results.items, ...this.getLangCompletions(results.items), ...emmetResults.items],
             // Emmet completions change on every keystroke, so they are never complete
             emmetResults.items.length > 0,
         );
     }
 
+    private isInComponentTag(html: HTMLDocument, document: Document, position: Position) {
+        const offset = document.offsetAt(position);
+        const node = html.findNodeAt(offset);
+        return !!node.tag && node.tag[0] === node.tag[0].toUpperCase();
+    }
+
     private getLangCompletions(completions: CompletionItem[]): CompletionItem[] {
         const styleScriptTemplateCompletions = completions.filter((completion) =>
             ['template', 'style', 'script'].includes(completion.label),

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

@@ -1,5 +1,5 @@
 import { RawSourceMap, SourceMapConsumer } from 'source-map';
-import svelte2tsx, { IExportedNames } from 'svelte2tsx';
+import svelte2tsx, { IExportedNames, ComponentEvents } from 'svelte2tsx';
 import ts from 'typescript';
 import { Position, Range } from 'vscode-languageserver';
 import {
@@ -86,6 +86,7 @@ export namespace DocumentSnapshot {
             tsxMap,
             text,
             exportedNames,
+            componentEvents,
             parserError,
             nrPrependedLines,
             scriptKind,
@@ -98,6 +99,7 @@ export namespace DocumentSnapshot {
             text,
             nrPrependedLines,
             exportedNames,
+            componentEvents,
             tsxMap,
         );
     }
@@ -127,6 +129,7 @@ function preprocessSvelteFile(document: Document, options: SvelteSnapshotOptions
     let nrPrependedLines = 0;
     let text = document.getText();
     let exportedNames: IExportedNames = { has: () => false };
+    let componentEvents: ComponentEvents | undefined = undefined;
 
     const scriptKind = [
         getScriptKindFromAttributes(document.scriptInfo?.attributes ?? {}),
@@ -144,6 +147,7 @@ function preprocessSvelteFile(document: Document, options: SvelteSnapshotOptions
         text = tsx.code;
         tsxMap = tsx.map;
         exportedNames = tsx.exportedNames;
+        componentEvents = tsx.events;
         if (tsxMap) {
             tsxMap.sources = [document.uri];
 
@@ -171,7 +175,15 @@ function preprocessSvelteFile(document: Document, options: SvelteSnapshotOptions
         text = document.scriptInfo ? document.scriptInfo.content : '';
     }
 
-    return { tsxMap, text, exportedNames, parserError, nrPrependedLines, scriptKind };
+    return {
+        tsxMap,
+        text,
+        exportedNames,
+        componentEvents,
+        parserError,
+        nrPrependedLines,
+        scriptKind,
+    };
 }
 
 /**
@@ -189,6 +201,7 @@ export class SvelteDocumentSnapshot implements DocumentSnapshot {
         private readonly text: string,
         private readonly nrPrependedLines: number,
         private readonly exportedNames: IExportedNames,
+        private readonly componentEvents?: ComponentEvents,
         private readonly tsxMap?: RawSourceMap,
     ) {}
 
@@ -216,6 +229,14 @@ export class SvelteDocumentSnapshot implements DocumentSnapshot {
         return this.exportedNames.has(name);
     }
 
+    getEvents() {
+        return this.componentEvents?.getAll() || [];
+    }
+
+    getEvent(name: string) {
+        return this.componentEvents?.get(name);
+    }
+
     async getFragment() {
         if (!this.fragment) {
             const uri = pathToUrl(this.filePath);

packages/language-server/src/plugins/typescript/features/CompletionProvider.ts

@@ -18,13 +18,14 @@ import {
 } from '../../../lib/documents';
 import { isNotNullOrUndefined, pathToUrl } from '../../../utils';
 import { AppCompletionItem, AppCompletionList, CompletionsProvider } from '../../interfaces';
-import { SvelteSnapshotFragment } from '../DocumentSnapshot';
+import { SvelteSnapshotFragment, SvelteDocumentSnapshot } from '../DocumentSnapshot';
 import { LSAndTSDocResolver } from '../LSAndTSDocResolver';
 import {
     convertRange,
     getCommitCharactersForScriptElement,
     scriptElementKindToCompletionItemKind,
 } from '../utils';
+import { getLanguageService } from 'vscode-html-languageservice';
 
 export interface CompletionEntryWithIdentifer extends ts.CompletionEntry, TextDocumentIdentifier {
     position: Position;
@@ -71,10 +72,11 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
             ? triggerCharacter
             : undefined;
         const isCustomTriggerCharacter = triggerKind === CompletionTriggerKind.TriggerCharacter;
+        const isInvoked = triggerKind === CompletionTriggerKind.Invoked;
 
         // ignore any custom trigger character specified in server capabilities
         //  and is not allow by ts
-        if (isCustomTriggerCharacter && !validTriggerCharacter) {
+        if (isCustomTriggerCharacter && !validTriggerCharacter && !isInvoked) {
             return null;
         }
 
@@ -84,25 +86,60 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         }
 
         const offset = fragment.offsetAt(fragment.getGeneratedPosition(position));
-        const completions = lang.getCompletionsAtPosition(filePath, offset, {
-            includeCompletionsForModuleExports: true,
-            triggerCharacter: validTriggerCharacter,
-        });
-
-        if (!completions) {
+        const completions =
+            lang.getCompletionsAtPosition(filePath, offset, {
+                includeCompletionsForModuleExports: true,
+                triggerCharacter: validTriggerCharacter,
+            })?.entries || [];
+        const eventCompletions = this.getEventCompletions(lang, document, tsDoc, position);
+
+        if (completions.length === 0 && eventCompletions.length === 0) {
             return tsDoc.parserError ? CompletionList.create([], true) : null;
         }
 
-        const completionItems = completions.entries
+        const completionItems = completions
             .map((comp) =>
                 this.toCompletionItem(fragment, comp, pathToUrl(tsDoc.filePath), position),
             )
             .filter(isNotNullOrUndefined)
-            .map((comp) => mapCompletionItemToOriginal(fragment, comp));
+            .map((comp) => mapCompletionItemToOriginal(fragment, comp))
+            .concat(eventCompletions);
 
         return CompletionList.create(completionItems, !!tsDoc.parserError);
     }
 
+    private getEventCompletions(
+        lang: ts.LanguageService,
+        doc: Document,
+        tsDoc: SvelteDocumentSnapshot,
+        originalPosition: Position,
+    ): AppCompletionItem<CompletionEntryWithIdentifer>[] {
+        if (tsDoc.parserError) {
+            return [];
+        }
+
+        const node = getLanguageService()
+            // TODO performance: this is done already in Document and HTMLPlugin. Consolidate somehow.
+            .parseHTMLDocument(doc)
+            .findNodeAt(doc.offsetAt(originalPosition));
+        const def = lang.getDefinitionAtPosition(tsDoc.filePath, node.start + 1)?.[0];
+        if (!def) {
+            return [];
+        }
+
+        const snapshot = this.lsAndTsDocResovler.getSnapshot(def.fileName);
+        if (!(snapshot instanceof SvelteDocumentSnapshot)) {
+            return [];
+        }
+
+        return snapshot.getEvents().map((event) => ({
+            label: 'on:' + event.name,
+            sortText: '-1',
+            detail: event.name + ': ' + event.type,
+            documentation: event.doc && { kind: MarkupKind.Markdown, value: event.doc },
+        }));
+    }
+
     private toCompletionItem(
         fragment: SvelteSnapshotFragment,
         comp: ts.CompletionEntry,

packages/svelte2tsx/index.d.ts

@@ -2,12 +2,18 @@ export interface SvelteCompiledToTsx {
     code: string;
     map: import("magic-string").SourceMap;
     exportedNames: IExportedNames;
+    events: ComponentEvents;
 }
 
 export interface IExportedNames {
     has(name: string): boolean;
 }
 
+export interface ComponentEvents {
+    getAll(): { name: string; type: string; doc?: string }[];
+    get(name: string): { type: string; doc?: string } | undefined;
+}
+
 export default function svelte2tsx(
     svelte: string,
     options?: {

packages/svelte2tsx/src/interfaces.ts

@@ -1,9 +1,11 @@
 import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
 import { ExportedNames } from './nodes/ExportedNames';
+import { ComponentEvents } from './nodes/ComponentEvents';
 
 export interface InstanceScriptProcessResult {
     exportedNames: ExportedNames;
+    events: ComponentEvents;
     uses$$props: boolean;
     uses$$restProps: boolean;
     getters: Set<string>;
@@ -14,6 +16,6 @@ export interface CreateRenderFunctionPara extends InstanceScriptProcessResult {
     scriptTag: Node;
     scriptDestination: number;
     slots: Map<string, Map<string, string>>;
-    events: Map<string, string | string[]>;
+    events: ComponentEvents;
     isTsFile: boolean;
 }

packages/svelte2tsx/src/nodes/ComponentEvents.ts

@@ -0,0 +1,86 @@
+import ts from 'typescript';
+import { eventMapToString } from './event-handler';
+
+export abstract class ComponentEvents {
+    protected events = new Map<string, { type: string; doc?: string }>();
+
+    getAll(): { name: string; type?: string; doc?: string }[] {
+        const entries: { name: string; type: string; doc?: string }[] = [];
+
+        const iterableEntries = this.events.entries();
+        for (const entry of iterableEntries) {
+            entries.push({ name: entry[0], ...entry[1] });
+        }
+
+        return entries;
+    }
+
+    get(name: string): { type: string; doc?: string } | undefined {
+        return this.events.get(name);
+    }
+
+    abstract toDefString(): string;
+}
+
+export class ComponentEventsFromInterface extends ComponentEvents {
+    constructor(node: ts.InterfaceDeclaration) {
+        super();
+        this.events = this.extractEvents(node);
+    }
+
+    toDefString() {
+        return '{} as unknown as ComponentEvents';
+    }
+
+    private extractEvents(node: ts.InterfaceDeclaration) {
+        const map = new Map<string, { type: string; doc?: string }>();
+
+        node.members.filter(ts.isPropertySignature).forEach((member) => {
+            map.set(member.name.getText(), {
+                type: member.type?.getText() || 'Event',
+                doc: this.getDoc(node, member),
+            });
+        });
+
+        return map;
+    }
+
+    private getDoc(node: ts.InterfaceDeclaration, member: ts.PropertySignature) {
+        let doc = undefined;
+        const comment = ts.getLeadingCommentRanges(
+            node.getText(),
+            member.getFullStart() - node.getStart(),
+        );
+
+        if (comment) {
+            doc = node
+                .getText()
+                .substring(comment[0].pos, comment[0].end)
+                // Remove /** */
+                .replace(/\s*\/\*\*/, '')
+                .replace(/\s*\*\//, '')
+                .replace(/\s*\*/g, '');
+        }
+
+        return doc;
+    }
+}
+
+export class ComponentEventsFromEventsMap extends ComponentEvents {
+    constructor(private eventsMap: Map<string, string | string[]>) {
+        super();
+        this.events = this.extractEvents(eventsMap);
+    }
+
+    toDefString() {
+        return eventMapToString(this.eventsMap);
+    }
+
+    private extractEvents(eventsMap: Map<string, string | string[]>) {
+        const map = new Map();
+        for (const name of eventsMap.keys()) {
+            map.set(name, { type: 'Event' });
+        }
+        return map;
+    }
+}