How to integrate a custom language's web worker into this library?

[hacker0limbo]

Is your feature request related to a problem? Please describe.
Recently i wanna custom a language, and trying to add web worker with it as well. However it seems like on the doc there is nothing related to custom web worker.

Describe the solution you'd like
There is a related issue about integrate monaco-editor with create-react-app, the solution is using react-app-rewired and then add monaco-editor-webpack-plugin.

Also on the monaco editor official doc, there are two general solutions for adding web worker.

Since this lib does not require any webpack config, but on the other hand there is no related web worker api exposed. I am currently not sure how to handle it.

Describe alternatives you've considered
The pseudocode might look like this:

// this is what @monaco-editor/react provided
// App.js
function App() {
  // ...
  return (
    <Editor
      height="90vh"
      language="myLang"
      value=""
      editorDidMount={handleEditorDidMount}
    />
  )
}

// this is the web worker i want customize
// myLang.worker.js
self.onmessagee = () => {
  // ...
}

// this is the config for web worker
// config.js
self.MonacoEnvironment = {
  getWorkerUrl(moduleId, label) {
    if (label === "myLang") {
      return "./myLang.worker.js"
    }
    return "./editor.worker.js"
  }
}

// this is still using webpack to distinguish web worker, not sure how to integrate it with CRA
// webpack.config.js
module.exports = {
  entry: {
    "myLang.worker": './src/myLang.worker.js'
  }
}

Additional context
I am really new to monaco editor and english is not my first language, hope i explained my confusion clearly.

Cheers

[jefferybai]

哈哈， 感觉这个库没人维护， 我也遇到同样的问题了。
没有语言服务的配置入口。

[jefferybai]

自己写一个monaco editor for react ，
用monaco-editor-webpack-plugin这个插件，配置超级简单。

[sabine19]

Hi there,
Has anyone a working example with create-react-app and monaco-react?
I need several editors placed on the site, each with a different language / custom language.
An example would be highly appreciated!

[hacker0limbo]

@sabine19 I think you are asking multiple model. Please check the doc: https://github.com/suren-atoyan/monaco-react#multi-model-editor. This is a new feature in v4

[sabine19]

@hacker0limbo thanks for the quick reply, but indeed I need a custom language worker. the multiple model setup is no issue.
I don't know how to setup this, as i can't find a good example with create-react-app and custom language.

[hacker0limbo]

@sabine19 from my understanding, to custom a language worker, you might want to eject create-react-app and custom webpack config, this kind of violate the intention of this project:

Monaco Editor for React · use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

I am not sure what functionality you want achieve, sometimes you can just use Monaco's native api to accomplish, although it might not sound efficient.

[sabine19]

Maybe i mixed up two issues:
One thing is how to get the webworker running without the need of a webpack configuration (see #68 (comment))
The custom language worker is related, as it also needs to be copied to the output dir. but not sure how to do that, without webpack...

[hacker0limbo]

@sabine19 I am not a master of webpack as well, might not be able to help you with this, sorry about that

[sabine19]

The solution for getting custom web worker running is to bundle them for the output. Therefore you have to use react-app-rewired and the monaco-editor-webpack-plugin to be able to override webpack config without ejecting the project.
See #68 (comment) for more details