ai-debug-local-mcp
Version:
🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh
75 lines • 2.76 kB
JavaScript
/**
* ReactStateCoordinator - Coordinates React state management and debugging
*
* This coordinator orchestrates React-specific debugging capabilities by integrating:
* - ReactStateEngine: Core React state management and monitoring
* - StateCapture: DOM and component state capture functionality
* - NetworkCoordinator: API request data for state mismatch detection
*
* Follows the established coordinator pattern proven in 5 previous implementations.
*/
export class ReactStateCoordinator {
reactStateEngine;
stateCapture;
networkCoordinator;
constructor(reactStateEngine, stateCapture, networkCoordinator) {
this.reactStateEngine = reactStateEngine;
this.stateCapture = stateCapture;
this.networkCoordinator = networkCoordinator;
}
/**
* Find React components through StateCapture delegation
*/
async findReactComponents() {
return await this.stateCapture.findReactComponents();
}
/**
* Get React component tree through StateCapture delegation
*/
async getReactComponentTree() {
return await this.stateCapture.getReactComponentTree();
}
/**
* Get current React state through StateCapture delegation
*/
async getReactState() {
return await this.stateCapture.getReactState();
}
/**
* Get specific React component by name
*/
async getReactComponentByName(name) {
return await this.reactStateEngine.getComponentByName(name);
}
/**
* Monitor React state changes for a specified duration
*/
async monitorReactStateChanges(duration) {
return await this.reactStateEngine.monitorStateChanges(duration);
}
/**
* Detect mismatches between API data and React state
*
* This method coordinates between NetworkCoordinator and ReactStateEngine
* to identify inconsistencies between API responses and React component state.
*/
async detectReactStateMismatches() {
// Get API data from NetworkCoordinator
const apiRequests = this.networkCoordinator.getApiRequests();
const mismatches = [];
for (const request of apiRequests) {
if (request.responseBody && request.status === 'complete') {
const stateMismatches = await this.reactStateEngine.detectStatePropMismatches(request.responseBody);
if (stateMismatches.length > 0) {
mismatches.push({
url: request.url,
apiData: request.responseBody,
mismatches: stateMismatches
});
}
}
}
return mismatches;
}
}
//# sourceMappingURL=react-state-coordinator.js.map