About ReSvelte
As developers create Svelte applications, the component tree increasingly scales in size. Components are a delicate part of front end frameworks. Efficiently placing and correctly executing components are of high importance.
Having more components re-rendering, will affect the general performance of the application.
ReSvelte solves this issue. It is a performance developer tool that generates a Svelte component tree visualizer and a component rendering metrics display of your Svelte application within a Visual Studio Code extension.
Getting Started with Installation and Usage
If not already installed, install Visual Studio Code for your respective operating system. Download Visual Studio Code
Search for ReSvelte in the Visual Studio Code Extension MarketPlace and install.
Download ReSvelte Here!
A ReSvelte icon should appear on your sidebar. You have successfully installed ReSvelte!
Upload your Svelte folder. If there is an error, you will see an error message.
- The component tree visualizer should now be populated in the sidebar with the component name. Toggle through the down arrows to expand the tree.
- Underneath the tree, the app performance shows the total number of components rendered in your application and the number of components that can re-render. An error log will also report any import issues.
Technology Stack
React with React Hooks
Visual Studio Code Extension API
Typescript
Svelte
Svelte-Parse
WebView
Webpack
SCSS/SASS
Getting Started as a Contributor
Clone ReSvelte from GitHub
Open the ReSvelte folder in your VS Code IDE.
Run the command: npm install
Run the command: npm run build
Run the command: npm run watch
Press F5. Click "Debug Anyways". This will open the development extension to allow debugging and view the ReSvelte extension.
Click the 'RS' ReSvelte extension button on the left panel
Proceed to upload a Svelte folder
Press command, shift, P then type into the search bar "Developer: Open Webview Tools" to see the dev tools panel
If you make a change to the code, press the green restart button on the original code editor debugging bar. This will restart the development extension. Then repeat steps 7 and 8.
What to Contribute
ReSvelte is an open source tool. Contributions are what make the open source community such an amazing place to learn, inspire, create, and grow. Any contributions you make are greatly appreciated. Here are some features that could improve this application and build upon the core functionality:
Storing the paths of all files which would allow the user to click on a component and be taken to that file for further editing or confirmation
Adding render time to the performance metrics
Tracking memory usage of an imported application
Adding a link in the component tree to show the hierarchy
Automatically find components in the imported application that aren’t running as expected and draw the user to that area
Implementing a time machine that will allow users to make changes without risking the current state of the application
Live updating of extension
Suggestions
We would love to hear your technical feedback! If you have suggestions, simply open an issue with the tag "enhancement".
Don't forget to give this developer tool a star. Thank you for your contribution!
License
Distributed under the MIT License. See LICENSE for more information
Contributors
Email: resvelteadm@gmail.com
Website: resvelte.com
GitHub