diff --git a/.changeset/fast-rivers-tan.md b/.changeset/fast-rivers-tan.md new file mode 100644 index 000000000..976ce91e3 --- /dev/null +++ b/.changeset/fast-rivers-tan.md @@ -0,0 +1,5 @@ +--- +'svelte-language-server': patch +--- + +fix: use moustache for svelte5 onhandler completion diff --git a/packages/language-server/src/plugins/html/HTMLPlugin.ts b/packages/language-server/src/plugins/html/HTMLPlugin.ts index 68e760376..89ed1b72f 100644 --- a/packages/language-server/src/plugins/html/HTMLPlugin.ts +++ b/packages/language-server/src/plugins/html/HTMLPlugin.ts @@ -198,16 +198,18 @@ export class HTMLPlugin return; } - if (item.label.startsWith('on:')) { + if (item.label.startsWith('on')) { + const isLegacyDirective = item.label.startsWith('on:'); + const modifierTabStop = isLegacyDirective ? '$2' : ''; item.textEdit = { ...item.textEdit, newText: item.textEdit.newText.replace( attributeValuePlaceHolder, - `$2=${startQuote}$1${endQuote}` + `${modifierTabStop}=${startQuote}$1${endQuote}` ) }; // In Svelte 5, people should use `onclick` instead of `on:click` - if (document.isSvelte5) { + if (isLegacyDirective && document.isSvelte5) { item.sortText = 'z' + (item.sortText ?? item.label); } } diff --git a/packages/language-server/test/plugins/html/HTMLPlugin.test.ts b/packages/language-server/test/plugins/html/HTMLPlugin.test.ts index eef08bd12..db0b366be 100644 --- a/packages/language-server/test/plugins/html/HTMLPlugin.test.ts +++ b/packages/language-server/test/plugins/html/HTMLPlugin.test.ts @@ -381,4 +381,32 @@ describe('HTML Plugin', () => { } }); }); + + if (!isSvelte5Plus) { + return; + } + + it('provide event handler completions (svelte 5+)', async () => { + const { plugin, document } = setup('
item.label === 'onclick'); + + const expected: CompletionItem = { + label: 'onclick', + kind: CompletionItemKind.Value, + documentation: { + kind: 'markdown', + value: 'A pointing device button has been pressed and released on an element.' + }, + textEdit: TextEdit.replace( + Range.create(Position.create(0, 5), Position.create(0, 7)), + 'onclick={$1}' + ), + insertTextFormat: InsertTextFormat.Snippet, + command: undefined + }; + + assert.deepStrictEqual(onClick, expected); + }); });