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
167 lines • 8.78 kB
JavaScript
/**
* Enhanced Framework Detector for V2
*
* Improves detection of hybrid frameworks like LiveView + Svelte
*/
export class EnhancedFrameworkDetector {
async detectFramework(page) {
const features = [];
let primary = 'vanilla';
let secondary;
try {
// Enhanced LiveView detection - check for more indicators
const liveViewIndicators = await page.evaluate(() => {
const indicators = {
liveSocket: !!window.liveSocket,
phoenixLiveView: !!window.Phoenix?.LiveView,
phxHooks: !!document.querySelector('[phx-hook]'),
phxEvents: !!(document.querySelector('[phx-click]') ||
document.querySelector('[phx-submit]') ||
document.querySelector('[phx-change]') ||
document.querySelector('[phx-keyup]') ||
document.querySelector('[phx-keydown]')),
phxMain: !!document.querySelector('div[data-phx-main]'),
phxSession: !!document.querySelector('[data-phx-session]'),
phxStatic: !!document.querySelector('[data-phx-static]'),
liveViewScript: !!document.querySelector('script[src*="phoenix_live_view"]'),
// Check meta tags and CSRF tokens
csrfToken: !!document.querySelector('meta[name="csrf-token"]'),
// Check for Phoenix channels
phoenixChannel: !!window.Phoenix?.Channel,
// Check page source for LiveView markers
htmlMarkers: document.documentElement.innerHTML.includes('phx-') ||
document.documentElement.innerHTML.includes('Phoenix.LiveView')
};
// Count how many indicators are present
const count = Object.values(indicators).filter(Boolean).length;
return {
indicators,
count,
isLiveView: count >= 2 // At least 2 indicators to confirm LiveView
};
});
if (liveViewIndicators.isLiveView) {
primary = 'phoenix-liveview';
features.push('liveview', 'websockets', 'server-rendering');
// Log detected indicators for debugging
console.log('[Enhanced Framework Detector] LiveView indicators:', liveViewIndicators.indicators);
}
// Enhanced Svelte detection with live_svelte support
const svelteIndicators = await page.evaluate(() => {
const indicators = {
// live_svelte specific markers
liveSvelte: !!window.LiveSvelte ||
!!window.live_svelte ||
!!document.querySelector('[data-live-svelte]'),
liveSvelteHook: !!document.querySelector('[phx-hook="LiveSvelte"]') ||
!!document.querySelector('[phx-hook*="Svelte"]'),
// live_svelte component containers
liveSvelteContainer: !!document.querySelector('.live-svelte-component') ||
!!document.querySelector('[data-svelte-component]'),
// Check for live_svelte in scripts
liveSvelteScript: Array.from(document.querySelectorAll('script')).some(script => script.innerHTML.includes('LiveSvelte') ||
script.innerHTML.includes('live_svelte') ||
script.src?.includes('live_svelte')),
// Svelte 3/4 compiled component signatures
svelteComponent: !!window.__svelte,
svelteInternals: !!window.$$,
// DOM markers
svelteData: !!document.querySelector('[data-svelte]'),
// Check for Svelte store subscriptions
svelteStores: document.documentElement.innerHTML.includes('$$invalidate'),
// Check for Svelte-specific class patterns
svelteClasses: !!document.querySelector('[class*="svelte-"]'),
// Check script tags for Svelte imports
svelteImports: Array.from(document.querySelectorAll('script')).some(script => script.innerHTML.includes('svelte') ||
script.src?.includes('svelte')),
// Check for Svelte event handlers in HTML
svelteEvents: document.documentElement.innerHTML.includes('on:') ||
document.documentElement.innerHTML.includes('bind:'),
// Check for common Svelte component patterns
sveltePatterns: document.documentElement.innerHTML.includes('{#if') ||
document.documentElement.innerHTML.includes('{#each') ||
document.documentElement.innerHTML.includes('{@html')
};
const count = Object.values(indicators).filter(Boolean).length;
const isLiveSvelte = indicators.liveSvelte || indicators.liveSvelteHook ||
indicators.liveSvelteContainer || indicators.liveSvelteScript;
return {
indicators,
count,
isSvelte: count >= 1, // Even 1 indicator suggests Svelte
isLiveSvelte // Specific live_svelte integration
};
});
if (svelteIndicators.isSvelte || svelteIndicators.isLiveSvelte) {
if (svelteIndicators.isLiveSvelte) {
// Specific live_svelte integration detected
primary = 'phoenix-liveview-svelte';
features.push('live_svelte', 'svelte-components', 'reactive-ui', 'liveview-integration');
console.log('[Enhanced Framework Detector] live_svelte integration detected!');
}
else if (primary === 'phoenix-liveview') {
secondary = 'svelte';
features.push('svelte-components', 'reactive-ui');
}
else {
primary = 'svelte';
features.push('reactive-ui', 'compiled-components');
}
console.log('[Enhanced Framework Detector] Svelte indicators:', svelteIndicators.indicators);
}
// Check for other frameworks if not LiveView/Svelte
if (primary === 'vanilla') {
// React detection
const hasReact = await page.evaluate(() => {
return !!window.React ||
!!window.__REACT_DEVTOOLS_GLOBAL_HOOK__ ||
!!document.querySelector('[data-reactroot]');
});
if (hasReact) {
primary = 'react';
features.push('virtual-dom', 'component-based');
}
// Vue detection
const hasVue = await page.evaluate(() => {
return !!window.Vue ||
!!document.querySelector('[data-v-]') ||
!!window.__VUE__;
});
if (hasVue) {
primary = 'vue';
features.push('reactive-data', 'template-based');
}
}
// Detect additional features
const additionalFeatures = await page.evaluate(() => {
const features = [];
// WebSocket connections
if (window.WebSocket && performance.getEntriesByType('resource').some(r => r.name.includes('ws://'))) {
features.push('websockets');
}
// Server-sent events
if (window.EventSource) {
features.push('server-sent-events');
}
// Progressive Web App
if ('serviceWorker' in navigator) {
features.push('pwa-capable');
}
return features;
});
features.push(...additionalFeatures);
}
catch (error) {
console.error('[Enhanced Framework Detector] Error during detection:', error);
}
const result = {
primary,
secondary,
hybrid: !!secondary,
features: [...new Set(features)] // Remove duplicates
};
console.log('[Enhanced Framework Detector] Detection result:', result);
return result;
}
}
//# sourceMappingURL=enhanced-framework-detector.js.map