(feat) use setting instead of command for toggling ts plugin

packages/svelte-vscode/README.md

@@ -59,6 +59,10 @@ More docs and troubleshooting: [See here](/docs/README.md).
 
 ### Settings
 
+##### `svelte.enable-ts-plugin`
+
+Enables a TypeScript plugin which provides intellisense for Svelte files inside TS/JS files. _Default_: `false`
+
 ##### `svelte.language-server.runtime`
 
 Path to the node executable you would like to use to run the language server.

packages/svelte-vscode/package.json

@@ -54,6 +54,12 @@
             "type": "object",
             "title": "Svelte",
             "properties": {
+                "svelte.enable-ts-plugin": {
+                    "type": "boolean",
+                    "default": false,
+                    "title": "Enable TypeScript Svelte plugin",
+                    "description": "Enables a TypeScript plugin which provides intellisense for Svelte files inside TS/JS files."
+                },
                 "svelte.language-server.runtime": {
                     "scope": "application",
                     "type": "string",
@@ -478,10 +484,6 @@
             {
                 "command": "svelte.extractComponent",
                 "title": "Svelte: Extract Component"
-            },
-            {
-                "command": "svelte.toggleTsPlugin",
-                "title": "Svelte: Toggle TS Plugin"
             }
         ],
         "menus": {

packages/svelte-vscode/src/extension.ts

@@ -1,34 +1,34 @@
+import * as path from 'path';
 import {
-    workspace,
+    commands,
     ExtensionContext,
-    TextDocument,
+    extensions,
+    IndentAction,
+    languages,
     Position,
+    ProgressLocation,
     Range,
-    commands,
-    window,
-    WorkspaceEdit,
+    TextDocument,
     Uri,
-    ProgressLocation,
     ViewColumn,
-    languages,
-    IndentAction,
-    extensions
+    window,
+    workspace,
+    WorkspaceEdit
 } from 'vscode';
 import {
+    ExecuteCommandRequest,
     LanguageClientOptions,
-    TextDocumentPositionParams,
     RequestType,
     RevealOutputChannelOn,
-    WorkspaceEdit as LSWorkspaceEdit,
     TextDocumentEdit,
-    ExecuteCommandRequest
+    TextDocumentPositionParams,
+    WorkspaceEdit as LSWorkspaceEdit
 } from 'vscode-languageclient';
 import { LanguageClient, ServerOptions, TransportKind } from 'vscode-languageclient/node';
+import CompiledCodeContentProvider from './CompiledCodeContentProvider';
 import { activateTagClosing } from './html/autoClose';
 import { EMPTY_ELEMENTS } from './html/htmlEmptyTagsShared';
-import CompiledCodeContentProvider from './CompiledCodeContentProvider';
-import * as path from 'path';
-import { readFileSync, writeFileSync } from 'fs';
+import { TsPlugin } from './tsplugin';
 
 namespace TagCloseRequest {
     export const type: RequestType<TextDocumentPositionParams, string, any> = new RequestType(
@@ -173,7 +173,7 @@ export function activate(context: ExtensionContext) {
 
     addExtracComponentCommand(getLS, context);
 
-    context.subscriptions.push(commands.registerCommand('svelte.toggleTsPlugin', toggleTsPlugin));
+    TsPlugin.create(context);
 
     languages.setLanguageConfiguration('svelte', {
         indentationRules: {
@@ -387,46 +387,6 @@ function addExtracComponentCommand(getLS: () => LanguageClient, context: Extensi
     );
 }
 
-function toggleTsPlugin() {
-    const extension = extensions.getExtension('svelte.svelte-vscode');
-    if (!extension) {
-        // This shouldn't be possible
-        return;
-    }
-
-    const packageJson = path.join(extension.extensionPath, 'package.json');
-    const enabled = '"typescriptServerPlugins"';
-    const disabled = '"typescriptServerPlugins-disabled"';
-    try {
-        const packageText = readFileSync(packageJson, 'utf8');
-        if (packageText.includes(disabled)) {
-            const newText = packageText.replace(disabled, enabled);
-            writeFileSync(packageJson, newText, 'utf8');
-            showReload(true);
-        } else if (packageText.includes(enabled)) {
-            const newText = packageText.replace(enabled, disabled);
-            writeFileSync(packageJson, newText, 'utf8');
-            showReload(false);
-        } else {
-            window.showWarningMessage('Unknown Svelte for VS Code package.json status.');
-        }
-    } catch (err) {
-        window.showWarningMessage('Svelte for VS Code package.json update failed.');
-    }
-
-    async function showReload(enabled: boolean) {
-        const reload = await window.showInformationMessage(
-            ` TypeScript Svelte Plugin ${
-                enabled ? 'enabled' : 'disabled'
-            }, please reload VS Code to restart the TS Server.`,
-            'Reload Window'
-        );
-        if (reload) {
-            commands.executeCommand('workbench.action.reloadWindow');
-        }
-    }
-}
-
 function createLanguageServer(serverOptions: ServerOptions, clientOptions: LanguageClientOptions) {
     return new LanguageClient('svelte', 'Svelte', serverOptions, clientOptions);
 }

packages/svelte-vscode/src/tsplugin.ts

@@ -0,0 +1,73 @@
+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) {
+        this.enabled = this.getEnabledState();
+        this.toggleTsPlugin(this.enabled);
+
+        context.subscriptions.push(
+            workspace.onDidChangeConfiguration(() => {
+                const enabled = this.getEnabledState();
+                if (enabled !== this.enabled) {
+                    this.enabled = enabled;
+                    this.toggleTsPlugin(this.enabled);
+                }
+            })
+        );
+    }
+
+    private getEnabledState(): boolean {
+        return workspace.getConfiguration('svelte').get<boolean>('enable-ts-plugin') ?? false;
+    }
+
+    private toggleTsPlugin(enable: boolean) {
+        const extension = extensions.getExtension('svelte.svelte-vscode');
+        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 commend isn't enough, the whole VS Code window needs to reload
+        const reload = await window.showInformationMessage(
+            ` TypeScript Svelte Plugin ${
+                enabled ? 'enabled' : 'disabled'
+            }, please reload VS Code to restart the TS Server.`,
+            'Reload Window'
+        );
+        if (reload) {
+            commands.executeCommand('workbench.action.reloadWindow');
+        }
+    }
+}