Make Monaco integration functional

demo/package.json

@@ -9,11 +9,13 @@
   },
   "dependencies": {
     "@mdx-js/monaco": "*",
+    "@types/node": "^18.0.0",
     "@types/webpack-env": "^1.0.0",
     "css-loader": "^6.0.0",
     "html-webpack-plugin": "^5.0.0",
     "mini-css-extract-plugin": "^2.0.0",
     "monaco-editor": "^0.41.0",
+    "path-browserify": "^1.0.0",
     "remark-frontmatter": "^4.0.0",
     "remark-gfm": "^3.0.0",
     "webpack": "^5.0.0",

demo/src/index.js

@@ -35,7 +35,9 @@ window.MonacoEnvironment = {
       }
 
       case 'mdx': {
-        return new Worker(new URL('mdx.worker.js', import.meta.url))
+        return new Worker(
+          new URL('@mdx-js/monaco/mdx.worker.js', import.meta.url)
+        )
       }
 
       default: {
@@ -60,7 +62,7 @@ monaco.languages.register({
 })
 
 // This is where we actually configure the MDX integration.
-initializeMonacoMdx(monaco, {
+await initializeMonacoMdx(monaco, {
   createData: {
     compilerOptions: {
       checkJs: true

demo/webpack.config.js

@@ -1,5 +1,9 @@
+import {createRequire} from 'node:module'
 import HtmlWebPackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import webpack from 'webpack'
+
+const require = createRequire(import.meta.url)
 
 /**
  * @type {import('webpack').Configuration}
@@ -8,7 +12,10 @@ const config = {
   devtool: 'source-map',
   entry: './src/index.js',
   resolve: {
-    conditionNames: ['worker']
+    conditionNames: ['worker'],
+    alias: {
+      path: require.resolve('path-browserify')
+    }
   },
   module: {
     exprContextRegExp: /$^/,
@@ -34,7 +41,8 @@ const config = {
   },
   plugins: [
     new HtmlWebPackPlugin(),
-    new MiniCssExtractPlugin({filename: '[contenthash].css'})
+    new MiniCssExtractPlugin({filename: '[contenthash].css'}),
+    new webpack.IgnorePlugin({resourceRegExp: /perf_hooks/})
   ]
 }
 

packages/monaco/index.js

@@ -12,14 +12,7 @@
  *   Options to pass to the MDX worker.
  */
 
-import {registerMarkerDataProvider} from 'monaco-marker-data-provider'
-import {
-  createCompletionItemProvider,
-  createDefinitionProvider,
-  createHoverProvider,
-  createMarkerDataProvider,
-  createReferenceProvider
-} from './lib/language-features.js'
+import * as volar from '@volar/monaco'
 
 /**
  * Initialize MDX IntelliSense for MDX.
@@ -28,73 +21,21 @@ import {
  *   The Monaco editor module.
  * @param {InitializeMonacoMdxOptions} [options]
  *   Additional options for MDX IntelliSense.
- * @returns {IDisposable}
+ * @returns {Promise<IDisposable>}
  *   A disposable.
  */
-export function initializeMonacoMdx(monaco, options) {
-  const worker = /** @type {MonacoWebWorker} */ (
-    monaco.editor.createWebWorker({
-      moduleId: '@mdx-js/monaco',
-      label: 'mdx',
-      keepIdleModels: true,
-      createData: /** @type {CreateData} */ ({
-        compilerOptions: options?.createData?.compilerOptions || {},
-        extraLibs: options?.createData?.extraLibs || {},
-        inlayHintsOptions: options?.createData?.inlayHintsOptions || {}
-      })
-    })
-  )
-
-  /**
-   * @param {Uri[]} resources
-   */
-  const getProxy = (...resources) => worker.withSyncedResources(resources)
-
-  /**
-   * Synchronize all MDX, JavaScript, and TypeScript files with the web worker.
-   *
-   * @param {ITextModel} model
-   */
-  const synchronize = (model) => {
-    const languageId = model.getLanguageId()
-    if (
-      languageId === 'mdx' ||
-      languageId === 'javascript' ||
-      languageId === 'javascriptreact' ||
-      languageId === 'typescript' ||
-      languageId === 'typescriptreact'
-    ) {
-      getProxy(model.uri)
-    }
-  }
-
-  monaco.editor.onDidChangeModelLanguage(({model}) => {
-    synchronize(model)
+export async function initializeMonacoMdx(monaco, options) {
+  const worker = monaco.editor.createWebWorker({
+    moduleId: '@mdx-js/monaco/mdx.worker.js',
+    label: 'mdx'
   })
-
   const disposables = [
     worker,
-    monaco.editor.onDidCreateModel(synchronize),
-    monaco.languages.registerCompletionItemProvider(
-      'mdx',
-      createCompletionItemProvider(monaco, getProxy)
-    ),
-    monaco.languages.registerDefinitionProvider(
-      'mdx',
-      createDefinitionProvider(monaco, getProxy)
-    ),
-    monaco.languages.registerHoverProvider(
-      'mdx',
-      createHoverProvider(monaco, getProxy)
-    ),
-    monaco.languages.registerReferenceProvider(
-      'mdx',
-      createReferenceProvider(monaco, getProxy)
-    ),
-    registerMarkerDataProvider(
-      monaco,
+    await volar.languages.registerProvides(
+      worker,
       'mdx',
-      createMarkerDataProvider(monaco, getProxy)
+      () => monaco.editor.getModels().map((model) => model.uri),
+      monaco.languages
     )
   ]