fix: correct the selection range of the last import that doesn't have a semicolon (#2651)

Author: jasonlyu123

packages/language-server/src/plugins/typescript/features/SelectionRangeProvider.ts

@@ -1,6 +1,6 @@
 import ts from 'typescript';
 import { Position, Range, SelectionRange } from 'vscode-languageserver';
-import { Document, mapSelectionRangeToParent } from '../../../lib/documents';
+import { Document, mapRangeToOriginal } from '../../../lib/documents';
 import { SelectionRangeProvider } from '../../interfaces';
 import { SvelteDocumentSnapshot } from '../DocumentSnapshot';
 import { LSAndTSDocResolver } from '../LSAndTSDocResolver';
@@ -20,7 +20,7 @@ export class SelectionRangeProviderImpl implements SelectionRangeProvider {
             tsDoc.offsetAt(tsDoc.getGeneratedPosition(position))
         );
         const selectionRange = this.toSelectionRange(tsDoc, tsSelectionRange);
-        const mappedRange = mapSelectionRangeToParent(tsDoc, selectionRange);
+        const mappedRange = this.mapSelectionRangeToParent(tsDoc, document, selectionRange);
 
         return this.filterOutUnmappedRange(mappedRange);
     }
@@ -35,6 +35,35 @@ export class SelectionRangeProviderImpl implements SelectionRangeProvider {
         };
     }
 
+    private mapSelectionRangeToParent(
+        tsDoc: SvelteDocumentSnapshot,
+        document: Document,
+        selectionRange: SelectionRange
+    ): SelectionRange {
+        const { range, parent } = selectionRange;
+        const originalRange = mapRangeToOriginal(tsDoc, range);
+
+        const originalLength = originalRange.end.character - originalRange.start.character;
+        const generatedLength = range.end.character - range.start.character;
+
+        // sourcemap off by one character issue + a generated semicolon
+        if (
+            originalLength === generatedLength - 2 &&
+            tsDoc.getFullText()[tsDoc.offsetAt(range.end) - 1] === ';'
+        ) {
+            originalRange.end.character += 1;
+        }
+
+        if (!parent) {
+            return SelectionRange.create(originalRange);
+        }
+
+        return SelectionRange.create(
+            originalRange,
+            this.mapSelectionRangeToParent(tsDoc, document, parent)
+        );
+    }
+
     private filterOutUnmappedRange(selectionRange: SelectionRange): SelectionRange | null {
         const flattened = this.flattenAndReverseSelectionRange(selectionRange);
         const filtered = flattened.filter((range) => range.start.line > 0 && range.end.line > 0);

packages/language-server/test/plugins/typescript/features/SelectionRangeProvider.test.ts

@@ -15,16 +15,11 @@ const selectionRangeTestDir = path.join(testDir, 'testfiles', 'selection-range')
 describe('SelectionRangeProvider', function () {
     serviceWarmup(this, selectionRangeTestDir, pathToUrl(testDir));
 
-    function setup() {
+    function setup(fileName: string) {
         const docManager = new DocumentManager(
             (textDocument) => new Document(textDocument.uri, textDocument.text)
         );
-        const filePath = path.join(
-            testDir,
-            'testfiles',
-            'selection-range',
-            'selection-range.svelte'
-        );
+        const filePath = path.join(testDir, 'testfiles', 'selection-range', fileName);
         const lsAndTsDocResolver = new LSAndTSDocResolver(
             docManager,
             [pathToUrl(testDir)],
@@ -39,7 +34,7 @@ describe('SelectionRangeProvider', function () {
     }
 
     it('provides selection range', async () => {
-        const { provider, document } = setup();
+        const { provider, document } = setup('selection-range.svelte');
 
         const selectionRange = await provider.getSelectionRange(document, Position.create(1, 9));
 
@@ -72,8 +67,67 @@ describe('SelectionRangeProvider', function () {
         });
     });
 
+    it('provides selection range for import without semicolon', async () => {
+        const { provider, document } = setup('selection-range-import.svelte');
+
+        const selectionRange = await provider.getSelectionRange(document, Position.create(2, 28));
+
+        assert.deepStrictEqual(selectionRange, <SelectionRange>{
+            parent: {
+                parent: {
+                    parent: {
+                        parent: undefined,
+                        range: {
+                            end: {
+                                character: 34,
+                                line: 2
+                            },
+                            start: {
+                                character: 4,
+                                line: 1
+                            }
+                        }
+                    },
+                    // import {onMount} from 'svelte';
+                    range: {
+                        end: {
+                            character: 34,
+                            line: 2
+                        },
+                        start: {
+                            character: 4,
+                            line: 2
+                        }
+                    }
+                },
+                // 'svelte';
+                range: {
+                    end: {
+                        character: 34,
+                        line: 2
+                    },
+                    start: {
+                        character: 26,
+                        line: 2
+                    }
+                }
+            },
+            // svelte
+            range: {
+                end: {
+                    character: 33,
+                    line: 2
+                },
+                start: {
+                    character: 27,
+                    line: 2
+                }
+            }
+        });
+    });
+
     it('return null when in style', async () => {
-        const { provider, document } = setup();
+        const { provider, document } = setup('selection-range.svelte');
 
         const selectionRange = await provider.getSelectionRange(document, Position.create(5, 0));
 

packages/language-server/test/plugins/typescript/testfiles/selection-range/selection-range-import.svelte

@@ -0,0 +1,4 @@
+<script>
+    import {} from 'svelte'
+    import {onMount} from 'svelte'
+</script>