(fix) negative length and wrong order semantic token of event handler (…

…#811) #808 In svelte2tsx transformation, component event handler code is moved, Thus the semantic token would have the wrong order with other attributes and a negative length($on). Filter out the negative one and then sort the token
sveltejs · Feb 10, 2021 · ecfb759 · ecfb759
1 parent 00d2e06
commit ecfb759
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts b/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts
@@ -36,7 +36,7 @@ export class SemanticTokensProviderImpl implements SemanticTokensProvider {
             ts.SemanticClassificationFormat.TwentyTwenty
         );
 
-        const builder = new SemanticTokensBuilder();
+        const data: Array<[number, number, number, number, number]> = [];
         let index = 0;
 
         while (index < spans.length) {
@@ -61,17 +61,27 @@ export class SemanticTokensProviderImpl implements SemanticTokensProvider {
 
             const [line, character, length] = originalPosition;
 
-            // remove identifers whose start and end mapped to the same location
-            // like the svelte2tsx inserted render function
-            if (!length) {
+            // remove identifiers whose start and end mapped to the same location,
+            // like the svelte2tsx inserted render function,
+            // or reversed like Component.$on
+            if (length <= 0) {
                 continue;
             }
 
             const modifier = this.getTokenModifierFromClassification(encodedClassification);
 
-            builder.push(line, character, length, classificationType, modifier);
+            data.push([line, character, length, classificationType, modifier]);
         }
 
+        const sorted = data.sort((a, b) => {
+            const [lineA, charA] = a;
+            const [lineB, charB] = b;
+
+            return lineA - lineB || charA - charB;
+        });
+
+        const builder = new SemanticTokensBuilder();
+        sorted.forEach((tokenData) => builder.push(...tokenData));
         return builder.build();
     }
 

diff --git a/packages/language-server/test/plugins/typescript/features/SemanticTokensProvider.test.ts b/packages/language-server/test/plugins/typescript/features/SemanticTokensProvider.test.ts
@@ -62,42 +62,42 @@ describe('SemanticTokensProvider', () => {
             modifiers: number[];
         }> = [
             {
-                line: 1,
+                line: 2,
                 character: 14,
                 length: 'TextContent'.length,
                 type: TokenType.interface,
                 modifiers: [TokenModifier.declaration]
             },
             {
-                line: 2,
+                line: 3,
                 character: 8,
                 length: 'text'.length,
                 type: TokenType.property,
                 modifiers: [TokenModifier.declaration]
             },
             {
-                line: 5,
+                line: 6,
                 character: 15,
                 length: 'textPromise'.length,
                 type: TokenType.variable,
                 modifiers: [TokenModifier.declaration, TokenModifier.local]
             },
             {
-                line: 5,
+                line: 6,
                 character: 28,
                 length: 'Promise'.length,
                 type: TokenType.interface,
                 modifiers: [TokenModifier.defaultLibrary]
             },
             {
-                line: 5,
+                line: 6,
                 character: 36,
                 length: 'TextContent'.length,
                 type: TokenType.interface,
                 modifiers: []
             },
             {
-                line: 7,
+                line: 8,
                 character: 19,
                 length: 'blurHandler'.length,
                 type: TokenType.function,
@@ -107,49 +107,49 @@ describe('SemanticTokensProvider', () => {
         const tokenDataAll = [
             ...tokenDataScript,
             {
-                line: 10,
+                line: 11,
                 character: 8,
                 length: 'textPromise'.length,
                 type: TokenType.variable,
                 modifiers: [TokenModifier.local]
             },
             {
-                line: 10,
+                line: 11,
                 character: 25,
                 length: 'text'.length,
                 type: TokenType.parameter,
                 modifiers: [TokenModifier.declaration]
             },
             {
-                line: 11,
+                line: 12,
                 character: 23,
                 length: 'blurHandler'.length,
                 type: TokenType.function,
                 modifiers: [TokenModifier.async, TokenModifier.local]
             },
             {
-                line: 11,
+                line: 12,
                 character: 43,
                 length: 'text'.length,
                 type: TokenType.parameter,
                 modifiers: []
             },
             {
-                line: 11,
+                line: 12,
                 character: 48,
                 length: 'text'.length,
                 type: TokenType.property,
                 modifiers: []
             },
             {
-                line: 13,
+                line: 14,
                 character: 16,
                 length: 1,
                 type: TokenType.parameter,
                 modifiers: [TokenModifier.declaration]
             },
             {
-                line: 14,
+                line: 15,
                 character: 5,
                 length: 1,
                 type: TokenType.parameter,
@@ -187,7 +187,7 @@ describe('SemanticTokensProvider', () => {
 
         let index = 0;
         while (index < tokens.length) {
-            result.push(tokens.splice(index, (index += 5)));
+            result.push(tokens.slice(index, (index += 5)));
         }
 
         return result;

diff --git a/packages/language-server/test/plugins/typescript/testfiles/semantic-tokens/imported.svelte b/packages/language-server/test/plugins/typescript/testfiles/semantic-tokens/imported.svelte
@@ -0,0 +1,3 @@
+<script>
+    export let value;
+</script>
diff --git a/packages/language-server/test/plugins/typescript/testfiles/semantic-tokens/tokens.svelte b/packages/language-server/test/plugins/typescript/testfiles/semantic-tokens/tokens.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Imported from './imported.svelte';
     interface TextContent {
         text: string,
     }
@@ -9,7 +10,7 @@
 </script>
 
 {#await textPromise then text}
-    <textarea on:blur={blurHandler} value={text.text} />
+    <Imported on:blur={blurHandler} value={text.text} />
 {/await}
 {#each ['a'] as a}
     {a}