4 | 
18 | 
44 |
45 | 5. The component tree visualizer should now be populated in the sidebar with the component name. Toggle through the down arrows to expand the tree.
46 |
47 | 
48 |
49 | 6. Underneath the tree, the app performance shows the total number of components rendered in your application and the number of components that can re-render. An error log will also report any import issues.
50 |
51 | 
52 |
53 | ## Technology Stack
54 | 
57 | React with React Hooks
58 | 
61 | Visual Studio Code Extension API
62 | 
65 | Typescript
66 | 
69 | Svelte
70 | 
74 | WebView
75 | 
78 | Webpack
81 | SCSS/SASS
82 | etc.
40 | // svelte component the import at the top of file e.g. import FileButton from ./Button.svelte
41 | // svelte script basically anything in script tag
42 |
43 | if(parsedData.children[i].type === 'svelteElement' || parsedData.children[i].type === 'svelteComponent' || parsedData.children[i].type === 'svelteScript' || parsedData.children[i].type === 'svelteBranchingBlock'){
44 | // need to parse again? children aren't parsed
45 |
46 | // parse the svelte element but not components and push that as a children !!!!!!!!!!!!!!!!!!!!!!!!!!! Maybe
47 | childComponents.push(parsedData.children[i]);
48 |
49 | }
50 |
51 |
52 |
53 |
54 | };
55 | // store parsed data
56 | // elements in svelte files in app.jsx
57 | fileObj.fileName = file.name; // name of file
58 | fileObj.children = childComponents; // an array
59 | //fileObj.parsedData = parsedData; // data object //might not need if able to parse line 122
60 |
61 | // returning whole fileObj of the current file
62 | // used in app.jsx line 63
63 | resolve(fileObj);
64 | };
65 |
66 |
67 | });
68 | }
69 |
70 |
71 | export default sidebarParser;
72 |
--------------------------------------------------------------------------------
/src/SidebarProvider.ts:
--------------------------------------------------------------------------------
1 | import * as vscode from 'vscode';
2 |
3 |
4 | export class SidebarProvider implements vscode.WebviewViewProvider {
5 | [x: string]: any;
6 | public _view?: vscode.WebviewView; //made everything public for now
7 | public _doc?: vscode.TextDocument; // made public
8 |
9 | constructor(
10 | public readonly _extensionUri: vscode.Uri, // made public
11 | ) { }
12 |
13 |
14 |
15 | public resolveWebviewView(
16 | webviewView: vscode.WebviewView,
17 | context: vscode.WebviewViewResolveContext,
18 | _token: vscode.CancellationToken,
19 | ) {
20 | this._view = webviewView;
21 |
22 | webviewView.webview.options = {
23 | // Allow scripts in the webview
24 | enableScripts: true,
25 |
26 | localResourceRoots: [
27 | this._extensionUri
28 | ]
29 | };
30 |
31 |
32 | webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
33 |
34 | webviewView.webview.onDidReceiveMessage(data => {
35 | switch (data.type) {
36 | }
37 | });
38 | }
39 |
40 | public revive(panel: vscode.WebviewView) {
41 | this._view = panel;
42 | }
43 |
44 |
45 | public _getHtmlForWebview(webview: vscode.Webview) { // made public
46 | // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
47 | const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'dist', 'sidebar.js'));
48 |
49 |
50 | // Do the same for the stylesheet.
51 | // const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'));
52 | // const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css'));
53 | // const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
54 |
55 | // Use a nonce to only allow a specific script to be run.
56 |
57 |
58 | return `
59 |
60 |
61 |
62 |
63 |
64 | ReSvelte
65 |
66 |
67 | Loading extension...
68 |
69 |
70 | `;
71 | }
72 | }
--------------------------------------------------------------------------------
/src/__tests__/App.test.jsx:
--------------------------------------------------------------------------------
1 | import { render, fireEvent, screen } from '@testing-library/react';
2 |
3 | import App from "../App";
4 |
5 | describe('rendering App', () => {
6 |
7 | test('renders upload project text', () => {
8 | render( = (props) : JSX.Element => {
6 |
7 | const [showChildren, setShow] = useState(false);
8 |
9 | return (
10 |
11 |
12 | Component
13 | Name: {props.fileName}
14 | Children: {props.children ? props.children.length : 0}
15 | {props.children ? (
16 | showChildren ? (
17 |
23 | ) : (
24 |
30 | )
31 | ) : null}
32 |
33 |
34 | {showChildren ? props.children : null}
35 |
36 | )
37 | }
38 |
39 | export default componentNode;
--------------------------------------------------------------------------------
/src/components/elementNode.tsx:
--------------------------------------------------------------------------------
1 | import React ,{ FC , useState} from "react";
2 | import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
3 | import { AiFillFolder, AiFillFolderOpen } from "react-icons/ai";
4 | import { nodeTypes } from '../types';
5 |
6 | const elementNode : FC = (props) : JSX.Element => {
7 |
8 | const [showChildren, setShow] = useState(false);
9 |
10 | return (
11 |
12 | {
13 | // if there are children
14 | props.children ? (
15 | // if current state of showchildren is truthy
16 | showChildren ? (
17 | // create up arrow icon
18 |
27 | ) : (
28 | // otherwise create down arrow icon
29 |
38 | )
39 | ) : // if no child don't show any button
40 | null
41 | }
42 |
43 |
44 | {/* if showchildren is truthy, show childlist, otherwise show nothing */}
45 | {showChildren ? props.children : null}
46 |
47 |
48 | );
49 | };
50 |
51 | export default elementNode;
--------------------------------------------------------------------------------
/src/components/errorMessage.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import '../styles.scss';
3 |
4 | import { errorMessageTypes } from "../types";
5 |
6 | const errorMessage : FC = (props) => {
7 |
8 | return(
9 |
10 | {props.errorCode} : {props.errorMessage}
11 |
12 | );
13 | };
14 |
15 | export default errorMessage;
--------------------------------------------------------------------------------
/src/components/fileNode.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../styles.scss";
3 |
4 | import { FC } from "react";
5 |
6 | import ElementNode from '../components/elementNode';
7 | import ComponentNode from '../components/componentNode';
8 |
9 | import { fileNode } from '../types';
10 |
11 |
12 | const fileNode: FC = (props) => {
13 |
14 | console.log('children:', props.children)
15 |
16 |
17 | return (
18 |
19 | {
20 | //if filetype is svelteelement, run code below
21 | props.fileType === "svelteElement" ? (
22 |
23 | ) : (
24 |
25 | )
26 | }
27 |
28 | );
29 | }
30 |
31 | export default fileNode;
--------------------------------------------------------------------------------
/src/components/performanceDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC, useState} from 'react';
2 | import '../styles.scss';
3 |
4 | import { performanceDisplayTypes } from '../types';
5 |
6 | const performanceDisplay : FC = (props) => {
7 |
8 | return (
9 |
10 | App Performance
11 |
12 |
13 |
14 | {/*
15 | Graphs
16 | */}
17 |
18 | Components
19 |
20 |
21 |
22 | Total
23 | {props.totalComponents}
24 |
25 |
26 |
27 |
28 | Re-rendering
29 | {props.totalRerendering}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Error Log
38 | {props.errorLog}
39 |
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | export default performanceDisplay;
--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
1 | import * as vscode from 'vscode';
2 |
3 | import { SidebarProvider } from './SidebarProvider';
4 |
5 |
6 | export function activate(context: vscode.ExtensionContext) {
7 |
8 | console.log('Congratulations, your extension "resvelte" is now active!');
9 |
10 |
11 | const sidebarProvider = new SidebarProvider(context.extensionUri);
12 | context.subscriptions.push(
13 | vscode.window.registerWebviewViewProvider('ReSvelte-Sidebar', sidebarProvider)
14 | );
15 |
16 | // context.subscriptions.push(
17 | // vscode.commands.registerCommand("resvelte.createTree", async (uri: vscode.Uri | undefined) => {
18 | // await vscode.commands.executeCommand('workbench.view.extension.Resvelte-Sidebar');
19 | // // sidebarProvider.statusButtonClicked(uri);
20 | // })
21 | // );
22 | };
23 |
24 |
25 |
26 |
27 | // this method is called when your extension is deactivated
28 | export function deactivate() {}
29 |
--------------------------------------------------------------------------------
/src/parser/getAliases.ts:
--------------------------------------------------------------------------------
1 |
2 | const getAliases = (file ) : object => {
3 | // traverse the children of the parsedData
4 | // grab only svelteComponents
5 | //
11 |
36 | )
37 | }
38 |
39 | export default componentNode;
--------------------------------------------------------------------------------
/src/components/elementNode.tsx:
--------------------------------------------------------------------------------
1 | import React ,{ FC , useState} from "react";
2 | import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
3 | import { AiFillFolder, AiFillFolderOpen } from "react-icons/ai";
4 | import { nodeTypes } from '../types';
5 |
6 | const elementNode : FC
12 | Component
13 |
33 |
34 | Name: {props.fileName}
14 | Children: {props.children ? props.children.length : 0}
15 | {props.children ? (
16 | showChildren ? (
17 |
23 | ) : (
24 |
30 | )
31 | ) : null}
32 | {showChildren ? props.children : null}
35 |
12 | {
13 | // if there are children
14 | props.children ? (
15 | // if current state of showchildren is truthy
16 | showChildren ? (
17 | // create up arrow icon
18 |
27 | ) : (
28 | // otherwise create down arrow icon
29 |
38 | )
39 | ) : // if no child don't show any button
40 | null
41 | }
42 |
43 |
48 | );
49 | };
50 |
51 | export default elementNode;
--------------------------------------------------------------------------------
/src/components/errorMessage.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import '../styles.scss';
3 |
4 | import { errorMessageTypes } from "../types";
5 |
6 | const errorMessage : FC
44 | {/* if showchildren is truthy, show childlist, otherwise show nothing */}
45 | {showChildren ? props.children : null}
46 |
47 |
10 | {props.errorCode} : {props.errorMessage}
11 |
12 | );
13 | };
14 |
15 | export default errorMessage;
--------------------------------------------------------------------------------
/src/components/fileNode.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../styles.scss";
3 |
4 | import { FC } from "react";
5 |
6 | import ElementNode from '../components/elementNode';
7 | import ComponentNode from '../components/componentNode';
8 |
9 | import { fileNode } from '../types';
10 |
11 |
12 | const fileNode: FC
19 | {
20 | //if filetype is svelteelement, run code below
21 | props.fileType === "svelteElement" ? (
22 |
23 | ) : (
24 |
25 | )
26 | }
27 |
28 | );
29 | }
30 |
31 | export default fileNode;
--------------------------------------------------------------------------------
/src/components/performanceDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC, useState} from 'react';
2 | import '../styles.scss';
3 |
4 | import { performanceDisplayTypes } from '../types';
5 |
6 | const performanceDisplay : FC
10 |
43 | );
44 | };
45 |
46 | export default performanceDisplay;
--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
1 | import * as vscode from 'vscode';
2 |
3 | import { SidebarProvider } from './SidebarProvider';
4 |
5 |
6 | export function activate(context: vscode.ExtensionContext) {
7 |
8 | console.log('Congratulations, your extension "resvelte" is now active!');
9 |
10 |
11 | const sidebarProvider = new SidebarProvider(context.extensionUri);
12 | context.subscriptions.push(
13 | vscode.window.registerWebviewViewProvider('ReSvelte-Sidebar', sidebarProvider)
14 | );
15 |
16 | // context.subscriptions.push(
17 | // vscode.commands.registerCommand("resvelte.createTree", async (uri: vscode.Uri | undefined) => {
18 | // await vscode.commands.executeCommand('workbench.view.extension.Resvelte-Sidebar');
19 | // // sidebarProvider.statusButtonClicked(uri);
20 | // })
21 | // );
22 | };
23 |
24 |
25 |
26 |
27 | // this method is called when your extension is deactivated
28 | export function deactivate() {}
29 |
--------------------------------------------------------------------------------
/src/parser/getAliases.ts:
--------------------------------------------------------------------------------
1 |
2 | const getAliases = (file ) : object => {
3 | // traverse the children of the parsedData
4 | // grab only svelteComponents
5 | //App Performance
11 | 12 |
13 |
41 |
42 |
14 | {/*
35 |
36 |
15 | Graphs
16 |
*/}
17 |
18 | Components
19 |
34 |
20 |
21 |
33 |
22 |
25 |
26 |
27 | Total
23 | {props.totalComponents} 24 |
28 |
31 |
32 | Re-rendering
29 | {props.totalRerendering} 30 |
37 | Error Log
38 | {props.errorLog}
39 |
40 |