NextJS VScode extension to visualize component tree.

Overview

NexusLogo

Nexus

A component tree extension for NextJS

Report Bugs · Request Features

Table of Contents
  1. About The Project
  2. Installation
  3. Getting Started
  4. Usage
  5. Roadmap
  6. Steps to Contribute
  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

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".


  1. 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

Contact Us

Email: [email protected]

Twitter: @teamnexus_js

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

Comments
🔎 (Draft!) VSCode extension to show the search results in a tree view

vscode-search-tree ?? (Draft!) VSCode extension to show the search results in a tree view The work on this extension is on-pause for now since VSCode

Oleksii Trekhleb 16 Sep 7, 2022
Visualize the Directed Acyclic Graph that Git creates to connect Commit, Tree and Blob objects internally.

Git Graph Visualize the Directed Acyclic Graph that Git creates to connect Commit, Tree and Blob objects. Hosted at HarshKapadia2.github.io/git-graph.

Harsh Kapadia 15 Aug 21, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
This package is an open source extension for MikroORM, which enables Nested Set Tree for your needs

MikroORM nested set This package is an open source extension for MikroORM, which enables Nested Set Tree for your needs Disclaimer For now, this packa

Kamil Fronczak 5 Dec 15, 2022
VSCode extension that creates overlay for your Broadcasting Software of choice.

BSOverlay VSCode extension that creates an overlay for your Broadcasting Software of choice. Documentation Please refer to the Wiki Section. Installin

chocoearly44 4 Sep 30, 2022
A vscode extension to quickly print variable, variable type, tensor shape etc by using shortcuts

Quick Python Print This repo is inspired by "Python Quick Print". "Python Quick Print" can quickly print out variables on the console by using shortcu

weida wang 5 Oct 28, 2022
VSCode extension for managing text selection.

Selection Manager This Visual Studio Code extension will allow you to manage selected text. The aim of this extension is to increase productivity by u

Sanel Hadžini 2 Apr 12, 2022
VSCode extension for the rickroll-lang programming language (incomplete)

Rickroll-Lang VSCode Extension The Rick Roll programming language is a rickroll based, process oriented, dynamic, strong, esoteric programming languag

Siddhesh Zantye 6 Oct 10, 2022
JSDoc generator for JavaScript, TypeScript using AI. (VSCode extension)

JSDoc generator for JavaScript, TypeScript using AI. (VSCode extension)

Amir Reza Dalir 3 Aug 18, 2022
💻 VSCode Extension for AdonisJS

?? Official AdonisJS extension for VSCode Features Use all Adonis Assembler commands ( make:* ) Migrate and seed your database ( db:*, migration:* ) V

Julien Ripouteau 50 Nov 9, 2022
VSCode extension with helpful code snippets for SolidJS.

Solid Snippets VSCode extension with helpful code snippets for SolidJS. GET THE EXTENSION Snippets Trigger Content Languages JSX sinput→ Input two-way

SolidJS Community 11 Dec 8, 2022
Optimized dracula theme vscode extension for flutter, web, electron and golang development.

Optimized Dracula Theme A color theme inspired by dracula color theme. This color theme is not based on dracula color theme. The color styles are simi

wuchuran 1 Jul 11, 2022
a vscode extension for http response data auto transform ts type.

Api2ts 这是一个自动将 http 的响应数据转化为 ts 的类型,使用 json-to-ts 做的。 Features 框选配置项后,使用快捷键 alt+Q : 请求参数配置文件 在根目录下创建 Api2ts.config.json 文件,配置项如下: { "baseURL": "http

phy-lei 6 Jun 30, 2022
An enhanced VSCode extension for the Move programming language.

Move Analyzer Plus Provides language support for the Move programming language. Install on the VSCode Extension Marketplace: Move Analyzer Plus on the

The Moving Company 10 Aug 12, 2022
Simple and intuitive API Client made into a VSCode extension 😊

REST API Client Simple and intuitive API Client made into a VSCode extension. Visual Studio Marketplace • Repository • Releases Visual Studio Code ext

REST API Client 19 Dec 23, 2022
Lightweight VSCode extension for Ruby.

vscode-ruby-light Lightweight VSCode extension for Ruby. Install Install via Visual Studio Marketplace: Ruby Light - Visual Studio Marketplace For Dia

Ryo Nakamura 23 Jan 2, 2023
🧪 A Japa extension for VSCode

?? Japa extension for VSCode Features Run tests without typing anything. Either with a shortcut, or via Code Lenses Support multiple workspaces Suppor

Julien Ripouteau 10 Sep 27, 2022
A VSCode extension to execute terminal command in multiple directories.

SiteFlex ?? Introduction The emergence of microservices and microfrontends posed a real threat on lazy programmers. Consider this scenario, you have m

CuteTN 3 Sep 6, 2022
VSCode extension to paste text as a string array

VSCode extension to paste text as a string array. This is useful when copying command line into launch.json args

Shady Boukhary 4 Dec 28, 2022