lukethacoder / lwc-dependency-viewer

🟡 Scan your LWC files to see the dependencies - displayed on a cytoscape powered graph

LWC Dependency Viewer

• 🖼️ Visual representation of your LWCs
• 🔎 Component Search
• 💡 Highlight linked components
• 🔩 Indicators for LWC file types (HTML/JS/CSS)
• 📦 See which LWC are referencing Apex/StaticResources
• 🔑 Run locally without needing to install anything into your org

Getting Started

pnpm install

# before running, open the `scripts/walk-files.ts` script and replace the 
# FOLDER_TO_SEARCH` value with your project path.
#
# pending https://github.com/lukethacoder/lwc-dependency-viewer/issues/1
pnpm walk

# run the dev server
pnpm dev

# this should open at http://localhost:5173/ 

Default output.json has been generated from the trailheadapps/lwc-recipes repository as an example usage.

Screenshots

Hover LWC to see its neighbours

Click an LWC to open up a file view and to see any related Apex Classes and/or StaticResource references

Open up the search (keyboard shortcut /) and easily search for the LWC you're looking for.

Hide orphan LWCs that exist on their own and don't relate to other LWCs

Adjust the curve-style to your liking

Contribution

See Contributing Guide.

License

MIT.

lwc-dependency-viewer's Issues

Setup as SFDX Plugin

Setup to run as a SFDX plugin:

• allow to be run from a sfdx project via a sfdx cli plugin sfdx ldv/sfdx lwc-dependecny-viewer
• read paths from lwc.config.json and/or sfdx-project.json