Skip to content

Commit 0fdf371

Browse files
remcohaszingremcohaszing
authored
feat: add initial intellisense (#226)
This is a first implementation of MDX IntelliSense for multiple editors. The idea is to turn this repository into a monorepo. The following packages have been added: - `@mdx-js/language-service` handles the actual logic needed for intellisense features. It wraps the TypeScript language service interface and handles MDX syntax. - `@mdx-js/language-server` provides `@mdx-js/language-service` as an actual language server. This package is supposed to be consumed by projects such as NeoVim, `vim-lsp`, `sublimelsp`, and Emacs `lsp-mode`. - `@mdx-js/language-client` is an internal package to integrates `@mdx-js/language-server` into VSCode. - `@mdx-js/monaco` integrates `@mdx-js/language-service` into Monaco editor. - `vscode-mdx` is the mono-repo root and provides `@mdx-js/language-server` as a VSCode plugin. Todos after these changes: - Go through “marketing” material, as in, examples, but also docs - Perhaps add tools like stylint for CSS in demos? - Lowercase `readme.md`, `license`? - Support the `components` prop - Host the demo (https://monaco.mdxjs.com styled consistently with MDX website? Or https://monaco-mdx.js.org analogous to https://monaco-tailwindcss.js.org / https://monaco-unified.js.org / https://monaco-yaml.js.org?) - Publish packages - Identify, test, and fix various corner cases - Support definitions referencing unopened files - #168 - Fix Windows tests - Move extension from project root into subpackage (blocked upstream) - Identify and implement missing TypeScript features - Support unified micromark syntax plugins (`frontmatter`, `gfm`, etc) in the language server - Support unified micromark syntax plugins in Monaco editor - Consider support for remark transformer plugins (`remark-mdx-frontmatter` introduces variables) - Consider support for rehype transformer plugins (`rehype-mdx-title` introduces a variable) - Support loose (invalid) JavaScript syntax Closes #165 (Intellisense is a broad concept. Please open new issues for specific missing features.) Closes #196 (I did use parts of this for inspiration. Thanks @Kingwl!) Closes #223
1 parent efeb027 commit 0fdf371

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+5383
-38
lines changed

‎.changeset/intellisense.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'vscode-mdx': minor
3+
---
4+
5+
Add experimental IntelliSense
6+
7+
To enable IntelliSense, set `mdx.experimentalLanguageServer` to `true` in your
8+
VSCode settings.
9+
You can verify it’s enabled by interacting with the JavaScript parts on an MDX
10+
document, for example by hovering an import or variable

‎.github/workflows/main.yml

+5-2
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,15 @@ jobs:
1313
with:
1414
node-version: ${{ matrix.node }}
1515
- run: npm install
16+
- run: npx playwright install --with-deps
1617
- run: npm test
1718
strategy:
1819
matrix:
1920
os:
20-
- macos-latest
2121
- ubuntu-latest
22-
- windows-latest
22+
# We should test on Windows, because the language server deals with
23+
# the file system.
24+
# Currently blocked by https://github.com/remcohaszing/playwright-monaco/issues/1
25+
# - windows-latest
2326
node:
2427
- 18

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@
33
*.tsbuildinfo
44
*.vsix
55
.vscode-test/
6+
dist/
67
node_modules/
8+
out/

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
out/
12
*.md
23
*.mdx

‎.vscode/launch.json

+26-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,32 @@
1010
"type": "extensionHost",
1111
"request": "launch",
1212
"runtimeExecutable": "${execPath}",
13-
"args": ["--extensionDevelopmentPath=${workspaceFolder}"]
13+
"args": [
14+
"--profile-temp",
15+
"--extensionDevelopmentPath=${workspaceFolder}",
16+
"${workspaceFolder}/fixtures/fixtures.code-workspace"
17+
],
18+
"presentation": {
19+
"hidden": true
20+
}
21+
},
22+
{
23+
"name": "Debug language server",
24+
"type": "node",
25+
"request": "attach",
26+
"port": 6009,
27+
"presentation": {
28+
"hidden": true
29+
},
30+
"skipFiles": ["<node_internals>/**", "**/node_modules/vscode-*/**"]
31+
}
32+
],
33+
"compounds": [
34+
{
35+
"preLaunchTask": "build",
36+
"name": "Extension + Language server",
37+
"configurations": ["Run Extension", "Debug language server"],
38+
"stopAll": true
1439
}
1540
]
1641
}

