Introduction
Svelte is a frontend compiler that has revolutionized the industry. The simplicity and pre-compiled nature of Svelte allows developers to quickly get a handle of the technology. Svelte does most of the heavy lifting for the users as it compiles by directly working with webpack and without needing a virtual DOM. Due to the aforementioned reasons, choosing to work on Svelte, an up and coming framework, was a no-brainer.
Problem
As developers create Svelte applications, the component tree gets increasingly larger. Components are a delicate part of frontend frameworks and efficiently placing and correctly executing components are of high importance. Solving the issue of unnecessary component re-rendering or misplacing components within the component tree as the application scales is an ongoing issue that can be difficult for developers to detect. Additionally, debugging can take an exorbitant amount of time, decreasing developer productivity.
Enter ReSvelte
We struggled to find any developer tools that included a component tree visualizer for Svelte applications on the internet, let alone one that addressed re-rendering. So, we decided to produce one ourselves. For added comfortability and access, we created ReSvelte as a VS Code extension, so developers would not need to have multiple tabs or separate applications open. Instead, they could debug their application while remaining in the same integrated development environment. Developer efficiency was our top priority.
Installation/Getting Started
- Install ReSvelte in the VS Code Extension MarketPlace
- A ReSvelte icon will appear on the bottom of your sidebar, you have successfully installed ReSvelte!
- Upload your Svelte folder
- If uploaded correctly, the component tree should now be populated in the sidebar.
- Toggle through the down arrows to expand the tree and view the components rendered in your application
Main Features
- Easy import of Svelte application folder
- Visualization of component tree
- Populated with elements in which components are nested inside
- Display key performance metrics of the application (Number of components and re-renderable components)
- Error logs for any parsing or rendering issue
All of the main features assist the Svelte developer in understanding their scaling codebase. Most edge cases have been considered in our application, and we will continue to update ReSvelte as soon as new bugs are detected. The tree is split up into components, which are located in bigger boxes, and elements, which are located in smaller boxes that contain classic HTML element tags like div, h1, and main. Performance metrics are there to sum up the application with useful key performance indicators (KPI). Error logs for any import issue that the system encounters will also be addressed underneath the performance metrics.
Under the Hood/Our Journey
In order to get started, the team had to find a way to render React to WebView, a VS Code extension API. This is where we implemented our sidebar, and allowed for extra information to be displayed in a clean and user-friendly way. Configuring TypeScript, WebView, and webpack to work in unison was an arduous but fruitful experience.
The next big step came with parsing through Svelte files. Due to the sparse resources for such a new technology, the ReSvelte team decided to opt for “svelte-parse”, an npm package not to be confused with Svelte’s own parser. We chose to work with “svelte-parse” because it gave us freedom in picking exactly what we wanted from the parser. The technology allowed us to invoke and parse through each Svelte element and component along with its respective children. While doing this, we filtered out all files that were relevant to build out our component tree and store necessary data.
The parser was not perfect, however, and we quickly realized we had to account for every tag and not just Svelte components and scripts. These extra tags included elements such as: divs and mains to name a couple. This meant that we had to recursively call the parser through not only Svelte components but also Svelte elements to handle components that could be living within those elements.
After the initial parse, we had to come up with an algorithm to check for every instance of a Svelte component. Creating aliases is the first step of minifying and uglifying code, which is what webpack does to optimize the performance of applications. Therefore, we initially started with the imports and thought of all possible scenarios in which a developer could be importing files. Afterwards, we made aliases for imported components and stored them within an object that existed in the global execution context. We would later use this information in the construction of our tree using React.
Moreover, the parsing and storage of key information that we were able to extract allowed us to quickly generate a performance metrics table separate from the component tree. Here, we list the number of total and re-renderable components with any error logs listed. The error log messages assist in debugging by warning the user of any abnormalities in the application.
Future Plans
ReSvelte is not a finished product. The application has a long way to go, and the team has come up with many ideas in which the product could continue to grow. The list of improvements include but are not limited to:
- Store 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
- Memory usage of imported application
- Add a link in the component tree to show the hierarchy
- Automatically find components in an application that aren’t running as expected and draw the user to that area
- A time machine that will allow users to make changes without risking the current state of the application
- Live updating of extension
Contribute
As mentioned before, ReSvelte is a work in progress. If the technology seems interesting to you, please feel free to contribute! ReSvelte is an open source product, making it that much easier to be a part of the future of ReSvelte.
https://github.com/oslabs-beta/ReSvelte
Read the ‘Getting Started as a Contributor’ section of the README to find out how and where to begin.
The ReSvelte Team
Jestyn Apuya
LinkedIn https://www.linkedin.com/in/jestynapuya/
Github https://github.com/JestynA
Candie M Hill
LinkedIn https://www.linkedin.com/in/candie-hill/
Github https://github.com/can619
Martin Ng
Linkedin www.linkedin.com/in/martinngsf
Github — https://github.com/kamartinng
Steven Nguyen
Linkedin www.linkedin.com/in/nguyennsteven
Github https://github.com/Sateeven
Hoon Park
LinkedIn www.linkedin.com/in/hoonpvrk
Github https://github.com/hoonpvrk
Websites
https://www.resvelte.com
https://marketplace.visualstudio.com/items?itemName=ReSvelte.resvelte
Contact Us
Gmail: resvelteadm@gmail.com
