Version Updates

.eslintrc.json

@@ -10,7 +10,16 @@
     "rules": {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/ban-ts-comment": "off",
-        "@typescript-eslint/no-namespace": "off"
+        "@typescript-eslint/no-namespace": "off",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_",
+                "caughtErrorsIgnorePattern": "^_"
+            }
+        ]
     },
-    "ignorePatterns": ["**/*.d.ts", "lib", "dist", "webpack.config.js"]
+    "ignorePatterns": ["**/*.d.ts", "lib", "dist", "pack", "webpack.config.js"]
 }

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
                   key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
             - uses: actions/setup-node@v2
               with:
-                  node-version: 14.x
+                  node-version: 16.x
             - run: yarn
             - run: yarn lint
             - run: yarn build

.github/workflows/package.yml

@@ -20,7 +20,7 @@ jobs:
                   key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
             - uses: actions/setup-node@v2
               with:
-                  node-version: 14.x
+                  node-version: 16.x
                   registry-url: 'https://registry.npmjs.org'
                   scope: '@kieler'
             - run: yarn

.github/workflows/publish.yml

@@ -20,7 +20,7 @@ jobs:
                   key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}
             - uses: actions/setup-node@v2
               with:
-                  node-version: "14.x"
+                  node-version: "16.x"
                   registry-url: 'https://registry.npmjs.org'
                   scope: '@kieler'
             - run: yarn
@@ -48,7 +48,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v2
               with:
-                  node-version: "14.x"
+                  node-version: "16.x"
             - run: yarn
             - run: yarn package
 

.gitignore

@@ -3,6 +3,7 @@ dist
 lerna-debug.log
 lib
 node_modules
+pack
 plugins
 src-gen
 workspace

applications/klighd-cli/package.json

@@ -32,31 +32,38 @@
   },
   "dependencies": {
     "@kieler/klighd-core": "^0.4.2",
+    "buffer": "^6.0.3",
     "commander": "^8.1.0",
+    "crypto-browserify": "^3.12.0",
     "fastify": "^3.15.0",
     "fastify-static": "^4.0.1",
     "fastify-websocket": "^3.1.0",
     "get-port": "^5.1.1",
+    "net": "^1.0.2",
     "open": "^7.4.2",
+    "os-browserify": "^0.3.0",
     "pino-pretty": "^4.7.1",
-    "reflect-metadata": "^0.1.13",
-    "vscode-languageserver-protocol": "^3.16.0",
+    "reflect-metadata": "^0.2.1",
+    "setimmediate": "^1.0.5",
+    "stream-browserify": "^3.0.0",
+    "vscode-languageserver-protocol": "^3.17.5",
     "vscode-ws-jsonrpc": "^0.2.0"
   },
   "devDependencies": {
     "@types/ws": "^7.4.4",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
-    "css-loader": "^5.2.4",
+    "clean-webpack-plugin": "^4.0.0",
     "cross-var": "^1.1.0",
+    "css-loader": "^6.8.1",
     "file-loader": "6.2.0",
-    "html-webpack-plugin": "4",
-    "mini-css-extract-plugin": "^1.6.0",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-polyfill-webpack-plugin": "^3.0.0",
     "npm-run-all": "^4.1.5",
-    "pkg": "^5.1.0",
+    "pkg": "^5.8.1",
     "replace": "^1.2.2",
     "rimraf": "^4.4.0",
-    "ts-loader": "^8.0.3",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^4.7.2"
+    "ts-loader": "^9.5.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   }
 }

applications/klighd-cli/src/main.ts

@@ -32,6 +32,7 @@ import { showPopup } from "./popup";
 import { LSPConnection } from "./services/connection";
 import { LocalStorage } from "./services/persistence";
 import { showSpinner, hideSpinner } from "./spinner";
+import "setimmediate"; // polyfill for webpack >=5
 
 // IIFE booting the application
 (async function main() {

applications/klighd-cli/webpack.config.js

@@ -20,10 +20,16 @@ module.exports = {
 
     resolve: {
         extensions: [".tsx", ".ts", ".js"],
+        fallback: {
+            "buffer": require.resolve("buffer"),
+            "crypto": require.resolve("crypto-browserify"),
+            "os": require.resolve("os-browserify/browser"),
+            "stream": require.resolve("stream-browserify"),
+        },
     },
 
     node: {
-        net: "mock",
+        __dirname: 'mock',
     },
 
     module: {
@@ -63,5 +69,13 @@ module.exports = {
             chunkFilename: "[id].css",
         }),
         new HtmlWebpackPlugin({ template: "index.html", cache: false }),
+        // Work around for Buffer is undefined:
+        // https://github.com/webpack/changelog-v5/issues/10
+        new webpack.ProvidePlugin({
+            Buffer: ['buffer', 'Buffer'],
+        }),
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+        }),
     ],
 };

