Skip to content

Lifecycle adjustments #939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Lifecycle adjustments #939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc5d079
Lifecycle adjustments
kaisalmen May 31, 2025
1898cb1
Updated versions to next.1 and updated dependencies. Removed referenc…
kaisalmen Jul 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .github/workflows/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@ jobs:
runs-on: ubuntu-latest
timeout-minutes: 10

strategy:
fail-fast: false

steps:
- name: Checkout
uses: actions/checkout@v4

- name: Volta
uses: volta-cli/action@v4
with:
node-version: 20
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have a version pinned elsewhere?


- name: Use pnpm
uses: pnpm/action-setup@v3
Expand Down Expand Up @@ -55,5 +56,4 @@ jobs:
- name: Test
shell: bash
run: |
npm run test:install
npm run test:run
npm run test
4 changes: 0 additions & 4 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
31 changes: 12 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -71,17 +68,15 @@ 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)

Important Project changes and notes about the project's history are found [here](https://github.com/TypeFox/monaco-languageclient/blob/main/docs/versions-and-history.md#important-project-changes).

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-next.0` (release date: 2025-0z-xy)
- **monaco-editor-wrapper**: `7.0.0-next.0` (release date: 2025-0z-xy)
- **@typefox/monaco-editor-react**: `7.0.0-next.0` (release date: 2025-0z-xy)
- **monaco-languageclient**: `10.0.0-next.1` (release date: unreleased)
- **@typefox/monaco-editor-react**: `7.0.0-next.1` (release date: unreleased)
- Aligned with:
- **@codingame/monaco-vscode-[editor]-api**: `19.1.4`
- **vscode**: `1.102.3`
Expand Down Expand Up @@ -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
Expand All @@ -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

Expand All @@ -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).
It demostrate how the `JSON Language client and language server example` can be realized with just pure monaco api and no abstraction via tge `editor app`. You find the implementation [here](./packages/examples/src/bare/client.ts).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
It demostrate how the `JSON Language client and language server example` can be realized with just pure monaco api and no abstraction via tge `editor app`. 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.
It 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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
It 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.
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

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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)
7 changes: 6 additions & 1 deletion docs/versions-and-history.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The following table describes which version of **monaco-languageclient** and **@

| monaco-languageclient | monaco-editor-wrapper | monaco-editor-react | monaco-vscode-api / editor-api | vscode | monaco-editor | release date | comment |
| :---- | :---- | :--- | :--- | :--- | :--- | :--- | :--- |
| 10.0.0-next.0 | 7.0.0-next.0 | 7.0.0-next.0 | 19.1.4 | 1.102.3 | 0.52.2 | 2025-0z-xy | |
| 10.0.0-next.1 | n.a. | 7.0.0-next.1 | 19.1.4 | 1.102.3 | 0.52.2 | unreleased | only list the last next version |
| 9.9.0 | 6.10.0 | 6.10.0 | 19.1.4 | 1.102.3 | 0.52.2 | 2025-08-11 | |
| 9.8.0 | 6.9.0 | 6.9.0 | 18.1.0 | 1.101.1 | 0.52.2 | 2025-06-24 | |
| 9.7.1 | 6.8.1 | 6.8.1 | 17.2.1 | 1.100.3 | 0.52.2 | 2025-06-17 | |
Expand Down Expand Up @@ -80,6 +80,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.
Expand Down
1 change: 0 additions & 1 deletion eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
17 changes: 3 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> -
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading