Integrate Volar

- Volar handles the mapping between TypeScript and LSP.
- Volar handles the mapping between TypeScript and Monaco editor.
- Volar manages virtual files.
- Volar imports TypeScript directly. As a result, the Monaco editor
  integration now requires `path` to be polyfilled.
- It is no longer possible to pass compiler options in the Monaco editor
  integration.
- This adds editor features for YAML based on `yaml-language-server`.
  This has been contributed upstream to Volar and is pending review.
- Markdown features are now handled by
  `vscode-markdown-languageservice`. This will be contributed upstream
  to Volar soon.
- Markdown definitions are broken due to a bug in Volar.
- This adds `remark-frontmatter` with TOML and YAML support as well as
  `remark-gfm` by default unless specified otherwise in `tsconfig.json`.
- The language server now requires `typescript.tsdk` to be passed via
  initialization options.
- This adds support for debugging virtual documents using Volar labs.

Closes # 168
Closes # 284
Closes # 295
Closes # 298
Closes # 301

demo/package.json

@@ -14,6 +14,7 @@
     "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,13 +62,7 @@ monaco.languages.register({
 })
 
 // This is where we actually configure the MDX integration.
-initializeMonacoMdx(monaco, {
-  createData: {
-    compilerOptions: {
-      checkJs: true
-    }
-  }
-})
+await initializeMonacoMdx(monaco)
 
 // Synchronize the file tree on the left with the Monaco models. Files from
 // node_modules are hidden, but can be navigated to.

demo/webpack.config.js

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