Migrate to TS Plugin (#371)

johnsoncodehk · remcohaszing · web-flow · commit 7539a980ed08 · 2024-03-01T20:41:57.000+01:00
Use a TypeScript plugin in the Visual Studio Code extension instead of providing TypeScript integration via the language server. This reduces the memory footprint and enables interoperability with other TypeScript plugin based integrations, such as Vue. TypeScript support is still supported in the language server, but it must be enabled explicitly via initialize options.

Signed-off-by: Johnson Chu &lt;johnsoncodehk@gmail.com&gt;
Co-authored-by: Remco Haszing &lt;remcohaszing@gmail.com&gt;
diff --git a/.changeset/green-waves-travel.md b/.changeset/green-waves-travel.md
@@ -0,0 +1,5 @@
+---
+"@mdx-js/language-server": minor
+---
+
+Disable TypeScript support by default. The user can opt-in to TypeScript support by explicitly enabling the `typescript.enable` compiler option.
diff --git a/.changeset/wicked-comics-sort.md b/.changeset/wicked-comics-sort.md
@@ -0,0 +1,5 @@
+---
+"vscode-mdx": minor
+---
+
+Use a TypeScript plugin for TypeScript integration.
diff --git a/packages/language-server/README.md b/packages/language-server/README.md
@@ -69,6 +69,8 @@ features specific to MDX.
 
 MDX language server supports the following LSP initialization options:
 
+*   `typescript.enabled` (`boolean`, default: `false`) —
+    If true, enable TypeScript.
 *   `typescript.tsdk` (`string`, required) —
     The path from which to load TypeScript.
 *   `locale` (`string`, optional) —
diff --git a/packages/language-server/index.js b/packages/language-server/index.js
@@ -17,6 +17,7 @@ import {
 import {
   createConnection,
   createServer,
+  createSimpleProjectProviderFactory,
   createTypeScriptProjectProviderFactory,
   loadTsdkByPath
 } from '@volar/language-server/node.js'
@@ -35,19 +36,24 @@ const server = createServer(connection)
 
 connection.onInitialize((parameters) => {
   const tsdk = parameters.initializationOptions?.typescript?.tsdk
+  const tsEnabled = Boolean(
+    parameters.initializationOptions?.typescript?.enabled
+  )
   assert(
     typeof tsdk === 'string',
     'Missing initialization option typescript.tsdk'
   )
 
-  const {diagnosticMessages, typescript} = loadTsdkByPath(
+  const {typescript, diagnosticMessages} = loadTsdkByPath(
     tsdk,
     parameters.locale
   )
 
   return server.initialize(
     parameters,
-    createTypeScriptProjectProviderFactory(typescript, diagnosticMessages),
+    tsEnabled
+      ? createTypeScriptProjectProviderFactory(typescript, diagnosticMessages)
+      : createSimpleProjectProviderFactory(),
     {
       watchFileExtensions: [
         'cjs',
@@ -63,15 +69,20 @@ connection.onInitialize((parameters) => {
       ],
 
       getServicePlugins() {
-        return [
+        const plugins = [
           createMarkdownServicePlugin({
             getDiagnosticOptions(document, context) {
               return context.env.getConfiguration?.('mdx.validate')
             }
           }),
-          createMdxServicePlugin(),
-          createTypeScriptServicePlugin(typescript)
+          createMdxServicePlugin()
         ]
+
+        if (tsEnabled) {
+          plugins.push(createTypeScriptServicePlugin(typescript))
+        }
+
+        return plugins
       },
 
       async getLanguagePlugins(serviceEnvironment, projectContext) {
diff --git a/packages/language-server/test/completion.test.js b/packages/language-server/test/completion.test.js
@@ -11,8 +11,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/definitions.test.js b/packages/language-server/test/definitions.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/diagnostics.test.js b/packages/language-server/test/diagnostics.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/document-link.test.js b/packages/language-server/test/document-link.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/document-symbols.test.js b/packages/language-server/test/document-symbols.test.js
@@ -11,8 +11,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/folding-ranges.test.js b/packages/language-server/test/folding-ranges.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/hover.test.js b/packages/language-server/test/hover.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/initialize.test.js b/packages/language-server/test/initialize.test.js
@@ -20,7 +20,7 @@ test('initialize', async () => {
   const {serverInfo, ...initializeResponse} = await serverHandle.initialize(
     fixtureUri('node16'),
     // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-    {typescript: {tsdk}}
+    {typescript: {enabled: true, tsdk}}
   )
   assert.deepEqual(initializeResponse, {
     capabilities: {
diff --git a/packages/language-server/test/no-tsconfig.test.js b/packages/language-server/test/no-tsconfig.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('no-tsconfig'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('no-tsconfig'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/prepare-rename.test.js b/packages/language-server/test/prepare-rename.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/language-server/test/rename.test.js b/packages/language-server/test/rename.test.js
@@ -10,8 +10,10 @@ let serverHandle
 
 beforeEach(async () => {
   serverHandle = createServer()
-  // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
-  await serverHandle.initialize(fixtureUri('node16'), {typescript: {tsdk}})
+  await serverHandle.initialize(fixtureUri('node16'), {
+    // @ts-expect-error https://github.com/volarjs/volar.js/pull/142
+    typescript: {enabled: true, tsdk}
+  })
 })
 
 afterEach(() => {
diff --git a/packages/vscode-mdx/.vscodeignore b/packages/vscode-mdx/.vscodeignore
@@ -1,10 +1,14 @@
+# Workaround for https://github.com/microsoft/vscode-vsce/issues/580
+../../
+
 .*
 .*/
 *.log
 *.map
 *.ts
 *.tsbuildinfo
+node_modules/**
+!node_modules/@mdx-js/typescript-plugin.js
 fixtures/
-node_modules/
 packages/
 script/
diff --git a/packages/vscode-mdx/package.json b/packages/vscode-mdx/package.json
@@ -34,22 +34,23 @@
     "onLanguage:typescript",
     "onLanguage:typescriptreact"
   ],
-  "vsce": {
-    "dependencies": false
-  },
   "scripts": {
     "build": "node ./script/build.mjs",
     "build:debug": "npm run build debug",
     "generate": "node --conditions development ./script/generate.mjs",
     "vscode:prepublish": "npm run build"
   },
   "devDependencies": {
+    "@mdx-js/language-service": "0.5.3",
     "@types/vscode": "^1.82.0",
     "@volar/language-server": "~2.1.0",
     "@volar/vscode": "~2.1.0",
     "@vscode/vsce": "^2.0.0",
     "esbuild": "^0.20.0",
-    "ovsx": "^0.8.0"
+    "load-plugin": "^5.0.0",
+    "ovsx": "^0.8.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "galleryBanner": {
     "color": "#fcb32c",
@@ -196,11 +197,6 @@
       }
     ],
     "commands": [
-      {
-        "command": "mdx.selectTypescriptVersion",
-        "title": "Select TypeScript version…",
-        "category": "MDX"
-      },
       {
         "command": "mdx.toggleDelete",
         "title": "Toggle Delete",
@@ -223,12 +219,6 @@
       }
     ],
     "menus": {
-      "commandPalette": [
-        {
-          "command": "mdx.selectTypescriptVersion",
-          "when": "editorLangId == mdx"
-        }
-      ],
       "editor/context": [
         {
           "command": "mdx.toggleDelete",
@@ -310,6 +300,16 @@
           "meta.embedded.block.mdx": "mdx"
         }
       }
+    ],
+    "typescriptServerPlugins": [
+      {
+        "name": "@mdx-js/typescript-plugin",
+        "enableForWorkspaceTypeScriptVersions": true,
+        "configNamespace": "typescript",
+        "languages": [
+          "mdx"
+        ]
+      }
     ]
   }
 }
diff --git a/packages/vscode-mdx/script/build.mjs b/packages/vscode-mdx/script/build.mjs
@@ -11,13 +11,16 @@ const debug = process.argv.includes('debug')
 await build({
   bundle: true,
   entryPoints: {
-    extension: require.resolve('../src/extension.js'),
-    'language-server': require.resolve('@mdx-js/language-server')
+    'out/extension': require.resolve('../src/extension.js'),
+    'out/language-server': require.resolve('@mdx-js/language-server'),
+    'node_modules/@mdx-js/typescript-plugin': require.resolve(
+      '../src/typescript-plugin.js'
+    )
   },
   external: ['vscode'],
   logLevel: 'info',
   minify: !debug,
-  outdir: fileURLToPath(new URL('../out/', import.meta.url)),
+  outdir: fileURLToPath(new URL('../', import.meta.url)),
   platform: 'node',
   sourcemap: debug,
   target: 'node16',
diff --git a/packages/vscode-mdx/src/extension.js b/packages/vscode-mdx/src/extension.js
@@ -8,12 +8,12 @@ import * as languageServerProtocol from '@volar/language-server/protocol.js'
 import {
   activateAutoInsertion,
   activateDocumentDropEdit,
-  activateTsVersionStatusItem,
   createLabsInfo,
   getTsdk
 } from '@volar/vscode'
 import {
   commands,
+  extensions,
   window,
   workspace,
   Disposable,
@@ -43,6 +43,8 @@ let disposable
  *   extension.
  */
 export async function activate(context) {
+  extensions.getExtension('vscode.typescript-language-features')?.activate()
+
   const {tsdk} = await getTsdk(context)
 
   client = new LanguageClient(
@@ -81,7 +83,7 @@ export async function activate(context) {
   async function tryRestartServer() {
     await stopServer()
     if (workspace.getConfiguration('mdx').get('server.enable')) {
-      await startServer(context)
+      await startServer()
     }
   }
 }
@@ -103,11 +105,8 @@ async function stopServer() {
 
 /**
  * Start the language server and client integrations.
- *
- * @param {ExtensionContext} context
- *   The extension context as given by VSCode.
  */
-async function startServer(context) {
+async function startServer() {
   if (client.needsStart()) {
     await window.withProgress(
       {
@@ -123,14 +122,7 @@ async function startServer(context) {
           activateMdxToggleCommand('toggleDelete'),
           activateMdxToggleCommand('toggleEmphasis'),
           activateMdxToggleCommand('toggleInlineCode'),
-          activateMdxToggleCommand('toggleStrong'),
-          activateTsVersionStatusItem(
-            'mdx',
-            'mdx.selectTypescriptVersion',
-            context,
-            client,
-            (text) => 'TS ' + text
-          )
+          activateMdxToggleCommand('toggleStrong')
         )
       }
     )
diff --git a/packages/vscode-mdx/src/typescript-plugin.js b/packages/vscode-mdx/src/typescript-plugin.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@mdx-js/language-server": minor
 +---
++
 +Disable TypeScript support by default. The user can opt-in to TypeScript support by explicitly enabling the `typescript.enable` compiler option.
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ test('initialize', async () => {`
`20`	`20`	`const {serverInfo, ...initializeResponse} = await serverHandle.initialize(`
`21`	`21`	`fixtureUri('node16'),`
`22`	`22`	`// @ts-expect-error https://github.com/volarjs/volar.js/pull/142`
`23`		`- {typescript: {tsdk}}`
	`23`	`+ {typescript: {enabled: true, tsdk}}`
`24`	`24`	`)`
`25`	`25`	`assert.deepEqual(initializeResponse, {`
`26`	`26`	`capabilities: {`