Question about langium with GLSP

[YourHarbour]

Hi,

I'm new in langium and want to embed the langium editor with GLSP(Graphical language server platform build with sprotty).
For example, I want to pop up a small Monaco editor when the user click the node to let them modify the node's properties.
However, I have some problems when I tried to combine the code for Langium/Monaco editor/GLSP.

I initiated the langium project with web worker (following the official guide), and then npm run build to generate the 'out' folder for the code (I didn't change anything about the langium project).
I copy-paste the code into the GLSP folder:

And then I called the functions from them:

    protected async createEditor(): Promise<void> {
        const monacoEditorRoot = document.getElementById('monaco-editor-root') as HTMLElement;
        if (monacoEditorRoot) {
            console.log('Found monacoEditorRoot:', monacoEditorRoot.id);
            configureMonacoWorkers();

            try {
                await executeClassic(monacoEditorRoot);
                console.log('Monaco Editor initialized successfully.');
            } catch (error) {
                console.error('Error initializing Monaco Editor:', error);
            }
        }
    }

The editor seems loaded but the console log shows it stucked at:

2024-12-10T00:42:26.917Z root INFO Starting Language Client:  {}
2024-12-10T00:42:26.917Z root INFO Initializing vscode services. Caller: monaco-editor (68)
2024-12-10T00:42:26.921Z root INFO Loading service: codeEditorService
2024-12-10T00:42:26.924Z root INFO Loading service: editorService
2024-12-10T00:42:26.924Z root INFO Loading service: textEditorService
2024-12-10T00:42:26.924Z root INFO Loading service: editorGroupsService
2024-12-10T00:42:26.924Z root INFO Loading service: fileService
2024-12-10T00:42:26.924Z root INFO Loading service: textFileService
2024-12-10T00:42:26.924Z root INFO Loading service: filesConfigurationService
2024-12-10T00:42:26.924Z root INFO Loading service: elevatedFileService
2024-12-10T00:42:26.924Z root INFO Loading service: keybindingService
2024-12-10T00:42:26.924Z root INFO Loading service: keyboardLayoutService
2024-12-10T00:42:26.924Z root INFO Loading service: commandService
2024-12-10T00:42:26.924Z root INFO Loading service: labelService
2024-12-10T00:42:26.924Z root INFO Loading service: configurationService
2024-12-10T00:42:26.924Z root INFO Loading service: contextService
2024-12-10T00:42:26.924Z root INFO Loading service: textResourceConfigurationService
2024-12-10T00:42:26.924Z root INFO Loading service: workspaceEditingService
2024-12-10T00:42:26.924Z root INFO Loading service: workspacesService
2024-12-10T00:42:26.924Z root INFO Loading service: textResourcePropertiesService
2024-12-10T00:42:26.924Z root INFO Loading service: languageService
2024-12-10T00:42:26.924Z root INFO Loading service: ILanguageStatusService
2024-12-10T00:42:26.924Z root INFO Loading service: textModelService

and no more loading, I know in the official example there will be more to load:

Loading service: codeEditorService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: editorService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textEditorService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: editorGroupsService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: fileService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textFileService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: filesConfigurationService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: elevatedFileService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: keybindingService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: keyboardLayoutService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: commandService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: labelService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: configurationService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: contextService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textResourceConfigurationService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: workspaceEditingService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: workspacesService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textResourcePropertiesService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: themeService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textMateTokenizationFeature
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: languageService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: ILanguageStatusService
chunk-645LP2ME.js?v=3262e1c5:26741 Loading service: textModelService
chunk-645LP2ME.js?v=3262e1c5:26764 Initialization of vscode services completed successfully.
monaco-editor-wrapper.js?v=3262e1c5:17301 Starting monaco-editor (61)

monaco-editor-wrapper.js?v=3262e1c5:17301 Init of Extended App was completed.
monaco-editor-wrapper.js?v=3262e1c5:17301 languageClientWrapper (unnamed): Started successfully.
monaco-editor-wrapper_workerFactory.js?v=3262e1c5:70 getWorker: moduleId: workerMain.js label: editorWorkerService

And no editor showed on my div element.
I'm not sure whats going on here and there are no error messages in the console.

Could you help me with this?

Thank you.

[kaisalmen]

Hi @YourHarbour the web template in the langium generator is a bit outdated and the next major version of this is not yet released. The langium web generator guide will be updated at some point after the next release.

Is it possible to share your code, because I currently don't know why it does not start.

Btw, we have a react example of the statemachine in this repository as well that uses the current code:
https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/langium/statemachine/main-react.tsx
You could also use this as a baseline for your integration.

[YourHarbour]

Hi @kaisalmen , thank you for the reply.
I've uploaded the code on Github private repo and invited you, the main code for langium is in project-templates/java-emf-theia/glsp-client/tasklist-glsp/src/actions/TextEditorUIExtension.ts

I had a look at the statemachine example before, but it looks different in structure from the official generated one, but I will have a trial with that one.

I think my main question is more about whether my actions are correct, npm run build then put the whole out folder into the GLSP. Could you give me some hints on these?

Thank you!