Merge pull request #15 from oslabs-beta/dev

Dev to Main PR

Author: Ponch49

.gitignore

@@ -1 +1,2 @@
 node_modules
+/build

README.md

@@ -1,28 +1,45 @@
-# react-labyrinth README
+# React Labyrinth
 
-This is the README for your extension "react-labyrinth". After writing up a brief description, we recommend including the following sections.
+![React Labyrinth Logo](./media/reactLabyrinthFinal.png)
 
-## Features
+# __Table of Contents__
+1. [Overview](#overview)
+2. [Features](#features)
+3. [Installation](#installation)
+4. [Getting Started](#getting-started)
+5. [Known Issues](#known-issues)
+6. [Release Notes](#release-notes)
+7. [Meet Our Team](#meet-our-team)
+8. [License](#license)
+
+*work in progress as of 11/13/23*
+## Overview
+React Server Components are components that run exclusively on the server, allowing the components to do things such as making their own database queries inside of the component, rather than having to make a request to the backend first. These components are different from the components we usually write in React, which under this new paradigm are refered to as Client Components. But the problem is it's not always clear which Client Components could instead be Server Components which would save space on the bundle size and decrease TTI(time to interactive) for the client.
 
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+We want to create a visualization tool to help developers know where these changes could be implemented and how much time and space their application would save from these potential changes. _(Make sure to "trust our extension" in order to see the bundle size and TTI metrics)_
 
-For example if there is an image subfolder under your extension project workspace:
+## Features
+
+Our tool will 
+* Show which components are currently considered Client Components or Server Components 
+* Show if a Client Component has the potential to be a Server Component. 
+* Display the change in Bundle Size and TTI for the web application
 
 \!\[feature X\]\(images/feature-x.png\)
 
 > Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
 
-## Requirements
+## Installation
 
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+Our visualization tool can be downloaded as an extension in the VS Code Editor. Search for React Labrynth and click "install".
 
-## Extension Settings
+## Getting Started
 
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+Select the root file for your React App to load the tree.
 
-For example:
+Any components that are Client Components will have a blue background and Server Components will have an orange background. 
 
-This extension contributes the following settings:
+If the component has the potential to be a Server Component, there will be an orange dotted outline surrounding the component node on the tree.
 
 * `myExtension.enable`: Enable/disable this extension.
 * `myExtension.thing`: Set to `blah` to do something.
@@ -39,27 +56,15 @@ Users appreciate release notes as you update your extension.
 
 Initial release of ...
 
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
----
-
-## Working with Markdown
-
-You can author your README using Visual Studio Code.  Here are some useful editor keyboard shortcuts:
+## Meet Our Team
 
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets
+* Ashley Luu
+* Christina Raether
+* Francisco Lopez
+* Johnny Arroyo
+* Louis Kuczykowski
 
-## For more information
 
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+## License
 
-**Enjoy!**
+React Labrynth is developed under the [MIT license](https://en.wikipedia.org/wiki/MIT_License)

extension.js

@@ -1,36 +1,37 @@
-// The module 'vscode' contains the VS Code extensibility API
-// Import the module and reference it with the alias vscode in your code below
 const vscode = require('vscode');
+const { createPanel } = require('./src/panel');
+const { Parser } = require('./src/parser');
 
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 
-/**
- * @param {vscode.ExtensionContext} context
- */
 function activate(context) {
 
-	// Use the console to output diagnostic information (console.log) and errors (console.error)
-	// This line of code will only be executed once when your extension is activated
-	console.log('Congratulations, your extension "react-labyrinth" is now active!');
-
-	// The command has been defined in the package.json file
-	// Now provide the implementation of the command with  registerCommand
-	// The commandId parameter must match the command field in package.json
 	let disposable = vscode.commands.registerCommand('react-labyrinth.helloWorld', function () {
-		// The code you place here will be executed every time your command is executed
-
-		// Display a message box to the user
 		vscode.window.showInformationMessage('Hello World from React Labyrinth!');
 	});
 
-	context.subscriptions.push(disposable);
+	// pass in the command we want to register (refer to package.json)
+	let result = vscode.commands.registerCommand('myExtension.showPanel', () => {
+		// call helper func
+		createPanel(context);
+	});
+
+	vscode.commands.registerCommand('myExtension.pickFile', async () => {
+		const fileArray = await vscode.window.showOpenDialog({ canSelectFolders: false, canSelectFiles: true, canSelectMany: false });
+		const tree = new Parser(fileArray[0].path);
+		tree.parse();
+		const data = tree.getTree();
+		console.log('Data sent back: \n', data);
+		createPanel(context, data);
+	});
+	context.subscriptions.push(disposable, result);
 }
 
 // This method is called when your extension is deactivated
-function deactivate() {}
+// function deactivate() {}
 
 module.exports = {
 	activate,
-	deactivate
+	// deactivate
 }