(feat) better key transformations + hover + completion (#575)

#570

Author: dummdidumm

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

@@ -3,7 +3,7 @@ import { SvelteDocument } from '../SvelteDocument';
 /**
  * Special svelte syntax tags that do template logic.
  */
-export type SvelteLogicTag = 'each' | 'if' | 'await';
+export type SvelteLogicTag = 'each' | 'if' | 'await' | 'key';
 
 /**
  * Special svelte syntax tags.
@@ -43,6 +43,15 @@ Content that is conditionally rendered can be wrapped in an if block.
 \`{#if expression}...{:else}...{/if}\`\\
 \\
 https://svelte.dev/docs#if
+`,
+    key: `\`{#key expression}...{/key}\`\\
+Key blocks destroy and recreate their contents when the value of an expression changes.\\
+This is useful if you want an element to play its transition whenever a value changes.\\
+When used around components, this will cause them to be reinstantiated and reinitialised.
+#### Usage:
+\`{#key expression}...{/key}\`\\
+\\
+https://svelte.dev/docs#key
 `,
     html:
         `\`{@html ...}\`\\
@@ -88,6 +97,7 @@ export function getLatestOpeningTag(
         idxOfLastOpeningTag(content, 'each'),
         idxOfLastOpeningTag(content, 'if'),
         idxOfLastOpeningTag(content, 'await'),
+        idxOfLastOpeningTag(content, 'key'),
     ];
     const lastIdx = lastIdxs.sort((i1, i2) => i2.lastIdx - i1.lastIdx);
     return lastIdx[0].lastIdx === -1 ? null : lastIdx[0].tag;

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

@@ -15,7 +15,8 @@ const HTML_COMMENT_START = '<!--';
 const componentDocumentationCompletion: CompletionItem = {
     label: '@component',
     insertText: `component${EOL}$1${EOL}`,
-    documentation: 'Documentation for this component. ' +
+    documentation:
+        'Documentation for this component. ' +
         'It will show up on hover. You can use markdown and code blocks here',
     insertTextFormat: InsertTextFormat.Snippet,
     kind: CompletionItemKind.Snippet,
@@ -66,9 +67,9 @@ export function getCompletions(
         }
 
         const commentStartIndex = lastCharactersBeforePosition.lastIndexOf(HTML_COMMENT_START);
-        const text = lastCharactersBeforePosition.substring(
-            commentStartIndex + HTML_COMMENT_START.length
-        ).trimLeft();
+        const text = lastCharactersBeforePosition
+            .substring(commentStartIndex + HTML_COMMENT_START.length)
+            .trimLeft();
 
         if (componentDocumentationCompletion.label.includes(text)) {
             return CompletionList.create([componentDocumentationCompletion], false);
@@ -106,6 +107,7 @@ function getCompletionsWithRegardToTriggerCharacter(
                 label: 'await then',
                 insertText: 'await $1 then $2}\n\t$3\n{/await',
             },
+            { tag: 'key', label: 'key', insertText: 'key $1}\n\t$2\n{/key' },
         ]);
     }
 
@@ -133,6 +135,7 @@ function getCompletionsWithRegardToTriggerCharacter(
                 awaitOpen: createCompletionItems([{ tag: 'await', label: 'await' }]),
                 eachOpen: createCompletionItems([{ tag: 'each', label: 'each' }]),
                 ifOpen: createCompletionItems([{ tag: 'if', label: 'if' }]),
+                keyOpen: createCompletionItems([{ tag: 'key', label: 'key' }]),
             },
             svelteDoc,
             offset,
@@ -163,7 +166,12 @@ function getTriggerCharacter(content: string) {
  * Return completions with regards to last opened tag.
  */
 function showCompletionWithRegardsToOpenedTags(
-    on: { eachOpen: CompletionList; ifOpen: CompletionList; awaitOpen: CompletionList },
+    on: {
+        eachOpen: CompletionList;
+        ifOpen: CompletionList;
+        awaitOpen: CompletionList;
+        keyOpen?: CompletionList;
+    },
     svelteDoc: SvelteDocument,
     offset: number,
 ) {
@@ -174,6 +182,8 @@ function showCompletionWithRegardsToOpenedTags(
             return on.ifOpen;
         case 'await':
             return on.awaitOpen;
+        case 'key':
+            return on?.keyOpen ?? null;
         default:
             return null;
     }

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

@@ -79,6 +79,8 @@ const tagPossibilities: { tag: SvelteTag | ':else'; values: string[] }[] = [
     { tag: 'each' as const, values: ['#each', '/each'] },
     // await
     { tag: 'await' as const, values: ['#await', '/await', ':then', ':catch'] },
+    // key
+    { tag: 'key' as const, values: ['#key', '/key'] },
     // @
     { tag: 'html' as const, values: ['@html'] },
     { tag: 'debug' as const, values: ['@debug'] },

packages/language-server/test/plugins/svelte/features/getCompletions.test.ts

@@ -50,7 +50,7 @@ describe('SveltePlugin#getCompletions', () => {
     });
 
     it('should return completions for #', () => {
-        expectCompletionsFor('{#').toEqual(['if', 'each', 'await :then', 'await then']);
+        expectCompletionsFor('{#').toEqual(['if', 'each', 'await :then', 'await then', 'key']);
     });
 
     it('should return completions for @', () => {
@@ -112,6 +112,10 @@ describe('SveltePlugin#getCompletions', () => {
             expectCompletionsFor('{#await}{/').toEqual(['await']);
         });
 
+        it('for key', () => {
+            expectCompletionsFor('{#key}{/').toEqual(['key']);
+        });
+
         it('for last open tag', () => {
             expectCompletionsFor('{#if}{/if}{#if}{#await}{/').toEqual(['await']);
         });
@@ -120,13 +124,7 @@ describe('SveltePlugin#getCompletions', () => {
     it('should return completion for component documentation comment', () => {
         const content = '<!--@';
         const svelteDoc = new SvelteDocument(new Document('url', content));
-        const completions = getCompletions(
-            svelteDoc,
-            Position.create(0, content.length)
-        );
-        assert.deepStrictEqual(
-            completions?.items?.[0].insertText,
-            `component${EOL}$1${EOL}`
-        );
+        const completions = getCompletions(svelteDoc, Position.create(0, content.length));
+        assert.deepStrictEqual(completions?.items?.[0].insertText, `component${EOL}$1${EOL}`);
     });
 });

packages/language-server/test/plugins/svelte/features/getHoverInfo.test.ts

@@ -66,7 +66,7 @@ describe('SveltePlugin#getHoverInfo', () => {
         });
 
     describe('should return hover for #', () => {
-        (['if', 'each', 'await'] as const).forEach((tag) => {
+        (['if', 'each', 'await', 'key'] as const).forEach((tag) => {
             it(`(#${tag})`, () => {
                 expectHoverInfoFor(`{#${tag}}`, Position.create(0, 3)).toEqual(tag);
                 expectHoverInfoFor(`{#${tag} `, Position.create(0, 3)).toEqual(tag);

packages/svelte2tsx/src/htmlxtojsx/nodes/key.ts

@@ -2,15 +2,15 @@ import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
 
 /**
- * {#key expr}content{/key}   --->   {expr || <>...</>}
+ * {#key expr}content{/key}   --->   {expr} content
  */
 export function handleKey(htmlx: string, str: MagicString, keyBlock: Node): void {
-    // {#key expr}   ->   {expr || <>
+    // {#key expr}   ->   {expr}
     str.overwrite(keyBlock.start, keyBlock.expression.start, '{');
     const end = htmlx.indexOf('}', keyBlock.expression.end);
-    str.overwrite(keyBlock.expression.end, end + 1, ' || <>');
+    str.overwrite(keyBlock.expression.end, end + 1, '} ');
 
-    // {/key}   ->   </>}
+    // {/key}   ->
     const endKey = htmlx.lastIndexOf('{', keyBlock.end - 1);
-    str.overwrite(endKey, keyBlock.end, '</>}');
+    str.remove(endKey, keyBlock.end);
 }

packages/svelte2tsx/test/htmlx2jsx/samples/key-block/expected.jsx

@@ -1,9 +1,9 @@
-<>{value || <>
+<>{value} 
     <p>hello</p>
-</>}
-{$store || <>
+
+{$store} 
     <p>hello</p>
-</>}
-{expr.obj || <>
+
+{expr.obj} 
     <p>hello</p>
-</>}</>
+</>