added semi-colons and eslint spacing

Author: ash-t-luu

src/extension.ts

@@ -4,7 +4,7 @@ import { Parser } from './parser';
 import { Tree } from './types/tree';
 
 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,34 +14,28 @@ 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');
 			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) {
@@ -54,23 +48,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);
 }

src/parser.ts

@@ -423,7 +423,7 @@ export class Parser {
                     childNodes,
                 );
 
-                // Case for finding components passed in as props e.g. <Route component={App} />
+            // Case for finding components passed in as props e.g. <Route component={App} />
             } else if (
                 astTokens[i].type.label === 'jsxName' &&
                 (astTokens[i].value === 'Component' ||

src/test/suite/parser.test.ts

@@ -48,23 +48,22 @@ describe('Parser Test Suite', () => {
         });
     });
 
+    // these are the 14 tests we need to test for
+
 	// TEST 1: NESTED CHILDREN
 	// TEST 2: THIRD PARTY, REACT ROUTER, DESTRUCTURED IMPORTS
 	// TEST 3: IDENTIFIES REDUX STORE CONNECTION
 	// TEST 4: ALIASED IMPORTS
 	// TEST 5: MISSING EXTENSIONS AND UNUSED IMPORTS
-
-    // ashley
 	// TEST 6: BAD IMPORT OF APP2 FROM APP1 COMPONENT
 	// TEST 7: SYNTAX ERROR IN APP FILE CAUSES PARSER ERROR
 	// TEST 8: MULTIPLE PROPS ON ONE COMPONENT
 	// TEST 9: FINDING DIFFERENT PROPS ACROSS TWO OR MORE IDENTICAL COMPONENTS
-
 	// TEST 10: CHECK CHILDREN WORKS AND COMPONENTS WORK
 	// TEST 11: PARSER DOESN'T BREAK UPON RECURSIVE COMPONENTS
 	// TEST 12: NEXT.JS APPS (pages version & app router version)
   	// TEST 13: Variable Declaration Imports and React.lazy Imports    
     // TEST 14: CHECK IF COMPONENT IS CLIENT OR SERVER (USING HOOKS) => RENDERS A CERTAIN COLOR (priority)
 
-    // LOU - EXTENSION TEST 
+    // LOU is doing EXTENSION TEST in extension.test.ts
 });

src/webview/Flow.tsx

@@ -24,20 +24,19 @@ const OverviewFlow = () => {
 
   useEffect(() => {
     window.addEventListener('message', (e: MessageEvent) => {
-
       // Object containing type prop and value prop
       const msg: MessageEvent = e;
-      const flowBuilder = new FlowBuilder
+      const flowBuilder = new FlowBuilder;
 
       switch (msg.data.type) {
         case 'parsed-data': {
           let data: Tree | undefined = msg.data.value;
 
           // Creates our Tree structure
-          flowBuilder.mappedData(data, initialNodes, initialEdges)
+          flowBuilder.mappedData(data, initialNodes, initialEdges);
 
           setEdges(initialEdges);
-          setNodes(initialNodes)
+          setNodes(initialNodes);
           break;
         }
       }

src/webview/flowBuilder.tsx

@@ -1,7 +1,7 @@
 import { ConnectionLineType, Edge, Node } from 'reactflow';
 import { Tree } from '../types/tree';
 import { getNonce } from '../getNonce';
-import * as d3 from 'd3'
+import * as d3 from 'd3';
 
 // Contructs our family tree for React application root file that was selected
 
@@ -10,19 +10,17 @@ class FlowBuilder {
   public mappedData(data: Tree, nodes: Node[], edges: Edge[]): void {
 
     // Create a holder for the heirarchical data (msg.value), data comes in an object of all the Trees
-    const root: d3.HierarchyNode<Tree> = d3.hierarchy(data)
+    const root: d3.HierarchyNode<Tree> = d3.hierarchy(data);
 
     // Dynamically adjust height and width of display depending on the amount of nodes
     const totalNodes: number = root.descendants().length;
     const width: number = Math.max(totalNodes * 100, 800);
     const height = Math.max(totalNodes * 20, 500)
 
-
     //create tree layout and give nodes their positions and 
     const treeLayout: d3.TreeLayout<unknown> = d3.tree()
       .size([width, height])
-      .separation((a: d3.HierarchyPointNode<Node>, b: d3.HierarchyPointNode<Node>) => (a.parent == b.parent ? 2 : 2.5))
-
+      .separation((a: d3.HierarchyPointNode<Node>, b: d3.HierarchyPointNode<Node>) => (a.parent == b.parent ? 2 : 2.5));
 
     treeLayout(root);
     // Iterate through each Tree and create a node
@@ -55,19 +53,17 @@ class FlowBuilder {
           animated: true,
         };
 
-
         // Check if the edge already exists before adding
         const edgeExists: boolean = edges.some(
           edge => edge.source === newEdge.source && edge.target === newEdge.target
         );
 
         // If edge does not exist, add to our edges array
         if (!edgeExists) {
-          edges.push(newEdge)
+          edges.push(newEdge);
         }
       }
-    }
-    )
+    });
   }
 }
 

src/webview/style.css

@@ -15,7 +15,6 @@ body,
   text-align: center;
 }
 
-
 .react-flow__handle.connectionindicator {
   pointer-events: none !important;
 }