Upgrade Showcase/Playgrounds Monaco React/Wrapper Usage

[montymxb]

This updates the showcase & playgrounds to use new versions of the MonacoEditorLanguageClientWrapper & MonacoEditorReactComp instances. The main change was the API interface for setting up the wrapper & the React component, which is composed of a more direct configuration object object, rather than several smaller configuration functions. This allowed us to have more control over the existing implementations, as well as to cut down on the configuration code for most cases.

The playgrounds required a rework to be compatible with the new approach, which exposed fewer low-level details than previously available. The new playgrounds approach has 2 wrappers like before, but the orchestration between the two underlying language servers is much simpler, and there's no longer a need to interact with the low-level message readers/writers. The current orchestration is setup like follows:

1. Langium LS receives a new Langium DSL
2. Langium LS parses & signals Langium LC on validating the new Langium DSL
3. Langium LC prepares a fresh worker using the new grammar
4. Langium LC regenerates the existing DSL Editor (2nd editor) w/ the new worker
5. DSL LS receives a new program, parses it, validates it
6. DSL LC is notified of a new program, and passes the resulting AST to the final window for rendering

I've tried to make the process as explicit as possible in the comments, but feel free to dig into things as needed to get more details. Overall, despite tearing down the 2nd DSL editor on getting a fresh grammar, the new approach is very fast. Application response times are about an order of magnitude quicker than they were before, and can probably be improved further if we really want to. An example of this can be seen below.

A few checks that have been done so far:

• Mac
  • Safari
  • Chrome
  • Firefox

I haven't done any checks on Windows yet, so any insight here would be helpful to verify there's no bundle related issues.

I'm also open to suggestions, improvements, etc.!

TODO:

• ~README needs updating to follow new usage~
• ~Rebasing needed, and the new showcase examples need to be upgraded as well following this~

[kaisalmen]

@montymxb works nicely on Windows with Chrome and Firefox

[kaisalmen]

Observation: Where is greensock used? Can we get rid of those warnings or should I open an independent issue as this problem is not new or introduced here.

[montymxb]

@kaisalmen not sure, but I don't believe it's new.

[Lotes]

I like React function components more: https://www.robinwieruch.de/react-function-component/

But it would require to rewrite some stuff. The only, reeal benefit is shorter and more readable code.

[montymxb]

@Lotes I would generally agree for functional components, however we have a practical constraint given we use refs to allow interaction with the wrapper contained inside the component. Apparently this isn't supported for functional components in their current form (legacy docs), but it may be possible in newer versions, I'm just not sure how yet.

[kaisalmen]

@montymxb I checked both tutorial updates and you did a great job! 🎉

[kaisalmen]

And, @Lotes already provided very useful suggestions. It is sometimes good to be the second reviewer. 😅

[cdietrich]

hi, can i somewhere find a complete hello world example for the new code. i tried to adapt what the yeoman generator produces https://github.com/cdietrich/langium-inject-files-webworker/compare/cd_tests but the ui seems totally broken maybe you have any hints what i overlooked

[montymxb]

Hi @cdietrich . Yeah the new version has a different API than before, so setting it up as it was done before won't work as expected. To assist with this, we did update the Langium and Monaco docs to reflect setting up with version 2.1.1 of the monaco-editor-wrapper (which also happens to be targeted towards MiniLogo as well). If you haven't read that since it changed, I would double check those new docs, it might help.

As for the MiniLogo repo itself, it has not yet been updated to use version 2.1.1 of wrapper. We haven't gotten to that yet, but that will naturally follow.

[cdietrich]

@montymxb yes I followed that steps but it (the layout) is not working. This is why I am asking

[montymxb]

I took a look at your implementation, I think the issue is that you're opting to use a classic editor config (Monarch), but you're not passing a languageDef to utilize for that config. You're registering the id, but not the actual grammar itself, which is necessary for that to work.

For reference on how to set that up, you can see how we add the languageDef to our user configs for the playgrounds & showcases. You'll need a monarch grammar handy to pass in, which you can generate locally via Langium by tweaking your langium-config.json to output that in addition to a TextMate grammar when generating (although I think that's enabled by default now with the latest yeoman generator).

Give that a shot, and let me know if you're still having issues after that.

[cdietrich]

@montymxb i had left the monarch out cause we use semantic tokens anyway. using the monarch grammar does not really solve the problem

there is still the white small text-area and also the file outline is not next to the editor but below

[montymxb]

You're missing the necessary styles for the editor. They used to be added in via MonacoEditorLanguageClientWrapper.addMonacoStyles('monaco-editor-styles'), but now they need to be imported from the package itself directly, or they come along implicitly when you're using the bundled version. For your case, that means you can add the following to your index.html alongside the existing stylesheet.

<link href="/monaco-editor-wrapper/assets/style.css" rel="stylesheet"/>

The wrapper's assets are in your public root, so that should give you the styles you need, and your layout should be corrected. Checked this out locally real quick and it seems to have done the trick.

We missed adding this detail in the new docs, so we need to update that as well to ensure others don't run into the same issue.

[cdietrich]

thx. this is working. (had experimented with copy and use ./packages/examples/libs/monaco-editor-wrapper/assets/style.css before) as it was working in the verify*htmls in the example

[cdietrich]

i also assume the yeoman generator will be adapted anyway to reflect it.

[kaisalmen]

i also assume the yeoman generator will be adapted anyway to reflect it.

@cdietrich I opened https://github.com/eclipse-langium/langium/issues/1163 for this