Help with adding GLSP to an existing extension

[david-pa]

I am currently developing a VSCode extension that leverages the VSCode LSP, and I recently added an implementation of the GLSP to my extension, using one of the example repos as a base. Here is a brief, simplified view of the file structure:

Main Extension Folder (uses npm)
|
|- client
|   |- src
|   |   |- extension.ts (activation function and misc. extension functions)
|
|- server
|   |- src
|   |   |- server.ts (server startup code and misc. handlers)
|
|- graphical-editor (uses yarn)
|   |- glsp-client-vscode (sub-extension's vscode-specific files)
|   |   |- workflow-vscode
|   |   |   |- extension
|   |   |   |   |- index.ts (activation function and misc. extension functions)
|   |   |   |   |- package.json (Sub-extension's VSCode UI contributions, extension metadata, etc.)
|   |   |   |
|   |   |   |- webview (files related to generation of editor's webview)
|   |   |
|   |   |- workflow-glsp (required non-vscode files)
|
|- package.json (Main extension's VSCode UI contributions, extension metadata, etc.)

Currently, if I were to start the main extension and this sub-extension together, I think because they both have their own UI contributions or because they have seperate activate(context: vscode.ExtensionContext) functions (or perhaps both), it ends up opening two separate windows of VSCode. One of the windows has the main extension displayed, the other the GLSP implementation. What I'm trying to do is get the two to show up as part of the same extension, with the main extension contributing a ViewContainer and a few custom Views, and the sub-extension contributing the custom editor via GLSP.

Is there currently a way for me to define/include the sub-extension as part of my main extension without copying the files into the client? The the workspace setup of GLSP does not seem to lend itself to being restructured (i.e. taking the extension directory's files and placing them in the client -> src directory), which is the main issue at the moment, as if they can't share a package.json file or activate() function I do not believe they can run in the same window, as far as I'm aware.

[martin-fleck-at]

@david-pa Afaik there is no concept of sub-extension in VS Code. You can have two separate extensions where one depends on the other being installed or you need to merge them into a single VS Code extension with a single extension entry point (i.e., the main from your package.json, the file that has the activate method).

If you want to merge the extensions, you need to make sure that the entry point file starts all the required contributions for LSP and GLSP. Currently, it seems that your structure has "two" entry points, client/src/extension.ts and graphical-editor/glps-client-vscode/workflow-vscode/extension/index.ts. They would need to be merged into a single extension that starts all the contributions.

The tricky part is getting the build system working as you would expect, i.e., you probably need to use webpack to ensure that your extension is bundled into a single file (referenced as main entry point), that your LSP server is packaged into a single file (so that it can be started as a node module) and that your webview is bundled as a single file (so that you can use it in your custom GLSP editor provider). You can do it with webpack by defining multiple input-output pairs in your entry context. I personally only did this once where I had an LSP server and a GLSP server in the same extension but the GLSP client was defined in a separate package.

One advantage, however, of having a separate packages (like we do in our example repo where we simply generate the single-file webpack output in the extension directly.) is that each part has their own package.json so the dependencies do not get mixed. Nevertheless, I believe webpack should also allow you to put everything into one extension as well.