Accessing monaco in Theia
November 28, 2019 at 10:54amAccessing monaco in Theia
November 28, 2019 at 10:54am (Edited 3 years ago)I created a demo a while back which added various libraries and customised monaco for our use case. However we decided due to Theia being so feature rich we'd use Theia instead. However there are still some things that we'd like to carry over from the monaco demo, however we can't figure out the best place to add the changes to monaco (various language libraries etc). We want to add extra libraries to Javascript/TypeScript.
How would I access these in Theia?
Thanks
November 28, 2019 at 4:58pm
in Theia we don't rely on typescript language services but on language servers or on VS Code typescript extension
with language servers, you should install typings in package.json of your project
November 29, 2019 at 9:08am
November 29, 2019 at 7:14pm
Do you have a project with package.json? Usually one can install typing for a library with
npm install /mylib, sometime libraries are coming with typings already.December 2, 2019 at 7:54am
Yes we have a typings library - can these be then added to the language server to be picked up a standard library?
The kind of projects we are using for Theia won't have a package.json or all of the code avilable for the users to edit. The monaco approach of loading the external library worked well in our case. Am hoping we can do something similar with the language server?
December 3, 2019 at 5:34am
I don't think it is possible with the language server or VS Code extension. At least I could not find anything about it in VS Code docs. Please someone correct me if i'm wrong.
You can also use your approach, so don't use
/typescript, but add a dependency to Monaco typescript language services package. You will need a custom webpack config which copy code of this package to the final app, similarly how it is done for css and html languages by default. Please have a look at generated webpack config for it.How to customize a webpack config: https://github.com/eclipse-theia/theia/issues/766#issuecomment-341720642
Thanks I'll give it a go.
December 4, 2019 at 3:32pm
I've added the webpack config, and the typescript folder now gets copied under the lib/vs/language folder but isn't loaded, would I need to make changes to the /monaco package, as this seems to load the html and css languages?
December 5, 2019 at 7:29am
It would be hacky :) but following could work:
- your extension should depend on
/monacoto make sure that then your frontend module is loaded other monaco services are already loaded
- your frontend module should be similar to https://github.com/eclipse-theia/theia/blob/dbe5b5aab829a0ac1ca81193089cf0e0ca1aa384/packages/monaco/src/browser/monaco-browser-module.ts#L29 but instead of calling to
loadMonaco, you should usevsRequireto load monaco typescript language services.
I hope it does the trick. Not sure since there would be two different instances of
vsRequire, but they install everything globally as far as I know.If it does not work, we can think how to allow hooking into
loadMonaco for 3rd party extensions.December 10, 2019 at 11:52am
Doesn't appear to work, I copied the loading of the monaco loader code into my module and I get a warning of "Duplicate definition of module '===anonymous1===' "
I'm not sure that is the issue, however the typescript module is not loaded.
December 12, 2019 at 12:27pm