DevDux is a VS Code extention built for Redux Toolkit users. As the codebase grows, it gets difficult to track and conceptualize what files are rendering which components, what props are passed, and the relationship between it all. Wouldn't it be so easy if we could just see everything displayed in a single spot?
The solution is DevDux. DevDux eliminates the need of visiting files just to figure out how everything relates to one another. It provides a visual indication of everything a file contains.
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
Installation from VS Code Extension Marketplace:
-
If needed, install Visual Studio Code for macOS (Sierra+). Currently 'DevDux' only supports macOS.
-
Install the DevDux extension for Visual Studio Code. Search for 'DevDux' in the VS Code extensions tab, or click here.
-
Once installed the DevDux "Open Root File" command should be accesible via the command pallete. See getting started for more information.
To install devdux for development, please see the contributing section below.
-
After installing DevDux, open the VS Code command pallete (⌘⇧P). Type in the command "DevDux: Open Root File".
-
Your file explorer window will launch. Select an entrypoint. This is typically a file where the parent component for the rest of your application is rendered (App.jsx).
-
Go to the VS Code Explorer tab (⌘⇧E) and a DevDux Sidebar will be presented below your files.
Currently DevDux supports a limited amount of React-Redux file structures, see the limitations sections for more details. DevDux the name of the folder a file resides in and the file name. Clicking on a file name opens the collapsable tree view to reveal the following application information :
- filePath
- Complete file path for the file you have selected
- imports
- Displays a list of named items imported in the selected file
- Selecting a name opens the file path for the selected item
- selected
- Displays a list of state variables pulled from the store
- Parser searches for useSelector or useAppSelector
- The list is based on what the store variables are labeled as in the file
- Selecting a variable label displays the reducer that the state variable is defined in and the state label
- dispatched
- Displays a list of dispatched functions pulled from the store via parsing for occurrences of useDispatch or useAppDispatch
- rendered components
- Displays a list of components that are rendered in this component file
- Selecting a componenet displays a list of the props that are passed to the rendered component
- Selecting a prop displays the value that is passed in as the prop
DevDux in its current version is limited in scope and opionionated. This section serves to describe some of DevDux limitations and best practices to ensure DevDux works properly. Currently MacOS is supported for use of DevDux. Currently the following React-Redux file structures are supported:
- Functional components using ES6 arrow function definition that is exported seperately.
- Functional components defined using traditonal function declaration and exported in place.
- Functional component defined using a function definition inside of a React.memo top level API call that is exported in place.
Our team welcomes, appreciates, and encourages contributions. Contributions make the the open source community thrive. Building new features in DevDux will allow developers to learn the exsisting codebase, create new features, and inspire others.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/newFeature) - Commit your Changes (
git commit -m 'Add some newFeature') - Push to the Branch (
git push origin feature/newFeature) - Open a Pull Request
Report bugs here. When possible provide a screen shot of the item that is not being displayed. Report the following:
- Type of React component (Class Based, Functional Definition, Arrow function definition)
- Location where component was exported. In place or a seperate location.
- Information relavant to the item that is not being displayed. What was missing/not displayed? Where is the item located that is not being displayed with relation to the rest of the file.
This project is licensed under the Mozilla Public License. For more information see the LICENSE file in the repository or visit Mozilla's offical page here.
LinkedIn: @devdux-extension | Email: devduxExtension@gmail.com
