Added devtools packages to the main build. Dependencies updates and clean-ups.

.eslintrc.json

@@ -65,6 +65,7 @@
         "@typescript-eslint/prefer-for-of": "error",                // prefer for-of loop over arrays
         "@typescript-eslint/prefer-namespace-keyword": "error",     // prefer namespace over module in TypeScript
         "@typescript-eslint/triple-slash-reference": "error",       // ban /// <reference />, prefer imports
-        "@typescript-eslint/type-annotation-spacing": "error"       // consistent space around colon ':'
+        "@typescript-eslint/type-annotation-spacing": "error",       // consistent space around colon ':'
+        "@typescript-eslint/consistent-type-imports": "error"
     }
 }

examples/calico-colors/package.json

@@ -1,89 +1,85 @@
 {
-	"name": "calico-colors",
-	"description": "Calico Colors - A Webview View API Sample",
-	"version": "0.0.1",
-	"publisher": "vscode-messenger-examples",
-	"private": true,
-	"license": "MIT",
-	"engines": {
-		"vscode": "^1.74.0"
-	},
-	"extensionKind": [
-		"ui",
-		"workspace"
-	],
-	"categories": [
-		"Other"
-	],
-	"activationEvents": [
-		"onView:calicoColors.colorsView",
-		"onCommand:calicoColors.addColor",
-		"onCommand:calicoColors.clearColors",
-		"onWebviewPanel:catCoding"
-	],
-	"main": "./out/extension.js",
-	"contributes": {
-		"views": {
-			"explorer": [
-				{
-					"type": "webview",
-					"id": "calicoColors.colorsView",
-					"name": "Calico Colors"
-				}
-			]
-		},
-		"commands": [
-			{
-				"command": "calicoColors.addColor",
-				"category": "Calico Colors",
-				"title": "Add Color"
-			},
-			{
-				"command": "calicoColors.clearColors",
-				"category": "Calico Colors",
-				"title": "Clear Colors",
-				"icon": "$(clear-all)"
-			},
-			{
-				"command": "catCoding.start",
-				"title": "Start cat coding session",
-				"category": "Cat Coding"
-			},
-			{
-				"command": "catCoding.doRefactor",
-				"title": "Do some refactoring",
-				"category": "Cat Coding"
-			}
-		],
-		"menus": {
-			"view/title": [
-				{
-					"command": "calicoColors.clearColors",
-					"group": "navigation",
-					"when": "view == calicoColors.colorsView"
-				}
-			]
-		}
-	},
-	"scripts": {
-		"clean": "rimraf out",
-		"build": "npm run compile",
-		"vscode:prepublish": "npm run compile",
-		"compile": "tsc -p ./ && npm run browserify",
-		"lint": "eslint . --ext .ts,.tsx",
-		"browserify": "browserify ./media/calico-colors/main.js > ./media/web-view-bundle-calico-colors.js && browserify ./media/coding-cat/main.js > ./media/web-view-bundle-coding-cat.js",
-		"watch": "tsc -w -p ./"
-	},
-	"dependencies": {
-		"vscode-messenger": "^0.5.0",
-		"vscode-messenger-webview": "^0.5.0"
-	},
-	"devDependencies": {
-		"browserify": "^17.0.0",
-		"@types/vscode": "^1.53.0",
-		"@typescript-eslint/eslint-plugin": "^5.19.0",
-		"@typescript-eslint/parser": "^5.19.0",
-		"eslint": "^8.13.0",
-		"typescript": "^4.6.3"
-	}
+  "name": "calico-colors",
+  "description": "Calico Colors - A Webview View API Sample",
+  "version": "0.0.1",
+  "publisher": "vscode-messenger-examples",
+  "private": true,
+  "license": "MIT",
+  "engines": {
+    "vscode": "^1.74.0"
+  },
+  "extensionKind": [
+    "ui",
+    "workspace"
+  ],
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "onView:calicoColors.colorsView",
+    "onCommand:calicoColors.addColor",
+    "onCommand:calicoColors.clearColors",
+    "onWebviewPanel:catCoding"
+  ],
+  "main": "./out/extension.js",
+  "contributes": {
+    "views": {
+      "explorer": [
+        {
+          "type": "webview",
+          "id": "calicoColors.colorsView",
+          "name": "Calico Colors"
+        }
+      ]
+    },
+    "commands": [
+      {
+        "command": "calicoColors.addColor",
+        "category": "Calico Colors",
+        "title": "Add Color"
+      },
+      {
+        "command": "calicoColors.clearColors",
+        "category": "Calico Colors",
+        "title": "Clear Colors",
+        "icon": "$(clear-all)"
+      },
+      {
+        "command": "catCoding.start",
+        "title": "Start cat coding session",
+        "category": "Cat Coding"
+      },
+      {
+        "command": "catCoding.doRefactor",
+        "title": "Do some refactoring",
+        "category": "Cat Coding"
+      }
+    ],
+    "menus": {
+      "view/title": [
+        {
+          "command": "calicoColors.clearColors",
+          "group": "navigation",
+          "when": "view == calicoColors.colorsView"
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "clean": "rimraf out",
+    "build": "npm run compile",
+    "vscode:prepublish": "npm run compile",
+    "compile": "tsc -p ./ && npm run browserify",
+    "lint": "eslint . --ext .ts,.tsx",
+    "browserify": "browserify ./media/calico-colors/main.js > ./media/web-view-bundle-calico-colors.js && browserify ./media/coding-cat/main.js > ./media/web-view-bundle-coding-cat.js",
+    "watch": "tsc -w -p ./"
+  },
+  "dependencies": {
+    "vscode-messenger": "^0.5.0",
+    "vscode-messenger-webview": "^0.5.0"
+  },
+  "devDependencies": {
+    "browserify": "^17.0.0",
+    "@types/vscode": "^1.53.0"
+  }
 }

examples/calico-colors/src/calico-colors-view.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import * as vscode from 'vscode';
 import { Messenger } from 'vscode-messenger';
 import { NotificationType, RequestType } from "vscode-messenger-common";

examples/calico-colors/src/cat-coding-view.ts

@@ -1,15 +1,13 @@
 import * as vscode from 'vscode';
-import { Messenger } from 'vscode-messenger';
+import type { Messenger } from 'vscode-messenger';
 import { BugIntroduced, Refactor } from './message-types';
 
-
 const cats = {
     'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
     'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif',
     'Testing Cat': 'https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif'
 };
 
-
 /**
  * Manages cat coding webview panels
  */
@@ -57,7 +55,7 @@ export class CatCodingPanel {
     private static doRegisterWebViewPanel(panel: vscode.WebviewPanel, messenger: Messenger): void {
         messenger.registerWebviewPanel(panel, { broadcastMethods: [BugIntroduced.method] });
     }
-    
+
     private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, messenger: Messenger) {
         this._panel = panel;
         this._extensionUri = extensionUri;
@@ -72,7 +70,7 @@ export class CatCodingPanel {
 
         // Update the content based on view changes
         this._panel.onDidChangeViewState(
-            e => {
+            _e => {
                 if (this._panel.visible) {
                     this._update();
                 }
@@ -194,7 +192,6 @@ export function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptio
     };
 }
 
-
 function getNonce() {
     let text = '';
     const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

examples/calico-colors/src/extension.ts

@@ -3,68 +3,70 @@
  */
 
 import * as vscode from 'vscode';
-import { Messenger, MessengerDiagnostic } from 'vscode-messenger';
+import type { MessengerDiagnostic } from 'vscode-messenger';
+import { Messenger } from 'vscode-messenger';
 import { ColorsViewProvider } from './calico-colors-view';
 import { CatCodingPanel, getWebviewOptions } from './cat-coding-view';
 
 export function activate(context: vscode.ExtensionContext) {
-	const messenger = new Messenger();
+    const messenger = new Messenger();
 
-	// Calico colors view
-	const provider = new ColorsViewProvider(context.extensionUri, messenger);
+    // Calico colors view
+    const provider = new ColorsViewProvider(context.extensionUri, messenger);
 
-	context.subscriptions.push(
-		vscode.window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider));
+    context.subscriptions.push(
+        vscode.window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider));
 
-	context.subscriptions.push(
-		vscode.commands.registerCommand('calicoColors.addColor', () => {
-			provider.addColor();
-		}));
+    context.subscriptions.push(
+        vscode.commands.registerCommand('calicoColors.addColor', () => {
+            provider.addColor();
+        }));
 
-	context.subscriptions.push(
-		vscode.commands.registerCommand('calicoColors.clearColors', () => {
-			provider.clearColors();
-		}));
+    context.subscriptions.push(
+        vscode.commands.registerCommand('calicoColors.clearColors', () => {
+            provider.clearColors();
+        }));
 
-	// Coding cat view
-	context.subscriptions.push(
-		vscode.commands.registerCommand('catCoding.start', () => {
-			CatCodingPanel.createOrShow(context.extensionUri, messenger);
-		})
-	);
+    // Coding cat view
+    context.subscriptions.push(
+        vscode.commands.registerCommand('catCoding.start', () => {
+            CatCodingPanel.createOrShow(context.extensionUri, messenger);
+        })
+    );
 
-	context.subscriptions.push(
-		vscode.commands.registerCommand('catCoding.doRefactor', () => {
-			if (CatCodingPanel.currentPanel) {
-				CatCodingPanel.currentPanel.doRefactor();
-			}
-		})
-	);
+    context.subscriptions.push(
+        vscode.commands.registerCommand('catCoding.doRefactor', () => {
+            if (CatCodingPanel.currentPanel) {
+                CatCodingPanel.currentPanel.doRefactor();
+            }
+        })
+    );
 
-	if (vscode.window.registerWebviewPanelSerializer) {
-		// Make sure we register a serializer in activation event
-		vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
-			async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
-				console.log(`Got state: ${state}`);
-				// Reset the webview options so we use latest uri for `localResourceRoots`.
-				webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
-				CatCodingPanel.revive(webviewPanel, context.extensionUri, messenger);
-			}
-		});
-	}
+    if (vscode.window.registerWebviewPanelSerializer) {
+        // Make sure we register a serializer in activation event
+        vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
+                console.log(`Got state: ${state}`);
+                // Reset the webview options so we use latest uri for `localResourceRoots`.
+                webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
+                CatCodingPanel.revive(webviewPanel, context.extensionUri, messenger);
+            }
+        });
+    }
 
