[POC] Start support typescript

[Kingwl]

Fixed #165

About the PR

It's just a proto for typescript support. As you can see, there's tons of bugs and many features need to implement or improve. However, It's might be the first step of better support.

About the code

• core: The conversion between the mdx and virtual typescript code.
• common: Common utilities for VSCode extension or TS plugin.
• language-service: VSCode language server and client. It's has been designed to pass some config in and support the language service between sourcecode(in this case is .mdx) and TypeScript.
• plugin: TS plugin to support check mdx isn .ts file.
• server.ts: Entry of language service server.
• client.ts: Entry of language service client.

PS: plugin is basically copies from @orta 's svelte plugin. And All the implement is inspired by @orta too.

Preview

[orta]

very cool

[JounQin]

@Kingwl Great thanks! I previously noticed unified-language-server created by @remcohaszing, is there any chance to reuse it here? Never mind if you think not or unnecessary.

[remcohaszing]

Awesome!

@JounQin Thanks for pinging me! I have been thinking of working in this myself, but haven’t gotten to it yet.

@Kingwl Great thanks! I previously noticed unified-language-server created by @remcohaszing, is there any chance to reuse it here? Never mind if you think not or unnecessary.

unified-language-server is for the specific purpose to provide unified-engine related features into editors. This pull request isn’t about that.

I need to provide this functionality monaco-editor for work. I’m personally interested in doing this in a way other editors can benefit.

My idea is to create the following projects:

• mdx-language-service (or @mdx-js/language-service) provides all the heavy lifting. It handles the logic to provide smart features, such as auto completion. hover tips, etc. It’s public API works with language-server-types.
• monaco-mdx (or @mdx-js/monaco) brings mdx-language-service functionality into monaco-editor.
• mdx-language-server is a thin layer which exposes mdx-language-service. This language server can be used by for example vim-lsp, nvim-lspconfig and emacs-lsp to provide mdx-language-service features to those editors.
• vscode-mdx (this project) provides mdx-language-server as a VS Code extension. This extension itself barely contains any logic.

This setup is also how for example TypeScript, JavaScript, JSON, CSS, and YAML support are added into both Monaco editor and VS Code.

Such clear distinctions also add to testability. A language service is fairly easy to test, as it just exposes JavaScript functions. Its test case can be extensive (100% coverage). A language server is a bit more annoying to test, but it’s doable. The language server test case doesn’t need to be as extensive as the language service tests. Tests for both Monaco editor and the VS Code extension can be minimal.

[JounQin]

I may start to copy/paste these codes after #207 been merged.

@Kingwl If you could continue the work, that would be awesome!