feat: add initial intellisense #226

remcohaszing · 2022-09-08T15:09:24Z

This is a proof of concept for MDX intellisense support 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 provides a JavaScript API implementing interfaces from vscode-languageserver-types.~~ 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/monaco integrates @mdx-js/language-service into Monaco editor.
vscode-mdx provides @mdx-js/language-server as a VSCode plugin. ~~Currently the VSCode extension is the monorepo root and the client code lives in @mdx-js/language-client, but I think it makes sense to merge both into a (private) package vscode-mdx.~~ vsce doesn’t seem to support npm workspaces.

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

This is a proof of concept for MDX intellisense support 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 provides a JavaScript API implementing interfaces from `vscode-languageserver-types`. - `@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/monaco` integrates `@mdx-js/language-service` into Monaco editor. - `vscode-mdx` provides `@mdx-js/language-server` as a VSCode plugin. Currently the VSCode extension is the monorepo root and the client code lives in `@mdx-js/language-client`, but I think it makes sense to merge both into a (private) package `vscode-mdx`. The current implementation is still very raw. It just provides definitions for link references. The next big step is to integrate TypeScript.

changeset-bot · 2022-09-08T15:09:27Z

🦋 Changeset detected

Latest commit: ad45694

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-09-08T15:09:44Z

📊 Package size report `No changes`

File	Before	After
Total _{(Includes all files)}	`29.7 kB`	`29.7 kB`
Tarball size	`12.4 kB`	`12.4 kB`

Unchanged files

File	Size
`.changeset/config.json`	`312 B`
`.changeset/README.md`	`510 B`
`.commitlintrc`	`35 B`
`.editorconfig`	`161 B`
`.eslintignore`	`32 B`
`.eslintrc`	`191 B`
`.github/FUNDING.yml`	`234 B`
`.github/workflows/ci.yml`	`551 B`
`.github/workflows/pkg-size.yml`	`496 B`
`.github/workflows/publish.yml`	`1.2 kB`
`.github/workflows/release.yml`	`323 B`
`.github/workflows/version.yml`	`853 B`
`.lintstagedrc.js`	`46 B`
`.prettierrc`	`24 B`
`.remarkrc`	`42 B`
`.renovaterc`	`35 B`
`.simple-git-hooks.js`	`51 B`
`.vscode/launch.json`	`540 B`
`.vscodeignore`	`103 B`
`.yarnrc`	`20 B`
`assets/mdx.png`	`3.3 kB`
`CHANGELOG.md`	`3.9 kB`
`language-configuration.jsonc`	`1.1 kB`
`LICENSE`	`1.1 kB`
`package.json`	`4.6 kB`
`patches/eslint-mdx+2.0.2.patch`	`796 B`
`README.md`	`7.3 kB`
`syntaxes/mdx.tmLanguage.json`	`1.3 kB`
`test/component.js`	`54 B`
`test/fixture.mdx`	`423 B`

_{🤖 This report was automatically generated by pkg-size-action}

yarn.lock

packages/language-service/lib/location-links.js

.eslintrc

Vite has some issues with resolving web workers.

It can be extended with plugins

remcohaszing · 2022-10-25T13:04:25Z

I think this is now usable enough to be released as an experimental feature. I.e. it could be opt-in using a boolean setting mdx.experimentalLanguageServer.

remcohaszing · 2023-01-06T14:31:14Z

As far as I’m concerned, this PR is ready. CI is failing due to an azure PPA outage. I would love CI to pass though, given the impact of these changes. To anyone who has permissions (including myself): Feel free to retrigger whenever you feel like it.

.changeset/intellisense.md

.github/workflows/main.yml

demo/src/index.js

demo/package.json

package.json

packages/language-server/README.md

wooorm · 2023-01-06T16:04:26Z

packages/language-server/index.js

@@ -0,0 +1,340 @@
+#!/usr/bin/env node


Very few comments here, would be useful to explain what does what

IMO all code in this file is fairly self-explanatory. Is something specific unclear?

