Watch js/ts file add (#639)

* read dir again to update project file when adding

* fix fileSpec undefined

* cleanup

* short when empty include

* do a full directory search for added files
it's slower but easier to implement

* test

Author: jasonlyu123

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

@@ -14,7 +14,6 @@ import {
     SymbolInformation,
     TextDocumentIdentifier,
     TextEdit,
-    FileChangeType,
     CompletionItem,
     CompletionContext,
     WorkspaceEdit,
@@ -31,7 +30,8 @@ import {
     OnWatchFileChanges,
     AppCompletionItem,
     FileRename,
-    LSPProviderConfig
+    LSPProviderConfig,
+    OnWatchFileChangesPara
 } from './interfaces';
 import { Logger } from '../logger';
 import { regexLastIndexOf } from '../utils';
@@ -384,9 +384,9 @@ export class PluginHost implements LSProvider, OnWatchFileChanges {
         }
     }
 
-    onWatchFileChanges(fileName: string, changeType: FileChangeType): void {
+    onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void {
         for (const support of this.plugins) {
-            support.onWatchFileChanges?.(fileName, changeType);
+            support.onWatchFileChanges?.(onWatchFileChangesParas);
         }
     }
 

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

@@ -132,8 +132,13 @@ export interface SelectionRangeProvider {
     getSelectionRange(document: Document, position: Position): Resolvable<SelectionRange | null>;
 }
 
+export interface OnWatchFileChangesPara {
+    fileName: string;
+    changeType: FileChangeType;
+}
+
 export interface OnWatchFileChanges {
-    onWatchFileChanges(fileName: string, changeType: FileChangeType): void;
+    onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void;
 }
 
 type ProviderBase = DiagnosticsProvider &

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

@@ -1,11 +1,49 @@
+import ts from 'typescript';
 import { DocumentSnapshot, SvelteSnapshotOptions } from './DocumentSnapshot';
 import { Logger } from '../../logger';
 
+export interface TsFilesSpec {
+    include?: readonly string[];
+    exclude?: readonly string[];
+}
+
 export class SnapshotManager {
     private documents: Map<string, DocumentSnapshot> = new Map();
     private lastLogged = new Date(new Date().getTime() - 60_001);
 
-    constructor(private projectFiles: string[]) {}
+    private readonly watchExtensions = [
+        ts.Extension.Dts,
+        ts.Extension.Js,
+        ts.Extension.Jsx,
+        ts.Extension.Ts,
+        ts.Extension.Tsx,
+        ts.Extension.Json
+    ];
+
+    constructor(
+        private projectFiles: string[],
+        private fileSpec: TsFilesSpec,
+        private workspaceRoot: string
+    ) {}
+
+    updateProjectFiles() {
+        const { include, exclude } = this.fileSpec;
+
+        // Since we default to not include anything,
+        //  just don't waste time on this
+        if (include?.length === 0) {
+            return;
+        }
+
+        const projectFiles = ts.sys.readDirectory(
+            this.workspaceRoot,
+            this.watchExtensions,
+            exclude,
+            include
+        );
+
+        this.projectFiles = Array.from(new Set([...this.projectFiles, ...projectFiles]));
+    }
 
     updateByFileName(fileName: string, options: SvelteSnapshotOptions) {
         if (!this.has(fileName)) {

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

@@ -39,7 +39,8 @@ import {
     OnWatchFileChanges,
     RenameProvider,
     SelectionRangeProvider,
-    UpdateImportsProvider
+    UpdateImportsProvider,
+    OnWatchFileChangesPara
 } from '../interfaces';
 import { SnapshotFragment } from './DocumentSnapshot';
 import { CodeActionsProviderImpl } from './features/CodeActionsProvider';
@@ -56,6 +57,7 @@ import { convertToLocationRange, getScriptKindFromFileName, symbolKindFromString
 import { getDirectiveCommentCompletions } from './features/getDirectiveCommentCompletions';
 import { FindReferencesProviderImpl } from './features/FindReferencesProvider';
 import { SelectionRangeProviderImpl } from './features/SelectionRangeProvider';
+import { SnapshotManager } from './SnapshotManager';
 
 export class TypeScriptPlugin
     implements
@@ -334,24 +336,32 @@ export class TypeScriptPlugin
         return this.findReferencesProvider.findReferences(document, position, context);
     }
 
-    onWatchFileChanges(fileName: string, changeType: FileChangeType) {
-        const scriptKind = getScriptKindFromFileName(fileName);
+    onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]) {
+        const doneUpdateProjectFiles = new Set<SnapshotManager>();
 
-        if (scriptKind === ts.ScriptKind.Unknown) {
-            // We don't deal with svelte files here
-            return;
-        }
+        for (const { fileName, changeType } of onWatchFileChangesParas) {
+            const scriptKind = getScriptKindFromFileName(fileName);
 
-        const snapshotManager = this.getSnapshotManager(fileName);
+            if (scriptKind === ts.ScriptKind.Unknown) {
+                // We don't deal with svelte files here
+                continue;
+            }
 
-        if (changeType === FileChangeType.Deleted) {
-            snapshotManager.delete(fileName);
-            return;
-        }
+            const snapshotManager = this.getSnapshotManager(fileName);
+            if (changeType === FileChangeType.Created) {
+                if (!doneUpdateProjectFiles.has(snapshotManager)) {
+                    snapshotManager.updateProjectFiles();
+                    doneUpdateProjectFiles.add(snapshotManager);
+                }
+            } else if (changeType === FileChangeType.Deleted) {
+                snapshotManager.delete(fileName);
+                return;
+            }
 
-        // Since the options parameter only applies to svelte snapshots, and this is not
-        // a svelte file, we can just set it to false without having any effect.
-        snapshotManager.updateByFileName(fileName, { strictMode: false });
+            // Since the options parameter only applies to svelte snapshots, and this is not
+            // a svelte file, we can just set it to false without having any effect.
+            snapshotManager.updateByFileName(fileName, { strictMode: false });
+        }
     }
 
     async getSelectionRange(

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

@@ -60,8 +60,10 @@ export function createLanguageService(
 ): LanguageServiceContainer {
     const workspacePath = tsconfigPath ? dirname(tsconfigPath) : '';
 
-    const { compilerOptions, files } = getCompilerOptionsAndProjectFiles();
-    const snapshotManager = new SnapshotManager(files);
+    const { options: compilerOptions, fileNames: files, raw } = getParsedConfig();
+    // raw is the tsconfig merged with extending config
+    // see: https://github.com/microsoft/TypeScript/blob/08e4f369fbb2a5f0c30dee973618d65e6f7f09f8/src/compiler/commandLineParser.ts#L2537
+    const snapshotManager = new SnapshotManager(files, raw, workspacePath || process.cwd());
 
     const svelteModuleLoader = createSvelteModuleLoader(getSnapshot, compilerOptions);
 
@@ -160,7 +162,7 @@ export function createLanguageService(
         return doc;
     }
 
-    function getCompilerOptionsAndProjectFiles() {
+    function getParsedConfig() {
         const forcedCompilerOptions: ts.CompilerOptions = {
             allowNonTsExtensions: true,
             target: ts.ScriptTarget.Latest,
@@ -199,7 +201,6 @@ export function createLanguageService(
             [{ extension: 'svelte', isMixedContent: false, scriptKind: ts.ScriptKind.TSX }]
         );
 
-        const files = parsedConfig.fileNames;
         const compilerOptions: ts.CompilerOptions = {
             ...parsedConfig.options,
             ...forcedCompilerOptions
@@ -223,7 +224,10 @@ export function createLanguageService(
             }
         }
 
-        return { compilerOptions, files };
+        return {
+            ...parsedConfig,
+            options: compilerOptions
+        };
     }
 
     /**

packages/language-server/src/server.ts

@@ -27,7 +27,8 @@ import {
     HTMLPlugin,
     PluginHost,
     SveltePlugin,
-    TypeScriptPlugin
+    TypeScriptPlugin,
+    OnWatchFileChangesPara
 } from './plugins';
 import { urlToPath } from './utils';
 
@@ -273,12 +274,12 @@ export function startServer(options?: LSOptions) {
     );
 
     connection.onDidChangeWatchedFiles((para) => {
-        for (const change of para.changes) {
-            const filename = urlToPath(change.uri);
-            if (filename) {
-                pluginHost.onWatchFileChanges(filename, change.type);
-            }
-        }
+        const onWatchFileChangesParas = para.changes.map((change) => ({
+            fileName: urlToPath(change.uri),
+            changeType: change.type
+        })).filter((change): change is OnWatchFileChangesPara => !!change.fileName);
+
+        pluginHost.onWatchFileChanges(onWatchFileChangesParas);
 
         diagnosticsManager.updateAll();
     });

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

@@ -1,6 +1,7 @@
 import * as assert from 'assert';
 import * as path from 'path';
 import ts from 'typescript';
+import fs from 'fs';
 import { FileChangeType, Position, Range } from 'vscode-languageserver';
 import { Document, DocumentManager } from '../../../src/lib/documents';
 import { LSConfigManager } from '../../../src/ls-config';
@@ -348,14 +349,36 @@ describe('TypescriptPlugin', () => {
 
     const setupForOnWatchedFileChanges = () => {
         const { plugin, document } = setup('empty.svelte');
-        const filePath = document.getFilePath()!;
-        const snapshotManager = plugin.getSnapshotManager(filePath);
+        const targetSvelteFile = document.getFilePath()!;
+        const snapshotManager = plugin.getSnapshotManager(targetSvelteFile);
 
-        // make it the same style of path delimiter as vscode's request
-        const projectJsFile =
-            urlToPath(pathToUrl(path.join(path.dirname(filePath), 'documentation.ts'))) ?? '';
+        return {
+            snapshotManager,
+            plugin,
+            targetSvelteFile
+        };
+    };
+
+    /**
+     *  make it the same style of path delimiter as vscode's request
+     */
+    const normalizeWatchFilePath = (path: string) => {
+        return urlToPath(pathToUrl(path)) ?? '';
+    };
 
-        plugin.onWatchFileChanges(projectJsFile, FileChangeType.Changed);
+    const setupForOnWatchedFileUpdateOrDelete = () => {
+        const { plugin, snapshotManager, targetSvelteFile } = setupForOnWatchedFileChanges();
+
+        const projectJsFile = normalizeWatchFilePath(
+            path.join(path.dirname(targetSvelteFile), 'documentation.ts')
+        );
+
+        plugin.onWatchFileChanges([
+            {
+                fileName: projectJsFile,
+                changeType: FileChangeType.Changed
+            }
+        ]);
 
         return {
             snapshotManager,
@@ -365,28 +388,60 @@ describe('TypescriptPlugin', () => {
     };
 
     it('bumps snapshot version when watched file changes', () => {
-        const { snapshotManager, projectJsFile, plugin } = setupForOnWatchedFileChanges();
+        const { snapshotManager, projectJsFile, plugin } = setupForOnWatchedFileUpdateOrDelete();
 
         const firstSnapshot = snapshotManager.get(projectJsFile);
         const firstVersion = firstSnapshot?.version;
 
         assert.notEqual(firstVersion, INITIAL_VERSION);
 
-        plugin.onWatchFileChanges(projectJsFile, FileChangeType.Changed);
+        plugin.onWatchFileChanges([
+            {
+                fileName: projectJsFile,
+                changeType: FileChangeType.Changed
+            }
+        ]);
         const secondSnapshot = snapshotManager.get(projectJsFile);
 
         assert.notEqual(secondSnapshot?.version, firstVersion);
     });
 
     it('should delete snapshot cache when file delete', () => {
-        const { snapshotManager, projectJsFile, plugin } = setupForOnWatchedFileChanges();
+        const { snapshotManager, projectJsFile, plugin } = setupForOnWatchedFileUpdateOrDelete();
 
         const firstSnapshot = snapshotManager.get(projectJsFile);
         assert.notEqual(firstSnapshot, undefined);
 
-        plugin.onWatchFileChanges(projectJsFile, FileChangeType.Deleted);
+        plugin.onWatchFileChanges([
+            {
+                fileName: projectJsFile,
+                changeType: FileChangeType.Deleted
+            }
+        ]);
         const secondSnapshot = snapshotManager.get(projectJsFile);
 
         assert.equal(secondSnapshot, undefined);
     });
+
+    it('should add snapshot when project file added', () => {
+        const { snapshotManager, plugin, targetSvelteFile } = setupForOnWatchedFileChanges();
+        const addFile = path.join(path.dirname(targetSvelteFile), 'foo.ts');
+        const normalizedAddFilePath = normalizeWatchFilePath(addFile);
+
+        try {
+            fs.writeFileSync(addFile, 'export function abc() {}');
+            assert.equal(snapshotManager.has(normalizedAddFilePath), false);
+
+            plugin.onWatchFileChanges([
+                {
+                    fileName: normalizedAddFilePath,
+                    changeType: FileChangeType.Created
+                }
+            ]);
+
+            assert.equal(snapshotManager.has(normalizedAddFilePath), true);
+        } finally {
+            fs.unlinkSync(addFile);
+        }
+    });
 });