(feat) improve Ts plugin enable config (#1401)

jasonlyu123 · web-flow · commit b87ea2e41c3b · 2022-03-02T18:48:09.000+01:00
Enable ts plugin without updating the package.json, making it possible to enable/disable it without a restart #1358
diff --git a/packages/svelte-vscode/package.json b/packages/svelte-vscode/package.json
@@ -41,7 +41,9 @@
     },
     "activationEvents": [
         "onLanguage:svelte",
-        "onCommand:svelte.restartLanguageServer"
+        "onCommand:svelte.restartLanguageServer",
+        "onLanguage:javascript",
+        "onLanguage:typescript"
     ],
     "capabilities": {
         "untrustedWorkspaces": {
@@ -50,7 +52,7 @@
         }
     },
     "contributes": {
-        "typescriptServerPlugins-disabled": [
+        "typescriptServerPlugins": [
             {
                 "name": "typescript-svelte-plugin",
                 "enableForWorkspaceTypeScriptVersions": true
diff --git a/packages/svelte-vscode/src/extension.ts b/packages/svelte-vscode/src/extension.ts
@@ -37,6 +37,45 @@ namespace TagCloseRequest {
 }
 
 export function activate(context: ExtensionContext) {
+    // The extension is activated on TS/JS/Svelte files because else it might be too late to configure the TS plugin:
+    // If we only activate on Svelte file and the user opens a TS file first, the configuration command is issued too late.
+    // We wait until there's a Svelte file open and only then start the actual language client.
+    const tsPlugin = new TsPlugin(context);
+    let lsApi: { getLS(): LanguageClient } | undefined;
+
+    if (workspace.textDocuments.some((doc) => doc.languageId === 'svelte')) {
+        lsApi = activateSvelteLanguageServer(context);
+        tsPlugin.askToEnable();
+    } else {
+        const onTextDocumentListener = workspace.onDidOpenTextDocument((doc) => {
+            if (doc.languageId === 'svelte') {
+                lsApi = activateSvelteLanguageServer(context);
+                tsPlugin.askToEnable();
+                onTextDocumentListener.dispose();
+            }
+        });
+
+        context.subscriptions.push(onTextDocumentListener);
+    }
+
+    // This API is considered private and only exposed for experimenting.
+    // Interface may change at any time. Use at your own risk!
+    return {
+        /**
+         * As a function, because restarting the server
+         * will result in another instance.
+         */
+        getLanguageServer() {
+            if (!lsApi) {
+                lsApi = activateSvelteLanguageServer(context);
+            }
+
+            return lsApi.getLS();
+        }
+    };
+}
+
+export function activateSvelteLanguageServer(context: ExtensionContext) {
     warnIfOldExtensionInstalled();
 
     const runtimeConfig = workspace.getConfiguration('svelte.language-server');
@@ -190,8 +229,6 @@ export function activate(context: ExtensionContext) {
 
     addExtracComponentCommand(getLS, context);
 
-    TsPlugin.create(context);
-
     languages.setLanguageConfiguration('svelte', {
         indentationRules: {
             // Matches a valid opening tag that is:
@@ -261,14 +298,8 @@ export function activate(context: ExtensionContext) {
         ]
     });
 
-    // This API is considered private and only exposed for experimenting.
-    // Interface may change at any time. Use at your own risk!
     return {
-        /**
-         * As a function, because restarting the server
-         * will result in another instance.
-         */
-        getLanguageServer: getLS
+        getLS
     };
 }
 
diff --git a/packages/svelte-vscode/src/tsplugin.ts b/packages/svelte-vscode/src/tsplugin.ts
@@ -1,17 +1,10 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { join } from 'path';
 import { commands, ExtensionContext, extensions, window, workspace } from 'vscode';
 
 export class TsPlugin {
     private enabled: boolean;
 
-    static create(context: ExtensionContext) {
-        new TsPlugin(context);
-    }
-
-    private constructor(context: ExtensionContext) {
+    constructor(context: ExtensionContext) {
         this.enabled = this.getEnabledState();
-        this.askToEnable(this.enabled);
         this.toggleTsPlugin(this.enabled);
 
         context.subscriptions.push(
@@ -29,56 +22,27 @@ export class TsPlugin {
         return workspace.getConfiguration('svelte').get<boolean>('enable-ts-plugin') ?? false;
     }
 
-    private toggleTsPlugin(enable: boolean) {
-        const extension = extensions.getExtension('svelte.svelte-vscode');
+    private async toggleTsPlugin(enable: boolean) {
+        const extension = extensions.getExtension('vscode.typescript-language-features');
+
         if (!extension) {
-            // This shouldn't be possible
             return;
         }
 
-        const packageJson = join(extension.extensionPath, 'package.json');
-        const enabled = '"typescriptServerPlugins"';
-        const disabled = '"typescriptServerPlugins-disabled"';
-        try {
-            const packageText = readFileSync(packageJson, 'utf8');
-            if (packageText.includes(disabled) && enable) {
-                const newText = packageText.replace(disabled, enabled);
-                writeFileSync(packageJson, newText, 'utf8');
-                this.showReload(true);
-            } else if (packageText.includes(enabled) && !enable) {
-                const newText = packageText.replace(enabled, disabled);
-                writeFileSync(packageJson, newText, 'utf8');
-                this.showReload(false);
-            } else if (!packageText.includes(enabled) && !packageText.includes(disabled)) {
-                window.showWarningMessage('Unknown Svelte for VS Code package.json status.');
-            }
-        } catch (err) {
-            window.showWarningMessage(
-                'Svelte for VS Code package.json update failed, TypeScript plugin could not be toggled.'
-            );
-        }
-    }
-
-    private async showReload(enabled: boolean) {
-        // Restarting the TSServer via a command isn't enough, the whole VS Code window needs to reload
-        let message = `TypeScript Svelte Plugin ${enabled ? 'enabled' : 'disabled'}.`;
-        if (enabled) {
-            message +=
-                ' Note that changes of Svelte files are only noticed by TS/JS files after they are saved to disk.';
-        }
-        message += ' Please reload VS Code to restart the TS Server.';
-
-        const reload = await window.showInformationMessage(message, 'Reload Window');
-        if (reload) {
-            commands.executeCommand('workbench.action.reloadWindow');
-        }
+        // This somewhat semi-public command configures our TypeScript plugin.
+        // The plugin itself is always present, but enabled/disabled depending on this config.
+        // It is done this way because it allows us to toggle the plugin without restarting VS Code
+        // and without having to do hacks like updating the extension's package.json.
+        commands.executeCommand('_typescript.configurePlugin', 'typescript-svelte-plugin', {
+            enable
+        });
     }
 
-    private async askToEnable(enabled: boolean) {
+    async askToEnable() {
         const shouldAsk = workspace
             .getConfiguration('svelte')
             .get<boolean>('ask-to-enable-ts-plugin');
-        if (enabled || !shouldAsk) {
+        if (this.enabled || !shouldAsk) {
             return;
         }
 
diff --git a/packages/typescript-plugin/internal.md b/packages/typescript-plugin/internal.md
@@ -16,6 +16,8 @@ The last step is to enhance the language service. For that, we patch the desired
 
 Along the way, we need to patch some internal methods, which is brittly and hacky, but to our knowledge there currently is no other way.
 
+To make it work with the VS Code extension we need to provide the plugin within `contributes.typescriptServerPlugins`. That way the plugin is always loaded. To enable/disable it, we use a semi-public command that tells TypeScript to configure the plugin. That configuration then tells this plugin whether or not it is enabled.
+
 ## Limitations
 
 Currently, changes to Svelte files are only recognized after they are saved to disk. That could be changed by adding `"languages": ["svelte"]` to the plugin provide options. The huge disadvantage is that diagnostics, rename etc within Svelte files no longer stay in the control of the language-server, instead TS/JS starts interacting with Svelte files on a much deeper level, which would mean patching many more undocumented/private methods, and having less control of the situation overall.
diff --git a/packages/typescript-plugin/src/config-manager.ts b/packages/typescript-plugin/src/config-manager.ts
@@ -0,0 +1,30 @@
+import { EventEmitter } from 'events';
+
+const configurationEventName = 'configuration-changed';
+
+export interface Configuration {
+    enable: boolean;
+}
+
+export class ConfigManager {
+    private emitter = new EventEmitter();
+    private config: Configuration = {
+        enable: true
+    };
+
+    onConfigurationChanged(listener: (config: Configuration) => void) {
+        this.emitter.on(configurationEventName, listener);
+    }
+
+    updateConfigFromPluginConfig(config: Configuration) {
+        this.config = {
+            ...this.config,
+            ...config
+        };
+        this.emitter.emit(configurationEventName, config);
+    }
+
+    getConfig() {
+        return this.config;
+    }
+}
diff --git a/packages/typescript-plugin/src/index.ts b/packages/typescript-plugin/src/index.ts
@@ -4,16 +4,26 @@ import { Logger } from './logger';
 import { patchModuleLoader } from './module-loader';
 import { SvelteSnapshotManager } from './svelte-snapshots';
 import type ts from 'typescript/lib/tsserverlibrary';
+import { ConfigManager, Configuration } from './config-manager';
 
 function init(modules: { typescript: typeof ts }) {
+    const configManager = new ConfigManager();
+
     function create(info: ts.server.PluginCreateInfo) {
         const logger = new Logger(info.project.projectService.logger);
         if (!isSvelteProject(info.project.getCompilerOptions())) {
             logger.log('Detected that this is not a Svelte project, abort patching TypeScript');
             return info.languageService;
         }
 
-        logger.log('Starting Svelte plugin');
+        configManager.updateConfigFromPluginConfig(info.config);
+        if (configManager.getConfig().enable) {
+            logger.log('Starting Svelte plugin');
+        } else {
+            logger.log('Svelte plugin disabled');
+            logger.log(info.config);
+        }
+
         // If someone knows a better/more performant way to get svelteOptions,
         // please tell us :)
         const svelteOptions = info.languageServiceHost.getParsedCommandLine?.(
@@ -25,17 +35,31 @@ function init(modules: { typescript: typeof ts }) {
             modules.typescript,
             info.project.projectService,
             svelteOptions,
-            logger
+            logger,
+            configManager
         );
 
         patchModuleLoader(
             logger,
             snapshotManager,
             modules.typescript,
             info.languageServiceHost,
-            info.project
+            info.project,
+            configManager
+        );
+
+        configManager.onConfigurationChanged(() => {
+            // enabling/disabling the plugin means TS has to recompute stuff
+            info.languageService.cleanupSemanticCache();
+            info.project.markAsDirty();
+        });
+
+        return decorateLanguageService(
+            info.languageService,
+            snapshotManager,
+            logger,
+            configManager
         );
-        return decorateLanguageService(info.languageService, snapshotManager, logger);
     }
 
     function getExternalFiles(project: ts.server.ConfiguredProject) {
@@ -66,7 +90,11 @@ function init(modules: { typescript: typeof ts }) {
         }
     }
 
-    return { create, getExternalFiles };
+    function onConfigurationChanged(config: Configuration) {
+        configManager.updateConfigFromPluginConfig(config);
+    }
+
+    return { create, getExternalFiles, onConfigurationChanged };
 }
 
 export = init;
diff --git a/packages/typescript-plugin/src/language-service/index.ts b/packages/typescript-plugin/src/language-service/index.ts
@@ -1,4 +1,5 @@
 import type ts from 'typescript/lib/tsserverlibrary';
+import { ConfigManager } from '../config-manager';
 import { Logger } from '../logger';
 import { SvelteSnapshotManager } from '../svelte-snapshots';
 import { isSvelteFilePath } from '../utils';
@@ -10,6 +11,19 @@ import { decorateGetImplementation } from './implementation';
 import { decorateRename } from './rename';
 
 export function decorateLanguageService(
+    ls: ts.LanguageService,
+    snapshotManager: SvelteSnapshotManager,
+    logger: Logger,
+    configManager: ConfigManager
+) {
+    // Decorate using a proxy so we can dynamically enable/disable method
+    // patches depending on the enabled state of our config
+    const proxy = new Proxy(ls, createProxyHandler(configManager));
+    decorateLanguageServiceInner(proxy, snapshotManager, logger);
+    return proxy;
+}
+
+function decorateLanguageServiceInner(
     ls: ts.LanguageService,
     snapshotManager: SvelteSnapshotManager,
     logger: Logger
@@ -24,6 +38,27 @@ export function decorateLanguageService(
     return ls;
 }
 
+function createProxyHandler(configManager: ConfigManager): ProxyHandler<ts.LanguageService> {
+    const decorated: Partial<ts.LanguageService> = {};
+
+    return {
+        get(target, p) {
+            if (!configManager.getConfig().enable) {
+                return target[p as keyof ts.LanguageService];
+            }
+
+            return (
+                decorated[p as keyof ts.LanguageService] ?? target[p as keyof ts.LanguageService]
+            );
+        },
+        set(_, p, value) {
+            decorated[p as keyof ts.LanguageService] = value;
+
+            return true;
+        }
+    };
+}
+
 function patchLineColumnOffset(ls: ts.LanguageService, snapshotManager: SvelteSnapshotManager) {
     if (!ls.toLineColumnOffset) {
         return;
diff --git a/packages/typescript-plugin/src/module-loader.ts b/packages/typescript-plugin/src/module-loader.ts
@@ -1,4 +1,5 @@
 import type ts from 'typescript/lib/tsserverlibrary';
+import { ConfigManager } from './config-manager';
 import { Logger } from './logger';
 import { SvelteSnapshotManager } from './svelte-snapshots';
 import { createSvelteSys } from './svelte-sys';
@@ -39,6 +40,10 @@ class ModuleResolutionCache {
         });
     }
 
+    clear() {
+        this.cache.clear();
+    }
+
     private getKey(moduleName: string, containingFile: string) {
         return containingFile + ':::' + ensureRealSvelteFilePath(moduleName);
     }
@@ -58,7 +63,8 @@ export function patchModuleLoader(
     snapshotManager: SvelteSnapshotManager,
     typescript: typeof ts,
     lsHost: ts.LanguageServiceHost,
-    project: ts.server.Project
+    project: ts.server.Project,
+    configManager: ConfigManager
 ): void {
     const svelteSys = createSvelteSys(logger);
     const moduleCache = new ModuleResolutionCache();
@@ -73,6 +79,10 @@ export function patchModuleLoader(
         return origRemoveFile(info, fileExists, detachFromProject);
     };
 
+    configManager.onConfigurationChanged(() => {
+        moduleCache.clear();
+    });
+
     function resolveModuleNames(
         moduleNames: string[],
         containingFile: string,
@@ -94,6 +104,10 @@ export function patchModuleLoader(
                 compilerOptions
             ) || Array.from<undefined>(Array(moduleNames.length));
 
+        if (!configManager.getConfig().enable) {
+            return resolved;
+        }
+
         return resolved.map((moduleName, idx) => {
             const fileName = moduleNames[idx];
             if (moduleName || !ensureRealSvelteFilePath(fileName).endsWith('.svelte')) {
diff --git a/packages/typescript-plugin/src/svelte-snapshots.ts b/packages/typescript-plugin/src/svelte-snapshots.ts