It’s the core file that integrates all user events with certain actions in utilities.
I think this is the place where you can explain what user actions will result in what “computer responses”.
For example, in the connection.onHover handler, you can explain what a user has
to do to trigger this event, and what we’re going to do in response.
This might seem really clear (well, user has to hover, something will be shown in response), but, reading that code, I can see that you call some utility, but I don’t know what you do with that, why does it always return TypeScript that can be wrapped in a fenced code block ```ts?
Or, reading connection.onPrepareRename, what will it do? What is the difference between prepare and request?

Some of these are just copy-pasted from other implementations. I.e. I looked at some TypeScript language servers I found, the official TypeScript integration in VSCode, the Monaco editor TypeScript integration. I don’t know why it’s formatted like that, but it works and it’s consistently used like that in the ecosystem.

I don’t really feel the need to document each request type, because it’s already explained in the LSP specification.

packages/language-service/lib/index.js

packages/monaco/lib/convert.js

wooorm · 2023-01-06T16:14:32Z

To dos after:

Go through “marketing” material, as in, examples, but also docs
Perhaps add tools like stylint for CSS in demos?
Lowercase readme.md, license?

Q: What are other things that should be checked / improved / added later?

remcohaszing · 2023-01-06T19:44:56Z

More todos:

Support the components prop #260
Host the demo #261
Publish packages
Identify, test, and fix various corner cases
Support definitions referencing unopened files #262
Support markdown headings in document symbols #168
Fix Windows tests
Move vscode-mdx extension into a workspace #259
Identify and implement missing TypeScript features
Support remark syntax plugins in @mdx-js/language-server #266
Support remark syntax plugins in @mdx-js/monaco #264
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 #267

I intend to create more detailed issues for these once this PR gets merged.

demo/src/index.js

remcohaszing · 2023-01-13T15:09:06Z

IntelliSense is now released behind a flag. More info on how to try it out here: https://github.com/mdx-js/vscode-mdx/releases/tag/v1.1.0. And see also the announcement on Twitter: https://twitter.com/remcohaszing/status/1613910319805382657

karlhorky · 2023-01-14T17:47:57Z

Amazing, thanks @remcohaszing 🙌 Long journey to get this to the state where it is now, kudos on that!

karlhorky · 2023-01-14T17:48:38Z

I wanted to ask where the correct place to report issues is, because I ran into a first issue trying to parse MDX which uses JavaScript inside Front Matter, as below:

---
courseModules: [{ courseId: 3, slug: 'changes' }]
---

# Changes

...more content...

The error from tsMDX is:

Could not parse expression with acorn: Unexpected content after expression(tsMDX)

Screenshot:

I guess it's possible that I'm also using MDX in an unexpected / incorrect way here, maybe there's something I need to change...

remcohaszing · 2023-01-15T20:41:17Z

@karlhorky Thanks for trying this out!

The issue tracker of this project is the right place to report. However, the issue you’re running into has already been reported: #266. The public interface for that feature requires some discussion though. I welcome any input in the discussion there.

ChristianMurphy reviewed Sep 8, 2022

View reviewed changes

yarn.lock Outdated Show resolved Hide resolved

packages/language-service/lib/location-links.js Outdated Show resolved Hide resolved

.eslintrc Outdated Show resolved Hide resolved

remcohaszing added 24 commits September 15, 2022 11:51

chore(monaco): replace Vite with Webpack

665ac34

Vite has some issues with resolving web workers.

feat: add TypeScript based hovers

e2dae5d

feat: enhance TypeScript integration

471109d

feat: implement more intellisense features

adbbf39

feat: support diagnostics

a907d6d

feat: restore support for markdown link definition

bdcf240

fix: fix LSP definitions

da93ff1

chore: some cleanups

14481ca

feat: provide completions

a18dcde

chore: move convert functions into separate modules

73bee60

chore: move processor into language service

44024c0

It can be extended with plugins

feat: support completion in the language server

682256f

chore: support references in language server

b00be7f

feat: support diagnosics in language server

ae30c6d

fix: fix language service management

7dcc219

refactor: use TypeScript’s builtin displayPartsToString

c94b3a6

refactor: remove console.log

2990c31

fix: display location links for unopened files

7b8eec5

refactor: use helper function to create internal host

91c4856

chore: update yarn.lock

1f113ae

fix: fix module resolution and caching issues

01f9ee7

refactor: remove useless function body

ef57e01

fix: fix for Monaco editor

8ad411c

fix: handle parsing errors

04769a0

remcohaszing marked this pull request as ready for review October 25, 2022 13:04

Add changeset for IntelliSense

7ffbaf9

Set language server process title

b8ef978

This comment was marked as off-topic.

Sign in to view

Omit source map from production build

f5cf2aa

remcohaszing requested a review from wooorm January 6, 2023 15:50

wooorm reviewed Jan 6, 2023

View reviewed changes

remcohaszing added 5 commits January 6, 2023 17:24

Fix IntelliSense casing

77d95d5

Explain MDX/TypeScript snapshot synchronization

d8e8e5e

Add readme and license to demo

3ff1e0c

Explain why Windows tests are disabled

0c0c981

Explain how one can verity MDX intellisense is working

c076303

mcrascal mentioned this pull request Jan 10, 2023

VS Code syntax highlighting? File Type Icon? pngwn/MDsveX#121

Open

remcohaszing requested a review from wooorm January 12, 2023 09:36

wooorm approved these changes Jan 12, 2023

View reviewed changes

demo/src/index.js Show resolved Hide resolved

remcohaszing added 2 commits January 12, 2023 11:16

Add explanations to the Monaco editor demo

5af2c05

Configure xo env

23a22e2

wooorm approved these changes Jan 12, 2023

View reviewed changes

remcohaszing added 2 commits January 12, 2023 12:49

Include builtin TypeScript libs in VSCode bundle

87ebb52

Fix .vscodeignore

ad45694

remcohaszing merged commit 0fdf371 into mdx-js:main Jan 12, 2023

github-actions bot mentioned this pull request Jan 13, 2023

chore: release vscode-mdx #257

Merged

llllvvuu mentioned this pull request Sep 24, 2023

feat(marksman): enable for markdown.mdx neovim/nvim-lspconfig#2740

Merged

karlhorky mentioned this pull request Jun 28, 2024

Auto-import IntelliSense of React components missing #452

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add initial intellisense #226

feat: add initial intellisense #226

remcohaszing commented Sep 8, 2022 •

edited

Loading

changeset-bot bot commented Sep 8, 2022 •

edited

Loading

github-actions bot commented Sep 8, 2022 •

edited

Loading

remcohaszing commented Oct 25, 2022

remcohaszing commented Jan 6, 2023 •

edited

Loading

This comment was marked as off-topic.

wooorm Jan 6, 2023

remcohaszing Jan 6, 2023

wooorm Jan 12, 2023

remcohaszing Jan 12, 2023

wooorm commented Jan 6, 2023

remcohaszing commented Jan 6, 2023 •

edited

Loading

remcohaszing commented Jan 13, 2023

karlhorky commented Jan 14, 2023

karlhorky commented Jan 14, 2023

remcohaszing commented Jan 15, 2023

feat: add initial intellisense #226

feat: add initial intellisense #226

Conversation

remcohaszing commented Sep 8, 2022 • edited Loading

changeset-bot bot commented Sep 8, 2022 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 8, 2022 • edited Loading

📊 Package size report No changes

remcohaszing commented Oct 25, 2022

remcohaszing commented Jan 6, 2023 • edited Loading

This comment was marked as off-topic.

wooorm Jan 6, 2023

Choose a reason for hiding this comment

remcohaszing Jan 6, 2023

Choose a reason for hiding this comment

wooorm Jan 12, 2023

Choose a reason for hiding this comment

remcohaszing Jan 12, 2023

Choose a reason for hiding this comment

wooorm commented Jan 6, 2023

remcohaszing commented Jan 6, 2023 • edited Loading

remcohaszing commented Jan 13, 2023

karlhorky commented Jan 14, 2023

karlhorky commented Jan 14, 2023

remcohaszing commented Jan 15, 2023

remcohaszing commented Sep 8, 2022 •

edited

Loading

changeset-bot bot commented Sep 8, 2022 •

edited

Loading

github-actions bot commented Sep 8, 2022 •

edited

Loading

📊 Package size report `No changes`

remcohaszing commented Jan 6, 2023 •

edited

Loading

remcohaszing commented Jan 6, 2023 •

edited

Loading