oslabs-beta / nexus

NextJS VScode extension to visualize component tree.

Nexus

A component tree extension for NextJS

Report Bugs · Request Features

Table of Contents

1. About The Project
   • Built With
2. Installation
3. Getting Started
   • Prerequisites
4. Usage
5. Roadmap
6. Steps to Contribute
   • Making Changes
7. License
8. The Nexus Team
9. Contact

About The Project

Nexus is a VSCode Extension created for NextJS developers! As codebases scale in size and complexity, developers may feel overwhelmed as they keep track of tens of components and hundreds of props elements per file. Nexus aims to help developers overcome unnecessary mental strain through 3 main methods:

1. Displaying file-specific component hierarchy in your VSCode sidebar
2. Including component-specific state and props objects for parent and child components
3. Differentiating between server-side rendered and static-site generated components

We at Team Nexus hope that you enjoy our extension, taking advantage of a time-tested component tree model that integrates the unique features of NextJS!

(back to top)

Built With

• NextJS
• React
• VSCode Extension API
• Typescript
• Webpack
• Acorn-Parser

Installation

1. Install Nexus

2. A node tree icon should appear on your sidebar. You've now installed Nexus! Woot Woot! Now on to the "Getting Started" section below.

Note: If contributing, see the "Installation for Contributors" section below!

Getting Started

Congrats on installing Nexus! Now let's get it started.

Prerequisites

Nexus supports OSX, Windows, and WSL

Usage

1. Click the node tree icon on your sidebar. An "Input File Here" button should appear on your side panel!

2. Click the button and your file explorer window will open. Select a file and press "Ok".

3. Your side panel should now render a component tree that displays SSG or SSR status! Clicking on components will render child components if they exist and hovering over components will display their props objects. Enjoy!

Roadmap

• Creating a webview to look deeper into structure of individual components
• Making the parser more dynamic and flexible
• Handling Link Components
• Error checking in the frontend to ensure that uploaded files are either NextJS or React
• Add status bar item for Nexus
• Store component tree memory in VSCode

See the open issues for a full list of proposed features (and known issues).

Steps to Contribute

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork & Clone Nexus
2. Create your Feature Branch (git checkout -b <github_username>/<YourAmazingFeature>)
3. Make your Changes (See Making Changes below)
4. Commit your Changes (git commit -m '<Your Commit Message>')
5. Push to the Branch (git push origin <github_username>/<YourAmazingFeature>)
6. Open a Pull Request

Making Changes

1. Make your changes!
2. Open /nexus/src/extension.ts and save any changes you made
3. Re-compile and re-build your extension using the command line: npm run compile & npm run build
4. Press F5. A new VSCode window should open. This is your debugging environment!
5. Repeat step 3 and refresh your debugging environment to test further changes

License

Distributed under the MIT License. See LICENSE for more information.

The Nexus Team

• Mike Hong LinkedIn | Github
• Brian Chiang LinkedIn | Github
• David Lee LinkedIn | Github
• Nico Flores LinkedIn | Github
• Alex Hersler LinkedIn | Github

Contact Us

Email: [email protected]

Twitter: @teamnexus_js

Website: https://nexus-js.com/

nexus's Issues

Does this extension work with Typescript

Working with a NextJS/Typescript codebase and I uploaded my pages/index.tsx file but no tree is generated. Is it possible to use with TS?