Aura Component Navigator

A VS Code extension that provides intelligent fully bidirectional navigation for Salesforce Aura components. Navigate seamlessly between .cmp files, Controller.js, Helper.js files, and Apex controllers with smart method detection and click-to-navigate functionality.

Features

• 🔄 Fully Bidirectional Navigation: Navigate in ALL directions between .cmp, Controller, Helper, and Apex .cls files
• ⚡ Fast Indexed Navigation: Persistent index for instant navigation across large codebases
• 🔍 Comprehensive Apex Indexing: Indexes all Apex methods (public, private, protected) and their calls
• Click-to-Navigate: Click on any method reference like c.initialize, helper.doSomething, component.get('c.apexMethod')
• Apex Integration: Navigate from JavaScript to Apex controllers and back
• Ctrl+Click Navigation: Use standard VS Code go-to-definition shortcuts
• Hover Information: Hover over method references to see quick information
• Smart File Resolution: Automatically finds the correct Controller, Helper, or Apex file
• Multi-pattern Support: Handles various Aura method reference patterns
• Reverse Navigation: Click on method definitions to find where they're used
• Auto-Index Updates: Index updates automatically on file save and when opening new files
• Persistent Cache: Index survives VS Code restarts with fallback on errors

Navigation Paths

✅ All Supported Navigation Flows

1. .cmp → Controller.js - Click on {!c.methodName}
2. .cmp → Helper.js - Click on {!helper.methodName}
3. Controller.js → Helper.js - Click on helper.methodName()
4. Controller.js → .cmp - Click on method definition name
5. Helper.js → Controller.js - Click on method definition name
6. Helper.js → .cmp - Click on method definition name
7. Controller.js → Apex .cls - Click on component.get('c.apexMethod')
8. Helper.js → Apex .cls - Click on component.get('c.apexMethod')
9. Apex .cls → JavaScript files - Click on @AuraEnabled method name
10. Apex .cls → Apex .cls ⭐ NEW - Click on ClassName.methodName()
11. Apex .cls method → Find usage` ⭐ NEW - Click on method name to find calls

How to Use

From .cmp Files → Controller/Helper

1. Open any .cmp Aura component file in VS Code
2. Find method references like {!c.initialize}, {!helper.methodName}
3. Use Ctrl+Click (Cmd+Click on Mac) to jump to the method definition
4. The extension will navigate to the corresponding Controller.js or Helper.js file

From Controller.js → Helper

1. Open any *Controller.js file
2. Find helper method calls like helper.runFullSync(component, helper)
3. Use Ctrl+Click on the method name
4. The extension will navigate to the method in the corresponding Helper.js file

From Controller.js → .cmp

1. Open any *Controller.js file
2. Click on a method definition name (e.g., startFullSync in startFullSync : function())
3. Use Ctrl+Click on the method name
4. The extension will find and navigate to where this method is used in the .cmp file

From Helper.js → Controller/.cmp

1. Open any *Helper.js file
2. Click on a method definition name (e.g., loadSyncStatus in loadSyncStatus: function())
3. Use Ctrl+Click on the method name
4. The extension will find where this helper method is called (Controller.js or .cmp file)

From JavaScript → Apex Controller ⭐ NEW

1. Open any *Controller.js or *Helper.js file
2. Find Apex method calls like component.get('c.isPC2MigrationPending')
3. Use Ctrl+Click on the method name (e.g., isPC2MigrationPending)
4. The extension will:
   • Read the .cmp file to find the Apex controller name
   • Navigate to the Apex .cls file in force-app/main/default/classes/
   • Jump to the @AuraEnabled method definition

From Apex → JavaScript ⭐ NEW

1. Open any Apex .cls file
2. Find an @AuraEnabled method (e.g., public static String startSync())
3. Use Ctrl+Click on the method name
4. The extension will:
   • Find all .cmp files that use this Apex controller
   • Search their Controller.js and Helper.js files
   • Show all locations where component.get('c.startSync') is called
   • You can select which location to open if multiple found

From Apex Method → Find Usage ⭐ ENHANCED

1. Open any Apex .cls file
2. Find a method definition (e.g., private static String method1())
3. Use Ctrl+Click on the method name
4. The extension will:
   • For private methods: Search only within the same file for calls
   • For public/protected/global methods: Search all .cls files in the workspace
   • Show all locations where the method is called
   • You can select which location to open if multiple found

Supported Patterns

In .cmp Files

• {!c.methodName} - Method calls to component controller
• {!helper.methodName} - Method calls to component helper
• {!v.attribute} - Component attributes (informational)
• controller="ApexClassName" - Apex controller reference

In Controller.js Files

• helper.methodName() - Navigate to helper method definition
• methodName : function() - Click method name to find usage in .cmp
• component.get('c.apexMethod') - Navigate to Apex controller method ⭐ NEW

In Helper.js Files

• methodName : function() - Click method name to find usage in Controller or .cmp
• methodName() - Click method name to find where it's called
• component.get('c.apexMethod') - Navigate to Apex controller method ⭐ NEW

In Apex .cls Files

• @AuraEnabled public static ReturnType methodName() - Click method name to find JavaScript calls
• ClassName.methodName() - Navigate to method in another Apex class ⭐ NEW
• public static String methodName() - Click method name to find all Apex calls (searches all .cls files) ⭐ NEW
• private static String methodName() - Click method name to find calls within same file ⭐ ENHANCED
• Supports complex return types: List<String>, Map<String, Object>, ClassName.InnerClass, String[] ⭐ ENHANCED

Extension Settings

Currently, the extension works automatically with no configuration needed. Future versions may add configurable settings for:

• Custom method patterns
• File naming conventions
• Navigation behavior

Indexing System ⭐ NEW

The extension uses a smart indexing system for fast navigation:

How It Works

1. First Time: On first activation, the extension indexes all Aura components and Apex classes
2. Persistent Cache: Index is saved to .vscode/aura-navigator-index.json (automatically ignored by git)
3. Fast Startup: On subsequent VS Code sessions, loads from cache instantly
4. Auto-Updates: Index automatically updates when you:
   • Save a file (.cmp, Controller.js, Helper.js, .cls)
   • Open a new file that's not in the index
5. Error Resilient: If index rebuild fails, falls back to the last known good index

What Gets Indexed

• All Aura components (.cmp files)
• All Controller.js and Helper.js files with their methods
• All Apex classes (.cls files)
• All Apex methods (public, private, protected, global)
• All method calls within Apex classes
• Relationships between Aura components and Apex controllers

Manual Rebuild

If you need to manually rebuild the index:

1. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
2. Type: Rebuild Aura Component Index
3. Press Enter

The extension will rebuild the entire index and save it to cache.

Known Limitations

• Works specifically with Aura components (.cmp, *Controller.js, *Helper.js files)
• Requires standard Aura file naming conventions (ComponentNameController.js, ComponentNameHelper.js)
• Method definitions must follow standard patterns
• When navigating from Helper/Controller to .cmp, shows first usage found

Contributing

Feel free to submit issues and enhancement requests!

License

Linga