Modernize: React 18, TypeScript 5, Fluent UI v9

.github/workflows/ci.yml

@@ -22,6 +22,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Install tfx-cli
+        run: npm install -g tfx-cli
+
       - name: Run lint
         run: bun run lint
 

.vscode/tasks.json

@@ -1,18 +1,42 @@
-// A task runner configuration.
+// VS Code task runner configuration
 {
-    "version": "0.1.0",
-    "command": "grunt",
-    "isShellCommand": true,
+    "version": "2.0.0",
     "tasks": [
         {
-            "taskName": "build",
-            "isBuildCommand": true,
-            "problemMatcher": "$msCompile"
+            "label": "Build (Dev)",
+            "type": "shell",
+            "command": "bun run package-dev",
+            "problemMatcher": "$msCompile",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
         },
         {
-            "taskName": "publish",
-            "isBuildCommand": false,
-            "problemMatcher": "$msCompile"
+            "label": "Build (Release)",
+            "type": "shell",
+            "command": "bun run package-release",
+            "problemMatcher": "$msCompile",
+            "group": "build"
+        },
+        {
+            "label": "Lint",
+            "type": "shell",
+            "command": "bun run lint",
+            "problemMatcher": "$eslint-stylish"
+        },
+        {
+            "label": "Format",
+            "type": "shell",
+            "command": "bun run format",
+            "problemMatcher": []
+        },
+        {
+            "label": "Dev Server",
+            "type": "shell",
+            "command": "bun run dev",
+            "problemMatcher": [],
+            "isBackground": true
         }
     ]
-}
+}

README.md

@@ -47,9 +47,60 @@ bun run package-release
 
 ### Local Testing
 
+#### Option 1: Dev Build + Upload (Recommended)
+
+```bash
+# Build dev package (creates .vsix with "-dev" suffix)
+bun run package-dev
+```
+
 1. Upload the `.vsix` file to [VS Marketplace](https://marketplace.visualstudio.com/manage/publishers/knowall-ai)
 2. Share with your test organization
 3. Install from Organization Settings → Extensions → Shared
+4. Add the widget to a dashboard and test
+
+#### Option 2: Local Dev Server
+
+For faster iteration during development:
+
+```bash
+# Start webpack dev server on port 3000
+bun run dev
+```
+
+Then create a `vss-extension-dev.json` with:
+```json
+{
+  "baseUri": "https://localhost:3000"
+}
+```
+
+And use `tfx extension create --manifest vss-extension-dev.json` to create a dev extension that loads from localhost.
+
+> **Note:** You'll need to accept the self-signed certificate in Chrome by visiting `https://localhost:3000` first.
+
+#### Option 3: Direct Publish
+
+```bash
+# Publish directly to marketplace (requires MARKETPLACE_PAT env var)
+tfx extension publish --vsix knowall-ai.contributions-widget-dev*.vsix --token $MARKETPLACE_PAT
+```
+
+### Code Quality
+
+```bash
+# Run linter
+bun run lint
+
+# Fix lint issues
+bun run lint:fix
+
+# Check formatting
+bun run format:check
+
+# Fix formatting
+bun run format
+```
 
 ## CI/CD
 

gulpfile.js

@@ -45,8 +45,9 @@ gulp.task('copy', gulp.series(
 );
 
 gulp.task('webpack', gulp.series(async () => {
-    const option = yargs.argv.release ? "-p" : "-d";
-    execSync(`node ./node_modules/webpack-cli/bin/cli.js ${option}`, {
+    // Webpack 5 uses --mode instead of -d/-p flags
+    const mode = yargs.argv.release ? "production" : "development";
+    execSync(`node ./node_modules/webpack-cli/bin/cli.js --mode ${mode}`, {
         stdio: [null, process.stdout, process.stderr]
     });
 }));

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "3.0.0",
   "scripts": {
+    "dev": "webpack serve --mode development --port 3000 --hot",
     "package-dev": "node ./node_modules/gulp/bin/gulp.js",
     "package-release": "node ./node_modules/gulp/bin/gulp.js --release",
     "format": "prettier --write \"scripts/**/*.{ts,tsx}\" \"styles/**/*.scss\"",
@@ -17,8 +18,8 @@
     "@types/jquery": "3.3.38",
     "@types/jqueryui": "1.12.7",
     "@types/knockout": "^3.4.40",
-    "@types/react": "^16.14.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "18",
+    "@types/react-dom": "18",
     "@types/requirejs": "^2.1.28",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -32,21 +33,24 @@
     "gulp-sass": "^5.1.0",
     "gulp-tslint": "^8.1.1",
     "gulp-webpack": "^1.5.0",
-    "office-ui-fabric-react": "^4.51.1",
     "prettier": "^3.2.5",
     "promise-polyfill": "^8.1.0",
     "requirejs": "^2.3.2",
     "sass": "^1.71.0",
-    "ts-loader": "^4.2.0",
+    "ts-loader": "9",
     "tslint": "^5.4.3",
-    "typescript": "^3.1.6",
+    "typescript": "5",
     "vss-web-extension-sdk": "^5.141.0",
-    "webpack": "^4.42.1",
+    "webpack": "5",
     "webpack-bundle-analyzer": "^3.5.2",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "5",
+    "webpack-dev-server": "^5.2.3"
   },
   "dependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "@fluentui/react-components": "^9.72.11",
+    "@fluentui/react-icons": "^2.0.317",
+    "react": "18",
+    "react-activity-calendar": "^3.1.1",
+    "react-dom": "18"
   }
 }