feat: directive keyword autocomplete (#2707)

#2696

Author: jasonlyu123

packages/language-server/src/plugins/css/features/svelte-selectors.ts

@@ -9,7 +9,7 @@ Applying styles to a selector globally`,
         references: [
             {
                 name: 'Svelte.dev Reference',
-                url: 'https://svelte.dev/docs#style'
+                url: 'https://svelte.dev/docs/svelte/global-styles'
             }
         ]
     }

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

@@ -47,6 +47,7 @@ import { wordHighlightForTag } from '../../lib/documentHighlight/wordHighlight';
 
 // https://github.com/microsoft/vscode/blob/c6f507deeb99925e713271b1048f21dbaab4bd54/extensions/html/language-configuration.json#L34
 const wordPattern = /(-?\d*\.\d\w*)|([^`~!@$^&*()=+[{\]}\|;:'",.<>\/\s]+)/g;
+const attributeValuePlaceHolder = '="$1"';
 
 export class HTMLPlugin
     implements
@@ -166,18 +167,32 @@ export class HTMLPlugin
                 : null;
 
         const svelteStrictMode = prettierConfig?.svelteStrictMode;
+        const startQuote = svelteStrictMode ? '"{' : '{';
+        const endQuote = svelteStrictMode ? '}"' : '}';
 
         items.forEach((item) => {
-            const startQuote = svelteStrictMode ? '"{' : '{';
-            const endQuote = svelteStrictMode ? '}"' : '}';
+            if (item.label.endsWith(':')) {
+                item.kind = CompletionItemKind.Keyword;
+
+                if (item.textEdit) {
+                    item.textEdit.newText = item.textEdit.newText.replace(
+                        attributeValuePlaceHolder,
+                        ''
+                    );
+                }
+            }
+
             if (!item.textEdit) {
                 return;
             }
 
             if (item.label.startsWith('on:')) {
                 item.textEdit = {
                     ...item.textEdit,
-                    newText: item.textEdit.newText.replace('="$1"', `$2=${startQuote}$1${endQuote}`)
+                    newText: item.textEdit.newText.replace(
+                        attributeValuePlaceHolder,
+                        `$2=${startQuote}$1${endQuote}`
+                    )
                 };
                 // In Svelte 5, people should use `onclick` instead of `on:click`
                 if (document.isSvelte5) {
@@ -188,7 +203,10 @@ export class HTMLPlugin
             if (item.label.startsWith('bind:')) {
                 item.textEdit = {
                     ...item.textEdit,
-                    newText: item.textEdit.newText.replace('="$1"', `=${startQuote}$1${endQuote}`)
+                    newText: item.textEdit.newText.replace(
+                        attributeValuePlaceHolder,
+                        `=${startQuote}$1${endQuote}`
+                    )
                 };
             }
         });

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

@@ -87,6 +87,76 @@ const svelteAttributes: IAttributeData[] = [
             'To get a reference to a DOM node, use bind:this. If used on a component, gets a reference to that component instance.'
     }
 ];
+
+// directives that takes a variable. Don't specify the variable here and let typescript handle it
+const svelteDirectiveKeywords: IAttributeData[] = [
+    {
+        name: 'use:',
+        description: 'Actions are functions that are called when an element is mounted.',
+        references: [
+            {
+                name: 'Svelte.dev Reference',
+                url: 'https://svelte.dev/docs/svelte/use'
+            }
+        ]
+    },
+    {
+        name: 'transition:',
+        description:
+            'A transition is triggered by an element entering or leaving the DOM as a result of a state change.',
+        references: [
+            {
+                name: 'Svelte.dev Reference',
+                url: 'https://svelte.dev/docs/svelte/transition'
+            }
+        ]
+    },
+    {
+        name: 'in:',
+        description:
+            'The in: and out: directives are identical to transition:, except that the resulting transitions are not bidirectional.',
+        references: [
+            {
+                name: 'Svelte.dev Reference',
+                url: 'https://svelte.dev/docs/svelte/in-and-out'
+            }
+        ]
+    },
+    {
+        name: 'out:',
+        description:
+            'The in: and out: directives are identical to transition:, except that the resulting transitions are not bidirectional.',
+        references: [
+            {
+                name: 'Svelte.dev Reference',
+                url: 'https://svelte.dev/docs/svelte/in-and-out'
+            }
+        ]
+    },
+    {
+        name: 'animate:',
+        description:
+            'An animation is triggered when the contents of a keyed each block are re-ordered.',
+        references: [
+            {
+                name: 'Svelte.dev Reference',
+                url: 'https://svelte.dev/docs/svelte/animate'
+            }
+        ]
+    },
+    {
+        name: 'style:',
+        description:
+            'The style: directive provides a shorthand for setting multiple styles on an element.',
+        references: [
+            {
+                name: 'Svelte.dev Reference',
+                url: 'https://svelte.dev/docs/svelte/style'
+            }
+        ]
+    }
+];
+
 const sveltekitAttributes: IAttributeData[] = [
     {
         name: 'data-sveltekit-keepfocus',
@@ -422,6 +492,7 @@ export const svelteHtmlDataProvider = newHTMLDataProvider('svelte-builtin', {
     version: 1,
     globalAttributes: [
         ...htmlData.globalAttributes!,
+        ...svelteDirectiveKeywords,
         ...svelteEvents,
         ...svelteAttributes,
         ...sveltekitAttributes

packages/language-server/src/plugins/svelte/features/getModifierData.ts

@@ -57,7 +57,7 @@ export function getModifierData(): ModifierData[] {
 
 ${item.documentation}
 
-https://svelte.dev/docs#template-syntax-element-directives-on-eventname`
+https://v4.svelte.dev/docs/element-directives#on-eventname`
         }
     }));
 }

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

@@ -353,4 +353,19 @@ describe('HTML Plugin', () => {
             }
         ]);
     });
+
+    it('provide directive completions', async () => {
+        const { plugin, document } = setup('<div t');
+
+        const completions = await plugin.getCompletions(document, Position.create(0, 6));
+        const item = completions?.items.find((item) => item.label === 'transition:');
+        assert.equal(item?.kind, CompletionItemKind.Keyword);
+        assert.deepStrictEqual(item?.textEdit, {
+            newText: 'transition:',
+            range: {
+                start: { line: 0, character: 5 },
+                end: { line: 0, character: 6 }
+            }
+        });
+    });
 });