GH-1294: Fix packaging for node-json-vscode template (#211)

-Ensure that server bundle is copied to the extension dist on webpack build
- Fix server module path resolution in `tasklist-extension`
- Ensure that main entry of package.json points to dist entry file
-Fix eslint setup
- Update readme
- Update launch configuration to fix sourcemaps resolving

Fixes eclipse-glsp/glsp#1294

Author: tortmayr

project-templates/node-json-vscode/.gitignore

@@ -3,3 +3,4 @@ node_modules
 lib
 out
 dist
+*.vsix

project-templates/node-json-vscode/.vscode/launch.json

@@ -14,11 +14,13 @@
         "--extensionDevelopmentPath=${workspaceFolder}/tasklist-vscode/extension"
       ],
       "outFiles": [
-        "${workspaceFolder}/tasklist-vscode/extension/lib/*.js",
-        "${workspaceFolder}/node_modules/@eclipse-glsp/*/lib/**/*.js",
-        "${workspaceFolder}/node_modules/@eclipse-glsp/*/lib/*.js"
+        "${workspaceFolder}/tasklist-vscode/extension/dist/*.js",
+        "${workspaceFolder}/node_modules/@eclipse-glsp/**/*.js"
       ],
-      "sourceMaps": true
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack://tasklist-vscode/(.+)": "${workspaceFolder}/tasklist-vscode/extension/$1"
+      }
     },
     {
       "name": "Launch TaskList Diagram Extension (External GLSP Server)",
@@ -30,10 +32,13 @@
         "--extensionDevelopmentPath=${workspaceFolder}/tasklist-vscode/extension"
       ],
       "outFiles": [
-        "${workspaceFolder}/tasklist-vscode/extension/lib/*.js",
-        "${workspaceFolder}/node_modules/@eclipse-glsp/*/lib/**/*.js"
+        "${workspaceFolder}/tasklist-vscode/extension/dist/*.js",
+        "${workspaceFolder}/node_modules/@eclipse-glsp/**/*.js"
       ],
       "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack://tasklist-vscode/(.+)": "${workspaceFolder}/tasklist-vscode/extension/$1"
+      },
       "env": {
         "TASKLIST_SERVER_DEBUG": "true",
         "TASKLIST_SERVER_PORT": "5007"

project-templates/node-json-vscode/README.md

@@ -43,15 +43,13 @@ Alternatively, you can also open the `Extension View` (Ctrl + Shift + X) and typ
 
 ## Building the example
 
-The server component and the client component have to be built using `yarn`.
-A convenience script to build both is provided.
-To build all components execute the following in the directory containing this README:
+To build and bundle all components execute the following in the directory containing this README:
 
 ```bash
-yarn build
+yarn
 ```
 
-## Running the examples
+## Running the example
 
 To start the example open the directory containing this README in VS Code and then navigate to the `Run and Debug` view (Ctrl + Shift + D).
 Here you can choose between four different launch configurations:
@@ -72,6 +70,16 @@ Here you can choose between four different launch configurations:
     `Tasklist GLSP server` process.
     Enables debugging of both the `glsp-client` and `glsp-server`code simultaneously.
 
+## Packaging the example
+
+To package the example extension as `*.vsix` execute the following in the directory containing this README:
+
+```bash
+yarn package
+```
+
+This will create a `tasklist-vscode-*.vsix` file (located in the [extension directory](./tasklist-vscode/extension/)) that can be installed in VS Code.
+
 ## Next steps
 
 Once you are up and running with this project template, we recommend to refer to the [Getting Started](https://www.eclipse.org/glsp/documentation) to learn how to

project-templates/node-json-vscode/package.json

@@ -31,6 +31,7 @@
     "clean": "lerna run clean",
     "lint": "lerna run lint",
     "lint:ci": "lerna run lint:ci",
+    "package": "yarn --cwd tasklist-vscode/extension package",
     "prepare": "lerna run prepare",
     "watch": "lerna run --parallel watch"
   },

project-templates/node-json-vscode/tasklist-glsp-server/package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@eclipse-glsp/server": "2.0.0",
     "inversify": "6.0.1",
+    "reflect-metadata": "0.1.13",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"

project-templates/node-json-vscode/tasklist-vscode/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tasklist-vscode",
   "displayName": "Tasklist GLSP Diagram Editor",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": "true",
   "description": "Extension for Tasklist GLSP diagrams",
   "categories": [
@@ -24,7 +24,7 @@
     }
   ],
   "publisher": "Eclipse-GLSP",
-  "main": "./lib/index",
+  "main": "dist/tasklist-extension.js",
   "files": [
     "lib",
     "server",
@@ -163,6 +163,7 @@
     "@eclipse-glsp/vscode-integration": "2.0.0",
     "@types/node": "16.x",
     "@types/vscode": "^1.54.0",
+    "@vscode/vsce": "^2.24.0",
     "copy-webpack-plugin": "^11.0.0",
     "path": "^0.12.7",
     "reflect-metadata": "^0.1.13",

project-templates/node-json-vscode/tasklist-vscode/extension/src/index.ts

@@ -14,6 +14,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 OR MIT
  ********************************************************************************/
+import 'reflect-metadata';
+
 import {
     configureDefaultCommands,
     GlspSocketServerLauncher,
@@ -22,10 +24,8 @@ import {
 } from '@eclipse-glsp/vscode-integration/node';
 import * as path from 'path';
 import * as process from 'process';
-import 'reflect-metadata';
 import * as vscode from 'vscode';
 import TaskListEditorProvider from './tasklist-editor-provider';
-const MODULE_PATH = require.resolve('tasklist-glsp-server');
 export const LOG_DIR = path.join(__dirname, '..', '..', 'logs');
 
 const DEFAULT_SERVER_PORT = '0';
@@ -35,8 +35,9 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     let serverProcess: GlspSocketServerLauncher | undefined;
 
     if (process.env.TASKLIST_SERVER_DEBUG !== 'true') {
+        const modulePath = vscode.Uri.joinPath(context.extensionUri, 'dist', 'tasklist-glsp-server.js').fsPath;
         serverProcess = new GlspSocketServerLauncher({
-            executable: MODULE_PATH,
+            executable: modulePath,
             socketConnectionOptions: { port: JSON.parse(process.env.TASKLIST_SERVER_PORT || DEFAULT_SERVER_PORT) },
             additionalArgs: ['--no-consoleLog', '--fileLog', '--logDir', LOG_DIR],
             logging: true

project-templates/node-json-vscode/tasklist-vscode/extension/src/tasklist-extension.ts

@@ -39,6 +39,9 @@ const config = {
             patterns: [
                 {
                     from: path.resolve(__dirname, '..', 'webview', 'dist')
+                },
+                {
+                    from: path.resolve(__dirname, '..', '..', 'tasklist-glsp-server', 'dist')
                 }
             ]
         })

project-templates/node-json-vscode/tasklist-vscode/extension/webpack.config.js

@@ -5,5 +5,5 @@
     "noEmit": true
   },
   "exclude": ["**/node_modules", "**/.eslintrc.js"],
-  "include": ["tasklist-glsp/src", "tasklist-vscode/*/src"]
+  "include": ["tasklist-glsp-client/src", "tasklist-glsp-server/src", "tasklist-vscode/*/src"]
 }