merged new tests

Author: ChristinaRaether

.DS_Store

@@ -16,7 +16,7 @@
 	"rules": {
 		"no-const-assign": "warn",
 		"no-this-before-super": "warn",
-		"no-undef": "warn",
+		"no-undef": "off",
 		"no-unreachable": "warn",
 		"no-unused-vars": "off",
 		"constructor-super": "warn",

.eslintrc.json

@@ -1,4 +1,5 @@
-node_modules
+/node_modules/
 /package-lock.json
 /.vscode-test/
-/build/
+/build/
+/.DS_Store

.gitignore

@@ -1,10 +1,15 @@
+# FOLDERS
 .vscode/**
 .vscode-test/**
 test/**
-.gitignore
-.yarnrc
-vsc-extension-quickstart.md
+node_modules
 **/jsconfig.json
 **/*.map
 **/.eslintrc.json
+
+# FILES
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
 **/*.js.map
+

.vscodeignore

@@ -1,30 +1,36 @@
 {
   "name": "react-labyrinth",
   "displayName": "React Labyrinth",
-  "description": "React Server Components visualization tool",
+  "description": "React Component Type hierarchy tree visualization tool",
   "version": "0.0.1",
+  "icon": "./media/reactLbayrinthFinal.png",
   "publisher": "ReactLabyrinthDev",
+  "preview": false,
   "engines": {
     "vscode": "^1.85.1"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/oslabs-beta/React-Labyrinth"
+    "url": "https://github.com/oslabs-beta/React-Labyrinth/tree/main"
   },
   "categories": [
     "Other"
   ],
   "keywords": [
     "react",
     "rsc",
+    "react components",
     "hierarchy tree",
     "parent-child",
     "visualizer",
-    "server component"
+    "server component",
+    "client component"
   ],
   "license": "MIT",
   "pricing": "Free",
-  "activationEvents": [],
+  "activationEvents": [
+    "onStartupFinished"
+  ],
   "main": "./build/extension.js",
   "contributes": {
     "commands": [
@@ -44,30 +50,27 @@
         {
           "id": "react-labyrinth",
           "title": "React Labyrinth",
-          "icon": "/media/test1.svg"
+          "icon": "/media/RL(Final).png"
         }
       ]
     },
     "views": {
       "react-labyrinth": [
         {
-          "id": "metrics-file",
-          "name": "Metrics"
-        },
-        {
-          "id": "test",
-          "name": "Test"
+          "id": "tree-render",
+          "name": "Tree"
         }
       ]
     },
     "viewsWelcome": [
       {
-        "view": "metrics-file",
-        "contents": "View tree to see where improvements can be made!\n[View Tree](command:myExtension.pickFile)\n"
+        "view": "tree-render",
+        "contents": "View tree to see component types!\n[View Tree](command:myExtension.pickFile)\n"
       }
     ]
   },
   "scripts": {
+    "vscode:prepublish": "prod",
     "lint": "eslint .",
     "pretest": "npm run lint",
     "test": "npx tsc ; node ./build/src/test/runTest.js",
@@ -97,7 +100,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.3",
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "^7.23.9",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "babel": "^6.23.0",

media/RL(Final).png

@@ -2,9 +2,10 @@ import * as vscode from 'vscode';
 import {createPanel} from './panel';
 import { Parser } from './parser';
 import { Tree } from './types/tree';
+import { showNotification } from './utils/modal';
 
 let tree: Parser | undefined = undefined;
-let panel: vscode.WebviewPanel | undefined = undefined
+let panel: vscode.WebviewPanel | undefined = undefined;
 
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
@@ -14,37 +15,31 @@ function activate(context: vscode.ExtensionContext) {
 	let columnToShowIn : vscode.ViewColumn | undefined = vscode.window.activeTextEditor
         ? vscode.window.activeTextEditor.viewColumn
         : undefined;
-
 
 	// Command that allows for User to select the root file of their React application.
 	const pickFile: vscode.Disposable = vscode.commands.registerCommand('myExtension.pickFile', async () => {
-
 		// Check if there is an existing webview panel, if so display it.
-		if(panel) {
-			panel.reveal(columnToShowIn)
+		if (panel) {
+			panel.reveal(columnToShowIn);
 		}
 
-
 		// Opens window for the User to select the root file of React application
 		const fileArray: vscode.Uri[] = await vscode.window.showOpenDialog({ canSelectFolders: false, canSelectFiles: true, canSelectMany: false });
-		
 
 		// Throw error message if no file was selected
 		if (!fileArray || fileArray.length === 0) {
-			vscode.window.showErrorMessage('No file selected');
+			showNotification({message: 'No file selected'});
 			return;
 		}
-		
 
 		// Create Tree to be inserted into returned HTML
 		tree = new Parser(fileArray[0].path);
 		tree.parse();
 		const data: Tree = tree.getTree();
 
-
 		// Check if panel currently has a webview, if it does dispose of it and create another with updated root file selected. 
 		// Otherwise create a new webview to display root file selected.
-		if(!panel) {
+		if (!panel) {
 			panel = createPanel(context, data, columnToShowIn);
 		} else {
 			panel.dispose()
@@ -54,23 +49,19 @@ function activate(context: vscode.ExtensionContext) {
 		// Listens for when webview is closed and disposes of webview resources
 		panel.onDidDispose(
 			() => {
-				console.log("Before: ", panel)
-				panel.dispose()
+				panel.dispose();
 				panel = undefined;
 				columnToShowIn = undefined;
-				console.log("After: ", panel)
 			},
 			null,
 			context.subscriptions
-			);
+		);
 	});
 
-
 	// Command to show panel if it is hidden
 	const showPanel: vscode.Disposable = vscode.commands.registerCommand('myExtension.showPanel', () => {
-		panel.reveal(columnToShowIn)
-	  });
-
+		panel.reveal(columnToShowIn);
+	});
 
 	context.subscriptions.push(pickFile, showPanel);
 }

package-lock.json

@@ -1,16 +1,15 @@
 import * as vscode from 'vscode';
-import { getNonce } from './getNonce';
+import { getNonce } from './utils/getNonce';
 import { Tree } from './types/tree';
 
-let panel: vscode.WebviewPanel | undefined = undefined
+let panel: vscode.WebviewPanel | undefined = undefined;
 
 export function createPanel(context: vscode.ExtensionContext, data: Tree, columnToShowIn: vscode.ViewColumn) {
-
-    // utilize method on vscode.window object to create webview
+    // Utilize method on vscode.window object to create webview
     panel = vscode.window.createWebviewPanel(
         'reactLabyrinth',
         'React Labyrinth',
-        // create one new tab
+        // Create one tab
         vscode.ViewColumn.One,
         {
             enableScripts: true,
@@ -19,15 +18,15 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
     );
 
     // Set the icon logo of extension webview
-    panel.iconPath = vscode.Uri.joinPath(context.extensionUri, 'media', 'favicon.ico');
+    panel.iconPath = vscode.Uri.joinPath(context.extensionUri, 'media', 'RL(Final).png');
 
     // Set URI to be the path to bundle
     const bundlePath: vscode.Uri = vscode.Uri.joinPath(context.extensionUri, 'build', 'bundle.js');
 
-    // set webview URI to pass into html script
+    // Set webview URI to pass into html script
     const bundleURI: vscode.Uri = panel.webview.asWebviewUri(bundlePath);
 
-    // render html of webview here
+    // Render html of webview here
     panel.webview.html = createWebviewHTML(bundleURI, data);
 
     // Sends data to Flow.tsx to be displayed after parsed data is received
@@ -37,7 +36,6 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
                 case 'onData':
                     if (!msg.value) break;
                     context.workspaceState.update('reactLabyrinth', msg.value);
-                    
                     panel.webview.postMessage(
                         {
                             type: 'parsed-data',
@@ -54,10 +52,10 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
     return panel
 };
 
-// getNonce generates a new random string each time ext is used to prevent external injection of foreign code into the html 
+// getNonce generates a new random string to prevent external injection of foreign code into the HTML
 const nonce: string = getNonce();
 
-// function to create the HTML page for webview
+// Creates the HTML page for webview
 function createWebviewHTML(URI: vscode.Uri, initialData: Tree) : string {
     return (
         `
@@ -83,5 +81,5 @@ function createWebviewHTML(URI: vscode.Uri, initialData: Tree) : string {
             </body>
             </html>
         `
-    )
+    );
 }