refactor: convert js to ts

.eslintrc.js

@@ -1,70 +0,0 @@
-module.exports = {
-  'env': {
-    'browser': false,
-    'es6': true,
-    'node': true,
-    'jasmine': true,
-  },
-  'plugins': [
-    'import'
-  ],
-  'extends': [
-    'eslint:recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings'
-  ],
-  'parser': '@babel/eslint-parser',
-  'parserOptions': {
-    'ecmaVersion': 6,
-    'sourceType': 'module'
-  },
-  'settings': {
-    'import/core-modules': [
-      'vscode'
-    ]
-  },
-  'rules': {
-    'comma-dangle': [
-      'error',
-      'only-multiline'
-    ],
-    'curly': [
-      'warn',
-      'all'
-    ],
-    'linebreak-style': [
-      // 'error',
-      'unix'
-    ],
-    'no-console': [
-      'error',
-      {
-        'allow': ['warn', 'error', 'info']
-      },
-    ],
-    'prefer-const': 'error',
-    'quotes': [
-      'error',
-      'single',
-      'avoid-escape'
-    ],
-    'semi': [
-      'error',
-      'always'
-    ],
-    'sort-imports': [
-      'warn',
-      {
-        'ignoreCase': false,
-        'ignoreMemberSort': false,
-        'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']
-      }
-    ],
-    'no-useless-escape': [
-      'off'
-    ],
-    'no-empty': [2, {
-      'allowEmptyCatch': true
-    }]
-  },
-};

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": [
+            "warn",
+            {
+                "selector": "import",
+                "format": [ "camelCase", "PascalCase" ]
+            }
+        ],
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

.vscode/launch.json

@@ -6,12 +6,9 @@
             "name": "Launch Extension",
             "type": "extensionHost",
             "request": "launch",
-            "runtimeExecutable": "${execPath}",
             "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
-            "preLaunchTask": "npm: build",
+            "preLaunchTask": "tsc: build - tsconfig.json",
             "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-            "sourceMaps": true,
-            "stopOnEntry": false
         },
         {
             "name": "Launch Tests",
@@ -23,7 +20,6 @@
                 "--extensionTestsPath=${workspaceRoot}/test"
             ],
             "preLaunchTask": "npm: build",
-            "stopOnEntry": false
         }
     ]
 }

.vscode/tasks.json

@@ -15,6 +15,21 @@
 			"problemMatcher": [],
 			"label": "npm: format",
 			"detail": "prettier --single-quote --print-width 88 --write \"src/**/*.js\""
+		},
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$ts-webpack-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
 			}