applications/klighd-vscode/README.md

@@ -109,20 +109,19 @@ To intercept an action, your extension has to provide an action handler with the
 signature:
 
 ```typescript
-// Return `true` if the action should be forwarded to the language server. `false` otherwise.
-type ActionHandler = (action: { kind: string }) => Promise<boolean>;
+type ActionHandler = (action: { kind: string }) => Promise<void>;
 ```
 
 To register your action handler with the `klighd-vscode` extension call the following command:
 
 ```typescript
-// - refId: your registration id returned from the setLanguageClient command
 // - kind: the action kind that should be intercepted by the handler
 // - handler: the action handler that is called for the provided action type.
-vscode.commands.executeCommand("klighd-vscode.addActionHandler", refId: string, kind: string, handler: ActionHandler);
+vscode.commands.executeCommand("klighd-vscode.addActionHandler", kind: string, handler: ActionHandler);
 ```
 
 ### Dispatching Actions
+*This feature is currently not supported*
 
 The KLighD diagram extension provides the ability to send an action to all open diagram views that
 belong to the host extension. The action will be handled by the diagram core and potentially sent to

applications/klighd-vscode/package.json

@@ -13,7 +13,7 @@
     },
     "homepage": "https://rtsys.informatik.uni-kiel.de/kieler",
     "engines": {
-        "vscode": "^1.56.0"
+        "vscode": "^1.85.0"
     },
     "categories": [
         "Visualization",
@@ -74,12 +74,14 @@
             {
                 "command": "klighd-vscode.diagram.sync",
                 "title": "Enable Sync With Editor",
-                "enablement": "!klighd-vscode.syncWithEditor"
+                "enablement": "!klighd-vscode.syncWithEditor",
+                "category": "KLighD Diagram"
             },
             {
                 "command": "klighd-vscode.diagram.noSync",
                 "title": "Disable Sync With Editor",
-                "enablement": "klighd-vscode.syncWithEditor"
+                "enablement": "klighd-vscode.syncWithEditor",
+                "category": "KLighD Diagram"
             }
         ],
         "menus": {
@@ -151,27 +153,29 @@
         "distribute:ovsx": "ovsx publish --yarn klighd-vscode.vsix"
     },
     "devDependencies": {
-        "@types/node": "^12.11.7",
-        "@types/vscode": "^1.56.0",
-        "@types/vscode-webview": "^1.56.0",
-        "css-loader": "^5.2.4",
+        "@types/node": "^16.11.7",
+        "@types/vscode": "^1.85.0",
+        "@types/vscode-webview": "^1.57.4",
+        "css-loader": "^6.8.1",
         "file-loader": "6.2.0",
         "ovsx": "^0.2.0",
         "rimraf": "^4.4.0",
-        "style-loader": "2.0.0",
-        "ts-loader": "^8.0.14",
-        "typescript": "^4.3.0",
+        "style-loader": "3.3.3",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.3.3",
         "vsce": "^1.95.1",
-        "webpack": "^4.44.1"
+        "webpack": "^5.89.0",
+        "webpack-cli": "^5.1.4",
+        "source-map-loader": "^3.0.0"
     },
     "dependencies": {
         "@kieler/klighd-core": "^0.4.2",
-        "inversify": "^5.1.1",
+        "inversify": "^6.0.2",
         "nanoid": "^3.1.23",
-        "reflect-metadata": "^0.1.13",
-        "sprotty": "0.12.0",
-        "sprotty-vscode": "^0.3.1",
-        "sprotty-vscode-webview": "^0.3.1",
-        "vscode-languageclient": "^7.0.0"
+        "reflect-metadata": "^0.2.1",
+        "sprotty": "^1.1.0",
+        "sprotty-vscode": "^1.0.0",
+        "sprotty-vscode-webview": "^1.0.0",
+        "vscode-languageclient": "^9.0.1"
     }
 }

applications/klighd-vscode/src-webview/main.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021 by
+ * Copyright 2021-2023 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -32,7 +32,7 @@ import {
     VscodeDiagramWidgetFactory
 } from "sprotty-vscode-webview";
 import { DisabledKeyTool } from "sprotty-vscode-webview/lib/disabled-keytool";
-import { VsCodeApi } from "sprotty-vscode-webview/lib/services";
+import { VsCodeApi, VsCodeMessenger } from "sprotty-vscode-webview/lib/services";
 import { KlighdDiagramWidget } from "./klighd-widget";
 import { MessageConnection } from "./message-connection";
 import { MessagePersistenceStorage } from "./persistence-storage";