‎.vscode/tasks.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"type": "shell",
6+
"command": "npm",
7+
"args": ["run", "build:debug"],
8+
"label": "build",
9+
"presentation": {
10+
"clear": true,
11+
"echo": true
12+
},
13+
"group": {
14+
"kind": "build",
15+
"isDefault": true
16+
}
17+
}
18+
]
19+
}

‎.vscodeignore

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,7 @@
44
*.map
55
*.ts
66
*.tsbuildinfo
7-
node_modules
8-
test
7+
demo/
8+
fixtures/
9+
node_modules/
10+
packages/

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ Adds language support for [MDX][].
1212

1313
You can install this extension from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx).
1414

15+
## Settings
16+
17+
This extension provides the following settings:
18+
19+
* `mdx.experimentalLanguageServer`: Enable experimental IntelliSense support
20+
for MDX files. (`boolean`, default: false)
21+
1522
## Integration With [VS Code ESLint](https://github.com/microsoft/vscode-eslint)
1623

1724
1. First of all, you need to enable [eslint-plugin-mdx][] which makes it

‎demo/LICENSE

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

‎demo/README.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Demo of `@mdx-js/monaco`
2+
3+
## What is this?
4+
5+
This is a project to demo the `@mdx-js/monaco` package using [webpack][].
6+
When started, this starts a webserver that serves Monaco editor and a file tree.
7+
The contents of the `fixtures/demo` directory are loaded into [Monaco editor][].
8+
9+
## When should I use this?
10+
11+
You can use this demo to troubleshoot issues related to `@mdx-js/monaco`, or to
12+
see how it can be integrated in your own project.
13+
14+
## Use
15+
16+
Clone and install this repository.
17+
18+
```sh
19+
git clone https://github.com/mdx-js/vscode-mdx.git
20+
cd vscode-mdx
21+
npm install
22+
```
23+
24+
Now start it.
25+
26+
```sh
27+
npm start
28+
```
29+
30+
This will serve the demo on <http://localhost:8080>.
31+
32+
## Compatibility
33+
34+
This demo is compatible with evergreen browsers.
35+
36+
## Security
37+
38+
The demo only uses local content.
39+
No external resources are loaded.
40+
It’s safe to run and open.
41+
42+
## License
43+
44+
[MIT][] © [Remco Haszing][author]
45+
46+
[author]: https://github.com/remcohaszing
47+
48+
[mit]: LICENSE
49+
50+
[monaco editor]: https://github.com/microsoft/monaco-editor
51+
52+
[webpack]: https://webpack.js.org

‎demo/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@mdx-js/monaco-demo",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"private": true,
6+
"scripts": {
7+
"build": "tsc",
8+
"start": "webpack serve --mode development"
9+
},
10+
"dependencies": {
11+
"@mdx-js/monaco": "*",
12+
"@types/webpack-env": "^1.0.0",
13+
"css-loader": "^6.0.0",
14+
"html-webpack-plugin": "^5.0.0",
15+
"mini-css-extract-plugin": "^2.0.0",
16+
"monaco-editor": "^0.34.0",
17+
"webpack": "^5.0.0",
18+
"webpack-cli": "^5.0.0",
19+
"webpack-dev-server": "^4.0.0"
20+
}
21+
}

