{"id":13515577,"url":"https://github.com/oslabs-beta/sapling","last_synced_at":"2025-04-05T18:07:01.504Z","repository":{"id":38274839,"uuid":"406167900","full_name":"oslabs-beta/sapling","owner":"oslabs-beta","description":"Sapling - A convenient way to traverse your React app in VS Code","archived":false,"fork":false,"pushed_at":"2022-03-30T19:25:34.000Z","size":74596,"stargazers_count":526,"open_issues_count":20,"forks_count":62,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T17:06:58.899Z","etag":null,"topics":["devtools","react","vscode-extension"],"latest_commit_sha":null,"homepage":"https://sapling-extension.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","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-14T00:14:01.000Z","updated_at":"2025-02-15T16:14:08.000Z","dependencies_parsed_at":"2022-07-12T17:22:24.889Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/sapling","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%2Fsapling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fsapling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fsapling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Fsapling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/sapling/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378141,"owners_count":20929296,"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":["devtools","react","vscode-extension"],"created_at":"2024-08-01T05:01:13.067Z","updated_at":"2025-04-05T18:07:01.470Z","avatar_url":"https://github.com/oslabs-beta.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003c!-- SAPLING README --\u003e\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oslabs-beta/sapling\"\u003e\n    \u003cimg src=\"sapling/media/sapling-logo.png\" alt=\"Logo\" height=\"120\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eSapling\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A convenient way to traverse your React application.\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/sapling\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/sapling/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/oslabs-beta/sapling/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n    \u003c!-- BADGES --\u003e\n  \u003cp align=\"center\"\u003e\n    \u003c!-- VSCode Version --\u003e\n    \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling\"\u003e\u003cimg alt=\"Visual Studio Marketplace Version\" src=\"https://img.shields.io/visual-studio-marketplace/v/team-sapling.sapling?label=Version\"\u003e\u003c/a\u003e\n    \u003c!-- VSCode Installs --\u003e\n    \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling\"\u003e\u003cimg alt=\"Visual Studio Marketplace Installs\" src=\"https://img.shields.io/visual-studio-marketplace/i/team-sapling.sapling?label=Installs\u0026logo=visualstudiocode\"\u003e\u003c/a\u003e\n    \u003c!-- STARS --\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/sapling/stargazers\"\u003e\u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/oslabs-beta/sapling?label=Stars\u0026logo=github\"\u003e\u003c/a\u003e\n    \u003c!-- FORKS --\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/sapling/network/members\"\u003e\u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/oslabs-beta/sapling?label=Forks\u0026logo=github\"\u003e\u003c/a\u003e\n    \u003c!-- GITHUB RELEASE VERSION --\u003e\n    \u003c!-- \u003ca href=\"https://github.com/oslabs-beta/sapling/releases\"\u003e\u003cimg alt=\"GitHub release (latest by date including pre-releases)\" src=\"https://img.shields.io/github/v/release/oslabs-beta/sapling?include_prereleases\"\u003e\u003c/a\u003e --\u003e\n    \u003cbr\u003e\n    \u003c!-- BUILD STATUS --\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/sapling/actions/workflows/master.yml\"\u003e\u003cimg alt=\"master CI/CD workflow status\" src=\"https://github.com/oslabs-beta/sapling/actions/workflows/master.yml/badge.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/sapling/actions/workflows/dev.yml\"\u003e\u003cimg alt=\"dev CI workflow status\" src=\"https://github.com/oslabs-beta/sapling/actions/workflows/dev.yml/badge.svg\"\u003e\u003c/a\u003e\n    \u003cimg alt=\"Vercel Web deployments\" src=\"https://img.shields.io/github/deployments/oslabs-beta/sapling/production?label=build\u0026logo=vercel\"\u003e\n    \u003c!-- LICENSE --\u003e\n    \u003c!-- \u003ca href=\"https://github.com/oslabs-beta/sapling/blob/master/LICENSE\"\u003e\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/oslabs-beta/sapling\"\u003e\u003c/a\u003e --\u003e\n    \u003c!-- CONTRIBUTIONS --\u003e\n    \u003c!-- \u003ca href=\"https://github.com/oslabs-beta/sapling/blob/master/README.md\"\u003e\u003cimg alt=\"Contributions\" src=\"https://img.shields.io/badge/contributors-welcome-brightgreen\"\u003e\u003c/a\u003e --\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails open=\"open\"\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\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003ca href=\"#contributor-usage\"\u003eContributor Usage\u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#extension-settings\"\u003eExtension Settings\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#creators\"\u003eCreators\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#acknowledgements\"\u003eAcknowledgements\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003chr\u003e\n\n## About The Project\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"900\" src=\"sapling/media/quizwall_demo.gif\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\nSapling is a VS Code extension built with React developers in mind. As your codebase grows, your native file structure becomes less and less intuitive. Wouldn't it be nice to have a file structure that represents the actual relationships between the components and containers in your application? Wouldn't you like a quick reference to your available props, and an indication of routes and conditional rendering?\n\nWith Sapling, you don't have to guess at the parent component of your current file. Sapling is an interactive hierarchical dependency tree that lives directly within your VS Code IDE, as accessible as the native file system. You can build your tree by selecting any component file as the root and get information about the available props at any level. It also provides visual indication of Javascript syntax or import errors in your files, and shows you which components are connected to your Redux store.\n\n\n### Built With\n\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/react-brands.svg\"\u003e](https://reactjs.org/)  [React](https://reactjs.org/)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/vscode.svg\"\u003e](https://code.visualstudio.com/api)  [VSCode Extension API](https://code.visualstudio.com/api)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/mochajs-icon.svg\"\u003e](https://mochajs.org/) [Mocha](https://mochajs.org/)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/chai_icon.svg\"\u003e](https://www.chaijs.com/) [Chai](https://www.chaijs.com/)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/babel-logo-minimal.svg\"\u003e](https://babeljs.io/docs/en/babel-parser) [Babel Parser](https://babeljs.io/docs/en/babel-parser)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/webpack.svg\"\u003e](https://webpack.js.org/) [Webpack](https://webpack.js.org/)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/github-actions.svg\"\u003e](https://github.com/features/actions) [GitHub Actions](https://github.com/features/actions)\n\n## Installation\n\nInstalling from VS Code Extension Marketplace:\n\n1. If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux (details).\n\n2. Install the Sapling extension for Visual Studio Code. Search for 'sapling' in the VS Code extensions tab, or click [here](https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling).\n\n3. Once complete, you'll see Sapling appear in your sidebar. You can now begin using Sapling! Check out the Getting Started below for information on how to get started.\n\nTo install sapling for development, please see the contributing section below.\n\n## Getting Started\n\n1. After installing VSCode Extension, you will see the extension on your sidebar. Click the \"Choose a File\" button.\n\n2. Your file explorer window will launch. Select an entrypoint, a file where the parent component for the rest of your application is rendered.\n\n3. Your sidebar will now display a component tree.\n\n## Usage\n\nAfter installing, click the Sapling tree icon in your extension sidebar (image of icon here). From there, you can either click \"Choose a file\" to select your root component, or build your tree directly from a file open in your editor with the \"Build Tree\" button on the right hand side of your status bar. Click the + and - buttons to expand and collapse subsets of your tree, and hover over the information icon (image of icon here) to get a list of props available to that component. You can also press the view file icon (image of icon here) to open the file where the component is defined in your editor window. Below is a quick-reference legend for icon and text format meanings. If you prefer not to view React Router or other third-party components imported to your app, you can disable either of these in the VS Code Extension Settings.\n\nIcon Legend in Sapling Tree View:\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/circle-info-solid.svg\"\u003e]() available props (hover)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/circle-arrow-right-solid.svg\"\u003e]() open file (click)\n* [\u003cimg style=\"height: 1em;\" src=\"sapling/media/store-solid.svg\" \u003e]() Redux store connection\n* \u003cspan\u003eNavbar\u003c/span\u003e: error in file (matches the error color of your theme)\n* \u003cb\u003eNavbar\u003c/b\u003e: currently open file\n\nSapling can currently display React apps made with TSX/JSX and ES6 import syntax.\n\nSapling will detect React components invoked using JSX tag syntax and React-Router component syntax, where React is imported in a file:\n\n```JSX\n    // Navbar will be detected as a child of the current file\n    \u003cNavbar /\u003e\n\n    // As above\n    \u003cNavbar\u003e\u003c/Navbar\u003e\n\n    // Route and Navbar will be detected as child components of the current file\n    \u003cRoute component={Navbar} /\u003e\n\n    // Route and App will be detected as child components of the current file\n    \u003cRoute children={App} /\u003e\n```\n\nSapling will detect the names of inline props for JSX components it identifies:\n\n```JSX\n    // props 'userId' and 'userName' will be listed for Navbar in Sapling\n    \u003cNavbar userId={...} userName={...} /\u003e\n```\n\nSapling can identify components connected to the Redux store, when 'connect' is imported from 'react-redux', and the component is the export default of the file:\n\n```JSX\n    // App.jsx\n    import React from 'react';\n    import { connect } from 'react-redux';\n\n    const mapStateToProps = ...\n    const mapDispatchToProps = ...\n\n    const App = (props) =\u003e {\n      return \u003ch1\u003eThis is the App\u003c/h1\u003e\n    }\n\n    // Sapling will detect App as connected to the Redux store\n    export default connect(mapStateToProps, mapDispatchToProps)(App);\n```\n\n### Note\nSapling prioritizes file dependencies over component dependencies. Consider the following JSX contained in the file App.jsx:\n\n```JSX\n    //App.jsx\n    import React from 'react';\n    import Home from './Home';\n    import Navbar from './Navbar';\n\n    class App extends Component {\n\n      render (\n        return {\n          \u003cHome\u003e\n            \u003cNavbar /\u003e\n          \u003c/Home\u003e\n        })\n    }\n```\n\nSapling will display Home and Navbar as siblings, both children of App:\n\n\u003cbr /\u003e\n  \u003cimg src=\"sapling/media/readme-example.png\"\u003e\n\n### Contributor Usage\n\n1. Download/clone the project from [Github](https://github.com/oslabs-beta/sapling/)\n2. Open the 'sapling' folder in your VS Code IDE. The outer 'sapling' folder must be the root folder in the workspace.\n2. Open sapling/src/extension.ts\n3. To view the webview, in your terminal navigate into the inner 'sapling' folder and run the following command: `npm run watch`\n4. Press F5. A new VSCode window will open with the Sapling Extension.\n5. Click the Sapling icon on the left to see the Sapling sidebar.\n\nNote: `Ctrl+R` (or `Cmd+R` on Mac) will refresh the extension development host\n\n## Extension Settings\n\nThis extension contributes the following settings:\n\n* `sapling.view.reactRouter`: enable/disable React Router component nodes\n* `sapling.view.thirdParty`: enable/disable all third party component nodes\n\n## Contributing\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\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\n## License\n\nDistributed under the MIT License. See [`LICENSE`](https://github.com/oslabs-beta/sapling/blob/master/LICENSE) for more information.\n\n## Creators\n\n* [Charles Gutwirth](https://github.com/charlesgutwirth)\n* [Jordan Hisel](https://github.com/jo-cella)\n* [Lindsay Baird](https://github.com/labaird)\n* [Paul Coster](https://github.com/PLCoster)\n\n## Contact\n\n[\u003cimg style=\"height: 1em; width: 1em;\" src=\"sapling/media/twitter-logo.svg\"\u003e]()  Twitter: [@TeamSapling](https://twitter.com/teamsapling) | Email: saplingextension@gmail.com\n\n[\u003cimg style=\"height: 1em; width: 1em;\" src=\"sapling/media/github-icon.svg\"\u003e]()  GitHub: [https://github.com/oslabs-beta/sapling/](https://github.com/oslabs-beta/sapling/)\n\n## Acknowledgements\n* Parsing Strategy inspired by [React Component Hierarchy](https://www.npmjs.com/package/react-component-hierarchy)\n* Interactive tree view styling adapted from [Pure CSS Tree Menu](https://codepen.io/bisserof/pen/fdtBm)\n* Icons from [Font Awesome](https://fontawesome.com)\n* Tooltips with [Tippy](https://www.npmjs.com/package/@tippy.js/react)\n* [Best README Template](https://github.com/othneildrew/Best-README-Template)\n* Sapling Logo from [Freepik](https://www.freepik.com/vectors/tree)\n* Readme badges from [shields.io](https://shields.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fsapling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Fsapling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fsapling/lists"}