Spectrum is now read-only. Learn more about the decision in our official announcement.


Eclipse Theia - Cloud & Desktop IDE


Accessing monaco in Theia

November 28, 2019 at 10:54am

Accessing 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
How did you register them before?
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
They were registered direct in monaco with monaco.languages.typescript.javascriptDefaults.addExtraLib(<lib>). Is there any documentation for installing typings in the language server?

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.
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
ah, right we have to load it there as well, let me think how you can do it
It would be hacky :) but following could work:
  • your extension should depend on /monaco to make sure that then your frontend module is loaded other monaco services are already loaded
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.
Do you have a code somewhere to have a look?

December 12, 2019 at 12:27pm
I've now got it to work, had trouble trying to load vsRequire, however I found that as my extension loads the MS version of require is still present so I can just call it directly. Thanks for the help!