feat: add initial intellisense

.changeset/intellisense.md

@@ -0,0 +1,10 @@
+---
+'vscode-mdx': minor
+---
+
+Add experimental IntelliSense
+
+To enable IntelliSense, set `mdx.experimentalLanguageServer` to `true` in your
+VSCode settings.
+You can verify it’s enabled by interacting with the JavaScript  parts on an MDX
+document, for example by hovering an import or variable

.github/workflows/main.yml

@@ -13,12 +13,15 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - run: npm install
+      - run: npx playwright install --with-deps
       - run: npm test
     strategy:
       matrix:
         os:
-          - macos-latest
           - ubuntu-latest
-          - windows-latest
+          # We should test on Windows, because the language server deals with
+          # the file system.
+          # Currently blocked by https://github.com/remcohaszing/playwright-monaco/issues/1
+          # - windows-latest
         node:
           - 18

.gitignore

@@ -3,4 +3,6 @@
 *.tsbuildinfo
 *.vsix
 .vscode-test/
+dist/
 node_modules/
+out/

.prettierignore

@@ -1,2 +1,3 @@
+out/
 *.md
 *.mdx

.vscode/launch.json

@@ -10,7 +10,32 @@
       "type": "extensionHost",
       "request": "launch",
       "runtimeExecutable": "${execPath}",
-      "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
+      "args": [
+        "--profile-temp",
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "${workspaceFolder}/fixtures/fixtures.code-workspace"
+      ],
+      "presentation": {
+        "hidden": true
+      }
+    },
+    {
+      "name": "Debug language server",
+      "type": "node",
+      "request": "attach",
+      "port": 6009,
+      "presentation": {
+        "hidden": true
+      },
+      "skipFiles": ["<node_internals>/**", "**/node_modules/vscode-*/**"]
+    }
+  ],
+  "compounds": [
+    {
+      "preLaunchTask": "build",
+      "name": "Extension + Language server",
+      "configurations": ["Run Extension", "Debug language server"],
+      "stopAll": true
     }
   ]
 }

.vscode/tasks.json

@@ -0,0 +1,19 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "shell",
+      "command": "npm",
+      "args": ["run", "build", "--", "--sourcemap"],
+      "label": "build",
+      "presentation": {
+        "clear": true,
+        "echo": true
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

README.md

@@ -12,6 +12,13 @@ Adds language support for [MDX][].
 
 You can install this extension from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx).
 
+## Settings
+
+This extension provides the following settings:
+
+*   `mdx.experimentalLanguageServer`: Enable experimental IntelliSense support
+    for MDX files.  (`boolean`, default: false)
+
 ## Integration With [VS Code ESLint](https://github.com/microsoft/vscode-eslint)
 
 1.  First of all, you need to enable [eslint-plugin-mdx][] which makes it

demo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Remco Haszing <remcohaszing@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

demo/README.md

@@ -0,0 +1,52 @@
+# Demo of `@mdx-js/monaco`
+
+## What is this?
+
+This is a project to demo the `@mdx-js/monaco` package using [webpack][].
+When started, this starts a webserver that serves Monaco editor and a file tree.
+The contents of the `fixtures/demo` directory are loaded into [Monaco editor][].
+
+## When should I use this?
+
+You can use this demo to troubleshoot issues related to `@mdx-js/monaco`, or to
+see how it can be integrated in your own project.
+
+## Use
+
+Clone and install this repository.
+
+```sh
+git clone https://github.com/mdx-js/vscode-mdx.git
+cd vscode-mdx
+npm install
+```
+
+Now start it.
+
+```sh
+npm start
+```
+
+This will serve the demo on <http://localhost:8080>.
+
+## Compatibility
+
+This demo is compatible with evergreen browsers.
+
+## Security
+
+The demo only uses local content.
+No external resources are loaded.
+It’s safe to run and open.
+
+## License
+
+[MIT][] © [Remco Haszing][author]
+
+[author]: https://github.com/remcohaszing
+
+[mit]: LICENSE
+
+[monaco editor]: https://github.com/microsoft/monaco-editor
+
+[webpack]: https://webpack.js.org

demo/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@mdx-js/monaco-demo",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "tsc",
+    "start": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "@mdx-js/monaco": "*",
+    "@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.34.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.0.0"
+  }
+}

