{"id":21270420,"url":"https://github.com/eclipse-glsp/glsp-theia-integration","last_synced_at":"2025-09-07T04:38:23.375Z","repository":{"id":35849343,"uuid":"218795318","full_name":"eclipse-glsp/glsp-theia-integration","owner":"eclipse-glsp","description":"Integration of the web-based GLSP client with Eclipse Theia","archived":false,"fork":false,"pushed_at":"2025-02-20T08:59:29.000Z","size":3828,"stargazers_count":23,"open_issues_count":4,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T22:09:50.488Z","etag":null,"topics":["diagram","diagram-editor","eclipse-theia","glsp","graphical-models","lsp","theia","theia-ide","theia-language-extension"],"latest_commit_sha":null,"homepage":"https://www.eclipse.dev/glsp","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eclipse-glsp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-31T15:14:56.000Z","updated_at":"2025-02-20T08:59:33.000Z","dependencies_parsed_at":"2023-11-07T04:05:19.133Z","dependency_job_id":"97df5122-a351-4d97-b3f7-992d42388436","html_url":"https://github.com/eclipse-glsp/glsp-theia-integration","commit_stats":{"total_commits":242,"total_committers":11,"mean_commits":22.0,"dds":"0.45867768595041325","last_synced_commit":"8ac9d6a8325fd6f67b1aa3f9d7dbf773dcb4c0a0"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-theia-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-theia-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-theia-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-theia-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eclipse-glsp","download_url":"https://codeload.github.com/eclipse-glsp/glsp-theia-integration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram","diagram-editor","eclipse-theia","glsp","graphical-models","lsp","theia","theia-ide","theia-language-extension"],"created_at":"2024-11-21T08:17:24.905Z","updated_at":"2025-09-07T04:38:23.364Z","avatar_url":"https://github.com/eclipse-glsp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eclipse GLSP - Theia Integration for GLSP Clients [![CI](https://github.com/eclipse-glsp/glsp-theia-integration/actions/workflows/ci.yml/badge.svg)](https://github.com/eclipse-glsp/glsp-theia-integration/actions/workflows/ci.yml) [![Publish next](https://github.com/eclipse-glsp/glsp-theia-integration/actions/workflows/publish-next.yml/badge.svg)](https://github.com/eclipse-glsp/glsp-theia-integration/actions/workflows/publish-next.yml)\n\nThis project contains the glue code necessary to integrate diagram editors built with the [graphical language server platform](https://github.com/eclipse-glsp/glsp) with [Eclipse Theia](https://github.com/theia-ide/theia) as well as an example Theia application for testing purposes.\n\nThis project is built with `yarn` and is available from npm via [@eclipse-glsp/theia-integration](https://www.npmjs.com/package/@eclipse-glsp/theia-integration).\n\nFor details on building the project, please see the [README file of the theia-integration package](/packages/theia-integration/README.md).\n\n## Theia Version Compatibility\n\n| @eclipse-glsp/theia-integration | Theia               |\n| ------------------------------- | ------------------- |\n| 0.8.0                           | \u003c= 1.4.0            |\n| 0.9.0                           | \u003e= 1.20.0 \u003c= 1.25.0 |\n| 1.0.0                           | \u003e= 1.25.0 \u003c= 1.26.0 |\n| 1.0.0-theia1.27.0               | \u003e= 1.27.0 \u003c 1.34.0  |\n| 1.0.0-theia1.34.0               | \u003e= 1.34.0 \u003c 1.39.0  |\n| 2.0.0                           | \u003e= 1.39.0 \u003c 1.45.0  |\n| 2.1.x                           | \u003e= 1.39.0 \u003c 1.45.0  |\n| 2.1.0-theia1.45.0               | \u003e= 1.45.0 \u003c 1.49.0  |\n| 2.1.1-theia1.49.0               | \u003e= 1.49.0 \u003c 1.56.0  |\n| 2.2.x                           | \u003e= 1.49.0 \u003c 1.56.0  |\n| 2.3.0                           | \u003e= 1.56.0           |\n| 2.4.0                           | \u003e= 1.56.0 \u003c 1.60.0  |\n| 2.4.0-theia1.60.0               | \u003e= 1.60.0 \u003c 1.64.0  |\n| next                            | \u003e= 1.64.0           |\n\n### Potential Compatibility Issues\n\n- When using Theia versions `\u003c= 1.55.1` you might encounter runtime issues related to inversify.\n  Due to a loose version restriction Theia might pull in an incompatible version.\n  To resolve this the inversify version need to be locked to `6.0.2`. (e.g. via [yarn resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) or [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides))\n- Issues with `node-abi` when using node \u003c 22:\n  Due to a dynamic dependency range an incompatible version of node-abi might get resolved when using node \u003c 22.x.\n  To resolve this the version needs to be locked to `^3.0.0`. (e.g. via [yarn resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) or [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides))\n- For `@eclipse-glsp/theia-integration` versions `\u003c=1.0.0` it is not possible to safely restrict the maximum version of Theia packages. If you encounter build errors related to multiple resolved Theia versions please add a resolutions block to the `package.json` of your project e.g. for `1.0.0-theia1.27.0`:\n\n    ```json\n    ...\n    \"resolutions\": {\n        \"**/@theia/core\": \"1.27.0\",\n        \"**/@theia/editor\": \"1.27.0\",\n        \"**/@theia/filesystem\": \"1.27.0\",\n        \"**/@theia/messages\": \"1.27.0\",\n        \"**/@theia/monaco\": \"1.27.0\"\n    },\n    ...\n    ```\n\n## Workflow Diagram Example\n\nThe workflow diagram is a consistent example provided by all GLSP components.\nThe example implements a simple flow chart diagram editor with different types of nodes and edges (see screenshot below).\nThe example can be used to try out different GLSP features, as well as several available integrations with IDE platforms (Theia, VSCode, Eclipse, Standalone).\nIt also offers different server connectivity possibilities such as socket or websocket connections.\nSee [our project website](https://www.eclipse.org/glsp/documentation/#workflowoverview) for an overview of the workflow example and all components implementing it.\n\n\u003e _**Remark:**_ The workflow example is a fully dev example, as it combines a variety of integration and connectivity options to easily test the different use cases. However, it should not be used as a blueprint for your custom implementation, for this we recommend the [GLSP project templates](https://github.com/eclipse-glsp/glsp-examples/tree/master/project-templates) in the GLSP example repository.\n\n\u003chttps://user-images.githubusercontent.com/588090/154459938-849ca684-11b3-472c-8a59-98ea6cb0b4c1.mp4\u003e\n\n### How to start the Workflow Diagram example?\n\nClone this repository and build Theia-Integration packages:\n\n```bash\nyarn install\n```\n\nTo build the browser application execute:\n\n```bash\nyarn browser build\n```\n\nNext, start the Theia application, and point your browser to [localhost:3000](http://localhost:3000):\n\n```bash\nyarn browser start\n```\n\nTo build the Electron application execute:\n\n```bash\nyarn electron build\n```\n\nThen start the Electron application with:\n\n```bash\nyarn electron start\n```\n\n### How to start the Workflow Diagram example server from the sources\n\nIf you want to explore or change the Workflow Diagram Server too, you can clone, build and start the `workflow example glsp-server`\nfor [Java](https://github.com/eclipse-glsp/glsp-server#workflow-diagram-example) or [Node](https://github.com/eclipse-glsp/glsp-server#workflow-diagram-example) from your IDE instead of using the pre-built version of the Workflow Diagram Server.\nCheckout the README of the [glsp-server](https://github.com/eclipse-glsp/glsp-server#how-to-start-the-workflow-diagram-example) or [glsp-server-node](https://github.com/eclipse-glsp/glsp-server-node#how-to-start-the-workflow-diagram-example) for instructions on building and running the Workflow Diagram Server example.\n\nOnce the Workflow Diagram Server is running, start the Theia application with the `debug` flag so that it'll connect to an existing server process -- the one you started from the command line or from your IDE before:\n\n```bash\nyarn browser start:debug\n\n// or\n\nyarn electron start:debug\n```\n\n### Start Workflow Diagram example in WebSocket mode\n\nThe default example use case uses a socket communication from the backend to the GLSP server.\n\nTo communicate with the server via WebSockets, there are two options available:\n\n#### **1. Connect to GLSP server from Theia backend via WebSockets**\n\nTo connect to the example GLSP server in WebSocket mode from the backend, this can be achieved by passing the CLI argument `--WF_PATH=\u003cpath\u003e`.\nIn the example the argument to be passed is `--WF_PATH=workflow`.\n\nThe example provides scripts and launch configs that pass this argument to test this connectivity option either in embedded or debug mode:\n\n- Embedded: Start a Node GLSP server in WebSocket mode along with the backend:\n\n    - VS Code Launch config: `Launch Workflow Browser Backend (WebSocket GLSP Server)`\n    - Script: `yarn browser start:ws` or `yarn electron start:ws`\n\n- Debug mode: Expects a running GLSP server (Java or Node) in WebSocket mode:\n    - VS Code Launch config: `Launch Workflow Browser Backend (External Websocket GLSP Server)`\n    - Script: `yarn browser start:ws:debug` or `yarn electron start:ws:debug`\n\n#### **2. Connect directly to GLSP server from frontend via WebSockets**\n\nThis skips binding of the GLSP backend contribution if `--directWebSocket` argument is passed to the Theia backend.\nThe workflow diagram example frontend additionally expects an environment variable (e.g. `\"WEBSOCKET_PORT=8081\"`) to trigger the direct connection from the GLSP frontend client to the running GLSP WebSocket Server.\nIn this case, we do not have any GLSP backend contribution which means, the GLSP server instance is not started automatically, and needs either to be started manually or by some other party.\n\nThe workflow example provides a launch config that passes the argument sets the environment variable:\n\n- Debug mode: Expects a running GLSP server (Java or node.js) in WebSocket mode:\n    - VS Code Launch config: `Launch Theia Browser Backend (Direct WebSocket GLSP Server connection from frontend)`\n\n### Start Workflow Diagram example without a dedicated server process\n\nThe default example use case uses a socket communication from the backend to a GLSP server process.\nTo directly start the server in the Theia backend without an extra process,this can be achieved by passing the CLI argument `--integratedNode`.\nIf this argument is passed, the node-based GLSP server will be integrated directly into Theia's backend.\n\nThe example provides scripts and launch configs that pass this argument to test this connectivity option:\n\n- VS Code Launch config: `Launch Workflow Browser Backend (Integrated Node GLSP Server)`\n- Script: `yarn browser start:integrated` or `yarn electron start:integrated`\n\n\u003e _**Remark:**_ In production, one would decide for one way of connectivity, and would not implement all the different options as we do in the workflow diagram example. This was setup to easily show and switch between the different possibilities.\n\n### Where to find the sources?\n\nIn addition to this repository, the related source code can be found here:\n\n- \u003chttps://github.com/eclipse-glsp/glsp-server\u003e\n- \u003chttps://github.com/eclipse-glsp/glsp-server-node\u003e\n- \u003chttps://github.com/eclipse-glsp/glsp-client\u003e\n\n## More information\n\nFor more information, please visit the [Eclipse GLSP Umbrella repository](https://github.com/eclipse-glsp/glsp) and the [Eclipse GLSP Website](https://www.eclipse.org/glsp/).\nIf you have questions, please raise them in the [discussions](https://github.com/eclipse-glsp/glsp/discussions) and have a look at our [communication and support options](https://www.eclipse.org/glsp/contact/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-glsp%2Fglsp-theia-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feclipse-glsp%2Fglsp-theia-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-glsp%2Fglsp-theia-integration/lists"}