-	// Diagnostic registration
-	const diagnostics = messenger.diagnosticApi({ withParameterData: true, withResponseData: true });
-	return {
-		...diagnostics,
-		addEventListener: (listener) => {
-			// wrap listener to change the `method` to also contain the passed parameter 
-			return diagnostics.addEventListener((e) => {
-				if (e.method === 'colorSelected') {
-					e.method = `colorSelected(${JSON.stringify(e.parameter)})`;
-				}
-				listener(e);
-			});
-		}
-	} as MessengerDiagnostic;
+    // Diagnostic registration
+    const diagnostics = messenger.diagnosticApi({ withParameterData: true, withResponseData: true });
+    return {
+        ...diagnostics,
+        addEventListener: (listener) => {
+            // wrap listener to change the `method` to also contain the passed parameter
+            return diagnostics.addEventListener((e) => {
+                if (e.method === 'colorSelected') {
+                    e.method = `colorSelected(${JSON.stringify(e.parameter)})`;
+                }
+                listener(e);
+            });
+        }
+    } as MessengerDiagnostic;
 }

examples/calico-colors/src/message-types.ts

@@ -1,5 +1,4 @@
-import { NotificationType } from "vscode-messenger-common";
-
+import type { NotificationType } from 'vscode-messenger-common';
 
 export const BugIntroduced: NotificationType<{
     command: string,
@@ -8,7 +7,7 @@ export const BugIntroduced: NotificationType<{
     method: 'bugIntroduced'
 };
 
-export const Refactor: NotificationType<{text:string}> = {
+export const Refactor: NotificationType<{ text: string }> = {
     method: 'refactor'
 };