how to intergate langium server with glsp and vscode

[zrwsmd]

there is a requirement that need to transform industrial Programming Language LD(Ladder Diagram) to other specific lauguage like C++ or PLC ST (Structured Text）language,when user drag a component or delete a component ,corresponding text is changed to,so i am considering use glsp+langium+vscode extension+vscode webview,now i have start glsp server with vscode extension(using workflow glsp example as template).i know crossmodel project intergate langium with glsp,but not intergate with vscode extension,so how should i intergate langium with both glsp and vscode,can i regard langium server as a part of glsp server?

[planger]

Currently, the best public example is the CrossModel project.

The CrossModel project actually does use a VS Code extension. Its VS Code extension includes the registration of the textual DSL and adds the language server and the GLSP server on the backend: https://github.com/CrossBreezeNL/crossmodel/tree/main/extensions/crossmodel-lang

The GLSP frontend in CrossModel is included via a Theia Frontend Extension, which is the preferred choice if you target Eclipse Theia: https://github.com/CrossBreezeNL/crossmodel/tree/main/packages/glsp-client

If you only target VS Code, you'd have to also use the GLSP VS Code integration for the GLSP frontend, as done in https://github.com/eclipse-glsp/glsp-vscode-integration/tree/master/example/workflow

[planger]

This code runs in the VS Code extension and starts a language client (the part that communicates on the client end to the server), which also starts the server and then connects to it.

[zrwsmd]

so the server you mention is refer to language server?instaed of other server like glsp server or langium server ?since glsp server or langium server has started in other process,why shoud i also launch another server in this VS Code extension?

[planger]

Yes, above I refer to the language server when I say server.

[zrwsmd]

so this language server is refer to langium server ,i guess pack the langium server to a js file like below screenshot?

[planger]

Yes, that's right.

[zrwsmd]

now i try to change work-flow example,override WorkflowDiagramModule method bindModelState()to CrossModelState like below picture,

but an error occured
rejected promise not handled within 1 second: Error: No matching bindings found for serviceIdentifier: CrossModelState
stack trace: Error: No matching bindings found for serviceIdentifier: CrossModelState
at _validateActiveBindingCount (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38693:23)
at _getActiveBindings (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38679:5)
at _createSubRequests (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38720:26)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38744:17
at Array.forEach ()
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38743:26
at Array.forEach ()
at _createSubRequests (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38723:20)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38744:17
at Array.forEach ()
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38743:26
at Array.forEach ()
at _createSubRequests (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38723:20)
at plan (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38765:9)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38021:82
at Container._get (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37991:38)
at Container._getButThrowIfAsync (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37994:27)
at Container.get (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37775:21)
at Container.resolve (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37832:29)
at ActionHandlerRegistryInitializer.factory (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:10459:68)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:9446:75
at Array.map ()
at ActionHandlerRegistryInitializer.initialize (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:9446:51)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:9629:53
at Array.forEach ()
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:9629:26
at Map.forEach ()
at new DefaultGlobalActionProvider (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:9626:24)
at createInstanceWithInjections (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39234:20)
at _createInstance (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39224:22)
at resolveInstance (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39315:18)
at _getResolvedFromBinding (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39433:85)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39451:22
at _resolveInScope (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39445:14)
at _resolveBinding (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39450:12)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39412:20
at childRequests.reduce.constructorInjections (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39200:25)
at Array.reduce ()
at _resolveRequests (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39199:26)
at _createInstance (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39218:24)
at resolveInstance (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39315:18)
at _getResolvedFromBinding (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39433:85)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39451:22
at _resolveInScope (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39445:14)
at _resolveBinding (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39450:12)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39412:20
at resolve (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:39549:12)
at d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:38023:88
at Container._get (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37991:38)
at Container._getButThrowIfAsync (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37994:27)
at Container.get (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:37775:21)
at NodeGlspVscodeServer.createGLSPClient (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:136329:45)
at NodeGlspVscodeServer.start (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:135680:43)
at activate (d:\glsp-vscode-integration-master-copy-new1019\example\workflow\extension\dist\workflow-extension.js:82883:20)
at q.ib (d:\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:136:13192)
at q.hb (d:\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:136:12914)
at d:\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:136:11039
at async v.n (d:\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:125:6205)
at async v.m (d:\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:125:6168)
at async v.l (d:\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:125:5625)

so the server you mention is refer to language server?instaed of other server like glsp server or langium server ?

Yes, above I refer to the language server when I say server.

[zrwsmd]

i debug and found CrossModelState has register,why this error occured

[zrwsmd]

i want to intergate langium server with node glsp server and inject langium service through inversify.js
for workflow-extension.ts,the code is following

/********************************************************************************

• Copyright (c) 2021-2022 EclipseSource and others.
• This program and the accompanying materials are made available under the
• terms of the Eclipse Public License v. 2.0 which is available at
• http://www.eclipse.org/legal/epl-2.0.
• This Source Code may also be made available under the following Secondary
• Licenses when the conditions for such availability set forth in the Eclipse
• Public License v. 2.0 are satisfied: GNU General Public License, version 2
• with the GNU Classpath Exception which is available at
• https://www.gnu.org/software/classpath/license.html.
• SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
  import 'reflect-metadata';

import { GlspVscodeConnector, NavigateAction, NodeGlspVscodeServer, configureDefaultCommands } from '@eclipse-glsp/vscode-integration/node';
import * as process from 'process';
import * as vscode from 'vscode';
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind } from 'vscode-languageclient/node';
import { createServerModules } from '../../langium-server/index';
import WorkflowEditorProvider from './workflow-editor-provider';

export async function activate(context: vscode.ExtensionContext): Promise {
const workflowServer = new NodeGlspVscodeServer({
clientId: 'glsp.workflow',
clientName: 'workflow',
serverModules: createServerModules()
});

// Initialize GLSP-VSCode connector with server wrapper
const glspVscodeConnector = new GlspVscodeConnector({
    server: workflowServer,
    logging: true
});

startLanguageClient(context);

const customEditorProvider = vscode.window.registerCustomEditorProvider(
    'workflow.glspDiagram',
    new WorkflowEditorProvider(context, glspVscodeConnector),
    {
        webviewOptions: { retainContextWhenHidden: true },
        supportsMultipleEditorsPerDocument: false
    }
);

context.subscriptions.push(workflowServer, glspVscodeConnector, customEditorProvider);
workflowServer.start();

configureDefaultCommands({ extensionContext: context, connector: glspVscodeConnector, diagramPrefix: 'workflow' });

context.subscriptions.push(
    vscode.commands.registerCommand('workflow.goToNextNode', () => {
        glspVscodeConnector.sendActionToActiveClient(NavigateAction.create('next'));
    }),
    vscode.commands.registerCommand('workflow.goToPreviousNode', () => {
        glspVscodeConnector.sendActionToActiveClient(NavigateAction.create('previous'));
    }),
    vscode.commands.registerCommand('workflow.showDocumentation', () => {
        glspVscodeConnector.sendActionToActiveClient(NavigateAction.create('documentation'));
    })
);

}

function startLanguageClient(context: vscode.ExtensionContext): LanguageClient {
const serverModule = context.asAbsolutePath('./dist/language-server.js');
// The debug options for the server
// --inspect=6009: runs the server in Node's Inspector mode so VS Code can attach to the server for debugging.
// By setting process.env.DEBUG_BREAK to a truthy value, the language server will wait until a debugger is attached.
const debugOptions = {
execArgv: ['--nolazy', --inspect${process.env.DEBUG_BREAK ? '-brk' : ''}=${process.env.DEBUG_SOCKET || '6009'}]
};

// If the extension is launched in debug mode then the debug server options are used
// Otherwise the run options are used
const serverOptions: ServerOptions = {
    run: { module: serverModule, transport: TransportKind.ipc },
    debug: {
        module: serverModule,
        transport: TransportKind.ipc,
        options: debugOptions
    }
};

const fileSystemWatcher = vscode.workspace.createFileSystemWatcher('**/*.wf');
context.subscriptions.push(fileSystemWatcher);

// Options to control the language client
const clientOptions: LanguageClientOptions = {
    // Register the server for langium documents
    documentSelector: [{ scheme: 'file', language: 'wf' }],
    synchronize: {
        // Notify the server about file changes to langium files contained in the workspace
        fileEvents: fileSystemWatcher
    }
};

// Create the language client and start the client.
const client = new LanguageClient('langium', 'Langium', serverOptions, clientOptions);

// Start the client. This will also launch the server
client.start();
return client;

}

[zrwsmd]

then error occured,how to solve it

[planger]

We really appreciate your active participation in our community forum and are happy to assist where we can! Unfortunately, however, we can't dive deep into debugging large chunks of code here due to time constraints.

If you're looking for more focused support, we do offer professional services that can tackle your issues more comprehensively. Check out our support package options here: EclipseSource Developer Support.

[zrwsmd]

so how to intergate node glsp server with langium, i mean inject langium service into glsp DI container since node glsp server (NodeGlspVscodeServer) need to wrap by GlspVscodeConnector,while GlspVscodeConnector should also register into vscode extension

[planger]

In the cross model example, you can see in the launch.ts how the DI container of GLSP is extended with the services from the langium LSP server.