Use vscode ui components

.vscode/settings.json

@@ -4,8 +4,20 @@
 // - Linux: $HOME/.config/Code/User/settings.json
 // - Mac: $HOME/Library/Application Support/Code/User/settings.json
 {
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
 }

package.json

@@ -38,30 +38,21 @@
     "serve": "serve --cors -p 9000"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.17",
     "@vscode/codicons": "0.0.20",
-    "@vscode/webview-ui-toolkit": "^1.4.0",
-    "antd": "^5.22.1",
+    "@eclipse-cdt-cloud/vscode-ui-components": "0.0.1",
     "jszip": "^3.10.1",
     "node-fetch": "^2.6.7",
-    "primeflex": "^3.3.1",
-    "re-resizable": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0",
-    "throttle-debounce": "5.0.2",
     "vscode-messenger": "^0.4.5",
     "vscode-messenger-common": "^0.4.5",
-    "vscode-messenger-webview": "^0.4.5",
     "xml2js": "^0.4.23",
     "xmlbuilder2": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.17.17",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@types/throttle-debounce": "5.0.2",
     "@types/vscode": "^1.63.2",
     "@types/vscode-webview": "^1.57.0",
     "@types/xml2js": "^0.4.9",
@@ -79,7 +70,7 @@
     "timers-browserify": "^2.0.12",
     "ts-loader": "^9.2.6",
     "typescript": "^4.9.4",
-    "webpack": "^5.70.0",
+    "webpack": "^5.98.0",
     "webpack-cli": "4.9.1"
   },
   "contributes": {
@@ -433,4 +424,4 @@
     "workspace",
     "ui"
   ]
-}
+}

src/commands.ts

@@ -5,17 +5,17 @@
  * terms of the MIT License as outlined in the LICENSE File
  ********************************************************************************/
 
+import { CDTTreeMessengerType, CDTTreeWebviewContext } from '@eclipse-cdt-cloud/vscode-ui-components';
 import * as vscode from 'vscode';
 import { NumberFormat } from './common/format';
 import { PERIPHERAL_ID_SEP } from './common/peripheral-dto';
 import { VSCodeContextKeys } from './common/vscode-context';
-import { CTDTreeMessengerType, CTDTreeWebviewContext } from './components/tree/types';
 import { getFilePath } from './fileUtils';
 import { Commands } from './manifest';
-import { PeripheralBaseNode } from './plugin/peripheral/nodes';
-import { PeripheralConfigurationProvider } from './plugin/peripheral/tree/peripheral-configuration-provider';
-import { PeripheralDataTracker } from './plugin/peripheral/tree/peripheral-data-tracker';
-import { PeripheralsTreeTableWebView } from './plugin/peripheral/webview/peripheral-tree-webview-main';
+import { PeripheralBaseNode } from './model/peripheral/nodes';
+import { PeripheralConfigurationProvider } from './model/peripheral/tree/peripheral-configuration-provider';
+import { PeripheralDataTracker } from './model/peripheral/tree/peripheral-data-tracker';
+import { PeripheralsTreeTableWebView } from './views/peripheral/peripheral-view-provider';
 
 export class PeripheralCommands {
     public constructor(
@@ -98,7 +98,7 @@ export class PeripheralCommands {
         this.dataTracker.collapseAll();
     }
 
-    private async peripheralsSetFormat(context: PeripheralBaseNode | CTDTreeWebviewContext): Promise<void> {
+    private async peripheralsSetFormat(context: PeripheralBaseNode | CDTTreeWebviewContext): Promise<void> {
         const result = await vscode.window.showQuickPick([
             { label: 'Auto', description: 'Automatically choose format (Inherits from parent)', value: NumberFormat.Auto },
             { label: 'Hex', description: 'Format value in hexadecimal', value: NumberFormat.Hexadecimal },
@@ -110,7 +110,7 @@ export class PeripheralCommands {
         }
 
         let node: PeripheralBaseNode;
-        if (CTDTreeWebviewContext.is(context)) {
+        if (CDTTreeWebviewContext.is(context)) {
             node = this.dataTracker.getNodeByPath(context.cdtTreeItemId.split(PERIPHERAL_ID_SEP));
         } else {
             node = context;
@@ -121,7 +121,7 @@ export class PeripheralCommands {
     }
 
     private async find(): Promise<void> {
-        this.webview.sendNotification(CTDTreeMessengerType.openSearch);
+        this.webview.sendNotification(CDTTreeMessengerType.openSearch);
     }
 
     private async peripheralsForceRefresh(node?: PeripheralBaseNode): Promise<void> {
@@ -141,7 +141,7 @@ export class PeripheralCommands {
         this.dataTracker.togglePin(node);
     }
 
-    private ignorePeripheral(context: CTDTreeWebviewContext): void {
+    private ignorePeripheral(context: CDTTreeWebviewContext): void {
         const node = this.dataTracker.getNodeByPath(context.cdtTreeItemId.split(PERIPHERAL_ID_SEP));
         if (node.name) {
             this.config.addIgnorePeripherals(node.name);
@@ -152,11 +152,11 @@ export class PeripheralCommands {
         this.config.setIgnorePeripherals();
     }
 
-    private periodicRefreshMode(_context?: CTDTreeWebviewContext): void {
+    private periodicRefreshMode(_context?: CDTTreeWebviewContext): void {
         this.config.queryPeriodicRefreshMode();
     }
 
-    private periodicRefreshInterval(_context?: CTDTreeWebviewContext): void {
+    private periodicRefreshInterval(_context?: CDTTreeWebviewContext): void {
         this.config.queryPeriodicRefreshInterval();
     }
 }

src/common/index.ts

@@ -9,5 +9,4 @@ export * from './format';
 export * from './notification';
 export * from './peripheral-sort';
 export * from './peripheral-dto';
-export * from './utils';
 export * from './vscode';

src/common/peripheral-dto.ts

@@ -5,9 +5,9 @@
  * terms of the MIT License as outlined in the LICENSE File
  ********************************************************************************/
 
+import { hasProperty } from '@eclipse-cdt-cloud/vscode-ui-components';
 import { ClusterOptions, FieldOptions, PeripheralOptions, PeripheralRegisterOptions } from '../api-types';
 import { NumberFormat } from './format';
-import { hasProperty } from './utils';
 
 // ==== PeripheralBaseTreeNode ====
 

src/common/vscode.ts

@@ -7,32 +7,9 @@
 
 import { NumberFormat } from './format';
 
-export interface VSCodeContext {
-    'data-vscode-context': string;
-}
-
-export namespace VSCodeContext {
-    export function create(context: object): VSCodeContext {
-        return {
-            'data-vscode-context': JSON.stringify({
-                ...context,
-            })
-        };
-    }
-}
-
 export interface NodeSetting {
     node: string;
     expanded?: boolean;
     format?: NumberFormat;
     pinned?: boolean;
 }
-
-/**
- * A command definition that is manually inserted into the DOM and not by VSCode.
- */
-export interface CommandDefinition {
-    commandId: string;
-    icon: string;
-    title?: string;
-}