@@ -72,8 +72,8 @@ export class KLighDSprottyStarter extends SprottyStarter {
     }
 
     protected override createContainer(diagramIdentifier: SprottyDiagramIdentifier): Container {
-        const connection = new MessageConnection(this.vscodeApi);
-        const persistenceStorage = new MessagePersistenceStorage(this.vscodeApi);
+        const connection = new MessageConnection(this.messenger);
+        const persistenceStorage = new MessagePersistenceStorage(this.messenger);
         const container = createKlighdDiagramContainer(diagramIdentifier.clientId);
         bindServices(container, { connection, sessionStorage, persistenceStorage });
 
@@ -92,6 +92,7 @@ export class KLighDSprottyStarter extends SprottyStarter {
         diagramIdentifier: SprottyDiagramIdentifier
     ): void {
         container.bind(VsCodeApi).toConstantValue(this.vscodeApi)
+        container.bind(VsCodeMessenger).toConstantValue(this.messenger)
 
         container.bind(VscodeDiagramWidget).toSelf().inSingletonScope();
         container.bind(VscodeDiagramWidgetFactory).toFactory((context) => {
@@ -109,4 +110,4 @@ export class KLighDSprottyStarter extends SprottyStarter {
 }
 
 // Instantiate Starter if this file is used in a webview
-new KLighDSprottyStarter();
+new KLighDSprottyStarter().start();

applications/klighd-vscode/src-webview/message-connection.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021 by
+ * Copyright 2021-2023 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -18,9 +18,13 @@
 import { Connection, NotificationType } from "@kieler/klighd-core";
 import { inject, injectable } from "inversify";
 import { ServerStatusAction } from "sprotty";
-import { ActionMessage, isActionMessage } from "sprotty-protocol";
+import { ActionMessage, } from "sprotty-protocol";
+import { ActionNotification } from 'sprotty-vscode-protocol';
+import { LspNotification, LspRequest } from 'sprotty-vscode-protocol/lib/lsp';
 import { VscodeDiagramWidgetFactory } from "sprotty-vscode-webview";
-import { VsCodeApi } from "sprotty-vscode-webview/lib/services";
+import { NotificationMessage, RequestMessage } from 'vscode-languageclient';
+import { HOST_EXTENSION } from 'vscode-messenger-common';
+import { Messenger } from 'vscode-messenger-webview';
 
 /**
  * Message based {@link Connection} to the VS Code extension. `sprotty-vscode` is used in
@@ -31,21 +35,17 @@ import { VsCodeApi } from "sprotty-vscode-webview/lib/services";
 export class MessageConnection implements Connection {
     private messageHandlers: ((message: ActionMessage) => void)[] = [];
 
-    vscodeApi: VsCodeApi
-
     @inject(VscodeDiagramWidgetFactory)
     private diagramWidgetFactory!: VscodeDiagramWidgetFactory;
+    messenger: Messenger;
 
-    constructor(vscodeApi: VsCodeApi) {
-        this.vscodeApi = vscodeApi
+    constructor(messenger: Messenger) {
         this.messageHandlers.push(this.statusMessageHandler);
         this.messageHandlers.push(this.logHandler);
-
-        // Messages from a VS Code extension arrive as a message event on the window object
-        window.addEventListener("message", (msg) => {
-            if ("data" in msg && isActionMessage(msg.data)) {
-                this.notifyHandlers(msg.data);
-            }
+        this.messenger = messenger
+        // Messages from a VS Code extension arrive as a message event on the messenger
+        this.messenger.onNotification(ActionNotification, (msg) => {
+            this.notifyHandlers(msg)
         });
     }
 
@@ -62,22 +62,35 @@ export class MessageConnection implements Connection {
         }
     }
 
-    sendMessage(message: ActionMessage): void {
+    async sendMessage<R>(message: ActionMessage): Promise<R> {
         console.groupCollapsed(`MessageConnection sends ${message.action.kind} action:`);
         console.log(message);
         console.groupEnd();
-        this.vscodeApi.postMessage(message);
+
+        const theMessage: RequestMessage = {
+            jsonrpc: '2.0',
+            method: "diagram/accept",
+            id: message.clientId,
+            params: message
+        };
+        const response = await this.messenger.sendRequest(LspRequest, HOST_EXTENSION, theMessage);
+        if (response.error) {
+            throw new Error(String(response.error));
+        }
+        return response.result as unknown as R;
     }
 
     sendNotification<T extends Record<string, unknown>>(type: NotificationType, payload: T): void {
         console.groupCollapsed(`MessageConnection sends ${type} notification:`);
         console.log(payload);
         console.groupEnd();
 
-        // SprottyLSPWebview sends a message with the language client, if it
-        // has a method property and passes a params property as the second argument
-        // to languageClient.sendNotification.
-        this.vscodeApi.postMessage({ method: type, params: payload });
+        const message: NotificationMessage = {
+            jsonrpc: '2.0',
+            method: type,
+            params: payload as any
+        };
+        this.messenger.sendNotification(LspNotification, HOST_EXTENSION, message);
     }
 
     onMessageReceived(handler: (message: ActionMessage) => void): void {