(feat) better document symbols (#536)

#532
- remove svelte2tsx transformation artifacts within script
- show first 50 characters of reactive statements that are not variable assignments

Author: dummdidumm

packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts

@@ -13,7 +13,12 @@ import {
     SymbolInformation,
     WorkspaceEdit,
 } from 'vscode-languageserver';
-import { Document, DocumentManager, mapSymbolInformationToOriginal } from '../../lib/documents';
+import {
+    Document,
+    DocumentManager,
+    mapSymbolInformationToOriginal,
+    getTextInRange,
+} from '../../lib/documents';
 import { LSConfigManager, LSTypescriptConfig } from '../../ls-config';
 import { pathToUrl } from '../../utils';
 import {
@@ -122,12 +127,28 @@ export class TypeScriptPlugin
                 })
                 .map((symbol) => mapSymbolInformationToOriginal(fragment, symbol))
                 // Due to svelte2tsx, there will also be some symbols that are unmapped.
-                // Filter those out to keep the lsp from throwing errors
+                // Filter those out to keep the lsp from throwing errors.
+                // Also filter out transformation artifacts
                 .filter(
                     (symbol) =>
                         symbol.location.range.start.line >= 0 &&
-                        symbol.location.range.end.line >= 0,
+                        symbol.location.range.end.line >= 0 &&
+                        !symbol.name.startsWith('__sveltets_'),
                 )
+                .map((symbol) => {
+                    if (symbol.name !== '<function>') {
+                        return symbol;
+                    }
+
+                    let name = getTextInRange(symbol.location.range, document.getText()).trimLeft();
+                    if (name.length > 50) {
+                        name = name.substring(0, 50) + '...';
+                    }
+                    return {
+                        ...symbol,
+                        name,
+                    };
+                })
         );
 
         function collectSymbols(

packages/language-server/test/plugins/typescript/TypescriptPlugin.test.ts

@@ -14,6 +14,10 @@ describe('TypescriptPlugin', () => {
         return pathToUrl(filePath);
     }
 
+    function harmonizeNewLines(input: string) {
+        return input.replace(/\r\n/g, '~:~').replace(/\n/g, '~:~').replace(/~:~/g, '\n');
+    }
+
     function setup(filename: string) {
         const docManager = new DocumentManager(() => document);
         const testDir = path.join(__dirname, 'testfiles');
@@ -30,25 +34,63 @@ describe('TypescriptPlugin', () => {
         const symbols = await plugin.getDocumentSymbols(document);
 
         assert.deepStrictEqual(
-            symbols.find((symbol) => symbol.name === 'bla'),
-            {
-                containerName: 'render',
-                kind: 12,
-                location: {
-                    range: {
-                        start: {
-                            character: 8,
-                            line: 0,
+            symbols.map((s) => ({ ...s, name: harmonizeNewLines(s.name) })),
+            [
+                {
+                    containerName: 'render',
+                    kind: 12,
+                    location: {
+                        range: {
+                            start: {
+                                line: 6,
+                                character: 3,
+                            },
+                            end: {
+                                line: 8,
+                                character: 5,
+                            },
                         },
-                        end: {
-                            character: 37,
-                            line: 0,
+                        uri: getUri('documentsymbols.svelte'),
+                    },
+                    name: "$: if (hello) {\n        console.log('hi');\n    }",
+                },
+                {
+                    containerName: 'render',
+                    kind: 12,
+                    location: {
+                        range: {
+                            start: {
+                                line: 1,
+                                character: 4,
+                            },
+                            end: {
+                                line: 3,
+                                character: 5,
+                            },
                         },
+                        uri: getUri('documentsymbols.svelte'),
                     },
-                    uri: getUri('documentsymbols.svelte'),
+                    name: 'bla',
                 },
-                name: 'bla',
-            },
+                {
+                    containerName: 'render',
+                    kind: 13,
+                    location: {
+                        range: {
+                            start: {
+                                line: 5,
+                                character: 7,
+                            },
+                            end: {
+                                line: 5,
+                                character: 16,
+                            },
+                        },
+                        uri: getUri('documentsymbols.svelte'),
+                    },
+                    name: 'hello',
+                },
+            ],
         );
     });
 

packages/language-server/test/plugins/typescript/testfiles/documentsymbols.svelte

@@ -1 +1,10 @@
-<script>function bla() {return true;} bla();</script>
+<script>
+    function bla() {
+        return true;
+    }
+    bla();
+    $: hello = 1;
+    $: if (hello) {
+        console.log('hi');
+    }
+</script>