Lifecycle adjustments (#939)

- Remove monaco-editor-wrapper. Create EditorApp in client
  - Move languageclient management from wrapper to client
  - move all tests from wrapper to client
  - client: proper separation of sub-exports, rename tools to common
- monaco-vscode-api independent config and init
  - clean up and restructure src and test
  - Update vitest and other dependencies
- Update examples
  - Unify json, eclipse.jdt and groovy example
- react component: fix re-render and global init
  - expand react tests
  - LanguageClient handling with react component
- Updated versions to next.1 and updated dependencies. Removed references to monaco-editor-wrapper where applicable
- Updated test timeout and vite optimizeDeps
- Implemented review comments
- GHA: Properly dispose editor app in tests (saves lots of memory in Playwright/Chromium)

Author: kaisalmen

.github/workflows/main.yml

@@ -24,8 +24,6 @@ jobs:
 
     - name: Volta
       uses: volta-cli/action@v4
-      with:
-        node-version: 20
 
     - name: Use pnpm
       uses: pnpm/action-setup@v3
@@ -55,5 +53,4 @@ jobs:
     - name: Test
       shell: bash
       run: |
-        npm run test:install
-        npm run test:run
+        npm run test

CHANGELOG.md

@@ -8,10 +8,6 @@ All notable changes for `vscode-ws-jsonrpc` are found here:
 
 [vscode-ws-jsonrpc CHANGELOG](./packages/vscode-ws-jsonrpc/CHANGELOG.md)
 
-All notable changes for `monaco-editor-wrapper` are found here:
-
-[monaco-editor-wrapper CHANGELOG](./packages/wrapper/CHANGELOG.md)
-
 All notable changes for `@typefox/monaco-editor-react` are found here:
 
 [@typefox/monaco-editor-react CHANGELOG](./packages/wrapper-react/CHANGELOG.md)

README.md

@@ -1,4 +1,4 @@
-# Monaco Language Client, VSCode WebSocket Json RPC, Monaco-Editor-Wrapper, Monaco-Editor-React and examples
+# Monaco Language Client, VSCode WebSocket Json RPC, Monaco Editor React and examples
 
 [![Github Pages](https://img.shields.io/badge/GitHub-Pages-blue?logo=github)](https://typefox.github.io/monaco-languageclient)
 [![monaco-languageclient](https://github.com/TypeFox/monaco-languageclient/actions/workflows/actions.yml/badge.svg)](https://github.com/TypeFox/monaco-languageclient/actions/workflows/actions.yml)
@@ -9,22 +9,19 @@
 [![monaco-languageclient Downloads](https://img.shields.io/npm/dt/monaco-languageclient)](https://www.npmjs.com/package/monaco-languageclient)
 [![vscode-ws-jsonrpc Version](https://img.shields.io/npm/v/vscode-ws-jsonrpc?logo=npm&label=vscode-ws-jsonrpc)](https://www.npmjs.com/package/vscode-ws-jsonrpc)
 [![vscode-ws-jsonrpc Downloads](https://img.shields.io/npm/dt/vscode-ws-jsonrpc)](https://www.npmjs.com/package/vscode-ws-jsonrpc)
-[![monaco-editor-wrapper Version](https://img.shields.io/npm/v/monaco-editor-wrapper?logo=npm&label=monaco-editor-wrapper)](https://www.npmjs.com/package/monaco-editor-wrapper)
-[![monaco-editor-wrapper Downloads](https://img.shields.io/npm/dt/monaco-editor-wrapper)](https://www.npmjs.com/package/monaco-editor-wrapper)
 [![monaco-editor-react Version](https://img.shields.io/npm/v/@typefox/monaco-editor-react?logo=npm&label=@typefox/monaco-editor-react)](https://www.npmjs.com/package/@typefox/monaco-editor-react)
 [![monaco-editor-react Downloads](https://img.shields.io/npm/dt/@typefox/monaco-editor-react)](https://www.npmjs.com/package/@typefox/monaco-editor-react)
 
 This repository now host multiple npm packages under one roof:
 
 - [monaco-languageclient](https://www.npmjs.com/package/monaco-languageclient) to connect [Monaco editor](https://microsoft.github.io/monaco-editor/) with [language servers](https://microsoft.github.io/language-server-protocol/).
 - [vscode-ws-jsonrpc](https://www.npmjs.com/package/vscode-ws-jsonrpc) which implements communication between a jsonrpc client and server over WebSocket.
-- [monaco-editor-wrapper](https://www.npmjs.com/package/monaco-editor-wrapper) for building monaco editor application driven by configuration
-- [monaco-editor-react](https://www.npmjs.com/package/@typefox/monaco-editor-react) puts a react cloack over `monaco-editor-wrapper`
+- [monaco-editor-react](https://www.npmjs.com/package/@typefox/monaco-editor-react) makes editor and languageclient available within a react component.
 - [monaco-languageclient-examples](https://www.npmjs.com/package/monaco-languageclient-examples) provides the examples which allows to use them externally.
 
 The examples not requiring a backend are now available [via GitHub Pages](https://typefox.github.io/monaco-languageclient).<br>
 
-- [Monaco Language Client, VSCode WebSocket Json RPC, Monaco-Editor-Wrapper, Monaco-Editor-React and examples](#monaco-language-client-vscode-websocket-json-rpc-monaco-editor-wrapper-monaco-editor-react-and-examples)
+- [Monaco Language Client, VSCode WebSocket Json RPC, Monaco Editor React and examples](#monaco-language-client-vscode-websocket-json-rpc-monaco-editor-react-and-examples)
   - [Changelogs, project history and compatibility](#changelogs-project-history-and-compatibility)
   - [Getting started](#getting-started)
     - [Vite dev server](#vite-dev-server)
@@ -71,7 +68,6 @@ CHANGELOGs for each project are available from the linked location:
 
 - CHANGELOG for `monaco-languageclient` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/CHANGELOG.md)
 - CHANGELOG for `vscode-ws-jsonrpc` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/CHANGELOG.md)
-- CHANGELOG for `monaco-editor-wrapper` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/CHANGELOG.md)
 - CHANGELOG for `@typefox/monaco-editor-react` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/CHANGELOG.md)
 - CHANGELOG for `monaco-languageclient-examples` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/CHANGELOG.md)
 
@@ -80,7 +76,6 @@ Important Project changes and notes about the project's history are found [here]
 These are the current versions of packages from this repository and their alignment with **@codingame/monaco-vscode-api** **monaco-editor** and **vscode**:
 
 - **monaco-languageclient**: `10.0.0` (release date: unreleased)
-- **monaco-editor-wrapper**: `7.0.0` (release date: unreleased)
 - **@typefox/monaco-editor-react**: `7.0.0` (release date: unreleased)
 - Aligned with:
   - **@codingame/monaco-vscode-[editor]-api**: `20.2.1`
@@ -129,7 +124,6 @@ Please look at the respective section in the packages:
 
 - Usage for `monaco-languageclient` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/README.md#usage)
 - Usage for `vscode-ws-jsonrpc` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/README.md#usage)
-- Usage for `monaco-editor-wrapper` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/README.md#usage)
 - Usage for `@typefox/monaco-editor-react` is found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/README.md#usage)
 
 ## Examples Overview
@@ -144,23 +138,23 @@ The examples demonstrate mutliple things:
 #### JSON Language client and language server example ([Location](./packages/examples/src/json))
 
 The **json-server** runs an external Node.js [Express app](./packages/examples/src/json/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application (see [JSON Language Server](#json-language-server)).
-The **json-client** contains the [monaco-editor-wrapper app](./packages/examples/src/json/client/wrapperWs.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
+The **json-client** contains the [editor app](./packages/examples/src/json/client/wrapperWs.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
 
 #### Python Language client and pyright language server example ([Location](./packages/examples/src/python))
 
 The **python-server** runs an external Node.js [Express app](./packages/examples/src/python/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application (see [Pyright Language Server](#pyright-language-server)).
-The **python-client** contains the [monaco-editor-wrapper app](./packages/examples/src/python/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
+The **python-client** contains the [editor app](./packages/examples/src/python/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
    It is also possible to use a [@typefox/monaco-editor-react app](./packages/examples/src/python/client/reactPython.tsx) to connect to the server. Both versions now feature a debugger, see [here](#graalpy-debugger).
 
 #### Groovy Language client and language server example ([Location](./packages/examples/src/groovy))
 
 The **groovy-server** runs an external [Java app](./packages/examples/src/groovy/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application ([Groovy Language Server](#groovy-language-server)).
-The **groovy-client** contains the [monaco-editor-wrapper app](./packages/examples/src/groovy/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
+The **groovy-client** contains the [editor app](./packages/examples/src/groovy/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
 
 #### Java Language client and language server example ([Location](./packages/examples/src/eclipse.jdt.ls))
 
 The **java-server** runs an external [Java app](./packages/examples/src/eclipse.jdt.ls/server/main.ts) where web sockets are used to enable communication between the language server process and the client web application ([Java Language Server](#java-language-server)).
-The **java-client** contains the [monaco-editor-wrapper app](./packages/examples/src/eclipse.jdt.ls/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
+The **java-client** contains the [editor app](./packages/examples/src/eclipse.jdt.ls/client/main.ts) which connects to the language server and therefore requires the node server app to be run in parallel.
 
 Langium examples (here client and server communicate via `vscode-languageserver-protocol/browser` instead of a web socket used in the three examples above
 
@@ -183,11 +177,11 @@ It is also possible to use a [@typefox/monaco-editor-react app](./packages/examp
 
 #### bare monaco-languageclient ([Location](./packages/examples/src/bare))
 
-It demostrate how the `JSON Language client and language server example` can be realised without `monaco-editor-wrapper`. You find the implementation [here](./packages/examples/src/bare/client.ts).
+This demonstrates how the `JSON Language client and language server example` can be realized with just the pure monaco api and no abstraction via the `editor app`. You find the implementation [here](./packages/examples/src/bare/client.ts).
 
 #### Browser example ([Location](./packages/examples/src/browser))
 
-It demonstrates how a [monaco-editor-wrapper can be combined with a language service written in JavaScript](./packages/examples/src/browser/main.ts). This example can now be considered legacy as the web worker option eases client side language server implementation and separation, but it still shows a valid way to achieve the desired outcome.
+This demonstrates how an [editor app can be combined with a language service written in JavaScript](./packages/examples/src/browser/main.ts). This example can now be considered legacy as the web worker option eases client side language server implementation and separation, but it still shows a valid way to achieve the desired outcome.
 
 #### Purely monaco-editor related examples
 
@@ -251,7 +245,7 @@ You can as well run [vscode tasks](./.vscode/launch.json) to start and debug the
 
 ### General
 
-Whenever you used `monaco-editor`/`@codingame/monaco-vscode-editor-api` `vscode`/`@codingame/monaco-vscode-extension-api`, `monaco-languageclient`, `monaco-editor-wrapper` or `@typefox/monaco-editor-react` ensure they are imported before you do any `monaco-editor` or `vscode` api related intialization work or start using it.
+Whenever you used `monaco-editor`/`@codingame/monaco-vscode-editor-api` `vscode`/`@codingame/monaco-vscode-extension-api`, `monaco-languageclient` or `@typefox/monaco-editor-react` ensure they are imported before you do any `monaco-editor` or `vscode` api related intialization work or start using it.
 
 If you use pnpm or yarn, you have to add `vscode` / `@codingame/monaco-vscode-api` as direct dependency, otherwise the installation will fail:
 
@@ -390,6 +384,5 @@ When webpack is used as bundler there are issues with utilizing the undbundled w
 
 - monaco-languageclient: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/LICENSE)
 - vscode-ws-jsonrpc: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/vscode-ws-jsonrpc/LICENSE)
-- monaco-editor-wrapper: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/LICENSE)
 - @typefox/monaco-editor-react: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/LICENSE)
 - monaco-languageclient-examples: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/LICENSE)

docs/versions-and-history.md

@@ -6,7 +6,7 @@ The following table describes which version of **monaco-languageclient** and **@
 
 | monaco-languageclient | vscode-ws-jsonrpc | monaco-editor-wrapper | monaco-editor-react | monaco-vscode-api / editor-api | vscode | monaco-editor | release date | comment |
 | :---- | :---- | :---- | :--- | :--- | :--- | :--- | :--- | :--- |
-| 10.0.0 | 3.5.0 | 7.0.0 | 7.0.0 | 20.1.1 | 1.103.1 | 0.52.2 | unreleased | |
+| 10.0.0 | 3.5.0 | 7.0.0 | 7.0.0 | 20.2.1 | 1.103.1 | 0.52.2 | unreleased | |
 | 9.11.0 | 3.5.0 | 6.12.0 | 6.12.0 | 20.2.1 | 1.103.1 | 0.52.2 | 2025-08-21 | |
 | 9.10.0 | 3.5.0 | 6.11.0 | 6.11.0 | 20.1.1 | 1.103.1 | 0.52.2 | 2025-08-14 | |
 | 9.9.0 | 3.5.0 | 6.10.0 | 6.10.0 | 19.1.4 | 1.102.3 | 0.52.2 | 2025-08-11 | |
@@ -82,6 +82,11 @@ The following table describes which version of **monaco-languageclient** and **@
 
 ## Important Project Changes
 
+### July 2025 (v10.0.0)
+
+- Dropped `monaco-editor-wrapper`. All required funcitonality was moved back to `monaco-languageclient` and made available as sub exports.
+- `@typefox/monaco-editor-react` lifecycle and robustness improvements.
+
 ### March 2024 (v8.0.0)
 
 `@codingame/monaco-editor-treemended` is replaced by self-standing `@codingame/monaco-vscode-editor-api`. `monaco-editor-wrapper` and `@typefox/monaco-editor-react` have been moved into this repository.

eslint.config.mjs

@@ -105,7 +105,6 @@ export default [{
         '@typescript-eslint/no-empty-object-type': 'error',
         '@typescript-eslint/no-unsafe-function-type': 'error',
         '@typescript-eslint/no-wrapper-object-types': 'error',
-        // temporarily disabled due to "Maximum call stack size exceeded" error
         '@stylistic/indent': 'error',
         '@typescript-eslint/no-explicit-any': 'error',
         '@typescript-eslint/no-misused-new': 'error',

index.html

@@ -36,7 +36,7 @@ <h3>Langium</h3>
 
         Langium Grammar DSL: <a href="./packages/examples/langium_extended.html">Extended Mode</a> - <a href="./packages/examples/langium_classic.html">Classic Mode</a>
         <br>
-        <a href="./packages/examples/statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
+        <a href="./packages/examples/statemachine.html">Langium Statemachine Client & Language Server (Worker)</a> (<a href="./packages/examples/react_statemachine.html">React Version</a>)<br>
         <br>
         Localizations:
         <a href="./packages/examples/statemachine.html?locale=cs">cs</a> -
@@ -58,7 +58,7 @@ <h3>Langium</h3>
         <h3>Python</h3>
         Please execute <b><code>npm run start:example:server:python</code></b> beforehand.<br>
         Debugger requires docker. Please execute <b><code>docker compose -f ./packages/examples/resources/debugger/docker-compose.yml up -d</code></b> beforehand.<br>
-        <a href="./packages/examples/python.html">Python Language Client & Pyright Language Server (Web Socket)</a><br>
+        <a href="./packages/examples/python.html">Python Language Client & Pyright Language Server (Web Socket)</a> (<a href="./packages/examples/react_python.html">React Version</a>)<br>
 
         <h3>Java / Eclipse JDS LS</h3>
         Requires docker. Please execute <b><code>docker compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d</code></b> beforehand:<br>
@@ -80,23 +80,12 @@ <h3>Multiple Languageclients</h3>
         <br>
 
         <h3>Application Playground</h3>
-        <a href="./packages/examples/appPlayground.html">Application Playground</a>
+        <a href="./packages/examples/appPlayground.html">Application Playground</a> (<a href="./packages/examples/react_appPlayground.html">React Version</a>)
 
         <h3>TypeScript</h3>
         <a href="./packages/examples/tsExtHost.html">TypeScript Extension Host Worker</a>
         <br>
 
-        <h2>Monaco Editor React</h2>
-        Please execute <b><code>npm run start:example:server:python</code></b> beforehand.<br>
-        Debugger requires docker. Please execute <b><code>docker compose -f ./packages/examples/resources/debugger/docker-compose.yml up -d</code></b> beforehand.<br>
-        <a href="./packages/examples/react_appPlayground.html">React: Application Playground</a>
-        <br>
-        <a href="./packages/examples/react_statemachine.html">React: Langium Statemachine Language Client & Language Server (Worker)</a>
-        <br><br>
-        Please execute  <b><code>npm run start:example:server:python</code></b> beforehand:<br>
-        <a href="./packages/examples/react_python.html">React: Python Language Client & Language Server (Web Socket)</a>
-        <br>
-
         <h2>Verification</h2>
         <h3>Angular</h2>
         Please start  <b><code>cd verify/angular && npm run verify</code></b> beforehand:<br>