VS-Code Integration example can not be published/packaged

[rsoika]

Hi,
I have developed successful my first VS-Code integration for my custom GLSP diagram. I can run and test the extension with the .vscode launcher within VS-Code. So the next step is to publish the extension...

But I run into a problem when I try to package the extension into a .vsix file.

To generate the file I first run yarn install to build the whole package and than I run the following VSCE command from the extension directory

$ vsce package --yarn

This will generate the .vsix file with around 15MB which looks fine on the first glance. I can install the .vsix file within VS-Code successfully.

But the problem is, that the extension can not be activated within VS-Code as the activation failed because of a missing module:

...
2023-02-11 14:38:05.978 [info] ExtensionService#_doActivateExtension Eclipse-GLSP.workflow-vscode-example, startup: false, activationEvent: 'onCustomEditor:workflow.glspDiagram'
2023-02-11 14:38:05.981 [error] Activating extension Eclipse-GLSP.workflow-vscode-example failed due to an error:
2023-02-11 14:38:05.981 [error] Error: Cannot find module 'reflect-metadata'
Require stack:
- /home/rsoika/.vscode/extensions/eclipse-glsp.workflow-vscode-example-1.1.0-RC04/lib/index.js
- /usr/share/code/resources/app/out/vs/loader.js
- /usr/share/code/resources/app/out/bootstrap-amd.js
- /usr/share/code/resources/app/out/bootstrap-fork.js
- 
	at Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
	at i._resolveFilename (node:electron/js2c/utility_init:17:840)
	at Module._load (node:internal/modules/cjs/loader:832:27)
	at c._load (node:electron/js2c/asar_bundle:5:13343)
	at r._load (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:122:13360)
	at g._load (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:117:62400)
	at E._load (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:117:61793)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at p (/usr/share/code/resources/app/out/vs/loader.js:4:699)
	at Object.<anonymous> (/home/rsoika/.vscode/extensions/eclipse-glsp.workflow-vscode-example-1.1.0-RC04/lib/index.js:19:1)
	at u._compile (/usr/share/code/resources/app/out/vs/loader.js:4:1313)
	at Module._extensions..js (node:internal/modules/cjs/loader:1220:10)
	at Module.load (node:internal/modules/cjs/loader:1035:32)
	at Module._load (node:internal/modules/cjs/loader:876:12)
	at c._load (node:electron/js2c/asar_bundle:5:13343)
	at r._load (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:122:13360)
	at g._load (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:117:62400)
	at E._load (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:117:61793)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at require (node:internal/modules/cjs/helpers:102:18)
	at Function.r [as __$__nodeRequire] (/usr/share/code/resources/app/out/vs/loader.js:5:101)
	at f.pb (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:117:63664)
	at async Promise.all (index 0)

And inspecting the .vsix file shows that the /node_modules folder is missing. From reading several discussions I expect that this folder should be part of the .vsix file.

I played around some time to fix this issue by myself. But so far I did not found a solution. The problem can actually reproduced with the glsp-vscode-intgegration example.

Does anybody here has already created a VS-Code .vsix extension file form a GLSP Diagram?

Thanks for any hints...

[rsoika]

It looks like I somehow made it.

Compared to the workflow example, I mainly made changes to the package.json file in the /extension/ directory. The interesting part looks now like this:

  "dependencies": {
    "@vscode/codicons": "^0.0.25",
    "reflect-metadata": "^0.1.13",
    "sprotty-vscode-protocol": "0.3.0",
    "@eclipse-glsp/vscode-integration": "1.1.0-RC04"
  },
  "main": "./lib/index",
  "devDependencies": {
    "@types/vscode": "^1.54.0",
    "path": "^0.12.7",
    "ts-loader": "^6.2.1",
    "ts-node": "^10.8.2",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0"
  },
  "resolutions": {
    "**/sprotty": "0.13.0-next.f4445dd.342"
  },
  "workspaces": {
    "packages": [
      "**/@vscode/codicons",
      "**/@vscode/codicons/**",
      "**/open-bpmn-vscode-webview"
    ]
  }

In the dependency section I added

"reflect-metadata": "^0.1.13",
"sprotty-vscode-protocol": "0.3.0",
"@eclipse-glsp/vscode-integration": "1.1.0-RC04"

This is necessary for the activation of the extension.

I also added the resolutions section with the sprotty dependency:

"**/sprotty": "0.13.0-next.f4445dd.342"

(I do still not understand this part)

And in the workspaces section I added my webview module which is in the hirarchie on the same level as the extension:

  "**/open-bpmn-vscode-webview"

(the @vscode/codeicons are irritating and should not be needed)

And finally in the devDependencies section I did:

• remove @eclipse-glsp/vscode-integration, reflect-metadataand the xx-glsp-webview
• added @typescript-eslint/eslint-pluginand `@typescript-eslint/parser

To build the extension .vsix file I run:

$ yarn install
$ vsce package --yarn

Now the .vsix file can be installed and is activated correctly.