demo/src/index.css

@@ -0,0 +1,160 @@
+:root {
+  --background-color: hsl(0, 0%, 96%);
+  --editor-background: hsl(60, 100%, 100%);
+  --error-color: hsl(0, 85%, 62%);
+  --foreground-color: hsl(0, 0%, 0%);
+  --primary-color: hsl(189, 100%, 63%);
+  --shadow-color: hsla(0, 0%, 27%, 0.239);
+  --scrollbar-color: hsla(0, 0%, 47%, 0.4);
+  --warning-color: hsl(49, 100%, 40%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: hsl(0, 0%, 23%);
+    --editor-background: hsl(0, 0%, 12%);
+    --foreground-color: hsl(0, 0%, 100%);
+    --shadow-color: hsl(0, 0%, 43%);
+  }
+}
+
+body {
+  background: var(--background-color);
+  display: flex;
+  flex-flow: column;
+  font-family: sans-serif;
+  height: 100vh;
+  margin: 0;
+}
+
+h1 {
+  margin: 0 auto 0 1rem;
+}
+
+.navbar {
+  align-items: center;
+  background: var(--primary-color);
+  box-shadow: 0 5px 5px var(--shadow-color);
+  display: flex;
+  flex: 0 0 auto;
+  height: 3rem;
+  justify-content: space-between;
+}
+
+.nav-icon {
+  margin-right: 1rem;
+  text-decoration: none;
+}
+
+.nav-icon > img {
+  vertical-align: middle;
+}
+
+main {
+  background: var(--editor-background);
+  box-shadow: 0 0 10px var(--shadow-color);
+  display: flex;
+  flex: 1 1 auto;
+  margin: 1.5rem;
+}
+
+#files {
+  border-right: 1px solid var(--shadow-color);
+  color: var(--foreground-color);
+  list-style: none;
+  margin: 0;
+  padding: 2rem 0;
+}
+
+#files a {
+  color: var(--foreground-color);
+  display: block;
+  padding: 0.25rem 1rem 0.25rem 0.5rem;
+  text-decoration: none;
+}
+
+#files a:hover,
+#files a:target {
+  background: var(--shadow-color);
+}
+
+.wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: column;
+}
+
+#schema-selection {
+  background-color: var(--editor-background);
+  border: none;
+  border-bottom: 1px solid var(--shadow-color);
+  color: var(--foreground-color);
+  width: 100%;
+}
+
+#breadcrumbs {
+  border-bottom: 1px solid var(--shadow-color);
+  color: var(--foreground-color);
+  flex: 0 0 1rem;
+}
+
+.breadcrumb {
+  cursor: pointer;
+}
+
+#breadcrumbs::before,
+.breadcrumb:not(:last-child)::after {
+  content: '›';
+  margin: 0 0.2rem;
+}
+
+.breadcrumb.array::before {
+  content: '[]';
+}
+
+.breadcrumb.object::before {
+  content: '{}';
+}
+
+#editor {
+  flex: 1 1 auto;
+}
+
+#problems {
+  border-top: 1px solid var(--shadow-color);
+  flex: 0 0 20vh;
+  color: var(--foreground-color);
+  overflow-y: scroll;
+}
+
+.problem {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 0.25rem;
+}
+
+.problem:hover {
+  background-color: var(--shadow-color);
+}
+
+.problem-text {
+  margin-left: 0.5rem;
+}
+
+.problem .codicon-warning {
+  color: var(--warning-color);
+}
+
+.problem .codicon-error {
+  color: var(--error-color);
+}
+
+*::-webkit-scrollbar {
+  box-shadow: 1px 0 0 0 var(--scrollbar-color) inset;
+  width: 14px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color);
+}

demo/src/index.ejs

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Monaco MDX</title>
+    <meta
+      name="description"
+      content="MDX support for Monaco editor"
+    />
+    <meta
+      name="theme-color"
+      content="#42e3ff"
+    />
+  </head>
+  <body>
+    <nav class="navbar">
+      <h1>Monaco MDX</h1>
+    </nav>
+    <main>
+      <nav id="files"></nav>
+      <div class="wrapper">
+        <div id="breadcrumbs"></div>
+        <div id="editor"></div>
+        <div id="problems"></div>
+      </div>
+    </main>
+  </body>
+</html>