added logic for parser directives component type, fixed syntax for comments to make it uniform, moved getNonce into a util folder, changed property in .eslintrc.json to remove non-dangerous warnings when running tests

Author: ash-t-luu

.eslintrc.json

@@ -18,7 +18,7 @@
 		"no-this-before-super": "warn",
 		"no-undef": "warn",
 		"no-unreachable": "warn",
-		"no-unused-vars": "warn",
+		"no-unused-vars": "off",
 		"constructor-super": "warn",
 		"valid-typeof": "warn"
 	}

package-lock.json

@@ -38,7 +38,7 @@ function activate(context: vscode.ExtensionContext) {
 
 		// 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()

src/extension.ts

@@ -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,
@@ -24,10 +23,10 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
     // 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>
         `
-    )
+    );
 }

src/panel.ts

@@ -1,33 +1,11 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as babel from '@babel/parser';
-import { getNonce } from './getNonce';
+import { getNonce } from './utils/getNonce';
 import { ImportObj } from './types/ImportObj';
 import { Tree } from "./types/tree";
 import { File } from '@babel/types';
 
-//     // function to determine server or client component (can look for 'use client' and 'hooks')
-//     // input: ast node (object)
-//     // output: boolean
-// checkForClientString(node) {
-//     if (node.type === 'Directive') {
-//         console.log('node', node);
-//         // access the value property of the Directive node
-//         console.log('Directive Value:', node.value);
-//         // check if the node.value is a 'DirectiveLiteral' node
-//         if (node.value && node.value.type === 'DirectiveLiteral') {
-//             // check the value to see if it is 'use client'
-//             if (typeof node.value.value === 'string' && node.value.value.trim() === 'use client') {
-//                 // access the value property of the 'DirectiveLiteral' node
-//                 console.log('DirectiveLiteral Value:', node.value.value);
-//                 // might need to do something else here to make it known as client type
-//                 return true;
-//             }
-//         }
-//     }
-//     return false;
-// }
-
 export class Parser {
     entryFile: string;
     tree: Tree | undefined;
@@ -86,7 +64,7 @@ export class Parser {
         return this.tree;
     }
 
-    // Set Sapling Parser with a specific Data Tree (from workspace state)
+    // Set entryFile property with the result of Parser (from workspace state)
     public setTree(tree: Tree) {
         this.entryFile = tree.filePath;
         this.tree = tree;
@@ -131,7 +109,7 @@ export class Parser {
         return this.tree!;
     }
 
-    // Traverses the tree and changes expanded property of node whose id matches provided id
+    // Traverses the tree and changes expanded property of node whose ID matches provided ID
     public toggleNode(id: string, expanded: boolean): Tree{
         const callback = (node: { id: string; expanded: boolean }) => {
             if (node.id === id) {
@@ -204,14 +182,13 @@ export class Parser {
         // Find imports in the current file, then find child components in the current file
         const imports = this.getImports(ast.program.body);
 
-        if (this.getCallee(ast.program.body)) {
+        // Set value of isClientComponent property 
+        if (this.getComponentType(ast.program.directives, ast.program.body)) {
             componentTree.isClientComponent = true;
         } else {
             componentTree.isClientComponent = false;
         }
 
-        // console.log('componentTree.isClientComponent', componentTree.isClientComponent);
-        // console.log('--------------------------------')
         // Get any JSX Children of current file:
         if (ast.tokens) {
             componentTree.children = this.getJSXChildren(
@@ -247,10 +224,8 @@ export class Parser {
     }
 
     // Extracts Imports from current file
-    // const Page1 = lazy(() => import('./page1')); -> is parsed as 'ImportDeclaration'
-    // import Page2 from './page2'; -> is parsed as 'VariableDeclaration'
-    // input: array of objects: ast.program.body
-    // output: object of imoprts
+    // const App1 = lazy(() => import('./App1')); => is parsed as 'ImportDeclaration'
+    // import App2 from './App2'; => is parsed as 'VariableDeclaration'
     private getImports(body: { [key: string]: any }[]): ImportObj {
         const bodyImports = body.filter((item) => item.type === 'ImportDeclaration' || 'VariableDeclaration');
 
@@ -278,7 +253,7 @@ export class Parser {
     }
 
     private findVarDecImports(ast: { [key: string]: any }): string | boolean {
-        // find import path in variable declaration and return it,
+        // Find import path in variable declaration and return it,
         if (ast.hasOwnProperty('callee') && ast.callee.type === 'Import') {
             return ast.arguments[0].value;
         }
@@ -294,23 +269,32 @@ export class Parser {
         return false;
     }
 
-    // helper function to determine component type (client)
-    // input: ast.program.body 
-    // output: boolean 
-    private getCallee(body: { [key: string]: any }[]): boolean {
-        const defaultErr = (err,) => {
+    // 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 {
+        const defaultErr = (err) => {
             return {
                 method: 'Error in getCallee method of Parser:',
                 log: err,
             }
         };
 
-        // if statement to first check if component has a directive that is strictly equal to 'use client' or 'use server'
-        // if there is no directive, continue down the chain of logic below
+        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++) {
+            if (directive[i].type === 'Directive') {
+                if (typeof directive[i].value.value === 'string' && directive[i].value.value.trim() === 'use client') {
+                    return true;
+                }
+            }    
+            break;    
+        }
 
+        // Second check for use of React/Redux hooks
         const bodyCallee = body.filter((item) => item.type === 'VariableDeclaration');
         if (bodyCallee.length === 0) return false;
 
+        // Helper function
         const calleeHelper = (item) => {
             const hooksObj = {
                 useState: 0,
@@ -423,7 +407,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' ||
@@ -476,7 +460,6 @@ export class Parser {
                 props: props,
                 children: [],
                 parent: parent.id,
-                // consider adding the id to the parentList array somehow for D3 integration...
                 parentList: [parent.filePath].concat(parent.parentList),
                 error: '',
                 isClientComponent: false
@@ -504,7 +487,7 @@ export class Parser {
 
     // Checks if current Node is connected to React-Redux Store
     private checkForRedux(astTokens: any[], importsObj: ImportObj): boolean {
-        // Check that react-redux is imported in this file (and we have a connect method or otherwise)
+        // Check that React-Redux is imported in this file (and we have a connect method or otherwise)
         let reduxImported = false;
         let connectAlias;
         Object.keys(importsObj).forEach((key) => {

src/parser.ts

@@ -4,18 +4,15 @@ import { runTests } from '@vscode/test-electron';
 async function main() {
 	console.log('made it through the line before try block');
 	try {
-		console.log('inside try block');
 		// The folder containing the Extension Manifest package.json
 		// Passed to `--extensionDevelopmentPath`
 		const extensionDevelopmentPath = path.resolve(__dirname, '../../');
 
-		console.log('inside try block after first var declare');
-
 		// The path to the extension test script
 		// Passed to --extensionTestsPath
 		const extensionTestsPath = path.resolve(__dirname, './suite/index');
 
-		console.log('inside try block after second var declare');
+		console.log('inside try block after var declarations');
 
 		// Download VS Code, unzip it and run the integration test
 		await runTests({ 

src/test/runTest.ts

@@ -1,4 +1,3 @@
-// import * as assert from 'assert' -- this one is from node
 import { Parser } from '../../parser';
 import * as path from 'path';
 import { beforeEach, expect, test } from '@jest/globals'; 
@@ -14,7 +13,7 @@ describe('Parser Test Suite', () => {
 	// UNPARSED TREE TEST
     describe('It initializes correctly', () => {
         beforeEach(() => {
-            // declare var and assign it to a test file and make new instance of Parser
+            // Assign the test file and make new instance of Parser
             file = path.join(__dirname, '../test_cases/tc_0/index.js');
             // file = path.join(__dirname, '../../../src/test/test_apps/test_0/index.js');
             parser = new Parser(file);
@@ -32,7 +31,7 @@ describe('Parser Test Suite', () => {
 
 	// TEST 0: ONE CHILD
     describe('It works for simple apps', () => {
-        before(() => {
+        beforeEach(() => {
             file = path.join(__dirname, '');
             parser = new Parser(file);
             tree = parser.parse();
@@ -43,9 +42,9 @@ describe('Parser Test Suite', () => {
             //expect(tree).toMatchObject()
         });
 
-        test('Parsed tree has a property called name with value index and one child with name App', () => {
+        // test('Parsed tree has a property called name with value index and one child with name App', () => {
 
-        });
+        // });
     });
 
     // these are the 14 tests we need to test for
@@ -63,7 +62,7 @@ describe('Parser Test Suite', () => {
 	// 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)
+    // TEST 14: CHECK IF COMPONENT IS CLIENT OR SERVER (USING HOOKS & DIRECTIVES) => BOOLEAN (priority)
 
     // LOU is doing EXTENSION TEST in extension.test.ts
 });

src/test/suite/parser.test.ts

@@ -1,6 +1,5 @@
-// import React from "react";
 export default function App() {
     return (
         <div>This is the App.</div>
     )
-}
+};

src/test/test_cases/tc_0/component/App.jsx

@@ -1,11 +1,4 @@
-// what we are building to test for 
-// we will point to index.js and call new instance of parser passing in file
-
-// expecting: 
-// if the value of new instance is an obj
-// tree is undefined with a proper file
-
-// test case 0 - simple react app with one app component
+// Test Case 0 - Simple react app with one app component
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';

src/test/test_cases/tc_0/index.js

@@ -1,6 +1,7 @@
 const { TestEnvironment } = require('jest-environment-node');
 const vscode = require('vscode');
 
+// Allows for VSCode Envionrment to be extended to Jest Environment 
 class VsCodeEnvironment extends TestEnvironment {
     async setup() {
         await super.setup();