feat: use monaco

[yyx990803]

This makes the embed a lot larger - ideally, we want it to be swappable:

import { Repl, MonacoEditor, CodemirrorEditor } from '@vue/repl'

<Repl :editor="MonacoEditor" />

An editor implementation is required so that we can treeshake the one that is not used - this will be a breaking change and we can release 2.0 for that.

[sxzz]

Can we add a shortcut to format code? (using Prettier?)

[yyx990803]

Alternatively, to make it easier::

import { MonacoRepl, CodemirrorRepl } from '@vue/repl'

[Kingwl]

Adapt volar into monaco.

/cc: @johnsoncodehk I'm mot familiar enough with volar, hope to get some comments.

@Justineo Might be interested in this too.

[Kingwl]

Cool! Thanks @johnsoncodehk !

[Kingwl]

I'd like to extrace the monaco impl to avoid default monaco editor implementation soon.

[johnsoncodehk]

I implemented the part related to the Volar Language Service, I'm not familiar with the monaco part, so I'll leave it to you.

Issues have to resolve:

• At present, the work of the language service will block the main thread, and the screen will be stuck when typing, you should use web worker for monaco.
• Cannot jump to files like @vue/reactivity/dist/reactivity.d.ts with Go to definition, you may need to provide them to monaco.
• I commented CodeLens and doExecuteCommand code because I don't know how to execute vsocode's workspace.applyEdit through monaco for now.

Feel free to ask me if there still have any problem about the Volar part, good luck. :)

---

Edit: I missed auto insertion features like auto close tag, will add it later.

[Kingwl]

Updated as webworker. But some questions here:

• Don't know where can we add the auto insert features. The worker seems cannot access editor directly.
• In my memory take over mode can handle TypeScript and JavaScript files. Are there any possible to enable take over mode in monaco?

[johnsoncodehk]

• Don't know where can we add the auto insert features. The worker seems cannot access editor directly.

Yes it can't access editor directly, you need to custom request listener to receive and response auto insert request. See:

• https://github.com/johnsoncodehk/volar/blob/a5c112eb488fbbbff40f62637ca70e396720105b/extensions/vscode-vue-language-features/src/features/autoInsertion.ts#L65-L66
• https://github.com/johnsoncodehk/volar/blob/a5c112eb488fbbbff40f62637ca70e396720105b/packages/vue-language-server/src/features/languageFeatures.ts#L350-L354

• In my memory take over mode can handle TypeScript and JavaScript files. Are there any possible to enable take over mode in monaco?

It do not need special config in language server, just feed any project's .ts / .js files to language service apis, Volar can handle it if you have provide these files by language service host.

[Kingwl]

@yyx990803 @johnsoncodehk

How about just leave the monaco out of the repl. The repl only support the editor props. And we can provide monaco editor in another package like: vue-repl-monaco-editor.

[yyx990803]

@Kingwl I'm open to that

[vanillajonathan]

Be aware that from what I've heard Monaco doesn't work on mobile devices.

Maybe CodeMirror 6 ought to be considered?

The Monaco editor is not supported in mobile browsers or mobile web frameworks.

https://microsoft.github.io/monaco-editor/

[johnsoncodehk]

I just move Monaco related modules to peerDependencies for this PR, for users who need to use Monaco editor, all related modules should list in package.json.

{
  "dependencies": {
    "@vue/repl": "1.3.2",
    "@volar/monaco": "1.3.0-alpha.3-patch.2",
    "@volar/vue-language-service": "1.2.2-alpha.0",
    "monaco-editor-core": "^0.36.1",
    "monaco-editor-textmate": "^4.0.0",
    "monaco-textmate": "^3.0.1",
    "monaco-volar": "^0.1.1",
    "onigasm": "^2.2.5",
    // ...
  }
}

The advantage of this is to avoid over-designing now, even if we want to move the Monaco integration out of the repo, or use monorepo in the future, it is easy to migrate.