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

1. If not already installed, install Visual Studio Code for your respective operating system. Download Visual Studio Code

2. Search for ReSvelte in the Visual Studio Code Extension MarketPlace and install.

   Download ReSvelte Here!

3. A ReSvelte icon should appear on your sidebar. You have successfully installed ReSvelte!

4. Upload your Svelte folder. If there is an error, you will see an error message.

5. The component tree visualizer should now be populated in the sidebar with the component name. Toggle through the down arrows to expand the tree.

6. 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

1. Clone ReSvelte from GitHub

2. Open the ReSvelte folder in your VS Code IDE.

3. Run the command: npm install

4. Run the command: npm run build

5. Run the command: npm run watch

6. Press F5. Click "Debug Anyways". This will open the development extension to allow debugging and view the ReSvelte extension.

7. Click the 'RS' ReSvelte extension button on the left panel

8. Proceed to upload a Svelte folder

9. Press command, shift, P then type into the search bar "Developer: Open Webview Tools" to see the dev tools panel

10. 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:

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

Hoon Park LinkedIn GitHub

Martin Ng LinkedIn GitHub

Jestyn Apuya LinkedIn GitHub

Steven Nguyen LinkedIn GitHub

Candie Hill LinkedIn GitHub

Contact Us

Email: [email protected]

Website: resvelte.com