📦 Component Dependency Collapser

🕵️ Unravel your frontend dependencies like a pro detective.
🧠 Get insights. 🔍 Trace dependencies. 🌲 Visualize trees.
💥 Bust bloat, debug spaghetti, and debug your bundle... before it debugs you.

🚀 What is this?

Component Dependency Collapser is your personal CLI x-ray tool for frontend projects. It's here to analyze, trace, and visualize how your code talks to itself.

Think of it as:

• 🕶️ X-Ray vision for your code structure.
• 🧬 DNA testing for your imports.
• 🧹 A Roomba for your dependency mess.

It answers:

• What does this file depend on?
• Who’s importing what?
• Why is this thing so heavy?
• Who dragged moment.js in here again?

🤔 Why Use This?

Ever sat in a dev meeting wondering:

• “Why is our bundle size over 3MB again?”
• “Where is this package even used?”
• “Who imported lodash just for cloneDeep?”
• “Why does this component have 19 parents?”

You’ve got questions. This tool’s got import receipts.

💡 Use Cases

• 🏋️ Performance busting: Catch large transitive dependency chains red-handed.
• 🕵️ Code auditing: Reveal suspicious and unnecessary imports.
• 🧼 Code cleanup: Find unused or oversized components and kill the cruft.
• 🧭 Developer onboarding: Help new teammates understand architecture—fast.
• 🧠 Refactoring support: Don’t refactor blind—know the dependency blast radius.

⚙️ Installation

npm install -g component-dependency-collapser
# or
yarn global add component-dependency-collapser

🛠️ CLI Usage

comp-collapse <Dir> [options]

Options

• --tree or -t: Print a tree of imports for each file.
• --find <package>: Find which components use a specific package
• --external-only: Only show external imports.
• --trace <target>: Trace import chains to a target module/package
• --size: Print the size of each file.
• --help: Show help.

Examples

1. Analyze Components in a Directory

comp-collapse src/components

Scans all files under src/components and lists their imports.

2. Visual Dependency Tree Output

comp-collapse src/pages --tree

Visualizes each component’s internal & external imports with tree indentation.

3. External Packages Only

comp-collapse src/components --tree --external-only

Shows a dependency tree only including external npm packages.

4. Find Where a Package is Imported

comp-collapse src/ --find lodash

Finds and lists all components in src/ that import lodash.

5. Trace Import Chains to a Target Module

comp-collapse src/ --trace react-query

Prints full import chains that lead to usage of react-query.

6. Show Size of Components + Dependencies

comp-collapse src/components --size

Ranks components based on their total size including transitive dependencies.

👨‍💻🕶️ Author

Made by Cinfinite, who once tried to delete a dependency... and accidentally broke 47 files. i guess it was more ... ANYWAYSSSS..

He's Fixer of imports.
Breaker of chains.
Writer of CLIs.

• Favorite emoji: 🔥 (usually right before deleting things) from Prod ? You guess that yourself .
• Years of experience: Enough to know better, too stubborn to stop.
• Number of times asked “who imports this?”: too many
• Number of regrets: zero

“No import shall escape my gaze.”

If you’ve ever yelled “WHO’S USING THIS PACKAGE?!” — this is for you.