fix: use moustache for svelte5 onhandler completion (#2883)

Author: jasonlyu123

.changeset/fast-rivers-tan.md

@@ -0,0 +1,5 @@
+---
+'svelte-language-server': patch
+---
+
+fix: use moustache for svelte5 onhandler completion

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);
                 }
             }

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('<div on');
+
+        const completions = await plugin.getCompletions(document, Position.create(0, 7));
+        const onClick = completions?.items.find((item) => 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);
+    });
 });