Improve life-cycle / separate language client from wrapper and react component

[kaisalmen]

Various issue regarding problems with the react component came up in the last couple of weeks. Some related to things we did wrong, but others are due to the nature of the involved technologies. "Containing" vscode/monaco-editor inside a react component has limits and those limits are currently not clear to users:

• The API of the wrapper and the react component should be clear regarding the life-cycle
• Generally the life-cycle of the language client should be decoupled from the editor (wrapper, react component)
  • When the disposal of the editor happens it usually does not make sense to dispose the language client
  • It must be made more clear what is globally initialized and will not change until the page is reloaded and what can be re-initialized / restarted every time.
• MonacoLanguageClientWrapper is basically an independent thing now and it should be moved out of the monaco-editor-wrapper package into the monaco-languageclient package (maybe as sub-export).
• The specific configuration objects should be moved there as well. The wrapper configuration should be split-up.
• It should be considered to also de-couple monaco-vscode-api level init from the wrapper even if it requires to write more code by the end user. But, it doesn't mix global with editor specific code. Currently, this is some sort of hidden magic.
• The only thing that should be allowed to fully re-initialized is monco-editor itself. When the workbench of views service mode is used this already alters the way the wrapper can be used (calling start is forbidden)

I am really thinking about if we should introduce completely new package names for the wrapper and the react component as they are no longer bound to moanco-editor, but to @codingame/monaco-vscode-api

[kaisalmen]

@CGNonofr I have re-worked the text. I hope this is clearer now. WDYT?

[asimaranov]

Thanks for the idea! Would it help with the extended editor re-creation issue? Is it the only way to make editor to be loaded after unmounting?

[kaisalmen]

@CGNonofr I am getting closer to release a new next version. This will be a major version and all monaco-editor-wrapper features moved to the monaco-languageclient package as sub-package exports (monaco-editor-wrapper will be obsolete). Everything regarding monaco-vscode-api handling is gathered in one place. Only the react component is kept separate, because I don't want to have react as external dependencies to monaco-languaggeclient. vscode-ws-jsonrpc is still there.

I need to do a full write-up at some point what changed and why. And I would also like you at least (everyone else is welcome of course) to test the new version and look at the changes. I use a test driven approach to analyse/overcome the react issues and that so far has proven a very good approach. vitest browser mode + playwright is superb.

[kaisalmen]

New releases are available. monaco-editor-wrapper is discontinued. All useful functionality is integrated into monaco-languageclient and exported via sub-exports: https://www.npmjs.com/package/monaco-languageclient/v/10.0.0-next.1 https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.0.0-next.1

[Ranjit-Khanal]

@kaisalmen we need to update the docs too, I guess

[kaisalmen]

HI @Ranjit-Khanal yes, indeed. This whole work is still on dev branch. We need to overhaul the whole documentation. Once this is done and all verification examples are fixed, we can merge this back to main. I hope this can be done next week.

[caillou]

I would love to test this in my app. But I am not sure I understand how to proceed without the monaco-editor-wrapper.

I assume this should solve the problem I had with StrictMode. Is this so?

[kaisalmen]

I would love to test this in my app. But I am not sure I understand how to proceed without the monaco-editor-wrapper.

Hi @caillou some part of the to be written documentation must be an upgrade guide. monaco-editor-wrapper is basically fused with monaco-languageclient (mlc). mlc provides multiple sub-exports that exposes what one needs (e.g. the EditorApp from the wrapper). The monaco-vscode-api handling is now properly encapsulated and the handling is hopefully clearer to the end-user now. The following is re-used by multiple examples and shows fairly well needs to be done: https://github.com/TypeFox/monaco-languageclient/blob/dev/packages/examples/src/common/client/extendedClient.ts Examples:

• JSON client example
• Groovy client example
• Eclipse JDT

I assume this should solve the problem I had with StrictMode. Is this so?

The unit tests of react component now deal with many of the problematic cases (there are multiple StrictMode tests): https://github.com/TypeFox/monaco-languageclient/blob/dev/packages/wrapper-react/test/index.test.tsx

[kaisalmen]

Fixed by new major releases: [email protected] is available: https://www.npmjs.com/package/monaco-languageclient/v/10.0.0 @typefox/[email protected] is available: https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.0.0