Building a Lit Component for a Language

[ballcoach12]

I've been working with one of the folks on the monaco-editor-wrapper team to try and make this work, but I thought I'd check here as well and see if there are any recommendations.

We want to wrap the Monaco editor in a Lit web component that attaches the worker and syntax highlighting files when the element is rendered. We have followed, to some extent, the steps in the documentation (https://langium.org/tutorials/langium_and_monaco/), and want adapt this approach to work with a Lit component. I noticed here (#772) that a similar approach has been taken with React.

Our idea is to build our language project, publish it as an npm module and use its worker bundle to enable the language server to work in the browser. The monaco-editor-wrapper folks recommended using the latest version (2.0.0) of the wrapper, but we can't seem to make that work, and I see that the Langium documentation shows using an earlier version.

Can someone outline the steps that we might be able to follow in getting our language packaged in the manner that I describe?

Thanks

[trusktr]

I'm not sure of the specifics, but I'd suggest these high level steps:

1. First get a @codingame/monaco-editor-wrapper example working in your web app setup.
2. Next get your Langium-based language server extension running in that
   • This is probably the hardest part. Report any issues you have with this here, then we can go from there.
3. Finally, wrap it in Lit

[kaisalmen]

Hi @ballcoach12 we are a bit behind with updating langium-website. Draft PR eclipse-langium/langium-website#157 is now available. It makes use of monaco-editor-react v1 which uses the new configuration introduced by monaco-editor-wrapper v2. Docs are not updated, yet, but it will come.

Best starting point is the Langium example here: https://github.com/TypeFox/monaco-components/tree/main/packages/monaco-editor-wrapper#examples. First two steps @trusktr mentioned are basically done in the Langium example.