question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
sabine19commented, Jan 30, 2021

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 https://github.com/suren-atoyan/monaco-react/issues/68#issuecomment-770205419 for more details

1reaction
jefferybaicommented, Dec 7, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using Web Workers - Web APIs - MDN Web Docs
A worker is an object created using a constructor (e.g. Worker() ) that runs a named JavaScript file — this file contains the...
Read more >
Threading the web with module workers - web.dev
Module workers make it easy to unblock the main thread by moving expensive code to a background thread while keeping the ergonomic and ......
Read more >
Web Workers - How To Import Modules - Stack Overflow
As I am exporting functions in my module 'abc.js', I am not sure how to use them using the old (& apparently on...
Read more >
Web Workers | webpack - JS.ORG
As of webpack 5, you can use Web Workers without worker-loader . Syntax. new Worker(new URL('./worker.js', import.meta.url)); // or customize the chunk name ......
Read more >
Using web workers to boost third-party script performance
Editor's note: This article was updated on 12 May 2022 to include more up-to-date information about the Partytown library. Web workers were ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found