Skip to content

Commit ece43e0

Browse files
ash-t-luuash-t-luu
committed
Merge branch AL/moduleUpdates into AL/client-conditionals, completed testing for #11-14, changed logic in parser to account for all function declarations
2 parents cf696da + 3d47bc1 commit ece43e0

File tree

10 files changed

+82
-140
lines changed

10 files changed

+82
-140
lines changed

‎.gitignore‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
node_modules
1+
/node_modules/
22
/package-lock.json
33
/.vscode-test/
4-
/build/
4+
/build/
5+
/.DS_Store

‎.vscodeignore‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
# FOLDERS
12
.vscode/**
23
.vscode-test/**
34
test/**
4-
.gitignore
5-
.yarnrc
6-
vsc-extension-quickstart.md
5+
node_modules
76
**/jsconfig.json
87
**/*.map
98
**/.eslintrc.json
9+
10+
# FILES
11+
.gitignore
12+
.yarnrc
13+
vsc-extension-quickstart.md
1014
**/*.js.map
15+

‎package.json‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
{
22
"name": "react-labyrinth",
33
"displayName": "React Labyrinth",
4-
"description": "React Server Components visualization tool",
4+
"description": "React Component Type hierarchy tree visualization tool",
55
"version": "0.0.1",
6+
"icon": "./media/reactLbayrinthFinal.png",
67
"publisher": "ReactLabyrinthDev",
8+
"preview": false,
79
"engines": {
810
"vscode": "^1.85.1"
911
},
1012
"repository": {
1113
"type": "git",
12-
"url": "https://github.com/oslabs-beta/React-Labyrinth"
14+
"url": "https://github.com/oslabs-beta/React-Labyrinth/tree/main"
1315
},
1416
"categories": [
1517
"Other"
1618
],
1719
"keywords": [
1820
"react",
1921
"rsc",
22+
"react components",
2023
"hierarchy tree",
2124
"parent-child",
2225
"visualizer",
23-
"server component"
26+
"server component",
27+
"client component"
2428
],
2529
"license": "MIT",
2630
"pricing": "Free",
27-
"activationEvents": [],
31+
"activationEvents": [
32+
"onStartupFinished"
33+
],
2834
"main": "./build/extension.js",
2935
"contributes": {
3036
"commands": [
@@ -51,28 +57,25 @@
5157
"views": {
5258
"react-labyrinth": [
5359
{
54-
"id": "metrics-file",
55-
"name": "Metrics"
56-
},
57-
{
58-
"id": "test",
59-
"name": "Test"
60+
"id": "tree-render",
61+
"name": "Tree"
6062
}
6163
]
6264
},
6365
"viewsWelcome": [
6466
{
65-
"view": "metrics-file",
66-
"contents": "View tree to see where improvements can be made!\n[View Tree](command:myExtension.pickFile)\n"
67+
"view": "tree-render",
68+
"contents": "View tree to see component types!\n[View Tree](command:myExtension.pickFile)\n"
6769
}
6870
]
6971
},
7072
"scripts": {
73+
"vscode:prepublish": "prod",
7174
"lint": "eslint .",
7275
"pretest": "npm run lint",
7376
"test": "npx tsc ; node ./build/src/test/runTest.js",
74-
"dev": "webpack --watch",
75-
"webpack": "webpack"
77+
"dev": "webpack --mode development --config webpack.config.ts --watch",
78+
"prod": "webpack --mode production --config webpack.config.ts"
7679
},
7780
"devDependencies": {
7881
"@babel/preset-typescript": "^7.23.3",

‎src/parser.ts‎

Lines changed: 19 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,28 @@ export class Parser {
5757
};
5858
this.tree = root;
5959
this.parser(root);
60+
// clean up nodes with error: 'File not found'
61+
this.removeTreesWithError(this.tree);
6062
return this.tree;
6163
}
6264

65+
private removeTreesWithError(tree: Tree): void {
66+
// base case
67+
if(tree.children.length === 0) return;
68+
// iterate over tree.children array to check for error.
69+
for(let i = 0; i < tree.children.length; i++){
70+
// call removeTreesWithError on every tree in the children array
71+
if(tree.children[i].children.length !== 0){
72+
this.removeTreesWithError(tree.children[i]);
73+
}
74+
if(tree.children[i].error && (tree.children[i].error === 'File not found' || tree.children[i].error === 'Error while processing this file/node')){
75+
// when an error is found, splice the tree out of the children array
76+
tree.children.splice(i,1);
77+
i--; // decrement to account for change in children array length
78+
}
79+
}
80+
};
81+
6382
public getTree(): Tree {
6483
return this.tree!;
6584
}
@@ -159,9 +178,6 @@ export class Parser {
159178
if (componentTree.parentList.includes(componentTree.filePath)) {
160179
return;
161180
}
162-
// if (typeof componentTree.parentList === 'string' && componentTree.parentList.includes(componentTree.filePath)) {
163-
// return;
164-
// }
165181

166182
// Create abstract syntax tree of current component tree file
167183
let ast: babel.ParseResult<File>;
@@ -290,18 +306,14 @@ export class Parser {
290306
}
291307

292308
// Second check for use of React/Redux hooks
293-
// console.log('body:', body);
294309
// Checks for components declared using 'const'
295310
const bodyCallee = body.filter((item) => item.type === 'VariableDeclaration');
296-
// console.log('bodyCall: ', bodyCallee);
297311

298312
// Checks for components declared using 'export default function'
299313
const exportCallee = body.filter((item) => item.type === 'ExportDefaultDeclaration');
300-
// console.log('exprt: ', exportCallee);
301314

302315
// Checks for components declared using 'function'
303316
const functionCallee = body.filter((item) => item.type === 'FunctionDeclaration');
304-
// console.log('func: ', functionCallee);
305317

306318
// Helper function
307319
const calleeHelper = (item) => {
@@ -355,114 +367,6 @@ export class Parser {
355367
return false;
356368
}
357369

358-
// Calling helper function for functionCallee array with length of 1 or more
359-
// if (functionCallee.length === 1) {
360-
// const calleeArr = functionCallee[0].body?.body;
361-
// if (calleeArr === undefined) return false;
362-
363-
// let checkTrue = false;
364-
// for (let i = 0; i < calleeArr.length; i++) {
365-
// if (checkTrue) return true;
366-
// checkTrue = calleeHelper(calleeArr[i]);
367-
// }
368-
// return checkTrue;
369-
// } else if (functionCallee.length > 1) {
370-
// let calleeArr: [] = [];
371-
// for (let i = 0; i < functionCallee.length; i++) {
372-
// try {
373-
// if (functionCallee[i].declarations[0]?.init?.body?.body) {
374-
// calleeArr = functionCallee[i].declarations[0].init.body.body;
375-
// }
376-
// }
377-
// catch (err) {
378-
// const error = defaultErr(err);
379-
// console.error(error.method, '\n', error.log);
380-
// }
381-
// }
382-
383-
// if (calleeArr === undefined) return false;
384-
// let checkTrue = false;
385-
// for (let i = 0; i < calleeArr.length; i++) {
386-
// if (checkTrue) return true;
387-
// checkTrue = calleeHelper(calleeArr[i]);
388-
// }
389-
// return checkTrue;
390-
// }
391-
392-
393-
// Calling helper function for exportCallee array with length of 1 or more
394-
// if (exportCallee.length === 1) {
395-
// const calleeArr = exportCallee[0].declaration.body?.body;
396-
// if (calleeArr === undefined) return false;
397-
398-
// let checkTrue = false;
399-
// for (let i = 0; i < calleeArr.length; i++) {
400-
// if (checkTrue) return true;
401-
// checkTrue = calleeHelper(calleeArr[i]);
402-
// }
403-
// return checkTrue;
404-
// } else if (exportCallee.length > 1) {
405-
// let calleeArr: [] = [];
406-
// for (let i = 0; i < exportCallee.length; i++) {
407-
// try {
408-
// if (exportCallee[i].declarations[0]?.init?.body?.body) {
409-
// calleeArr = exportCallee[i].declarations[0].init.body.body;
410-
// }
411-
// }
412-
// catch (err) {
413-
// const error = defaultErr(err);
414-
// console.error(error.method, '\n', error.log);
415-
// }
416-
// }
417-
418-
// if (calleeArr === undefined) return false;
419-
// let checkTrue = false;
420-
// for (let i = 0; i < calleeArr.length; i++) {
421-
// if (checkTrue) return true;
422-
// checkTrue = calleeHelper(calleeArr[i]);
423-
// }
424-
// return checkTrue;
425-
// }
426-
427-
// console.log('hello');
428-
// // Calling helper function for bodyCallee array with length of 1 or more
429-
// if (bodyCallee.length === 1) {
430-
// console.log('body in length: ', bodyCallee);
431-
// const calleeArr = bodyCallee[0].declarations[0]?.init?.body?.body;
432-
// console.log('calle: ', calleeArr);
433-
// if (calleeArr === undefined) return false;
434-
435-
// let checkTrue = false;
436-
// for (let i = 0; i < calleeArr.length; i++) {
437-
// if (checkTrue) return true;
438-
// console.log('i:', calleeArr[i])
439-
// checkTrue = calleeHelper(calleeArr[i]);
440-
// }
441-
// return checkTrue;
442-
// } else if (bodyCallee.length > 1) {
443-
// let calleeArr: [] = [];
444-
// for (let i = 0; i < bodyCallee.length; i++) {
445-
// try {
446-
// if (bodyCallee[i].declarations[0]?.init?.body?.body) {
447-
// calleeArr = bodyCallee[i].declarations[0].init.body.body;
448-
// }
449-
// }
450-
// catch (err) {
451-
// const error = defaultErr(err);
452-
// console.error(error.method, '\n', error.log);
453-
// }
454-
// }
455-
456-
// if (calleeArr === undefined) return false;
457-
// let checkTrue = false;
458-
// for (let i = 0; i < calleeArr.length; i++) {
459-
// if (checkTrue) return true;
460-
// checkTrue = calleeHelper(calleeArr[i]);
461-
// }
462-
// return checkTrue;
463-
// }
464-
// if (!bodyCallee && !exportCallee && !functionCallee) return false;
465-
466370
// Process Function Declarations
467371
for (const func of functionCallee) {
468372
const calleeArr = func.body?.body;

‎src/test/suite/parser.test.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ describe('Parser Test Suite', () => {
104104
expect(tree.children[0]).toHaveProperty('name', 'App');
105105
});
106106

107-
test('App should have three children, Component1 is a client component using hooks (variable declaration, export default declaration, and function declaration), Component2 is a client component using directives, and Component3 is not a client component', () => {
107+
test('App should have three children, Component1, Component4, Component5 is a client component using hooks, Component2 is a client component using directives, and Component3, Component6, Component7 is not a client component', () => {
108108
expect(tree.children[0].children[0]).toHaveProperty('name', 'Component1');
109109
expect(tree.children[0].children[0]).toHaveProperty('isClientComponent', true);
110110

@@ -119,6 +119,12 @@ describe('Parser Test Suite', () => {
119119

120120
expect(tree.children[0].children[4]).toHaveProperty('name', 'Component5');
121121
expect(tree.children[0].children[4]).toHaveProperty('isClientComponent', true);
122+
123+
expect(tree.children[0].children[5]).toHaveProperty('name', 'Component6');
124+
expect(tree.children[0].children[5]).toHaveProperty('isClientComponent', false);
125+
126+
expect(tree.children[0].children[6]).toHaveProperty('name', 'Component7');
127+
expect(tree.children[0].children[6]).toHaveProperty('isClientComponent', false);
122128
});
123129
});
124130
});

‎src/test/test_cases/tc_14/components/App.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React from 'react';
2-
import Component1 from './Component1';
1+
import React from "react";
2+
import Component1 from "./Component1";
33
import Component2 from "./Component2";
44
import Component3 from "./Component3";
55
import Component4 from "./Component4";
66
import Component5 from "./Component5";
7+
import Component6 from "./Component6";
8+
import Component7 from "./Component7";
79

810
export default function Pages() {
911
return (
@@ -13,6 +15,8 @@ export default function Pages() {
1315
<Component3 />
1416
<Component4 />
1517
<Component5 />
18+
<Component6 />
19+
<Component7 />
1620
</div>
1721
);
1822
}

‎src/test/test_cases/tc_14/components/Component6.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
function Component6() {
2+
return (
3+
<section>
4+
<h2>Static Component</h2>
5+
<p>This is a static component without interactivity or state.</p>
6+
</section>
7+
);
8+
}
9+
10+
export default Component6;

‎src/test/test_cases/tc_14/components/Component7.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const Component7 = () => {
2+
return (
3+
<section>
4+
<h2>Static Component</h2>
5+
<p>This is a static component without interactivity or state.</p>
6+
</section>
7+
);
8+
}
9+
10+
export default Component7;

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"node_modules/@types/glob/index.d.ts",
2525
"node_modules/@types/jest/index.d.ts",
2626
"src/test/test_cases/tc_12b/app/layout.jsx",
27-
"src/test/test_cases/tc_12b/app/page.tsx"
27+
"src/test/test_cases/tc_12b/app/page.tsx",
28+
"src/test/test_cases"
2829
]
2930
}

‎webpack.config.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const extConfig: webpack.Configuration = {
1212
resolve: { extensions: ['.ts', '.js'] },
1313
module: { rules: [{ test: /\.ts$/, loader: 'ts-loader' }] },
1414
externals: { vscode: 'vscode' },
15-
mode: 'development'
1615
};
1716

1817
const webviewConfig: webpack.Configuration = {
@@ -34,7 +33,6 @@ const webviewConfig: webpack.Configuration = {
3433
},
3534
],
3635
},
37-
mode: 'development'
3836
};
3937

4038
export default [webviewConfig, extConfig];

0 commit comments

Comments
 (0)