Merge pull request #39 from oslabs-beta/AL/client-conditionals

AL/client conditionals

Author: Ponch49

.eslintrc.json

@@ -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",

.gitignore

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

.vscodeignore

@@ -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
+

package-lock.json

@@ -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": [
@@ -51,28 +57,25 @@
     "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",
-    "dev": "webpack --watch",
-    "webpack": "webpack"
+    "dev": "webpack --mode development --config webpack.config.ts --watch",
+    "prod": "webpack --mode production --config webpack.config.ts"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.23.3",
@@ -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",

package.json

@@ -2,6 +2,7 @@ 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;
@@ -27,7 +28,7 @@ function activate(context: vscode.ExtensionContext) {
 
 		// 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;
 		}
 

src/extension.ts

@@ -49,7 +49,7 @@ export class Parser {
             reactRouter: false,
             reduxConnect: false,
             children: [],
-            parent: null,
+            parent: '',
             parentList: [],
             props: {},
             error: '',
@@ -80,7 +80,7 @@ export class Parser {
     };
 
     public getTree(): Tree {
-        return this.tree;
+        return this.tree!;
     }
 
     // Set entryFile property with the result of Parser (from workspace state)
@@ -178,9 +178,6 @@ export class Parser {
         if (componentTree.parentList.includes(componentTree.filePath)) {
             return;
         }
-        // if (typeof componentTree.parentList === 'string' && componentTree.parentList.includes(componentTree.filePath)) {
-        //     return;
-        // }
 
         // Create abstract syntax tree of current component tree file
         let ast: babel.ParseResult<File>;
@@ -289,15 +286,14 @@ export class Parser {
     }
 
     // Determines server or client component type (looks for use of 'use client' and react/redux state hooks)
-    private getComponentType(directive: { [key: string]: any }[], body: { [key: string]: any }[]): boolean {
+    private getComponentType(directive: { [key: string]: any }[], body: { [key: string]: any }[]) {
         const defaultErr = (err) => {
             return {
                 method: 'Error in getCallee method of Parser:',
                 log: err,
             }
         };
 
-        // console.log('directive: ', directive);
         // Initial check for use of directives (ex: 'use client', 'use server', 'use strict')
         // Accounts for more than one directive 
         for (let i = 0; i < directive.length; i++) {
@@ -310,8 +306,14 @@ export class Parser {
         }
 
         // Second check for use of React/Redux hooks
+        // Checks for components declared using 'const'
         const bodyCallee = body.filter((item) => item.type === 'VariableDeclaration');
-        if (bodyCallee.length === 0) return false;
+        
+        // Checks for components declared using 'export default function'
+        const exportCallee = body.filter((item) => item.type === 'ExportDefaultDeclaration');
+
+        // Checks for components declared using 'function'
+        const functionCallee = body.filter((item) => item.type === 'FunctionDeclaration');
 
         // Helper function
         const calleeHelper = (item) => {
@@ -333,6 +335,8 @@ export class Parser {
                 useDispatch: 0,
                 useActions: 0,
                 useSelector: 0,
+                useShallowEqualSelector: 0,
+                useStore: 0,
                 bindActionCreators: 0,
             }
             if (item.type === 'VariableDeclaration') {
@@ -363,39 +367,43 @@ export class Parser {
             return false;
         }
 
-        if (bodyCallee.length === 1) {
-            const calleeArr = bodyCallee[0].declarations[0]?.init?.body?.body;
-            if (calleeArr === undefined) return false;
+        // Process Function Declarations
+        for (const func of functionCallee) {
+            const calleeArr = func.body?.body;
+            if (!calleeArr) continue; // Skip if no body
 
-            let checkTrue = false;
-            for (let i = 0; i < calleeArr.length; i++) {
-                if (checkTrue) return true;
-                checkTrue = calleeHelper(calleeArr[i]);
+            for (const callee of calleeArr) {
+                if (calleeHelper(callee)) {
+                    return true;
+                }
             }
-            return checkTrue;
         }
-        else if (bodyCallee.length > 1) {
-            let calleeArr: [];
-            for (let i = 0; i < bodyCallee.length; i++) {
-                try {
-                    if (bodyCallee[i].declarations[0]?.init?.body?.body) {
-                        calleeArr = bodyCallee[i].declarations[0].init.body.body;
-                    }
-                }
-                catch (err) {
-                    const error = defaultErr(err);
-                    console.error(error.method, '\n', error.log);
+
+        // Process Export Declarations
+        for (const exportDecl of exportCallee) {
+            const calleeArr = exportDecl.declaration.body?.body;
+            if (!calleeArr) continue; // Skip if no body
+    
+            for (const callee of calleeArr) {
+                if (calleeHelper(callee)) {
+                    return true;
                 }
             }
-
-            if (calleeArr === undefined) return false;
-            let checkTrue = false;
-            for (let i = 0; i < calleeArr.length; i++) {
-                if (checkTrue) return true;
-                checkTrue = calleeHelper(calleeArr[i]);
+        }
+    
+        // Process Body Declarations
+        for (const bodyDecl of bodyCallee) {
+            const calleeArr = bodyDecl.declarations[0]?.init?.body?.body;
+            if (!calleeArr) continue; // Skip if no body
+    
+            for (const callee of calleeArr) {
+                if (calleeHelper(callee)) {
+                    return true;
+                }
             }
-            return checkTrue;
         }
+
+        return false;
     }
 
     // Finds JSX React Components in current file

src/parser.ts

@@ -2,7 +2,6 @@ import * as path from 'path';
 import { runTests } from '@vscode/test-electron';
 
 async function main() {
-	console.log('made it through the line before try block');
 	try {
 		// The folder containing the Extension Manifest package.json
 		// Passed to `--extensionDevelopmentPath`
@@ -12,8 +11,6 @@ async function main() {
 		// Passed to --extensionTestsPath
 		const extensionTestsPath = path.resolve(__dirname, './suite/index');
 
-		console.log('inside try block after var declarations');
-
 		// Download VS Code, unzip it and run the integration test
 		await runTests({ 
 			version: "1.85.1", 

src/test/runTest.ts

@@ -4,8 +4,6 @@ import * as jest from 'jest';
 
 export async function run(): Promise<void> {
 	try {
-		console.log('inside try block of index.ts');
-
 		const testsRoot = path.resolve(__dirname, '..');
 		const files = await glob('**/**.test.js', { cwd: testsRoot });
 
@@ -14,15 +12,10 @@ export async function run(): Promise<void> {
 			return;
 		}
 
-		console.log('test files: ', files);
-
 		return new Promise(async (c, e) => {
 			try {
-				console.log('inside promise block of index.ts before await ')
 				await jest.run([...files]);
-				console.log('inside promise block of index.ts after await')
 				c();
-				console.log('inside promise block of index.ts after c()')
 			} catch (err) {
 				console.error(err);
 				e(err);