Roseline

Component navigator for JSX/TSX/JS/TS projects. See parent/child relationships and jump instantly between React components.

---

Features

🔍 Component Graph QuickPick

Press Ctrl+Shift+. on any .tsx/.jsx/.ts/.js file to open a QuickPick listing who imports it (Parents) and what it imports (Children). Hit Enter to jump.

🧭 Tree View in the Activity Bar

A rose icon docks beside Explorer/Search. Open it to see the same Parents/Children of the active file — auto-syncs as you switch tabs (300 ms debounce). No command required.

🌳 Project Tree (full hierarchy)

Toggle to Project Tree mode with the 📂 button in the view title. The whole project's component hierarchy renders, lazily expanded:

• Multi-project safe — every tsconfig.json / jsconfig.json boundary is its own tree, sub-projects don't leak into each other
• Cycle markers (↻) when a branch loops back to an ancestor (no infinite expansion)
• Orphan fallback for UI-library projects with no App/main entry — top-level components still appear
• Bare CRA/Vite projects (no config) are detected via workspace folders

📦 Barrel re-export tracing

Imports through index.ts/js barrels resolve to the leaf component instead of stopping at the barrel:

// ui/index.ts
export { Button } from "./Button";
export { Card } from "./Card";
export * from "./Badge";

// MyPage.tsx
import { Button, Card, Badge } from "./ui";

Roseline shows Button → ui/Button.tsx, Card → ui/Card.tsx, Badge → ui/Badge.tsx — not ui/index.ts. Named, wildcard, as rename, and chained barrels all supported.

⚡ Smart cache

Per-file children + re-exports are cached with mtime invalidation. Choose RAM-only (cleared on restart) or persist to disk at a custom path (defaults to E:\roseline-cache to keep your C: drive clean). Auto-deletes after N days. Roseline: Clear Cache resets manually.

👁️ Live updates

A FileSystemWatcher invalidates cache and refreshes the visible tree on save / create / delete — no manual refresh needed. tsconfig.json / jsconfig.json changes invalidate project boundaries automatically.

🛡️ External libraries excluded

react-icons, framer-motion, MUI, Tailwind, etc. — anything that resolves into node_modules is silently skipped. The graph stays clean and focused on your own components.

🖱️ Right-click everywhere

• Explorer / editor → "Roseline: Show Component Graph" on any .jsx/.tsx/.ts/.js file
• Tree node → Reveal in Explorer · Copy Path · Find All References
• Title bar → mode toggle · refresh · Expand All · (built-in) Collapse All

---

Quick start

1. Install the extension (.vsix from Releases, or Marketplace once published)
2. Open any React project in VS Code
3. Open a .jsx/.tsx file and press Ctrl+Shift+.
4. Or click the 🌹 rose in the Activity Bar to dock the tree view

---

Commands

Command	Default keybinding	Where
Roseline: Show Component Graph	Ctrl+Shift+.	editor · Explorer right-click · editor right-click
Roseline: Switch to Project Tree	—	view title bar
Roseline: Switch to Active File	—	view title bar
Roseline: Refresh Project Tree	—	view title bar (project mode)
Roseline: Expand All	—	view title bar
Roseline: Reveal in Explorer	—	tree node right-click
Roseline: Copy Path	—	tree node right-click
Roseline: Find All References	—	tree node right-click
Roseline: Clear Cache	—	Command Palette
Roseline: Show Output Log	—	Command Palette

---

Settings

Setting	Default	Description
roseline.searchScope	"project"	"project" = nearest tsconfig/jsconfig boundary · "workspace" = entire workspace
roseline.cacheMode	"memory"	"memory" = RAM-only · "custom" = persist to cachePath
roseline.cachePath	E:\roseline-cache	Folder for roseline-cache.json when cacheMode = custom
roseline.cacheMaxAgeDays	7	Auto-delete cache after N days · 0 = never

---

How it works

1. Boundary detection. Roseline walks up from each file to the nearest tsconfig.json / jsconfig.json and uses that directory as the project boundary. In a monorepo each leaf config is an independent project; a parent config still owns the JSX outside its descendants.
2. Component detection. Imports of capitalized identifiers (import { Button }) are treated as components. Lowercase utility imports and external packages are excluded by design.
3. Path alias resolution. compilerOptions.paths from the nearest config is honoured, so @ui/Button → src/ui/Button.tsx works the same as a relative import.
4. Barrel tracing. When an import resolves to a re-exporting file, Roseline parses the export { X } from … and export * from … declarations, follows them recursively (with cycle protection), and verifies wildcard sources via their own exports.
5. Parents (incoming edges). A workspace-wide scan filters by filename text (fast pre-filter) before parsing matched files with the TypeScript compiler API.

---

Limitations

• Static imports only. React.lazy(() => import('./Foo')) and other dynamic imports are not traced.
• Component heuristic. Components are identified by capitalized import names (<Button /> style). Renderless utility hooks (useFoo) and lowercase utilities are intentionally excluded.
• searchScope: "workspace" scans every JS/TS file in the workspace — fast on small projects, slower on large monorepos. Default "project" is recommended.
• Default exports through wildcard barrels. export * from './X' re-exports named exports only; named-only is the standard idiom in component libraries.

---

Roadmap

• Marketplace listing
• Status-bar quick-toggle
• Optional inclusion of lowercase utility imports (opt-in)
• "Find usages of this component" QuickPick (alternative to right-click → Find References)

---

License

MIT