(feat) listen to TS/JS file changes (#766)

#636
Listen to document text changes and manually update TS/JS files in the language server through a dedicated notification message

Author: dummdidumm

packages/language-server/src/plugins/PluginHost.ts

@@ -21,6 +21,7 @@ import {
     SignatureHelp,
     SignatureHelpContext,
     SymbolInformation,
+    TextDocumentContentChangeEvent,
     TextDocumentIdentifier,
     TextEdit,
     WorkspaceEdit
@@ -424,6 +425,12 @@ export class PluginHost implements LSProvider, OnWatchFileChanges {
         }
     }
 
+    updateTsOrJsFile(fileName: string, changes: TextDocumentContentChangeEvent[]): void {
+        for (const support of this.plugins) {
+            support.updateTsOrJsFile?.(fileName, changes);
+        }
+    }
+
     private getDocument(uri: string) {
         return this.documentsManager.get(uri);
     }

packages/language-server/src/plugins/interfaces.ts

@@ -1,4 +1,10 @@
-import { CompletionContext, FileChangeType, SemanticTokens, SignatureHelpContext } from 'vscode-languageserver';
+import {
+    CompletionContext,
+    FileChangeType,
+    SemanticTokens,
+    SignatureHelpContext,
+    TextDocumentContentChangeEvent
+} from 'vscode-languageserver';
 import {
     CodeAction,
     CodeActionContext,
@@ -134,18 +140,15 @@ export interface SignatureHelpProvider {
         document: Document,
         position: Position,
         context: SignatureHelpContext | undefined
-    ): Resolvable<SignatureHelp | null>
+    ): Resolvable<SignatureHelp | null>;
 }
 
 export interface SelectionRangeProvider {
     getSelectionRange(document: Document, position: Position): Resolvable<SelectionRange | null>;
 }
 
 export interface SemanticTokensProvider {
-    getSemanticTokens(
-        textDocument: Document,
-        range?: Range
-    ): Resolvable<SemanticTokens>
+    getSemanticTokens(textDocument: Document, range?: Range): Resolvable<SemanticTokens>;
 }
 
 export interface OnWatchFileChangesPara {
@@ -157,6 +160,10 @@ export interface OnWatchFileChanges {
     onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void;
 }
 
+export interface UpdateTsOrJsFile {
+    updateTsOrJsFile(fileName: string, changes: TextDocumentContentChangeEvent[]): void;
+}
+
 type ProviderBase = DiagnosticsProvider &
     HoverProvider &
     CompletionsProvider &
@@ -187,5 +194,9 @@ export interface LSPProviderConfig {
 }
 
 export type Plugin = Partial<
-    ProviderBase & DefinitionsProvider & OnWatchFileChanges & SelectionRangeProvider
+    ProviderBase &
+        DefinitionsProvider &
+        OnWatchFileChanges &
+        SelectionRangeProvider &
+        UpdateTsOrJsFile
 >;

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

@@ -1,7 +1,7 @@
 import { RawSourceMap, SourceMapConsumer } from 'source-map';
 import svelte2tsx, { IExportedNames, ComponentEvents } from 'svelte2tsx';
 import ts from 'typescript';
-import { Position, Range } from 'vscode-languageserver';
+import { Position, Range, TextDocumentContentChangeEvent } from 'vscode-languageserver';
 import {
     Document,
     DocumentMapper,
@@ -282,11 +282,7 @@ export class JSOrTSDocumentSnapshot
     scriptKind = getScriptKindFromFileName(this.filePath);
     scriptInfo = null;
 
-    constructor(
-        public version: number,
-        public readonly filePath: string,
-        private readonly text: string
-    ) {
+    constructor(public version: number, public readonly filePath: string, private text: string) {
         super(pathToUrl(filePath));
     }
 
@@ -317,6 +313,23 @@ export class JSOrTSDocumentSnapshot
     destroyFragment() {
         // nothing to clean up
     }
+
+    update(changes: TextDocumentContentChangeEvent[]): void {
+        for (const change of changes) {
+            let start = 0;
+            let end = 0;
+            if ('range' in change) {
+                start = this.offsetAt(change.range.start);
+                end = this.offsetAt(change.range.end);
+            } else {
+                end = this.getLength();
+            }
+
+            this.text = this.text.slice(0, start) + change.text + this.text.slice(end);
+        }
+
+        this.version++;
+    }
 }
 
 /**

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

@@ -1,6 +1,11 @@
 import ts from 'typescript';
-import { DocumentSnapshot, SvelteSnapshotOptions } from './DocumentSnapshot';
+import {
+    DocumentSnapshot,
+    JSOrTSDocumentSnapshot,
+    SvelteSnapshotOptions
+} from './DocumentSnapshot';
 import { Logger } from '../../logger';
+import { TextDocumentContentChangeEvent } from 'vscode-languageserver';
 
 export interface TsFilesSpec {
     include?: readonly string[];
@@ -64,6 +69,19 @@ export class SnapshotManager {
         this.set(fileName, newSnapshot);
     }
 
+    updateTsOrJsFile(fileName: string, changes: TextDocumentContentChangeEvent[]): void {
+        if (!this.has(fileName)) {
+            return;
+        }
+
+        const previousSnapshot = this.get(fileName);
+        if (!(previousSnapshot instanceof JSOrTSDocumentSnapshot)) {
+            return;
+        }
+
+        previousSnapshot.update(changes);
+    }
+
     has(fileName: string) {
         return this.projectFiles.includes(fileName) || this.getFileNames().includes(fileName);
     }

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

@@ -18,7 +18,8 @@ import {
     SelectionRange,
     SignatureHelp,
     SignatureHelpContext,
-    SemanticTokens
+    SemanticTokens,
+    TextDocumentContentChangeEvent
 } from 'vscode-languageserver';
 import {
     Document,
@@ -45,7 +46,8 @@ import {
     SignatureHelpProvider,
     UpdateImportsProvider,
     OnWatchFileChangesPara,
-    SemanticTokensProvider
+    SemanticTokensProvider,
+    UpdateTsOrJsFile
 } from '../interfaces';
 import { SnapshotFragment } from './DocumentSnapshot';
 import { CodeActionsProviderImpl } from './features/CodeActionsProvider';
@@ -80,7 +82,8 @@ export class TypeScriptPlugin
         SignatureHelpProvider,
         SemanticTokensProvider,
         OnWatchFileChanges,
-        CompletionsProvider<CompletionEntryWithIdentifer> {
+        CompletionsProvider<CompletionEntryWithIdentifer>,
+        UpdateTsOrJsFile {
     private readonly configManager: LSConfigManager;
     private readonly lsAndTsDocResolver: LSAndTSDocResolver;
     private readonly completionProvider: CompletionsProviderImpl;
@@ -100,11 +103,7 @@ export class TypeScriptPlugin
         workspaceUris: string[]
     ) {
         this.configManager = configManager;
-        this.lsAndTsDocResolver = new LSAndTSDocResolver(
-            docManager,
-            workspaceUris,
-            configManager
-        );
+        this.lsAndTsDocResolver = new LSAndTSDocResolver(docManager, workspaceUris, configManager);
         this.completionProvider = new CompletionsProviderImpl(this.lsAndTsDocResolver);
         this.codeActionsProvider = new CodeActionsProviderImpl(
             this.lsAndTsDocResolver,
@@ -386,6 +385,11 @@ export class TypeScriptPlugin
         }
     }
 
+    updateTsOrJsFile(fileName: string, changes: TextDocumentContentChangeEvent[]): void {
+        const snapshotManager = this.getSnapshotManager(fileName);
+        snapshotManager.updateTsOrJsFile(fileName, changes);
+    }
+
     async getSelectionRange(
         document: Document,
         position: Position
@@ -398,7 +402,9 @@ export class TypeScriptPlugin
     }
 
     async getSignatureHelp(
-        document: Document, position: Position, context: SignatureHelpContext | undefined
+        document: Document,
+        position: Position,
+        context: SignatureHelpContext | undefined
     ): Promise<SignatureHelp | null> {
         if (!this.featureEnabled('signatureHelp')) {
             return null;

packages/language-server/src/server.ts

@@ -282,6 +282,7 @@ export function startServer(options?: LSOptions) {
         pluginHost.getDiagnostics.bind(pluginHost)
     );
 
+    const updateAllDiagnostics = _.debounce(() => diagnosticsManager.updateAll(), 1000);
     connection.onDidChangeWatchedFiles((para) => {
         const onWatchFileChangesParas = para.changes
             .map((change) => ({
@@ -292,9 +293,16 @@ export function startServer(options?: LSOptions) {
 
         pluginHost.onWatchFileChanges(onWatchFileChangesParas);
 
-        diagnosticsManager.updateAll();
+        updateAllDiagnostics();
+    });
+    connection.onDidSaveTextDocument(updateAllDiagnostics);
+    connection.onNotification('$/onDidChangeTsOrJsFile', async (e: any) => {
+        const path = urlToPath(e.uri);
+        if (path) {
+            pluginHost.updateTsOrJsFile(path, e.changes);
+        }
+        updateAllDiagnostics();
     });
-    connection.onDidSaveTextDocument(() => diagnosticsManager.updateAll());
 
     connection.languages.semanticTokens.on((evt) => pluginHost.getSemanticTokens(evt.textDocument));
     connection.languages.semanticTokens.onRange((evt) =>

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

@@ -444,4 +444,28 @@ describe('TypescriptPlugin', () => {
             fs.unlinkSync(addFile);
         }
     });
+
+    it('should update ts/js file after document change', () => {
+        const { snapshotManager, projectJsFile, plugin } = setupForOnWatchedFileUpdateOrDelete();
+
+        const firstSnapshot = snapshotManager.get(projectJsFile);
+        const firstVersion = firstSnapshot?.version;
+        const firstText = firstSnapshot?.getText(0, firstSnapshot?.getLength());
+
+        assert.notEqual(firstVersion, INITIAL_VERSION);
+
+        plugin.updateTsOrJsFile(projectJsFile, [
+            {
+                range: { start: { line: 0, character: 0 }, end: { line: 0, character: 0 } },
+                text: 'const = "hello world";'
+            }
+        ]);
+        const secondSnapshot = snapshotManager.get(projectJsFile);
+
+        assert.notEqual(secondSnapshot?.version, firstVersion);
+        assert.equal(
+            secondSnapshot?.getText(0, secondSnapshot?.getLength()),
+            'const = "hello world";' + firstText
+        );
+    });
 });

packages/svelte-vscode/src/extension.ts

@@ -147,6 +147,8 @@ export function activate(context: ExtensionContext) {
         return ls;
     }
 
+    addDidChangeTextDocumentListener(getLS);
+
     addRenameFileListener(getLS);
 
     addCompilePreviewCommand(getLS, context);
@@ -231,6 +233,26 @@ export function activate(context: ExtensionContext) {
     };
 }
 
+function addDidChangeTextDocumentListener(getLS: () => LanguageClient) {
+    // Only Svelte file changes are automatically notified through the inbuilt LSP
+    // because the extension says it's only responsible for Svelte files.
+    // Therefore we need to set this up for TS/JS files manually.
+    workspace.onDidChangeTextDocument((evt) => {
+        if (evt.document.languageId === 'typescript' || evt.document.languageId === 'javascript') {
+            getLS().sendNotification('$/onDidChangeTsOrJsFile', {
+                uri: evt.document.uri.toString(true),
+                changes: evt.contentChanges.map((c) => ({
+                    range: {
+                        start: { line: c.range.start.line, character: c.range.start.character },
+                        end: { line: c.range.end.line, character: c.range.end.character }
+                    },
+                    text: c.text
+                }))
+            });
+        }
+    });
+}
+
 function addRenameFileListener(getLS: () => LanguageClient) {
     workspace.onDidRenameFiles(async (evt) => {
         const oldUri = evt.files[0].oldUri.toString(true);