load monaco from node_modules

[khoshrou]

Hi
thank you for this awesome component, can you make it load monaco from node modules instead of cdn?

[suren-atoyan]

Hello, thank you for your feedback.

Unfortunately, in the current version, it's not possible.

But you can notice that there is a config file and theoretically you can load it from where you want (wherever you have access to). I just need to make it customizable. It should be something like this:

import { monaco } from '@monaco-editor/react';

monaco
  .config({...})
  .init()
...

So, you can load it for example from your public folder.
Can you load it from node_modules in that case?
It depends on your static server configuration.

I will make the config customizable in the next version and will keep you up to date here, for now, let it stay open.

[khoshrou]

Hi again
That would be kind of essential consider you like to create an electron or a nwjs desktop app

[suren-atoyan]

I absolutely agree, so I will do it first.

[zzeebbii]

Hi @SurenAt93
Do you have any idea when this new version will be available with configurable configuration?

[suren-atoyan]

Hi @zzeebbii, I hope it will be ready tomorrow.

[suren-atoyan]

Hi guys. The new version is here. (v1.2.0).

You can modify config as shown here.

For downloading monaco from your files

So, if you are using CRA, for example, you can install monaco-editor package:

yarn add monaco-editor # (npm install monaco-editor)

after that move/copy the minified (it's for an example) version of editor to your (CRA) public folder:

mv node_modules/monaco-editor/min/vs/ ./public

and now, by changing configs with the new api, you can load monaco files from your public folder:

import { monaco } from '@monaco-editor/react';

monaco
  .config({
    urls: {
      monacoLoader: '/vs/loader.js',
      monacoBase: '/vs'
    },
  });

Please check it and let me know if it covers your cases. Thank you!

[zzeebbii]

Hi @SurenAt93,
Thank you for such a quick update (Y). Yes, it will resolve the problem of loading from CDN and now we can load assets from disk which is quite good in many cases.

I know loading mechanism of monaco-editor is quite complex, but I was wondering if there is any possibility to just build one bundle instead of copying files and then referencing those files? Just curious :-)

[suren-atoyan]

Yes, of course, there is a way, to make a single bundle. But during making that very bundle we will need some extra webpack plugins, which is not "possible" in case of CRA; that's why this package/library exists.

[zzeebbii]

Actually, I am not using CRA. I am building my bundles with manual webpack configuration that's why I was asking. I can include the monaco-editor in my bundle but then I'm not sure how should I use configuration with your package. I mean, does your plugin check first if monaco exists and use that or it always loads the monaco from configuration we provide like CDN or resource on disk.

[suren-atoyan]

If you are not using CRA, and you can customize your webpack configs, and also you are okay with a single bundle of monaco, so, in that case, there are other solutions/packages/libraries to do that:

Please find those libraries here

[suren-atoyan]

@khoshrou could you please check the new version. And if it covers your case we can close the issue.

[khoshrou]

Hi Suren
I just tested new version, its amazing.
it works as i expected. Thanks again.
I have a question
In your component we dont bundle monaco. do we loose any thing this way?

[suren-atoyan]

Of course no. It will work as expected. By avoiding bundling we avoid wepack configuration. Just it. Originally monaco worked without bundling; on the official home page of monaco it works without bundles. (check the "network" section in the devtools to see more)

[khoshrou]

I checked the network section and library is loaded from local folder
Again Thanks