{"id":26267236,"url":"https://github.com/oslabs-beta/nexus","last_synced_at":"2025-04-30T19:08:23.944Z","repository":{"id":43270743,"uuid":"459408804","full_name":"oslabs-beta/Nexus","owner":"oslabs-beta","description":"NextJS VScode extension to visualize component tree.","archived":false,"fork":false,"pushed_at":"2022-09-28T00:38:02.000Z","size":7975,"stargazers_count":69,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-30T19:06:50.738Z","etag":null,"topics":["component-architecture","developer-tools","nextjs","reactjs","vercel","vscode-extension","webpack","webview"],"latest_commit_sha":null,"homepage":"https://nexus-js.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-15T03:09:58.000Z","updated_at":"2024-12-25T02:58:41.000Z","dependencies_parsed_at":"2023-01-18T14:31:16.983Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/Nexus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FNexus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FNexus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FNexus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FNexus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/Nexus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251767193,"owners_count":21640468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-architecture","developer-tools","nextjs","reactjs","vercel","vscode-extension","webpack","webview"],"created_at":"2025-03-14T04:16:10.755Z","updated_at":"2025-04-30T19:08:23.927Z","avatar_url":"https://github.com/oslabs-beta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n\u003ca href=\"https://github.com/github_username/repo_name\"\u003e\n\u003c/a\u003e\n--\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oslabs-beta/Nexus\"\u003e\n  \t\u003cimg src=\"nexus/media/logo.png\" alt=\"NexusLogo\" width=\"100%\"\u003e\n  \u003c/a\u003e\n\u003c!-- HEADING AREA --\u003e\n\u003ch1 align=\"center\"\u003eNexus\u003c/h1\u003e\n\n  \u003cp align=\"center\"\u003e\n    A component tree extension for NextJS\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/Nexus/issues\"\u003eReport Bugs\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/oslabs-beta/Nexus/issues\"\u003eRequest Features\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#contributing\"\u003eSteps to Contribute\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href =\"#making-changes\"\u003eMaking Changes\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#NexusTeam\"\u003eThe Nexus Team\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nNexus 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:\n\n1. Displaying file-specific component hierarchy in your VSCode sidebar\n2. Including component-specific state and props objects for parent and child components\n3. Differentiating between server-side rendered and static-site generated components\n\nWe 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!  \n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- BUILT WITH --\u003e\n### Built With\n\u003cul\u003e\n  \u003cli\u003e\n     \u003cimg height=\"14\" src=\"nexus/media/next-js.png\"\u003e\u003ca href=\"Next.js](https://nextjs.org/\"\u003e NextJS\u003c/a\u003e \n  \u003c/li\u003e\n  \u003cli\u003e\n     \u003cimg height=\"14\" src=\"nexus/media/react-brands.png\"\u003e\u003ca href=\"https://reactjs.org/\"\u003e React\u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n     \u003cimg height=\"14\" src=\"nexus/media/vscode.png\"\u003e\u003ca href=\"https://code.visualstudio.com/api\"\u003e VSCode Extension API \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n     \u003cimg height=\"14\" src=\"nexus/media/typescript.png\"\u003e\u003ca href=\"https://www.typescriptlang.org/\"\u003e Typescript \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n     \u003cimg height=\"14\" src=\"nexus/media/webpack.png\"\u003e\u003ca href=\"https://webpack.js.org/\"\u003e Webpack \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003ca href=\"https://www.npmjs.com/package/acorn\"\u003e Acorn-Parser \u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\n\u003c!-- INSTALLATION --\u003e\n## Installation\n\n1. Install Nexus\n\n2. A node tree icon should appear on your sidebar. You've now installed Nexus! Woot Woot! Now on to the \"Getting Started\" section below.\n\nNote: If contributing, see the \"Installation for Contributors\" section below! \n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\nCongrats on installing Nexus! Now let's get it started.\n\n\n### Prerequisites\n\nNexus supports OSX, Windows, and WSL\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Usage\n\n1. Click the node tree icon on your sidebar. An \"Input File Here\" button should appear on your side panel!\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"nexus/media/gif1.gif\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n2. Click the button and your file explorer window will open. Select a file and press \"Ok\".\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"nexus/media/gif2.gif\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n3. 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!\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"nexus/media/gif3.gif\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\n- [ ] Creating a webview to look deeper into structure of individual components\n- [ ] Making the parser more dynamic and flexible\n- [ ] Handling Link Components\n- [ ] Error checking in the frontend to ensure that uploaded files are either NextJS or React\n- [ ] Add status bar item for Nexus\n- [ ] Store component tree memory in VSCode\n\nSee the [open issues](https://github.com/oslabs-beta/Nexus/issues) for a full list of proposed features (and known issues).\n\n\n\n\u003c!-- STEPS TO CONTRIBUTE --\u003e\n## Steps to Contribute\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf 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\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork \u0026 Clone Nexus\n2. Create your Feature Branch (`git checkout -b \u003cgithub_username\u003e/\u003cYourAmazingFeature\u003e`)\n3. Make your Changes (See **Making Changes** below)\n4. Commit your Changes (`git commit -m '\u003cYour Commit Message\u003e'`)\n5. Push to the Branch (`git push origin \u003cgithub_username\u003e/\u003cYourAmazingFeature\u003e`)\n6. Open a Pull Request\n\n\n\u003c!-- MAKING CHANGES --\u003e\n### Making Changes\n\n1. Make your changes!\n2. Open /nexus/src/extension.ts and save any changes you made\n3. Re-compile and re-build your extension using the command line: `npm run compile` \u0026 `npm run build`\n4. Press F5. A new VSCode window should open. This is your debugging environment!\n5. Repeat step 3 and refresh your debugging environment to test further changes\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\n\n\u003c!-- THE NEXUS TEAM --\u003e\n## The Nexus Team\n\n* Mike Hong [LinkedIn](https://www.linkedin.com/in/mykongee/) | [Github](https://github.com/mykongee)\n* Brian Chiang [LinkedIn](https://www.linkedin.com/in/brian-chiang-849a181a7/) | [Github](https://github.com/BChiang4)\n* David Lee [LinkedIn](https://www.linkedin.com/in/david-lee-39541411a/) | [Github](https://github.com/dplee123)\n* Nico Flores [LinkedIn](https://www.linkedin.com/in/nicolasaflores/) | [Github](https://github.com/nicoflrs)\n* Alex Hersler [LinkedIn](https://www.linkedin.com/in/alex-hersler/) | [Github](https://github.com/FoxEight)\n\n\u003c!-- CONTACT US --\u003e\n## Contact Us\nEmail: nexusjsadm@gmail.com\n\nTwitter: [@teamnexus_js](https://twitter.com/teamnexus_js) \n\nWebsite: [https://nexus-js.com/](https://nexus-js.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fnexus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Fnexus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fnexus/lists"}