oslabs-beta / svisualize

Visualize your svelte components as you code using D3

Svisualize is a Svelte component visualizer for developers to see the shape of their application as they code.
Find out more at Svisualize!

Table of Contents

• 🖥️ Overview
• ⚙️ Installation
• 🛠 Getting Started
• 🗺️ Roadmap
• 🔗 Contributions
• 👩🏻‍💻 Meet Our Team

Overview

Large-scale Javascript projects can contain a multitude of components. Svelte, a newer Javascript framework, lacks a component visualization tool within Visual Studio Code. Svisualize is a VS Code extension that gives developers the ability to visualize their Svelte components as they create their project. With Svisualize you can:

• Visualize each Svelte component as a node on the component tree
• View parent-child hierarchy from ANY root file
• View props present within each component by hovering it's component node
• Open files on node click
• Update the tree structure on change in codebase by clicking the update button

Installation

Svisualize extension can be installed through the VS Code Marketplace.

1. Start by clicking the Extensions icon in the Activity Bar on the side of VS Code or by using the View: Extensions command (Ctrl/Cmd+Shift+X).
2. Search for 'svisualize' and click the "install" button.

3. Upon completion, VS Code will have installed the extension and Svisualize is ready for use.

Getting Started

After Svisualize is installed in VS Code,

• You will find a new tree icon added to the Activity Bar on the left-hand side. Click on it to launch the extension

• Select a root file to render your first tree

** Svisualize currently only supports SINGLE PAGE SvelteKit applications **

Roadmap

• Support for mutli-page SvelteKit applications
• Add additional functionality within the visualizer
  • Delete files on node click
  • Create new child files from parent nodes
• More UX/UI options within visualizer (e.g. changing color of nodes based on user preferences)
• Create a light mode on toggle for webview
• Addition of a status bar button to toggle extension activation and deactivation
• Implement more testing

Contributions

Svisualize is an open source project and we welcome iterations and contributions. If you have a suggestion, please follow the steps below or open an issue to discuss your idea.

1. Fork the Project
2. Create your Feature Branch (git checkout -b newFeature)
3. Commit your Changes (git commit -m 'added a newFeature')
4. Push to the Branch (git push origin newFeature)
5. Open a Pull Request

Don't forget to give the project a star! Thank you for your support!

Meet Our Team

Lumeng Li Linkedin | GitHub

Jason Huang Linkedin | GitHub

Kris Fragata Linkedin | GitHub

Caleb Belkin Linkedin | GitHub

svisualize's Issues

Support monorepos

Problem

When observing the tree generated by svisualize, most components that we are using are missing.

I assume this is because we use a Turborepo monorepo, and most components come from an import like import { Button } from @org/ui

It seems that only relative imports like ./Button are resolved and visualized properly.

Solution

Not sure what the exact problem is, but I assume that https://pnpm.io/workspaces are not supported yet.

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

Support displaying file path in addition to file name

Problem

For bigger projects, it becomes hard to use svisualize properly since it is impossible to distinguish which e.g. +page.svelte will be opened:

Solution

VSCode solves this by e.g. displaying file path in addition to file name, but there might be also other solutions to this problem.

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

Unable to install extension with my current VSCode - 1.85.1

Description

Currently getting this error when trying to install the extension

Can't install 'svisualize-dev.svisualize' extension because it is not compatible with the current version of Visual Studio Code (version 1.85.1).

Reproduction

Try to install the extension with vcode v - 1.85.1

System information

Version: 1.85.1 (Universal)
Date: 2023-12-13T09:48:06.308Z (2 mos ago)
Electron: 25.9.7
ElectronBuildId: 25551756
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.3.0

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!