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
- Install the extension (
.vsix from Releases, or Marketplace once published)
- Open any React project in VS Code
- Open a
.jsx/.tsx file and press Ctrl+Shift+.
- 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
- 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.
- Component detection. Imports of capitalized identifiers (
import { Button }) are treated as components. Lowercase utility imports and external packages are excluded by design.
- 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.
- 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.
- 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
