Skip to content

Commit 260c2c4

Browse files
committed
updating al/pipelines branch with main branch changes for updated deployment
2 parents 3b374a0 + 459dd8c commit 260c2c4

18 files changed

+724
-69
lines changed

.DS_Store

6 KB
Binary file not shown.

.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
/package-lock.json
33
/.vscode-test/
44
/build/
5-
/.DS_Store
5+
/.DS_Store
6+
/coverage/

LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 React Labyrinth
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

+40-37
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,73 @@
11
# React Labyrinth
22

3-
![React Labyrinth Logo](./media/reactLabyrinthFinal.png)
3+
<p align="center">
4+
<img width="400" height="400" src="https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/ca9ab4e5-cb28-4dc3-83fa-9ef47e4fdbeb">
5+
</p>
46

5-
# __Table of Contents__
7+
## __Table of Contents__
68
1. [Overview](#overview)
7-
2. [Features](#features)
8-
3. [Installation](#installation)
9-
4. [Getting Started](#getting-started)
10-
5. [Known Issues](#known-issues)
11-
6. [Release Notes](#release-notes)
9+
2. [Installation](#installation)
10+
3. [Getting Started](#getting-started)
11+
4. [Tech Stack](#tech-stack)
12+
5. [Publications](#publications)
13+
6. [Contributing](#contributing)
1214
7. [Meet Our Team](#meet-our-team)
1315
8. [License](#license)
1416

1517
*work in progress as of 11/13/23*
1618
## Overview
17-
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.
19+
React Server Components operate exclusively on the server, enabling tasks such as executing database queries within the component itself, rather than relying on backend requests. This paradigm distinguishes them from traditional React components, known as Client Components. However, identifying which Client Components could be optimized as Server Components isn't always straightforward, potentially leading to inefficient bundle sizes and longer time to interactive (TTI) for clients.
1820

19-
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)_
21+
To address this challenge, we aim to develop a visualization tool to help developers determine their application's component types. By enhancing component-type visibility and aiding in the transition to server components, our tool empowers developers to optimize their applications effectively.
2022

21-
## Features
23+
## Installation
2224

23-
Our tool will
24-
* Show which components are currently considered Client Components or Server Components
25-
* Show if a Client Component has the potential to be a Server Component.
26-
* Display the change in Bundle Size and TTI for the web application
25+
React Labyrinth extension can be installed via the VS Code Marketplace. Start by clicking the Extensions icon in the Activity Bar on the side of VS Code or by using the View: Extensions command (Ctrl+Shift+X). Search for 'react-labyrinth' and click the "install" button. Upon completion, VS Code will have installed the extension and React Labyrinth is ready for use.
2726

28-
\!\[feature X\]\(images/feature-x.png\)
27+
## Getting Started
2928

30-
> 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.
29+
Once React Labyrinth is installed in your VS Code, you'll notice its logo added to the Activity Bar on the left-hand side. Simply click on the React Labyrinth logo to launch the extension.
30+
<p align="center">
31+
<img width="250" height="450" src="https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/d72b483b-7785-4a5d-9836-9c79ff46e3a3">
32+
</p>
3133

32-
## Installation
34+
Upon activation, a sidebar will appear, featuring a 'View Tree' button. Clicking this button will prompt the file explorer to open, allowing you to select the root file of your React App to load the tree structure.
3335

34-
Our visualization tool can be downloaded as an extension in the VS Code Editor. Search for React Labrynth and click "install".
35-
36-
## Getting Started
36+
Client Components will be distinguished by a orange background, while Server Components will feature an blue background for easy identification.
3737

38-
Select the root file for your React App to load the tree.
38+
## Tech Stack
3939

40-
Any components that are Client Components will have a blue background and Server Components will have an orange background.
40+
<p align="center">
41+
<a href="https://skillicons.dev">
42+
<img src="https://skillicons.dev/icons?i=js,ts,html,css,tailwind,babel,react,d3,jest,nodejs,webpack,git,azure,vscode)](https://skillicons.dev" />
43+
</a>
44+
</p>
4145

42-
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.
46+
## Publications
4347

44-
* `myExtension.enable`: Enable/disable this extension.
45-
* `myExtension.thing`: Set to `blah` to do something.
48+
Check out our medium article (insert hyperlink) for more information about React Labyrinth!
4649

47-
## Known Issues
50+
## Contributing
4851

49-
Calling out known issues can help limit users opening duplicate issues against your extension.
52+
Contributions are the cornerstone of the open-source community, fostering an environment of learning, inspiration, and innovation. Your contributions are invaluable and greatly appreciated.
5053

51-
## Release Notes
54+
For more details and to begin exploring React Labyrinth, visit its official webpage and [LinkedIn page](https://www.linkedin.com/company/react-labyrinth). These resources offer comprehensive insights into the project, its functionality, key features, and how to get started.
5255

53-
Users appreciate release notes as you update your extension.
56+
Furthermore, you can access the project's source code, documentation, and issue tracker on GitHub. Feel free to fork the project, implement changes, and submit pull requests to enhance its development.
5457

55-
### 1.0.0
58+
If you find React Labyrinth beneficial, consider starring it on GitHub to boost its visibility and attract more contributors and users. Your support is crucial in advancing the project's growth and impact.
5659

57-
Initial release of ...
60+
[Report Bug / Request Feature](https://github.com/oslabs-beta/React-Labyrinth/issues)
5861

5962
## Meet Our Team
6063

61-
* Ashley Luu
62-
* Christina Raether
63-
* Francisco Lopez
64-
* Johnny Arroyo
65-
* Louis Kuczykowski
64+
* Ashley Luu[Github](https://github.com/ash-t-luu) & [LinkedIn](https://www.linkedin.com/in/ashley-t-luu/)
65+
* Christina Raether[Github](https://github.com/ChristinaRaether) & [LinkedIn](https://www.linkedin.com/in/christinaraether/)
66+
* Francisco Lopez[Github](https://github.com/Ponch49) & [LinkedIn](https://www.linkedin.com/in/francisco-g-lopez/)
67+
* Johnny Arroyo[Github](https://github.com/Johnny-Arroyo) & [LinkedIn](https://www.linkedin.com/in/johnny-arroyo/)
68+
* Louis Kuczykowski[Github](https://github.com/Louka3) & [LinkedIn](https://www.linkedin.com/in/louiskuczykowski/)
6669

6770

6871
## License
6972

70-
React Labrynth is developed under the [MIT license](https://en.wikipedia.org/wiki/MIT_License)
73+
React Labyrinth is developed under the [MIT license](https://en.wikipedia.org/wiki/MIT_License)

babel.config.js

-6
This file was deleted.

jest.config.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,12 @@ module.exports = {
1313
vscode: path.join(__dirname, 'src', 'test', 'vscode.js')
1414
},
1515
testMatch: ['**/test/**/*.js', '**/?(*.)+(spec|test).js'],
16-
modulePathIgnorePatterns: ["node_modules"]
16+
modulePathIgnorePatterns: ["node_modules"],
17+
collectCoverage: true,
18+
coverageReporters: [ 'lcov', 'text', 'html'],
19+
collectCoverageFrom: ['./src/**'],
20+
coverageDirectory: 'coverage',
21+
transform: {
22+
"^.+\\.[jt]sx?$": "babel-jest"
23+
},
1724
};

0 commit comments

Comments
 (0)