Resolve remark plugins synchronously (#500)

TypeScript plugins only support a synchronous API. Volar has a way to
support asynchronous plugins, but it’s hacky and keeps breaking. This
change makes the loading of remark plugins synchronous, allowing us to
make the TypeScript plugin synchronous as well.

For now jiti is used to load plugins synchronously. As soon as VSCode
ships with a Node.js version that supports `require(esm)`, we can
replace jiti with `createRequire()`.

Author: remcohaszing

.changeset/eighty-cats-glow.md

@@ -0,0 +1,5 @@
+---
+'@mdx-js/typescript-plugin': minor
+---
+
+Make the plugin synchronous

.changeset/petite-keys-count.md

@@ -0,0 +1,6 @@
+---
+'@mdx-js/typescript-plugin': minor
+'@mdx-js/language-server': minor
+---
+
+Use jiti to load ESM synchronously

.changeset/social-items-cut.md

@@ -0,0 +1,5 @@
+---
+'@mdx-js/language-service': minor
+---
+
+Make resolveRemarkPlugins synchronous

packages/language-server/lib/index.js

@@ -1,13 +1,12 @@
 #!/usr/bin/env node
 
 /**
- * @import {PluggableList, Plugin} from 'unified'
+ * @import {PluggableList} from 'unified'
  */
 
 import assert from 'node:assert'
 import path from 'node:path'
 import process from 'node:process'
-import {pathToFileURL} from 'node:url'
 import {
   createMdxLanguagePlugin,
   createMdxServicePlugin,
@@ -19,7 +18,7 @@ import {
   createTypeScriptProject,
   loadTsdkByPath
 } from '@volar/language-server/node.js'
-import {loadPlugin} from 'load-plugin'
+import {createJiti} from 'jiti'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import {create as createMarkdownServicePlugin} from 'volar-service-markdown'
@@ -52,8 +51,8 @@ connection.onInitialize(async (parameters) => {
     createTypeScriptProject(
       typescript,
       diagnosticMessages,
-      async ({configFileName}) => ({
-        languagePlugins: await getLanguagePlugins(configFileName)
+      ({configFileName}) => ({
+        languagePlugins: getLanguagePlugins(configFileName)
       })
     ),
     getLanguageServicePlugins()
@@ -81,7 +80,7 @@ connection.onInitialize(async (parameters) => {
   /**
    * @param {string | undefined} tsconfig
    */
-  async function getLanguagePlugins(tsconfig) {
+  function getLanguagePlugins(tsconfig) {
     /** @type {PluggableList | undefined} */
     let plugins
     let checkMdx = false
@@ -100,12 +99,11 @@ connection.onInitialize(async (parameters) => {
         undefined,
         tsconfig
       )
-      plugins = await resolveRemarkPlugins(
+      const jiti = createJiti(tsconfig)
+
+      plugins = resolveRemarkPlugins(
         commandLine.raw?.mdx,
-        (name) =>
-          /** @type {Promise<Plugin>} */ (
-            loadPlugin(name, {prefix: 'remark', from: pathToFileURL(cwd) + '/'})
-          )
+        (name) => jiti(name).default
       )
       checkMdx = Boolean(commandLine.raw?.mdx?.checkMdx)
       jsxImportSource = commandLine.options.jsxImportSource || jsxImportSource

packages/language-server/package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@mdx-js/language-service": "0.6.2",
     "@volar/language-server": "~2.4.0",
-    "load-plugin": "^6.0.0",
+    "jiti": "^2.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "volar-service-markdown": "0.0.64",

packages/language-service/lib/tsconfig.js

@@ -7,13 +7,13 @@
  *
  * @param {unknown} mdxConfig
  *   The parsed command line options from which to resolve plugins.
- * @param {(name: string) => Plugin | PromiseLike<Plugin>} resolvePlugin
+ * @param {(name: string) => Plugin} resolvePlugin
  *   A function which takes a plugin name, and resolvs it to a remark plugin.
- * @returns {Promise<PluggableList | undefined>}
+ * @returns {PluggableList | undefined}
  *   An array of resolved plugins, or `undefined` in case of an invalid
  *   configuration.
  */
-export async function resolveRemarkPlugins(mdxConfig, resolvePlugin) {
+export function resolveRemarkPlugins(mdxConfig, resolvePlugin) {
   if (
     typeof mdxConfig !== 'object' ||
     !mdxConfig ||
@@ -36,7 +36,7 @@ export async function resolveRemarkPlugins(mdxConfig, resolvePlugin) {
     return
   }
 
-  /** @type {Promise<Pluggable>[]} */
+  /** @type {Pluggable[]} */
   const plugins = []
   for (const maybeTuple of pluginArray) {
     const [name, ...options] = Array.isArray(maybeTuple)
@@ -47,12 +47,8 @@ export async function resolveRemarkPlugins(mdxConfig, resolvePlugin) {
       continue
     }
 
-    plugins.push(
-      Promise.resolve(name)
-        .then(resolvePlugin)
-        .then((plugin) => [plugin, ...options])
-    )
+    plugins.push([resolvePlugin(name), ...options])
   }
 
-  return Promise.all(plugins)
+  return plugins
 }

packages/typescript-plugin/lib/index.cjs

@@ -2,67 +2,60 @@
 
 /**
  * @import {TsConfigSourceFile} from 'typescript'
- * @import {Plugin} from 'unified'
  */
 
-const {pathToFileURL} = require('node:url')
 const {
   createMdxLanguagePlugin,
   resolveRemarkPlugins
 } = require('@mdx-js/language-service')
 const {
-  createAsyncLanguageServicePlugin
-} = require('@volar/typescript/lib/quickstart/createAsyncLanguageServicePlugin.js')
-const {loadPlugin} = require('load-plugin')
+  createLanguageServicePlugin
+} = require('@volar/typescript/lib/quickstart/createLanguageServicePlugin.js')
+const {createJiti} = require('jiti')
 const {default: remarkFrontmatter} = require('remark-frontmatter')
 const {default: remarkGfm} = require('remark-gfm')
 
-const plugin = createAsyncLanguageServicePlugin(
-  ['.mdx'],
-  2 /* JSX */,
-  async (ts, info) => {
-    if (info.project.projectKind !== ts.server.ProjectKind.Configured) {
-      return {
-        languagePlugins: [
-          createMdxLanguagePlugin([
-            [remarkFrontmatter, ['toml', 'yaml']],
-            remarkGfm
-          ])
-        ]
-      }
-    }
-
-    const cwd = info.project.getCurrentDirectory()
-    const configFile = /** @type {TsConfigSourceFile} */ (
-      info.project.getCompilerOptions().configFile
-    )
-
-    const commandLine = ts.parseJsonSourceFileConfigFileContent(
-      configFile,
-      ts.sys,
-      cwd,
-      undefined,
-      configFile.fileName
-    )
-
-    const plugins = await resolveRemarkPlugins(
-      commandLine.raw?.mdx,
-      (name) =>
-        /** @type {Promise<Plugin>} */ (
-          loadPlugin(name, {prefix: 'remark', from: pathToFileURL(cwd) + '/'})
-        )
-    )
-
+const plugin = createLanguageServicePlugin((ts, info) => {
+  if (info.project.projectKind !== ts.server.ProjectKind.Configured) {
     return {
       languagePlugins: [
-        createMdxLanguagePlugin(
-          plugins || [[remarkFrontmatter, ['toml', 'yaml']], remarkGfm],
-          Boolean(commandLine.raw?.mdx?.checkMdx),
-          commandLine.options.jsxImportSource
-        )
+        createMdxLanguagePlugin([
+          [remarkFrontmatter, ['toml', 'yaml']],
+          remarkGfm
+        ])
       ]
     }
   }
-)
+
+  const cwd = info.project.getCurrentDirectory()
+  const configFile = /** @type {TsConfigSourceFile} */ (
+    info.project.getCompilerOptions().configFile
+  )
+
+  const commandLine = ts.parseJsonSourceFileConfigFileContent(
+    configFile,
+    ts.sys,
+    cwd,
+    undefined,
+    configFile.fileName
+  )
+
+  const jiti = createJiti(configFile.fileName)
+
+  const plugins = resolveRemarkPlugins(
+    commandLine.raw?.mdx,
+    (name) => jiti(name).default
+  )
+
+  return {
+    languagePlugins: [
+      createMdxLanguagePlugin(
+        plugins || [[remarkFrontmatter, ['toml', 'yaml']], remarkGfm],
+        Boolean(commandLine.raw?.mdx?.checkMdx),
+        commandLine.options.jsxImportSource
+      )
+    ]
+  }
+})
 
 module.exports = plugin

packages/typescript-plugin/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@mdx-js/language-service": "0.6.2",
     "@volar/typescript": "~2.4.0",
-    "load-plugin": "^6.0.0",
+    "jiti": "^2.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0"
   },