(fix) fix event completion with createEventDispatcher or with multiple declarations of the same event (#1083)

Author: jasonlyu123

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

@@ -57,14 +57,16 @@ export class JsOrTsComponentInfoProvider implements ComponentInfoProvider {
         return type
             .getProperties()
             .map((prop) => {
-                if (!prop.valueDeclaration) {
+                // type would still be correct when there're multiple declarations
+                const declaration = prop.valueDeclaration ?? prop.declarations?.[0];
+                if (!declaration) {
                     return;
                 }
 
                 return {
                     name: prop.name,
                     type: this.typeChecker.typeToString(
-                        this.typeChecker.getTypeOfSymbolAtLocation(prop, prop.valueDeclaration)
+                        this.typeChecker.getTypeOfSymbolAtLocation(prop, declaration)
                     ),
                     doc: ts.displayPartsToString(prop.getDocumentationComment(this.typeChecker))
                 };

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

@@ -111,7 +111,7 @@ describe('CompletionProviderImpl', () => {
 
         const completions = await completionProvider.getCompletions(
             document,
-            Position.create(4, 5),
+            Position.create(5, 5),
             {
                 triggerKind: CompletionTriggerKind.Invoked
             }
@@ -158,7 +158,7 @@ describe('CompletionProviderImpl', () => {
 
         const completions = await completionProvider.getCompletions(
             document,
-            Position.create(4, 10),
+            Position.create(5, 10),
             {
                 triggerKind: CompletionTriggerKind.Invoked
             }
@@ -183,11 +183,11 @@ describe('CompletionProviderImpl', () => {
                     newText: 'on:a',
                     range: {
                         start: {
-                            line: 4,
+                            line: 5,
                             character: 7
                         },
                         end: {
-                            line: 4,
+                            line: 5,
                             character: 10
                         }
                     }
@@ -205,11 +205,11 @@ describe('CompletionProviderImpl', () => {
                     newText: 'on:b',
                     range: {
                         start: {
-                            line: 4,
+                            line: 5,
                             character: 7
                         },
                         end: {
-                            line: 4,
+                            line: 5,
                             character: 10
                         }
                     }
@@ -224,11 +224,11 @@ describe('CompletionProviderImpl', () => {
                     newText: 'on:c',
                     range: {
                         start: {
-                            line: 4,
+                            line: 5,
                             character: 7
                         },
                         end: {
-                            line: 4,
+                            line: 5,
                             character: 10
                         }
                     }
@@ -237,6 +237,33 @@ describe('CompletionProviderImpl', () => {
         ]);
     });
 
+    it('provides event completions from createEventDispatcher', async () => {
+        const { completionProvider, document } = setup('component-events-completion.svelte');
+
+        const completions = await completionProvider.getCompletions(
+            document,
+            Position.create(6, 5),
+            {
+                triggerKind: CompletionTriggerKind.Invoked
+            }
+        );
+
+        const eventCompletions = completions!.items.filter((item) => item.label.startsWith('on:'));
+
+        assert.deepStrictEqual(eventCompletions, <CompletionItem[]>[
+            {
+                detail: 'c: CustomEvent<boolean>',
+                documentation: {
+                    kind: 'markdown',
+                    value: 'abc'
+                },
+                label: 'on:c',
+                sortText: '-1',
+                textEdit: undefined
+            }
+        ]);
+    });
+
     it('provides event completion for components with type definition', async () => {
         const { completionProvider, document } = setup('component-events-completion-ts-def.svelte');
 
@@ -295,6 +322,42 @@ describe('CompletionProviderImpl', () => {
         ]);
     });
 
+    it('provides event completion for components with type definition having multiple declarations of the same event', async () => {
+        const { completionProvider, document } = setup('component-events-completion-ts-def.svelte');
+
+        const completions = await completionProvider.getCompletions(
+            document,
+            Position.create(6, 17),
+            {
+                triggerKind: CompletionTriggerKind.Invoked
+            }
+        );
+
+        const eventCompletions = completions!.items.filter((item) => item.label.startsWith('on:'));
+
+        assert.deepStrictEqual(eventCompletions, <CompletionItem[]>[
+            {
+                detail: 'event1: CustomEvent<string> | CustomEvent<number>',
+                label: 'on:event1',
+                sortText: '-1',
+                documentation: '',
+                textEdit: {
+                    newText: 'on:event1',
+                    range: {
+                        end: {
+                            character: 18,
+                            line: 6
+                        },
+                        start: {
+                            character: 15,
+                            line: 6
+                        }
+                    }
+                }
+            }
+        ]);
+    });
+
     it('does not provide completions inside style tag', async () => {
         const { completionProvider, document } = setup('completionsstyle.svelte');
 

packages/language-server/test/plugins/typescript/testfiles/completions/ComponentDef.ts

@@ -17,6 +17,17 @@ export class ComponentDef extends SvelteComponentTyped<
              * documentation for let2
              */
             let2: string;
-        }
+        };
     }
 > {}
+
+export class ComponentDef2 extends SvelteComponentTyped<
+    {},
+    | {
+          event1: CustomEvent<number>;
+      }
+    | {
+          event1: CustomEvent<string>;
+      },
+    {}
+> {}

packages/language-server/test/plugins/typescript/testfiles/completions/component-events-completion-ts-def.svelte

@@ -1,6 +1,7 @@
 <script>
-    import { ComponentDef } from './ComponentDef';
+    import { ComponentDef, ComponentDef2 } from './ComponentDef';
 </script>
 
 <ComponentDef on:></ComponentDef>
-<ComponentDef let:></ComponentDef>
+<ComponentDef let:></ComponentDef>
+<ComponentDef2 on:></ComponentDef2>

packages/language-server/test/plugins/typescript/testfiles/completions/component-events-completion.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
     import CEI from './component-events-interface.svelte';
+    import CED from './component-events-event-dispatcher.svelte';
 </script>
 
-<CEI   on: />
+<CEI   on: />
+<CED   on: />

packages/language-server/test/plugins/typescript/testfiles/completions/component-events-event-dispatcher.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher<{
+        /**abc*/
+        c: boolean
+    }>()
+</script>