{"id":26267585,"url":"https://github.com/oslabs-beta/react-labyrinth","last_synced_at":"2025-07-22T14:37:38.588Z","repository":{"id":207480904,"uuid":"718417855","full_name":"oslabs-beta/React-Labyrinth","owner":"oslabs-beta","description":"React Labyrinth, a VSCode Extension, generates a hierarchical tree of React components and identifies the component type with a single file upload","archived":false,"fork":false,"pushed_at":"2024-03-02T22:22:24.000Z","size":15116,"stargazers_count":47,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T19:08:40.598Z","etag":null,"topics":["client-components","developer-tool","hierarchy","nextjs","react","react-components","react-server-components","server-components","tree-structure","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"open-source-labs","custom":["https://donorbox.org/donations-to-oslabs-inc"]}},"created_at":"2023-11-14T03:02:26.000Z","updated_at":"2025-03-26T18:42:41.000Z","dependencies_parsed_at":"2023-12-08T04:25:39.830Z","dependency_job_id":"675690d9-a783-4d1c-b6e5-a1a0fb422eed","html_url":"https://github.com/oslabs-beta/React-Labyrinth","commit_stats":null,"previous_names":["oslabs-beta/react-labyrinth"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/oslabs-beta/React-Labyrinth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReact-Labyrinth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReact-Labyrinth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReact-Labyrinth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReact-Labyrinth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/React-Labyrinth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FReact-Labyrinth/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266511182,"owners_count":23940762,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["client-components","developer-tool","hierarchy","nextjs","react","react-components","react-server-components","server-components","tree-structure","vscode-extension"],"created_at":"2025-03-14T04:17:25.138Z","updated_at":"2025-07-22T14:37:38.563Z","avatar_url":"https://github.com/oslabs-beta.png","language":"TypeScript","funding_links":["https://github.com/sponsors/open-source-labs","https://donorbox.org/donations-to-oslabs-inc"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003cb\u003eReact Labyrinth\u003c/b\u003e\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"400\" height=\"400\" src=\"https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/ca9ab4e5-cb28-4dc3-83fa-9ef47e4fdbeb\" alt=\"react labyrinth logo\"\u003e\n\u003c/p\u003e\n\n  \u003ch3 align=\"center\"\u003e\n    A VS Code Extension that generates a hierarchical tree of React components\u003cbr/\u003e\n    and identifies the component type with a single file upload.\n    \u003cbr /\u003e\n  \u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e      \n    \u003cb\u003e\u003cu\u003e\u003cspan\u003e\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=react-labyrinth.react-labyrinth\" target=\"_blank\"\u003e\n    Install React Labyrinth\u003c/a\u003e\n    \u003c/span\u003e\u003c/u\u003e\u003c/b\u003e\n    \u003cp\u003e\u003cimg src=\"https://img.shields.io/visual-studio-marketplace/v/react-labyrinth.react-labyrinth\"\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## __Table of Contents__\n1. [Overview](#overview)\n2. [Installation](#installation)\n3. [Getting Started](#getting-started)\n4. [Tech Stack](#tech-stack)\n5. [Publications](#publications)\n6. [Contributing](#contributing)\n7. [Meet Our Team](#meet-our-team)\n8. [License](#license)\n\n## Overview\nReact 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.\n\nTo 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.\n\n## Installation\n\nReact 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/Cmd+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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"481\" alt=\"screenshot of react labyrinth in VS Code extension store\" src=\"https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/07d5cd9b-5308-4233-bf4f-f044e40e73dd\"\u003e\n\u003c/p\u003e\n\n## Getting Started\n\nOnce 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.\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"250\" height=\"450\" src=\"https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/d72b483b-7785-4a5d-9836-9c79ff46e3a3\" alt=\"how to activate react labyrinth extension\"\u003e\n\u003c/p\u003e\n\nUpon 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.\n\nClient Components will be distinguished by an orange background, while Server Components will feature a blue background for easy identification.\n\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/d27a3c97-3dde-457a-9ad3-9aad0f7cb469\" alt=\"gif of using react labyrinth extension\" \u003e\n\u003c/p\u003e\n\n## Tech Stack\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://skillicons.dev\"\u003e\n    \u003cimg src=\"https://skillicons.dev/icons?i=js,ts,html,css,tailwind,babel,react,d3,jest,nodejs,webpack,git,azure,vscode)](https://skillicons.dev\" alt=\"list of tech stack icons\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Publications\n\nCheck out our Medium articles: [Part 1](https://medium.com/@franciscoglopez49/react-labyrinth-a-helping-hand-with-react-server-components-84406d2ebf2c) and [Part 2](https://medium.com/@ashleyluu87/data-flow-from-vs-code-extension-webview-panel-react-components-2f94b881467e) for more information about React Labyrinth!\n\n\n## Contributing\n\nContributions are the cornerstone of the open-source community, fostering an environment of learning, inspiration, and innovation. Your contributions are invaluable and greatly appreciated.\n\nFor more details and to begin exploring React Labyrinth, visit its [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.\n\nFurthermore, 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.\n\nIf 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.\n\n[Request Feature / Report Bug](https://github.com/oslabs-beta/React-Labyrinth/issues)\n\n## Meet Our Team\n\n* Ashley Luu — [Github](https://github.com/ash-t-luu) \u0026 [LinkedIn](https://www.linkedin.com/in/ashley-t-luu/)\n* Christina Raether — [Github](https://github.com/ChristinaRaether) \u0026 [LinkedIn](https://www.linkedin.com/in/christinaraether/)\n* Francisco Lopez — [Github](https://github.com/Ponch49) \u0026 [LinkedIn](https://www.linkedin.com/in/francisco-g-lopez/)\n* Johnny Arroyo — [Github](https://github.com/Johnny-Arroyo) \u0026 [LinkedIn](https://www.linkedin.com/in/johnny-arroyo/)\n* Louis Kuczykowski — [Github](https://github.com/Louka3) \u0026 [LinkedIn](https://www.linkedin.com/in/louiskuczykowski/)\n\n\n## License\n\nReact Labyrinth is developed under the [MIT license](https://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Freact-labyrinth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Freact-labyrinth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Freact-labyrinth/lists"}