Merge pull request #19 from oslabs-beta/AL/js-to-ts

javascript to typescript

Author: ChristinaRaether

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-/build
+/build
+/package-lock.json

package-lock.json

@@ -3,22 +3,31 @@
   "displayName": "React Labyrinth",
   "description": "React Server Components visualization tool",
   "version": "0.0.1",
+  "publisher": "ReactLabyrinthDev",
   "engines": {
     "vscode": "^1.84.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oslabs-beta/React-Labyrinth"
+  },
   "categories": [
     "Other"
   ],
+  "keywords": [
+    "react",
+    "rsc",
+    "hierarchy tree",
+    "parent-child",
+    "visualizer",
+    "server component"
+  ],
+  "license": "MIT",
   "pricing": "Free",
   "activationEvents": [],
-  "main": "./extension.js",
+  "main": "./build/extension.js",
   "contributes": {
     "commands": [
-      {
-        "command": "react-labyrinth.helloWorld",
-        "title": "Hello World",
-        "category": "React Labyrinth"
-      },
       {
         "command": "myExtension.showPanel",
         "title": "Show Panel",
@@ -68,6 +77,8 @@
   "devDependencies": {
     "@types/mocha": "^10.0.3",
     "@types/node": "18.x",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/vscode": "^1.84.0",
     "@vscode/test-electron": "^2.3.6",
     "eslint": "^8.54.0",
@@ -76,7 +87,7 @@
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^9.3.0",
     "tailwindcss": "^3.3.6",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
@@ -92,6 +103,7 @@
     "reactflow": "^11.10.1",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.1",
     "webpack": "^5.89.0"
   }
 }

package.json

@@ -1,4 +1,5 @@
 const tailwindcss = require('tailwindcss');
+
 module.exports = {
     plugins: [
         'postcss-preset-env',

postcss.config.js postcss.config.cjspostcss.config.js renamed to postcss.config.cjs

@@ -1,37 +1,43 @@
-const vscode = require('vscode');
-const { createPanel } = require('./src/panel');
-const { Parser } = require('./src/parser');
+import * as vscode from 'vscode';
+import {createPanel} from './panel';
+import { Parser } from './parser';
 
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 
-function activate(context) {
+function activate(context: vscode.ExtensionContext) {
 
 	let disposable = vscode.commands.registerCommand('react-labyrinth.helloWorld', function () {
 		vscode.window.showInformationMessage('Hello World from React Labyrinth!');
 	});
 
 	// pass in the command we want to register (refer to package.json)
-	let result = vscode.commands.registerCommand('myExtension.showPanel', () => {
-		// call helper func
-		createPanel(context);
-	});
+	// let result = vscode.commands.registerCommand('myExtension.showPanel', () => {
+	// 	// call helper func
+	// 	createPanel(context);
+	// });
 
 	vscode.commands.registerCommand('myExtension.pickFile', async () => {
 		const fileArray = await vscode.window.showOpenDialog({ canSelectFolders: false, canSelectFiles: true, canSelectMany: false });
+		
+		if (!fileArray || fileArray.length === 0) {
+			vscode.window.showErrorMessage('No file selected');
+			return;
+		}
+	
 		const tree = new Parser(fileArray[0].path);
 		tree.parse();
 		const data = tree.getTree();
 		console.log('Data sent back: \n', data);
 		createPanel(context, data);
 	});
-	context.subscriptions.push(disposable, result);
+	context.subscriptions.push(disposable);
 }
 
 // This method is called when your extension is deactivated
-// function deactivate() {}
+function deactivate() {}
 
 module.exports = {
 	activate,
-	// deactivate
+	deactivate
 }

extension.js src/extension.tsextension.js renamed to src/extension.ts

@@ -1,11 +1,10 @@
-function getNonce() {
-    let text = "";
-    const possible =
+export function getNonce() {
+    let text: string = "";
+    const possible: string =
       "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
     for (let i = 0; i < 32; i++) {
       text += possible.charAt(Math.floor(Math.random() * possible.length));
     }
     return text;
   }
 
-module.exports = { getNonce }