Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jul 6, 2021
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
def529b
(fix) fix createEventDispatcher event completion
jasonlyu123 Jul 3, 2021
f6c05a5
add test for event def with multiple declarations
jasonlyu123 Jul 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/language-server/src/plugins/typescript/ComponentInfoProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,17 @@ export class JsOrTsComponentInfoProvider implements ComponentInfoProvider {
return type
.getProperties()
.map((prop) => {
if (!prop.valueDeclaration) {
// currently there should only be one because svelte2tsx doesn't merge event dispatcher types
// And interface ($$Events) can't merge property type
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to interpret this sentence. In #938 merging multiple decent dispatcher definitions was done. Are completions working for these, too?
Not saying we need to fix that right away if not, since this is arguably an edge case

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it. Even if there're multiple declarations the type would still be correct. I think I'll remove the comment and add another test for union type.

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))
};
Expand Down
43 changes: 35 additions & 8 deletions packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ describe('CompletionProviderImpl', () => {

const completions = await completionProvider.getCompletions(
document,
Position.create(4, 5),
Position.create(5, 5),
{
triggerKind: CompletionTriggerKind.Invoked
}
Expand Down Expand Up @@ -158,7 +158,7 @@ describe('CompletionProviderImpl', () => {

const completions = await completionProvider.getCompletions(
document,
Position.create(4, 10),
Position.create(5, 10),
{
triggerKind: CompletionTriggerKind.Invoked
}
Expand All @@ -183,11 +183,11 @@ describe('CompletionProviderImpl', () => {
newText: 'on:a',
range: {
start: {
line: 4,
line: 5,
character: 7
},
end: {
line: 4,
line: 5,
character: 10
}
}
Expand All @@ -205,11 +205,11 @@ describe('CompletionProviderImpl', () => {
newText: 'on:b',
range: {
start: {
line: 4,
line: 5,
character: 7
},
end: {
line: 4,
line: 5,
character: 10
}
}
Expand All @@ -224,11 +224,11 @@ describe('CompletionProviderImpl', () => {
newText: 'on:c',
range: {
start: {
line: 4,
line: 5,
character: 7
},
end: {
line: 4,
line: 5,
character: 10
}
}
Expand All @@ -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');

Expand Down
4 changes: 3 additions & 1 deletion ...e-server/test/plugins/typescript/testfiles/completions/component-events-completion.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: />
8 changes: 8 additions & 0 deletions ...er/test/plugins/typescript/testfiles/completions/component-events-event-dispatcher.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{
/**abc*/
c: boolean
}>()
</script>