+		},
+
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "superide",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "publisher": "mengning",
   "engines": {
     "vscode": "^1.65.0"
@@ -91,9 +91,16 @@
   },
   "scripts": {
     "build": "webpack --mode production",
-    "lint": "eslint .eslintrc.js src",
+    "vscode:package": "webpack --mode production && vsce package",
-    "format": "prettier --single-quote --print-width 88 --write \"src/**/*.js\"",
+    "vscode:prepublish": "npm run package",
-    "vscode:package": "webpack --mode production && vsce package"
+    "compile": "webpack",
+    "watch": "webpack --watch",
+    "package": "webpack --mode production --devtool hidden-source-map",
+    "compile-tests": "tsc -p . --outDir out",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "npm run compile-tests && npm run compile && npm run lint",
+    "lint": "eslint src --ext ts",
+    "test": "vscode-test"
   },
   "dependencies": {
     "fs-plus": "~3.1.1",
@@ -104,16 +111,22 @@
     "@babel/eslint-parser": "~7.21.3",
     "@babel/plugin-proposal-class-properties": "~7.18.6",
     "@babel/preset-env": "~7.20.2",
-    "@types/node": "~14",
     "@types/vscode": "~1.65.0",
+    "@types/node": "18.x",
     "@vscode/vsce": "^2.29.0",
     "babel-loader": "~9.1.2",
-    "eslint": "~8.36.0",
     "eslint-import-resolver-webpack": "~0.13.2",
     "eslint-plugin-import": "~2.27.5",
     "prettier": "~2.8.4",
     "webpack": "~5.76.2",
-    "webpack-cli": "~5.0.1"
+    "webpack-cli": "~5.0.1",
+    "@types/mocha": "^10.0.6",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
+    "typescript": "^5.4.5",
+    "ts-loader": "^9.5.1",
+    "@vscode/test-cli": "^0.0.9",
+    "@vscode/test-electron": "^2.4.0"
   },
   "extensionDependencies": [
     "ms-vscode.cpptools"

src/home.js

@@ -1,79 +0,0 @@
-import * as vscode from 'vscode';
-
-export default class SIHome {
-    constructor(context) {
-        this.context = context;
-    }
-
-    toggle(url) {
-        const panel = vscode.window.createWebviewPanel(
-        'myWebview',
-        'My Webview',
-        vscode.ViewColumn.One,
-        {}
-        );
-
-        panel.webview.options = {
-            enableScripts: true,
-        };
-
-        panel.webview.html = this.getWebviewContent();
-
-        panel.webview.onDidReceiveMessage(
-            (message) => {
-                switch (message.command) {
-                    case 'alert':
-                        vscode.window.showInformationMessage(message.text);
-                        return;
-                    case 'openFolder':
-                        this.openFolderInVSCode(message.path);
-                        return;
-                }
-            },
-            undefined,
-            this.context.subscriptions
-        );
-    }
-
-
-    openFolderInVSCode(path) {
-        vscode.commands.executeCommand('vscode.openFolder', vscode.Uri.file(path))
-        .then((result) => {
-            console.log('Opened folder: ', result);
-        })
-        .catch((error) => {
-            console.error('Error opening folder: ', error);
-        });
-    }
-
-    getWebviewContent() {
-    return `
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Cat Coding</title>
-        </head>
-        <body>
-            <h1>Cat Coding</h1>
-            <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
-            <button onclick="showAlert()">Show Alert</button>
-            <button onclick="openFolder()">Open Project</button>
-
-            <script>
-                const vscode = acquireVsCodeApi();
-
-                function showAlert() {
-                    vscode.postMessage({ command: 'alert', text: 'Hello from the Webview!' });
-                }
-
-                function openFolder() {
-                    vscode.postMessage({ command: 'openFolder', path: 'D:/Programs/hello' });
-                }
-            </script>
-        </body>
-        </html>
-    `;
-    }
-}

src/home.ts

@@ -0,0 +1,78 @@
+import * as vscode from 'vscode';
+
+export default class SIHome {
+
+  constructor() {
+  }
+
+  toggle(url: string) {
+    console.log('url: ', url)
+    const panel = vscode.window.createWebviewPanel(
+      'myWebview',
+      'My Webview',
+      vscode.ViewColumn.One,
+      {}
+    );
+
+    panel.webview.options = {
+      enableScripts: true,
+    };
+
+    panel.webview.html = this.getWebviewContent();
+
+    panel.webview.onDidReceiveMessage(
+      (message) => {
+        switch (message.command) {
+          case 'alert':
+            vscode.window.showInformationMessage(message.text);
+            return;
+          case 'openFolder':
+            this.openFolderInVSCode(message.path);
+            return;
+        }
+      },
+      undefined,
+    );
+  }
+
+
+  openFolderInVSCode(path: string): void {
+    try {
+      vscode.commands.executeCommand('vscode.openFolder', vscode.Uri.file(path))
+      console.log('Opened folder: ', path);
+    } catch (error) {
+      console.error('Error opening folder: ', error);
+    }
+  }
+
+  getWebviewContent() {
+    return `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Cat Coding</title>
+        </head>
+        <body>
+            <h1>Cat Coding</h1>
+            <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
+            <button onclick="showAlert()">Show Alert</button>
+            <button onclick="openFolder()">Open Project</button>
+
+            <script>
+                const vscode = acquireVsCodeApi();
+
+                function showAlert() {
+                    vscode.postMessage({ command: 'alert', text: 'Hello from the Webview!' });
+                }
+
+                function openFolder() {
+                    vscode.postMessage({ command: 'openFolder', path: 'D:/Programs/hello' });
+                }
+            </script>
+        </body>
+        </html>
+    `;
+  }
+}

src/main.ts

@@ -4,29 +4,23 @@ import path from 'path';
 import os from 'os';
 import QuickAccessTreeProvider from './views/quick-access-tree';
 import SIHome from './home';
-import * as utils from './utils';
 
 const { NodeSSH } = require('node-ssh')
 
-class SuperIDEExtension {
+export class SuperIDEExtension {
-  constructor() {
+  siHome: SIHome;
-    this.siHome = undefined;
-    this.context = undefined;
-    this.subscriptions = [];
-  }
 
-  async activate(context) {
+  constructor(private context: vscode.ExtensionContext) {
-    this.context = context;
+    this.siHome = new SIHome();
-    this.siHome = new SIHome(context);
 
-    this.subscriptions.push(
+    context.subscriptions.push(
       vscode.window.registerTreeDataProvider(
         'superide.quickAccess',
         new QuickAccessTreeProvider()
       )
     );
 
-    this.registerGlobalCommands();
+    this.registerGlobalCommands(context);
 
     this.startSuperIDEHome();
   }
@@ -70,52 +64,43 @@ class SuperIDEExtension {
 
         // append the host to the local ssh config file 
         const sshConfigContent =
-        `\n
+          `\nHost ${host}\n  HostName ${host}\n  Port ${port}\n  User ${username}\n  PreferredAuthentications publickey\n  IdentityFile ~/.ssh/id_rsa\n  `;
-        Host ${host}
-          HostName ${host}
-          Port ${port}
-          User ${username}
-          PreferredAuthentications publickey
-          IdentityFile ~/.ssh/id_rsa
-          `;
         // append the host to the local ssh config file
         fs.writeFileSync(sshConfigPath, sshConfigContent, { encoding: 'utf8', flag: 'a' });
         console.log('Host registered in local ssh config');
 
         // connect the host with remote-ssh extension
+        try {
           await vscode.commands.executeCommand('opensshremotes.openEmptyWindowInCurrentWindow', host)
-          .then(() => {
+        } catch (error) {
-            console.log('Connected to host');
+          console.log("Error connecting to host: ", error);
-          })
+        }
-          .catch((error) => {
-            console.error('Error connecting to host: ', error);
-          });
       }
     }
   }
 
-  async firstConnect(host, username, password, port, publicKey) {
+  async firstConnect(host: string, username: string, password: string, port: number, publicKey: string): Promise<void> {
     const ssh = new NodeSSH();
-    ssh.connect({
+
+    try {
+      await ssh.connect({
         host: host,
         username: username,
         password: password,
         port: port
-    }).then(() => {
-    	console.log('Connected successfully');
-    	ssh.execCommand(`mkdir -p ~/.ssh && 
-    					echo '${publicKey}' >> ~/.ssh/authorized_keys`, )
-    		.then(result => {
-    			if (result.stdout) console.log('STDOUT: ' + result.stdout);
-    			if (result.stderr) console.log('STDERR: ' + result.stderr);
-    		});
-    }).catch(error => {
-    	console.log('Error: ', error);
       });
+
+      await ssh.execCommand(`mkdir -p ~/.ssh && echo '${publicKey}' >> ~/.ssh/authorized_keys`);
+      console.log('Public key added to remote authorized_keys');
+    } catch (error) {
+      console.error('Error adding public key: ', error);
+    } finally {
+      await ssh.dispose();
+    }
   }
 
-  registerGlobalCommands() {
+  registerGlobalCommands(context: vscode.ExtensionContext) {
-    this.subscriptions.push(
+    context.subscriptions.push(
       vscode.commands.registerCommand('superide.showHome', (url) =>
         this.siHome.toggle(url)
       ),
@@ -124,23 +109,11 @@ class SuperIDEExtension {
       )
     );
   }
-
-  disposeSubscriptions() {
-    utils.disposeSubscriptions(this.subscriptions);
 }
 
-  deactivate() {
+export function activate(context: vscode.ExtensionContext) {
-    this.disposeSubscriptions();
+  return new SuperIDEExtension(context);
-  }
-}
-
-export const extension = new SuperIDEExtension();
-
-export function activate(context) {
-  extension.activate(context);
-  return extension;
 }
 
 export function deactivate() {
-  extension.deactivate();
 }

src/utils.js

@@ -1,5 +0,0 @@
-export function disposeSubscriptions(subscriptions) {
-  while (subscriptions.length) {
-    subscriptions.pop().dispose();
-  }
-}

src/views/quick-access-tree.ts

@@ -1,7 +1,9 @@
 import * as vscode from 'vscode';
 
 class QuickItem extends vscode.TreeItem {
-  constructor(label, command, args, collapsibleState, children) {
+  customChildren: QuickItem[] | undefined;
+
+  constructor(label: string, command?: string, args?: any, collapsibleState?: vscode.TreeItemCollapsibleState, children?: QuickItem[]) {
     super(label, collapsibleState);
     if (command) {
       this.command = {
@@ -15,7 +17,7 @@ class QuickItem extends vscode.TreeItem {
 }
 
 export default class QuickAccessTreeProvider {
-  getChildren(element) {
+  getChildren(element: QuickItem) {
     if (element && element.customChildren) {
       return element.customChildren;
     }
@@ -38,7 +40,7 @@ export default class QuickAccessTreeProvider {
     ];
   }
 
-  getTreeItem(element) {
+  getTreeItem(element: QuickItem) {
     return element;
   }
 }

tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"lib": [
+			"ES2022"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true,   /* enable all strict type-checking options */
+		/* Additional Checks */
+		"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		"noUnusedParameters": true,  /* Report errors on unused parameters. */
+		/* Emit */
+		"outDir": "dist", /* Redirect output structure to the directory. */
+		"removeComments": true, /* Do not emit comments to output. */
+		"noEmitOnError": true, /* Do not emit outputs if any errors were reported. */
+	}
+}