feat(language-service): add language plugins for type checking external components

Add full type checking and IntelliSense support for components imported from Vue, Svelte, and Astro.

Changes:
- Add `resolveLanguagePlugins` function to load plugins from tsconfig.json
- Add framework shorthand support ("vue", "svelte", "astro") for easy configuration
- Add runtime validation for LanguagePlugin interface conformance
- Return structured errors for failed plugin imports or invalid exports
- Publish diagnostics to tsconfig.json when plugins fail to load
- Log errors to output channel for visibility
- Collect extra file extensions from loaded plugins for file watching
- Update typescript-plugin to use new API with error logging
- Add `languagePlugins` option to JSON schema for editor autocomplete
- Add documentation for all supported frameworks
- Add helpful error messages with install commands for missing dependencies

Author: svallory

.changeset/ready-dingos-grab.md

@@ -0,0 +1,10 @@
+---
+'@mdx-js/typescript-plugin': minor
+'@mdx-js/language-service': minor
+'@mdx-js/language-server': minor
+'vscode-mdx': minor
+---
+
+Add full type checking and IntelliSense support for components imported from
+Vue, Svelte, and Astro.
+This is an opt-in feature.

README.md

@@ -14,6 +14,7 @@ This repository contains the code to provide editor tooling support for [MDX][].
 * [Use](#use)
   * [TypeScript](#typescript)
   * [Plugins](#plugins)
+  * [Language Plugins](#language-plugins)
 * [Contribute](#contribute)
 * [Sponsor](#sponsor)
 * [License](#license)
@@ -174,6 +175,83 @@ For example, to support [frontmatter][] with YAML and TOML and [GFM][]:
 
 For a more complete list, see [remark plugins][].
 
+### Language Plugins
+
+MDX Analyzer supports importing components from other frameworks like Vue,
+Svelte, and Astro in your MDX files with full type checking and IntelliSense.
+
+Configure language plugins in `tsconfig.json` using framework shorthands or
+custom module specifiers:
+
+```jsonc
+{
+  "compilerOptions": {
+    // …
+  },
+  "mdx": {
+    "languagePlugins": [
+      "vue",      // Framework shorthand
+      "svelte",   // Framework shorthand
+      "astro",    // Framework shorthand
+      "./my-custom-plugin.js"  // Custom plugin (relative path)
+    ]
+  }
+}
+```
+
+#### Supported Frameworks
+
+* **`"vue"`** — Import Vue components (requires `@vue/language-core`)
+* **`"svelte"`** — Import Svelte components (requires `svelte2tsx`)
+* **`"astro"`** — Import Astro components (requires `@astrojs/ts-plugin`)
+
+For built-in frameworks, the analyzer will automatically:
+
+1. Validate that required dependencies are installed
+2. Show helpful error messages with install commands if dependencies are missing
+3. Provide full IntelliSense and type checking for imported components
+
+You can also provide custom module specifiers (relative paths like `"./my-plugin.js"`
+or npm packages like `"@my-org/my-plugin"`) to load your own language plugins.
+
+Custom plugins must export a `getLanguagePlugin()` function that returns a
+[Volar LanguagePlugin][volar].
+For type checking support, the plugin must include:
+
+* `getLanguageId()` method (required)
+* `typescript.getServiceScript()` method (required for type checking, added via
+  `@volar/typescript`)
+
+#### Example: Vue Components
+
+Install the required peer dependency:
+
+```bash
+npm install @vue/language-core
+```
+
+Configure in `tsconfig.json`:
+
+```jsonc
+{
+  "mdx": {
+    "languagePlugins": ["vue"]
+  }
+}
+```
+
+Now you can import Vue components in MDX:
+
+```mdx
+import Counter from './Counter.vue'
+
+<Counter initialCount={5} />
+```
+
+If a language plugin fails to load (missing dependencies, module not found,
+etc.), an error will be shown in the `tsconfig.json` file with helpful
+instructions.
+
 ## Contribute
 
 See [§ Contribute][contribute] on our site for ways to get started.

bun.lock

@@ -12,11 +12,14 @@
     "test": "npm run test-types && npm run format && npm run test-api"
   },
   "devDependencies": {
+    "@astrojs/ts-plugin": "^1.10.6",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.0.0",
     "@mdx-js/node-loader": "^3.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vue/compiler-sfc": "^3.5.26",
+    "@vue/language-core": "^3.2.1",
     "c8": "^10.0.0",
     "prettier": "^3.0.0",
     "react": "^19.0.0",
@@ -25,6 +28,7 @@
     "remark-directive": "^4.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-preset-wooorm": "^11.0.0",
+    "svelte2tsx": "^0.7.46",
     "typescript": "^5.0.0",
     "xo": "^1.0.0"
   },

package.json

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 
 /**
- * @import {VirtualCodePlugin} from '@mdx-js/language-service'
+ * @import {LanguagePluginLoadError, VirtualCodePlugin} from '@mdx-js/language-service'
+ * @import {LanguagePlugin} from '@volar/language-core'
+ * @import {Diagnostic} from 'vscode-languageserver'
  * @import {PluggableList} from 'unified'
  */
 
@@ -12,7 +14,8 @@ import process from 'node:process'
 import {
   createMdxLanguagePlugin,
   createMdxServicePlugin,
-  resolvePlugins
+  resolvePlugins,
+  resolveLanguagePlugins
 } from '@mdx-js/language-service'
 import {
   createConnection,
@@ -25,6 +28,8 @@ import remarkGfm from 'remark-gfm'
 import {create as createMarkdownServicePlugin} from 'volar-service-markdown'
 import {create as createTypeScriptServicePlugin} from 'volar-service-typescript'
 import {create as createTypeScriptSyntacticServicePlugin} from 'volar-service-typescript/lib/plugins/syntactic.js'
+import {DiagnosticSeverity} from 'vscode-languageserver'
+import {URI} from 'vscode-uri'
 
 process.title = 'mdx-language-server'
 
@@ -33,6 +38,10 @@ const defaultPlugins = [[remarkFrontmatter, ['toml', 'yaml']], remarkGfm]
 const connection = createConnection()
 const server = createServer(connection)
 let tsEnabled = false
+/** @type {string[]} */
+const extraExtensions = []
+/** @type {Map<string, LanguagePluginLoadError[]>} */
+const pluginErrorsByTsconfig = new Map()
 
 connection.onInitialize(async (parameters) => {
   const tsdk = parameters.initializationOptions?.typescript?.tsdk
@@ -89,6 +98,9 @@ connection.onInitialize(async (parameters) => {
     let checkMdx = false
     let jsxImportSource = 'react'
 
+    /** @type {LanguagePlugin<URI>[]} */
+    const languagePlugins = []
+
     if (tsconfig) {
       const cwd = path.dirname(tsconfig)
       const configSourceFile = typescript.readJsonConfigFile(
@@ -111,16 +123,55 @@ connection.onInitialize(async (parameters) => {
       )
       checkMdx = Boolean(commandLine.raw?.mdx?.checkMdx)
       jsxImportSource = commandLine.options.jsxImportSource || jsxImportSource
+
+      // Resolve external language plugins
+      const {plugins: externalPlugins, errors} = resolveLanguagePlugins(
+        commandLine.raw?.mdx,
+        (name) => require(name)
+      )
+
+      if (externalPlugins.length > 0) {
+        // External plugins are validated at runtime; cast is safe as URI extends string behavior
+        languagePlugins.push(
+          .../** @type {LanguagePlugin<URI>[]} */ (externalPlugins)
+        )
+      }
+
+      // Store errors for diagnostics (will be published in onInitialized)
+      if (errors.length > 0) {
+        pluginErrorsByTsconfig.set(tsconfig, errors)
+
+        // Also log to console for visibility
+        for (const error of errors) {
+          connection.console.error(`[MDX] ${error.message}`)
+        }
+      }
     }
 
-    return [
+    // Add MDX language plugin
+    languagePlugins.push(
       createMdxLanguagePlugin(
         remarkPlugins || defaultPlugins,
         virtualCodePlugins,
         checkMdx,
         jsxImportSource
       )
-    ]
+    )
+
+    // Collect extra file extensions from all plugins
+    for (const plugin of languagePlugins) {
+      const extraFileExtensions = /** @type {any} */ (plugin).typescript
+        ?.extraFileExtensions
+      if (Array.isArray(extraFileExtensions)) {
+        for (const ext of extraFileExtensions) {
+          if (ext.extension && !extraExtensions.includes(ext.extension)) {
+            extraExtensions.push(ext.extension)
+          }
+        }
+      }
+    }
+
+    return languagePlugins
   }
 })
 
@@ -140,6 +191,32 @@ connection.onInitialized(() => {
     )
   }
 
+  // Update extensions based on loaded plugins
+  for (const ext of extraExtensions) {
+    if (!extensions.includes(ext)) {
+      extensions.push(ext)
+    }
+  }
+
+  // Publish diagnostics for any language plugin loading errors
+  for (const [tsconfig, errors] of pluginErrorsByTsconfig) {
+    /** @type {Diagnostic[]} */
+    const diagnostics = errors.map((error) => ({
+      severity: DiagnosticSeverity.Error,
+      range: {
+        start: {line: 0, character: 0},
+        end: {line: 0, character: 0}
+      },
+      message: error.message,
+      source: 'mdx'
+    }))
+
+    connection.sendDiagnostics({
+      uri: URI.file(tsconfig).toString(),
+      diagnostics
+    })
+  }
+
   server.initialized()
   server.fileWatcher.watchFiles([`**/*.{${extensions.join(',')}}`])
 })

packages/language-server/lib/index.js

@@ -36,7 +36,8 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "volar-service-markdown": "0.0.65",
-    "volar-service-typescript": "0.0.65"
+    "volar-service-typescript": "0.0.65",
+    "vscode-languageserver": "^9.0.1"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

packages/language-server/package.json

@@ -1,7 +1,9 @@
 /**
  * @typedef {import('./plugins/plugin.js').VirtualCodePlugin} VirtualCodePlugin
+ * @typedef {import('./language-plugins/resolver.js').LanguagePluginLoadError} LanguagePluginLoadError
+ * @typedef {import('./language-plugins/resolver.js').ResolveLanguagePluginsResult} ResolveLanguagePluginsResult
  */
 
 export {createMdxLanguagePlugin} from './language-plugin.js'
 export {createMdxServicePlugin} from './service-plugin.js'
-export {resolvePlugins} from './tsconfig.js'
+export {resolvePlugins, resolveLanguagePlugins} from './tsconfig.js'