From b328db9444f92ebe9375c28f65713fe9cfd89a5a Mon Sep 17 00:00:00 2001 From: Hien Nguyen Date: Thu, 14 Oct 2021 14:00:14 -0700 Subject: [PATCH 1/3] Refractor A Few Files For Readability And Perhaps A Bit More Professionalism --- sapling/package.json | 44 +++++++++++---------- sapling/src/{parser.ts => SaplingParser.ts} | 38 +++++------------- sapling/src/SidebarProvider.ts | 9 ++++- sapling/src/extension.ts | 4 ++ sapling/src/getNonce.ts | 6 +-- sapling/src/test/suite/parser.test.ts | 2 +- sapling/src/types/ImportObj.ts | 3 ++ sapling/src/types/Tree.ts | 19 +++++++++ 8 files changed, 71 insertions(+), 54 deletions(-) rename sapling/src/{parser.ts => SaplingParser.ts} (93%) create mode 100644 sapling/src/types/ImportObj.ts create mode 100644 sapling/src/types/Tree.ts diff --git a/sapling/package.json b/sapling/package.json index 19819c7..7f1986f 100644 --- a/sapling/package.json +++ b/sapling/package.json @@ -12,7 +12,11 @@ "categories": [ "Visualization" ], - "keywords": ["react", "component hierarchy", "devtools"], + "keywords": [ + "react", + "component hierarchy", + "devtools" + ], "activationEvents": [ "onStartupFinished" ], @@ -50,21 +54,21 @@ "title": "Generate Tree" } ], - "menus" : { - "commandPalette": [ - { - "command": "sapling.generateTree", - "when": "resourceLangId == javascript || resourceLangId == javascriptreact || resourceLangId == typescript || resourceLangId == typescriptreact" - } - ], - "explorer/context": [ - { - "when": "resourceLangId == javascript || resourceLangId == javascriptreact || resourceLangId == typescript || resourceLangId == typescriptreact", - "command": "sapling.generateTree", - "group": "sapling" - } - ] - }, + "menus": { + "commandPalette": [ + { + "command": "sapling.generateTree", + "when": "resourceLangId == javascript || resourceLangId == javascriptreact || resourceLangId == typescript || resourceLangId == typescriptreact" + } + ], + "explorer/context": [ + { + "when": "resourceLangId == javascript || resourceLangId == javascriptreact || resourceLangId == typescript || resourceLangId == typescriptreact", + "command": "sapling.generateTree", + "group": "sapling" + } + ] + }, "configuration": { "title": "Sapling", "properties": { @@ -83,11 +87,11 @@ }, "scripts": { "vscode:prepublish": "npm run package", - "build": "npm-run-all -p build:*", - "build:extension": "webpack --mode production", - "build:sidebar": "webpack --config ./src/webviews/webpack.views.config.js", + "build": "npm-run-all -p build:*", + "build:extension": "webpack --mode production", + "build:sidebar": "webpack --config ./src/webviews/webpack.views.config.js", "watch": "npm-run-all -p watch:*", - "watch:extension": "webpack --watch", + "watch:extension": "webpack --watch", "watch:sidebar": "webpack --watch --config ./src/webviews/webpack.views.config.js", "package": "webpack --mode production --devtool hidden-source-map && webpack --config ./src/webviews/webpack.views.config.js --devtool hidden-source-map", "test-compile": "tsc -p ./", diff --git a/sapling/src/parser.ts b/sapling/src/SaplingParser.ts similarity index 93% rename from sapling/src/parser.ts rename to sapling/src/SaplingParser.ts index f77438b..8cfe43f 100644 --- a/sapling/src/parser.ts +++ b/sapling/src/SaplingParser.ts @@ -2,29 +2,9 @@ import * as babelParser from '@babel/parser'; import * as path from 'path'; import * as fs from 'fs'; import { getNonce } from "./getNonce"; - -// React component tree is a nested data structure, children are Trees -export type Tree = { - id: string, - name: string, - fileName: string, - filePath: string, - importPath: string, - expanded: boolean, - depth: number, - count: number, - thirdParty: boolean, - reactRouter: boolean, - reduxConnect: boolean, - children: Tree[], - parentList: string[], - props: {[key: string]: boolean}, - error: string; -}; - -type ImportObj = { - [key : string]: {importPath: string, importName: string} -}; +import { Tree } from './types/Tree'; +import { ImportObj } from './types/ImportObj'; +import { File } from '@babel/types'; export class SaplingParser { entryFile: string; @@ -85,12 +65,12 @@ export class SaplingParser { public updateTree(filePath : string) : Tree { let children = []; - const getChildNodes = (node) => { + const getChildNodes = (node: Tree) : void => { const { depth, filePath, expanded } = node; children.push({ depth, filePath, expanded }); }; - const matchExpand = (node) => { + const matchExpand = (node: Tree) : void => { for (let i = 0 ; i < children.length ; i += 1) { const oldNode = children[i]; if (oldNode.depth === node.depth && oldNode.filePath === node.filePath && oldNode.expanded) { @@ -99,7 +79,7 @@ export class SaplingParser { } }; - const callback = (node) => { + const callback = (node: Tree) : void => { if (node.filePath === filePath) { node.children.forEach(child => { this.#traverseTree(getChildNodes, child); @@ -169,7 +149,7 @@ export class SaplingParser { } // Create abstract syntax tree of current component tree file - let ast; + let ast: babelParser.ParseResult; try { ast = babelParser.parse(fs.readFileSync(path.resolve(componentTree.filePath), 'utf-8'), { sourceType: 'module', @@ -267,7 +247,7 @@ export class SaplingParser { } // Finds JSX React Components in current file - private getJSXChildren(astTokens: [{[key: string]: any}], importsObj : ImportObj, parentNode: Tree) : Tree[] { + private getJSXChildren(astTokens: any[], importsObj : ImportObj, parentNode: Tree) : Tree[] { let childNodes: {[key : string]: Tree} = {}; let props : {[key : string]: boolean} = {}; let token : {[key: string]: any}; @@ -337,7 +317,7 @@ export class SaplingParser { } // Checks if current Node is connected to React-Redux Store - private checkForRedux(astTokens: [{[key: string]: any}], importsObj : ImportObj) : boolean { + private checkForRedux(astTokens: any[], importsObj : ImportObj) : boolean { // Check that react-redux is imported in this file (and we have a connect method or otherwise) let reduxImported = false; let connectAlias; diff --git a/sapling/src/SidebarProvider.ts b/sapling/src/SidebarProvider.ts index c2287e3..f9f5910 100644 --- a/sapling/src/SidebarProvider.ts +++ b/sapling/src/SidebarProvider.ts @@ -1,6 +1,7 @@ import * as vscode from "vscode"; import { getNonce } from "./getNonce"; -import { SaplingParser, Tree } from './parser'; +import { SaplingParser } from './SaplingParser'; +import { Tree } from "./types/Tree"; // Sidebar class that creates a new instance of the sidebar + adds functionality with the parser export class SidebarProvider implements vscode.WebviewViewProvider { @@ -160,6 +161,12 @@ export class SidebarProvider implements vscode.WebviewViewProvider { } }; + public onActiveWindowChanged = (fileName: string) => { + this.parser = new SaplingParser(fileName); + this.parser.parse(); + this.updateView(); + }; + // revive statement for the webview panel public revive(panel: vscode.WebviewView) { this._view = panel; diff --git a/sapling/src/extension.ts b/sapling/src/extension.ts index 63657cc..9b4fcbc 100644 --- a/sapling/src/extension.ts +++ b/sapling/src/extension.ts @@ -23,6 +23,10 @@ export function activate(context: vscode.ExtensionContext) { ) ); + vscode.window.onDidChangeActiveTextEditor((e) => + sidebarProvider.onActiveWindowChanged(e.document.fileName) + ); + // Register command to generate tree from current file on status button click or from explorer context context.subscriptions.push( vscode.commands.registerCommand("sapling.generateTree", async (uri: vscode.Uri | undefined) => { diff --git a/sapling/src/getNonce.ts b/sapling/src/getNonce.ts index 3e1fdcd..02ed811 100644 --- a/sapling/src/getNonce.ts +++ b/sapling/src/getNonce.ts @@ -1,6 +1,6 @@ -export function getNonce() { - let text = ""; - const possible = +export function getNonce() : string { + let text : string = ""; + const possible : string = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (let i = 0; i < 32; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); diff --git a/sapling/src/test/suite/parser.test.ts b/sapling/src/test/suite/parser.test.ts index 52f4494..4cd070f 100644 --- a/sapling/src/test/suite/parser.test.ts +++ b/sapling/src/test/suite/parser.test.ts @@ -1,5 +1,5 @@ import * as assert from 'assert'; -import { SaplingParser } from '../../parser'; +import { SaplingParser } from '../../SaplingParser'; import { describe, suite , test, before} from 'mocha'; import { expect } from 'chai'; import * as path from 'path'; diff --git a/sapling/src/types/ImportObj.ts b/sapling/src/types/ImportObj.ts new file mode 100644 index 0000000..a67a46f --- /dev/null +++ b/sapling/src/types/ImportObj.ts @@ -0,0 +1,3 @@ +export type ImportObj = { + [key: string]: { importPath: string; importName: string; }; +}; diff --git a/sapling/src/types/Tree.ts b/sapling/src/types/Tree.ts new file mode 100644 index 0000000..4293a84 --- /dev/null +++ b/sapling/src/types/Tree.ts @@ -0,0 +1,19 @@ +// React component tree is a nested data structure, children are Trees + +export type Tree = { + id: string; + name: string; + fileName: string; + filePath: string; + importPath: string; + expanded: boolean; + depth: number; + count: number; + thirdParty: boolean; + reactRouter: boolean; + reduxConnect: boolean; + children: Tree[]; + parentList: string[]; + props: { [key: string]: boolean; }; + error: string; +}; From e534db98a357c1f96e7ac1be3511b77a5adeadc3 Mon Sep 17 00:00:00 2001 From: Hien Nguyen <54326918+hienqn@users.noreply.github.com> Date: Tue, 19 Oct 2021 12:58:17 -0700 Subject: [PATCH 2/3] Update SidebarProvider.ts --- sapling/src/SidebarProvider.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/sapling/src/SidebarProvider.ts b/sapling/src/SidebarProvider.ts index f9f5910..a5fa059 100644 --- a/sapling/src/SidebarProvider.ts +++ b/sapling/src/SidebarProvider.ts @@ -161,12 +161,6 @@ export class SidebarProvider implements vscode.WebviewViewProvider { } }; - public onActiveWindowChanged = (fileName: string) => { - this.parser = new SaplingParser(fileName); - this.parser.parse(); - this.updateView(); - }; - // revive statement for the webview panel public revive(panel: vscode.WebviewView) { this._view = panel; @@ -230,4 +224,4 @@ export class SidebarProvider implements vscode.WebviewViewProvider { `; } -} \ No newline at end of file +} From 8fccbe2623ac68454211494ceb41fb96771a811f Mon Sep 17 00:00:00 2001 From: Hien Nguyen <54326918+hienqn@users.noreply.github.com> Date: Tue, 19 Oct 2021 12:59:16 -0700 Subject: [PATCH 3/3] Update extension.ts --- sapling/src/extension.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/sapling/src/extension.ts b/sapling/src/extension.ts index 9b4fcbc..63657cc 100644 --- a/sapling/src/extension.ts +++ b/sapling/src/extension.ts @@ -23,10 +23,6 @@ export function activate(context: vscode.ExtensionContext) { ) ); - vscode.window.onDidChangeActiveTextEditor((e) => - sidebarProvider.onActiveWindowChanged(e.document.fileName) - ); - // Register command to generate tree from current file on status button click or from explorer context context.subscriptions.push( vscode.commands.registerCommand("sapling.generateTree", async (uri: vscode.Uri | undefined) => {