✨ NPM workspaces and Migrate to Vite for HMR in Webview Package (#71)

PR changes: 
- Replace Webpack with Vite for webview-ui. In development mode, the
extension is able to consume the webview running on a local vite dev
server which allows for HMR and a rapid development experience.
- Adds npm workspaces implementation for dependency sharing (typescript)
& better handling of build / dev scripts for development / production.
Lifts all eslint & prettier configuration to project root.
- Creates a new `shared` package that holds shared code between
webview-ui and extension.
- Can now run npm install && npm run dev from the project root to start
both development servers (webpack for extension & vite for ui)
- Vite enables HMR for webview development. Also removes need for
complex plugin configuration - only plugin needed now is the [vite react
plugin

](https://github.com/konveyor/editor-extensions/pull/71/files#diff-223561f5d3cf9a2528977c12fbd3b80c758ac2bf700fa6d85ff7071236178e30R2)
- Adds a new debugger pre launch task to start dev servers. This allows
us to start all development servers & open the debugger with f5.

Fixes #77 

TODO:
- Replace webpack copy plugin with something more robust
- Address vscode extension state management
- Improve webview messaging

---------

Signed-off-by: Ian Bolton <ibolton@redhat.com>

.github/workflows/ci-repo.yml

@@ -14,7 +14,6 @@ on:
 
   workflow_call:
 
-
 concurrency:
   group: ci-repo-${{ github.event_name }}-${{ github.ref }}
   cancel-in-progress: true
@@ -43,21 +42,22 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: "vscode/.nvmrc"
+          node-version-file: ".nvmrc"
 
-      - name: Cache extension node_modules
+      - name: Cache node_modules
         uses: actions/cache@v3
         with:
-          path: vscode/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('vscode/package-lock.json') }}
+          path: |
+            node_modules
+            vscode/node_modules
+            webview-ui/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
 
-      - name: Install dependencies
-        working-directory: ./vscode
+      - name: Install workspace dependencies
         run: |
           npm ci
 
       - name: Lint sources
-        working-directory: ./vscode
         run: npm run lint
 
   test:
@@ -81,29 +81,25 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: "vscode/.nvmrc"
+          node-version-file: ".nvmrc"
 
-      - name: Install dependencies
-        working-directory: ./vscode
-        run: npm ci
+      - name: Install workspace dependencies
+        run: |
+          npm ci
 
       # Run tests on Linux
       - name: Run tests (Linux)
         if: matrix.arch == 'linux'
-        working-directory: ./vscode
-        run: 
-          xvfb-run -a npm run test
+        run: xvfb-run -a npm test
 
       # Run tests on macOS
       - name: Run tests (macOS)
         if: matrix.arch == 'macos'
-        working-directory: ./vscode
         run: npm test
 
       # Run tests on Windows
       - name: Run tests (Windows)
         if: matrix.arch == 'windows'
-        working-directory: ./vscode
         shell: cmd
         run: npm test
 
@@ -129,14 +125,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: "vscode/.nvmrc"
+          node-version-file: ".nvmrc"
 
-      - name: Install dependencies
-        working-directory: ./vscode
+      - name: Install workspace dependencies
         run: npm ci
 
       - name: Build Package
-        working-directory: ./vscode
         run: npm run package
 
       - name: Generate .vsix package

.gitignore

@@ -1,8 +1,12 @@
-vscode/node_modules
-vscode/dist
-vscode/build
+node_modules/
+out/
+build/
+dist/
+
+# TypeScript build info
 vscode/tsconfig.tsbuildinfo
-vscode/tsbuildinfo
 vscode/.metadata
-vscode/org.eclipse*
-.aider*
+
+# Miscellaneous
+vscode/tsbuildinfo
+.vscode/*.aider*

.nvmrc

@@ -0,0 +1 @@
+v22.9.0

.vscode/launch.json

@@ -0,0 +1,40 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}/vscode"],
+      "outFiles": ["${workspaceFolder}/vscode/out/**/*.js"],
+      "env": {
+        "VSCODE_DEBUG_MODE": "true"
+      },
+      "preLaunchTask": "npm: dev"
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/vscode",
+        "--extensionTestsPath=${workspaceFolder}/vscode/out/test/suite/index"
+      ],
+      "outFiles": ["${workspaceFolder}/vscode/out/test/**/*.js"],
+      "preLaunchTask": "npm: test-watch - vscode"
+    },
+    {
+      "name": "Run Dev Script",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "env": {
+        "VSCODE_DEBUG_MODE": "true"
+      }
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,37 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm: dev",
+      "type": "npm",
+      "script": "dev",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "custom",
+        "fileLocation": [
+          "relative",
+          "${workspaceFolder}"
+        ],
+        "pattern": [
+          {
+            "regexp": ".*VITE v\\d+\\.\\d+\\.\\d+.*ready in.*",
+            "message": 0,
+            "file": 0,
+            "location": 0
+
+          },
+          {
+            "regexp": ".*webpack.*compiled successfully.*",
+            "message": 0,
+            "file": 0,
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*Executing task: npm run dev.*",
+          "endsPattern": ".*(VITE|webpack).*compiled successfully.*"
+        }
+      }
+    }
+  ]
+}