Proper guide on how to intgreate GLSP in VSCode

[PatrikN-work]

Is there a proper guide on how to integrate GLSP in VSCode soemwhere?

I've been looking at https://github.com/eclipse-glsp/glsp-vscode-integration but it is a bit hard to digest just the code without explanations. Is there something more like a tutorial, explaining things like in @eclipse-glsp/vscode-integration/node

(yes, I want to be spoon fed ;-) )

[rsoika]

Hi @PatrikN-work , I am currently working on the same problem.
We have migrated our project to GLSP 2.1.0 and now I wonder how to integrate it into VSCode.
There seam to be some changes.

My current code looks like this (but it is not working for some reason)

import { ContainerConfiguration } from '@eclipse-glsp/client';
import { GLSPStarter } from '@eclipse-glsp/vscode-integration-webview';
import '@eclipse-glsp/vscode-integration-webview/css/glsp-vscode.css';
import { createBPMNDiagramContainer } from '@open-bpmn/open-bpmn-glsp/lib';

import { Container } from 'inversify';

// css styles
import './css/bpmn-vscode.css';

class BPMNGLSPStarter extends GLSPStarter {
    createContainer(...containerConfiguration: ContainerConfiguration): Container {
        return createBPMNDiagramContainer(...containerConfiguration);
    }
}

export function launch(): void {
    new BPMNGLSPStarter();
}

you can see that I import the class createBPMNDiagramContainer from my main project that runs successful with Theia integration. So from the core concept I have to projects.

• My core implementation with Theia integration
• And a second project with the VSCode Integration which is importing the core project.

[PatrikN-work]

Hi rsoika!

Thanks for the reply and the links to you projects. I'll look at them as well and see if I get a better understanding, but still I'd like a better description on how to integrate in VSCode as well as Theia since to me it iessential to get modelling into these IDEs for it to be useful.

[planger]

An in-depth documentation on the different integrations would be indeed be very nice!

At the moment we only have the following unfortunately:

• The package architecture which details how the client implementation for a diagram is reused across multiple platform integrations
• Some pointers on the platform integration
• The examples:
  • Minimal task example integration for VS Code
  • Example VS Code extension for the workflow diagram

[rsoika]

Hi @planger
yes the documentation about the package-architecture is very good.
On the other hand we only have the two examples you reference. And the problem is that the code in the examples has no comments. This makes it so hard - nearly impossible - to understand what is needed for adaption. For example if you look into the source code of the function activate which seems to be a very important part you can't guess what this all means (at least I am not able).
The const workflowServer in this example seems to me shows two different kinds of server integration - a NodeJS server integration and a Java Server integration. But this is all guessing as it is not explained with a single line of comment. I also wonder what the clientID and clientName in this example means. Are these names important? Does this ID/name reflect to something in the GLSP server code of my own implementation?

And the end when I follow the workflow example to adapt my own code, I can

1. start my java glsp server,
2. than I start my vs-code extension
3. I can see in the server log that it looks like the vs-code extension is connecting to the server

But when I try to open a editor file nothing happens.

The only log message I see is

messenger.ts:180 Error: No matching bindings found for serviceIdentifier: GLSPDiagramWidget
log @ messenger.ts:180

Does this message gives you a hint what could be missing in my implementation?

[planger]

Hm, the error is somewhat surprising. Because the GLSPDiagramWidget is bound in the default module of the Webview. Unfortunately, I don't have a concrete idea about that.

In general the VS Code integration is rather complex, because it needs to be embedded in a web view of a custom editor VS Code extension. Much of the complexity comes from VS Code.

The active function is the entry point of the VS Code extension, see extension anatomy. This is running in the extension host of VS Code and starts two things:

1. the GLSP server (either as a nodejs process communicating via IPC or any other process communicating via socket)
2. it sets up the webview (which is then loaded in an iframe of the VS Code frontend) via the custom editor provider

So in contrast to Theia, there is another indirection necessary, because of the extension host and the webview.

[rsoika]

I made some progress but still the vscode integration did not work for me :-(

I started writing some kind of quick-start-guide . I am not sure if what I am writing there is correct or if it is nonsense....?

[PatrikN-work]

Thanks,

When I get a grip on this maybe I can contribute.

Generally, I think more of these mini-guides/tutorials would be great to help people onboard.

[planger]

It would be great to have more documentation and we'd appreciate any contribution a lot in that regard. Thank you!

[rsoika]

Finally my implementation works!

I have updated my general Quickstart-Guide. There are a lot of details to take care of.

[rsoika]

Today I found out another very important aspect of a useful project setup.

To build your vs-code-integration project based on your current development of your core glsp diagram, you should work with a resolutions section in your root package.json file

  "resolutions": {
    "@my-glsp-project/my-diagram-code": "file:./../my-glsp-project/my-diagram-code/",
    "string-width": "4.2.3"
  },

For most of you, this is probably self-evident. However, it wasn't clear to me. This seems to be the best way to avoid yarn linking and all the other ugly ways to work with local packages.

I have updated my quick-start-guide explaining the project structure in more detail. I hope parts of this guide will find a way into the glsp-vscode-integration project as my project is not the best place to explain this.... ;-)

[PatrikN-work]

Just want to say thanks, this is really good and what is missing today.