GLSP Server-Client Setup for two file extensions.

[we-wake-act21]

Hi,

I am building an application that consists of two separate models [ 'lang1','lang2']. Now I want to integrate this within a single application using theia.

Both lang1 & lang2 have their own fileExtensions , layouters & GModelFactory's.

what will be the best approach on integrating the applications together.
should I create separate GLSP-server & GLSP-client ?
or is it possible to have a single GLSP server and client with different diagram-containers?
or any other way I can approach this?

[tortmayr]

Hi @we-wake-act21,
sorry for the late reply.

A GLSP server can handle multiple different diagram types (i.e. diagram containers) so it is possible to use a combined server
for your two diagram languages. In general I think this approach is always preferable over two separated server-client integrations.
In addition to saving resources it also makes it easier to share code between your two languages.

On the server side the implementation is pretty straight-forward. Simply implement the DiagramModule for your two languages and
configure them when creating our serverModule:

    ServerModule myServerModule = new ServerModule()
            .configureDiagramModule(new Lang1DiagramModule())
            .configureDiagramModule(new Lang2DiagramModule());

That`s it. Once the client initializes a new client session it passed the desired diagram-type and the server will initialize new container
and load the corresponding diagram module.

Now let's look at the Theia/Client side:
Let`s assume your want to integrate two diagram languages:

export const Lang1: GLSPDiagramLanguage = {
    contributionId: 'lang',
    label: 'Lang1 Diagram',
    diagramType: 'lang1-diagram',
    fileExtensions: ['.lang1],
};

export const Lang2: GLSPDiagramLanguage = {
    contributionId: 'lang',
    label: 'Lang2 Diagram',
    diagramType: 'lang2-diagram',
    fileExtensions: ['.lang2]
};

What is important here is that both languages use the same contributionId. This ensures that the communicate with the same
GLSP server.

The first language can be implemented with the default approach used in the examples i.e. create custom GLSPTheiaFrontendModule and provide a GLSPBackendContribution that starts/connects to the GLSPServer.

For the second language the implementation is a bit different. Here we don't need a backend implementation since we want to connect to the sever provided by the first language. So we just need to configure another GLSPTheiaFrontendModule:

class Lang2FrontendModule extends GLSPTheiaFrontendModule {
    readonly diagramLanguage = Lang2;

    protected override enableLayoutCommands = false;
    protected override enableMarkerNavigationCommands = false;
    protected override enableCopyPaste = false;

    bindDiagramConfiguration(context: ContainerContext): void {
        context.bind(DiagramConfiguration).to(Lang2DiagramConfiguration);
    }

    override bindGLSPClientContribution(context: ContainerContext): void {}
}

Note that we don't bind a GLSPClientContribution here since we want to reuse the contribution provide by lang1.

In theory that's it, however, note that there have been a couple of issues reported regarding multi editor integration.

1. Some menu contributions might get registered multiple times. This issues occurs if you have layoutCommands´, markerNavigationCommandsorcopyPaste` enabled in both frontend modules. To avoid this simply set the flag to false in one of the two modules.
2. Having multiple GLSP editors means that also multiple Diagram style sheets are loaded simultaneously which might have conflicting style definitions. You have to make sure that the css styles from one diagram editor do not leak into the other editor. You could for instance prefix all diagram specific style definitions.

Please feel free to add a comment to the issue if you encounter any other problems.

[amiths89]

Does this mean we need to add GLSPClientContribution for the first language? Because I can't see one in the TaskList example https://github.com/eclipse-glsp/glsp-examples/tree/master/project-templates/java-emf-theia/glsp-client

[tortmayr]

No, you don't need to explicitly bind a GLSPClientContribution. This is already done by default in the base GLSPTheiaFrontendModule. So the first language already binds a client contribution for the contribution id (lang in the example above). The second language also wants to reuse this contribution (since its communicates with the same server). Therefore we override it and don't bind an explicit contribution for the second language.