fix: volar ts plugin compatibility (#2317)

#2307

Improve the svelte project check for InferredProject. Start from the current directory and go down 2 levels in the directory tree to search for package.json. Then we use the directories with package.json to search for svelte modules. If your ts-plugin is no longer enabled, you can create a jsconfig.json where your package.json is. This alone should resolve most problems since the plugin won't be applied at all.

Disable the plugin in the config level until we receive the _typescript.configurePlugin request. This should decrease the chance of the project update because of the config toggle.

Author: jasonlyu123

packages/typescript-plugin/package.json

@@ -19,7 +19,8 @@
     "license": "MIT",
     "devDependencies": {
         "@types/node": "^16.0.0",
-        "typescript": "^5.4.5"
+        "typescript": "^5.4.5",
+        "svelte": "^3.57.0"
     },
     "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.14",

packages/typescript-plugin/src/config-manager.ts

@@ -3,6 +3,7 @@ import { EventEmitter } from 'events';
 const configurationEventName = 'configuration-changed';
 
 export interface Configuration {
+    global?: boolean;
     enable: boolean;
     /** Skip the Svelte detection and assume this is a Svelte project */
     assumeIsSvelteProject: boolean;
@@ -19,15 +20,22 @@ export class ConfigManager {
         this.emitter.on(configurationEventName, listener);
     }
 
+    removeConfigurationChangeListener(listener: (config: Configuration) => void) {
+        this.emitter.off(configurationEventName, listener);
+    }
+
     isConfigChanged(config: Configuration) {
         // right now we only care about enable
         return config.enable !== this.config.enable;
     }
 
     updateConfigFromPluginConfig(config: Configuration) {
+        const shouldWaitForConfigRequest = config.global == true;
+        const enable = config.enable ?? !shouldWaitForConfigRequest;
         this.config = {
             ...this.config,
-            ...config
+            ...config,
+            enable
         };
         this.emitter.emit(configurationEventName, config);
     }

packages/typescript-plugin/src/index.ts

@@ -6,17 +6,18 @@ import { SvelteSnapshotManager } from './svelte-snapshots';
 import type ts from 'typescript/lib/tsserverlibrary';
 import { ConfigManager, Configuration } from './config-manager';
 import { ProjectSvelteFilesManager } from './project-svelte-files';
-import { getConfigPathForProject, hasNodeModule } from './utils';
+import { getConfigPathForProject, isSvelteProject } from './utils';
 
 function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
     const configManager = new ConfigManager();
     let resolvedSvelteTsxFiles: string[] | undefined;
+    const isSvelteProjectCache = new Map<string, boolean>();
 
     function create(info: ts.server.PluginCreateInfo) {
         const logger = new Logger(info.project.projectService.logger);
         if (
             !(info.config as Configuration)?.assumeIsSvelteProject &&
-            !isSvelteProject(info.project.getCompilerOptions())
+            !isSvelteProjectWithCache(info.project)
         ) {
             logger.log('Detected that this is not a Svelte project, abort patching TypeScript');
             return info.languageService;
@@ -126,7 +127,7 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
               )
             : undefined;
 
-        patchModuleLoader(
+        const moduleLoaderDisposable = patchModuleLoader(
             logger,
             snapshotManager,
             modules.typescript,
@@ -135,7 +136,7 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
             configManager
         );
 
-        configManager.onConfigurationChanged(() => {
+        const updateProjectWhenConfigChanges = () => {
             // enabling/disabling the plugin means TS has to recompute stuff
             // don't clear semantic cache here
             // typescript now expected the program updates to be completely in their control
@@ -147,7 +148,8 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
             if (projectSvelteFilesManager) {
                 info.project.updateGraph();
             }
-        });
+        };
+        configManager.onConfigurationChanged(updateProjectWhenConfigChanges);
 
         return decorateLanguageService(
             info.languageService,
@@ -156,12 +158,16 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
             configManager,
             info,
             modules.typescript,
-            () => projectSvelteFilesManager?.dispose()
+            () => {
+                projectSvelteFilesManager?.dispose();
+                configManager.removeConfigurationChangeListener(updateProjectWhenConfigChanges);
+                moduleLoaderDisposable.dispose();
+            }
         );
     }
 
     function getExternalFiles(project: ts.server.Project) {
-        if (!isSvelteProject(project.getCompilerOptions()) || !configManager.getConfig().enable) {
+        if (!isSvelteProjectWithCache(project) || !configManager.getConfig().enable) {
             return [];
         }
 
@@ -218,9 +224,15 @@ function init(modules: { typescript: typeof ts }): ts.server.PluginModule {
         return svelteTsxFiles;
     }
 
-    function isSvelteProject(compilerOptions: ts.CompilerOptions) {
-        // Add more checks like "no Svelte file found" or "no config file found"?
-        return hasNodeModule(compilerOptions, 'svelte');
+    function isSvelteProjectWithCache(project: ts.server.Project) {
+        const cached = isSvelteProjectCache.get(project.getProjectName());
+        if (cached !== undefined) {
+            return cached;
+        }
+
+        const result = !!isSvelteProject(project);
+        isSvelteProjectCache.set(project.getProjectName(), result);
+        return result;
     }
 
     function onConfigurationChanged(config: Configuration) {

packages/typescript-plugin/src/language-service/sveltekit.ts

@@ -1,6 +1,6 @@
 import type ts from 'typescript/lib/tsserverlibrary';
 import { Logger } from '../logger';
-import { hasNodeModule } from '../utils';
+import { getProjectDirectory, hasNodeModule } from '../utils';
 import { InternalHelpers, internalHelpers } from 'svelte2tsx';
 type _ts = typeof ts;
 
@@ -531,7 +531,8 @@ function getProxiedLanguageService(info: ts.server.PluginCreateInfo, ts: _ts, lo
         return cachedProxiedLanguageService ?? undefined;
     }
 
-    if (!hasNodeModule(info.project.getCompilerOptions(), '@sveltejs/kit')) {
+    const projectDirectory = getProjectDirectory(info.project);
+    if (projectDirectory && !hasNodeModule(projectDirectory, '@sveltejs/kit')) {
         // Not a SvelteKit project, do nothing
         cache.set(info, null);
         return;

packages/typescript-plugin/src/module-loader.ts

@@ -101,7 +101,7 @@ export function patchModuleLoader(
     lsHost: ts.LanguageServiceHost,
     project: ts.server.Project,
     configManager: ConfigManager
-): void {
+): { dispose: () => void } {
     const svelteSys = createSvelteSys(typescript, logger);
     const moduleCache = new ModuleResolutionCache(project.projectService);
     const origResolveModuleNames = lsHost.resolveModuleNames?.bind(lsHost);
@@ -120,9 +120,17 @@ export function patchModuleLoader(
         return origRemoveFile(info, fileExists, detachFromProject);
     };
 
-    configManager.onConfigurationChanged(() => {
+    const onConfigChanged = () => {
         moduleCache.clear();
-    });
+    };
+    configManager.onConfigurationChanged(onConfigChanged);
+
+    return {
+        dispose() {
+            configManager.removeConfigurationChangeListener(onConfigChanged);
+            moduleCache.clear();
+        }
+    };
 
     function resolveModuleNames(
         moduleNames: string[],

packages/typescript-plugin/src/project-svelte-files.ts

@@ -26,14 +26,14 @@ export class ProjectSvelteFilesManager {
         private readonly snapshotManager: SvelteSnapshotManager,
         private readonly logger: Logger,
         private parsedCommandLine: ts.ParsedCommandLine,
-        configManager: ConfigManager
+        private readonly configManager: ConfigManager
     ) {
         if (configManager.getConfig().enable) {
             this.setupWatchers();
             this.updateProjectSvelteFiles();
         }
 
-        configManager.onConfigurationChanged(this.onConfigChanged.bind(this));
+        configManager.onConfigurationChanged(this.onConfigChanged);
         ProjectSvelteFilesManager.instances.set(project.getProjectName(), this);
     }
 
@@ -162,15 +162,15 @@ export class ProjectSvelteFilesManager {
             .map(this.typescript.server.toNormalizedPath);
     }
 
-    private onConfigChanged(config: Configuration) {
+    private onConfigChanged = (config: Configuration) => {
         this.disposeWatchers();
         this.clearProjectFile();
 
         if (config.enable) {
             this.setupWatchers();
             this.updateProjectSvelteFiles();
         }
-    }
+    };
 
     private removeFileFromProject(file: string, exists = true) {
         const info = this.project.getScriptInfo(file);
@@ -198,6 +198,8 @@ export class ProjectSvelteFilesManager {
         // - and because the project is closed, `project.removeFile` will result in an error
         this.projectFileToOriginalCasing.clear();
 
+        this.configManager.removeConfigurationChangeListener(this.onConfigChanged);
+
         ProjectSvelteFilesManager.instances.delete(this.project.getProjectName());
     }
 }

packages/typescript-plugin/src/svelte-sys.ts

@@ -1,4 +1,4 @@
-import type ts from 'typescript';
+import type ts from 'typescript/lib/tsserverlibrary';
 import { Logger } from './logger';
 import { ensureRealSvelteFilePath, isVirtualSvelteFilePath, toRealSvelteFilePath } from './utils';
 

packages/typescript-plugin/src/utils.ts

@@ -1,5 +1,6 @@
 import type ts from 'typescript/lib/tsserverlibrary';
 import { SvelteSnapshot } from './svelte-snapshots';
+import { dirname, join } from 'path';
 type _ts = typeof ts;
 
 export function isSvelteFilePath(filePath: string) {
@@ -225,15 +226,56 @@ export function findIdentifier(ts: _ts, node: ts.Node): ts.Identifier | undefine
     }
 }
 
-export function hasNodeModule(compilerOptions: ts.CompilerOptions, module: string) {
+export function getProjectDirectory(project: ts.server.Project) {
+    const compilerOptions = project.getCompilerOptions();
+
+    if (typeof compilerOptions.configFilePath === 'string') {
+        return dirname(compilerOptions.configFilePath);
+    }
+
+    const packageJsonPath = join(project.getCurrentDirectory(), 'package.json');
+    return project.fileExists(packageJsonPath) ? project.getCurrentDirectory() : undefined;
+}
+
+export function hasNodeModule(startPath: string, module: string) {
     try {
-        const hasModule =
-            typeof compilerOptions.configFilePath !== 'string' ||
-            require.resolve(module, { paths: [compilerOptions.configFilePath] });
+        const hasModule = require.resolve(module, { paths: [startPath] });
         return hasModule;
     } catch (e) {
         // If require.resolve fails, we end up here, which can be either because the package is not found,
         // or (in case of things like SvelteKit) the package is found but the package.json is not exported.
         return (e as any)?.code === 'ERR_PACKAGE_PATH_NOT_EXPORTED';
     }
 }
+
+export function isSvelteProject(project: ts.server.Project) {
+    const projectDirectory = getProjectDirectory(project);
+    if (projectDirectory) {
+        return hasNodeModule(projectDirectory, 'svelte');
+    }
+
+    const packageJsons = project
+        .readDirectory(
+            project.getCurrentDirectory(),
+            ['.json'],
+            ['node_modules', 'dist', 'build'],
+            ['**/package.json'],
+            // assuming structure like packages/projectName
+            3
+        )
+        // in case some other plugin patched readDirectory in a weird way
+        .filter((file) => file.endsWith('package.json') && !hasConfigInConjunction(file, project));
+
+    return packageJsons.some((packageJsonPath) =>
+        hasNodeModule(dirname(packageJsonPath), 'svelte')
+    );
+}
+
+function hasConfigInConjunction(packageJsonPath: string, project: ts.server.Project) {
+    const dir = dirname(packageJsonPath);
+
+    return (
+        project.fileExists(join(dir, 'tsconfig.json')) ||
+        project.fileExists(join(dir, 'jsconfig.json'))
+    );
+}