‎demo/src/index.css

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
:root {
2+
--background-color: hsl(0, 0%, 96%);
3+
--editor-background: hsl(60, 100%, 100%);
4+
--error-color: hsl(0, 85%, 62%);
5+
--foreground-color: hsl(0, 0%, 0%);
6+
--primary-color: hsl(189, 100%, 63%);
7+
--shadow-color: hsla(0, 0%, 27%, 0.239);
8+
--scrollbar-color: hsla(0, 0%, 47%, 0.4);
9+
--warning-color: hsl(49, 100%, 40%);
10+
}
11+
12+
@media (prefers-color-scheme: dark) {
13+
:root {
14+
--background-color: hsl(0, 0%, 23%);
15+
--editor-background: hsl(0, 0%, 12%);
16+
--foreground-color: hsl(0, 0%, 100%);
17+
--shadow-color: hsl(0, 0%, 43%);
18+
}
19+
}
20+
21+
body {
22+
background: var(--background-color);
23+
display: flex;
24+
flex-flow: column;
25+
font-family: sans-serif;
26+
height: 100vh;
27+
margin: 0;
28+
}
29+
30+
h1 {
31+
margin: 0 auto 0 1rem;
32+
}
33+
34+
.navbar {
35+
align-items: center;
36+
background: var(--primary-color);
37+
box-shadow: 0 5px 5px var(--shadow-color);
38+
display: flex;
39+
flex: 0 0 auto;
40+
height: 3rem;
41+
justify-content: space-between;
42+
}
43+
44+
.nav-icon {
45+
margin-right: 1rem;
46+
text-decoration: none;
47+
}
48+
49+
.nav-icon > img {
50+
vertical-align: middle;
51+
}
52+
53+
main {
54+
background: var(--editor-background);
55+
box-shadow: 0 0 10px var(--shadow-color);
56+
display: flex;
57+
flex: 1 1 auto;
58+
margin: 1.5rem;
59+
}
60+
61+
#files {
62+
border-right: 1px solid var(--shadow-color);
63+
color: var(--foreground-color);
64+
list-style: none;
65+
margin: 0;
66+
padding: 2rem 0;
67+
}
68+
69+
#files a {
70+
color: var(--foreground-color);
71+
display: block;
72+
padding: 0.25rem 1rem 0.25rem 0.5rem;
73+
text-decoration: none;
74+
}
75+
76+
#files a:hover,
77+
#files a:target {
78+
background: var(--shadow-color);
79+
}
80+
81+
.wrapper {
82+
display: flex;
83+
flex: 1 1 auto;
84+
flex-flow: column;
85+
}
86+
87+
#schema-selection {
88+
background-color: var(--editor-background);
89+
border: none;
90+
border-bottom: 1px solid var(--shadow-color);
91+
color: var(--foreground-color);
92+
width: 100%;
93+
}
94+
95+
#breadcrumbs {
96+
border-bottom: 1px solid var(--shadow-color);
97+
color: var(--foreground-color);
98+
flex: 0 0 1rem;
99+
}
100+
101+
.breadcrumb {
102+
cursor: pointer;
103+
}
104+
105+
#breadcrumbs::before,
106+
.breadcrumb:not(:last-child)::after {
107+
content: '›';
108+
margin: 0 0.2rem;
109+
}
110+
111+
.breadcrumb.array::before {
112+
content: '[]';
113+
}
114+
115+
.breadcrumb.object::before {
116+
content: '{}';
117+
}
118+
119+
#editor {
120+
flex: 1 1 auto;
121+
}
122+
123+
#problems {
124+
border-top: 1px solid var(--shadow-color);
125+
flex: 0 0 20vh;
126+
color: var(--foreground-color);
127+
overflow-y: scroll;
128+
}
129+
130+
.problem {
131+
align-items: center;
132+
cursor: pointer;
133+
display: flex;
134+
padding: 0.25rem;
135+
}
136+
137+
.problem:hover {
138+
background-color: var(--shadow-color);
139+
}
140+
141+
.problem-text {
142+
margin-left: 0.5rem;
143+
}
144+
145+
.problem .codicon-warning {
146+
color: var(--warning-color);
147+
}
148+
149+
.problem .codicon-error {
150+
color: var(--error-color);
151+
}
152+
153+
*::-webkit-scrollbar {
154+
box-shadow: 1px 0 0 0 var(--scrollbar-color) inset;
155+
width: 14px;
156+
}
157+
158+
*::-webkit-scrollbar-thumb {
159+
background: var(--scrollbar-color);
160+
}

0 commit comments

Comments
 (0)