codemeld 2.1.0

package/dist/parsers/js-analyzer.js

@@ -0,0 +1,680 @@
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import * as t from '@babel/types';
+import _generate from '@babel/generator';
+import { toValidIdentifier } from '../utils/naming.js';
+const traverse = typeof _traverse === 'function' ? _traverse : _traverse.default;
+const generate = typeof _generate === 'function' ? _generate : _generate.default;
+function emptyAnalysis() {
+    return {
+        stateVars: [], effects: [], eventHandlers: [], imports: [], utilityCode: [],
+        domManipulations: [], refs: [], fetchCalls: [], storageCalls: [],
+        jqueryPatterns: [], domMutations: [], timerCalls: [], pageTemplates: [],
+        interactivePatterns: { scrollReveals: [], tabs: [], accordions: [], scrollClasses: [], counterAnimations: [], carousels: [], eventDelegations: [], debounces: [], formValidations: [], historyRouting: [], mobileMenus: [], formHandlers: [], ripples: [] },
+    };
+}
+/**
+ * Detect common interactive patterns via regex (IntersectionObserver, tabs, accordion, scroll classes, counters).
+ * These patterns are too high-level for AST-based detection, so we use regex on the raw source.
+ */
+export function detectInteractivePatterns(code) {
+    const patterns = {
+        scrollReveals: [],
+        tabs: [],
+        accordions: [],
+        scrollClasses: [],
+        counterAnimations: [],
+        carousels: [],
+        eventDelegations: [],
+        debounces: [],
+        formValidations: [],
+        historyRouting: [],
+        mobileMenus: [],
+        formHandlers: [],
+        ripples: [],
+    };
+    // ── Scroll reveal: IntersectionObserver + animationPlayState = 'running' or classList.add ──
+    // Pattern: new IntersectionObserver(...) + querySelectorAll('.reveal')
+    const ioRevealRe = /new\s+IntersectionObserver\s*\(\s*(?:\([^)]*\)|[^,]*)\s*=>\s*\{[\s\S]*?animationPlayState\s*=\s*['"]running['"]/g;
+    if (ioRevealRe.test(code)) {
+        // Find the selector being observed
+        const selectorMatch = code.match(/querySelectorAll\s*\(\s*['"]([^'"]+)['"]\s*\)[\s\S]{0,200}?\.observe\b/);
+        const thresholdMatch = code.match(/threshold\s*:\s*([\d.]+)/);
+        patterns.scrollReveals.push({
+            selector: selectorMatch ? selectorMatch[1] : '.reveal',
+            property: 'animationPlayState',
+            activeValue: 'running',
+            threshold: thresholdMatch ? parseFloat(thresholdMatch[1]) : 0.1,
+        });
+    }
+    // Also detect classList-based reveal: IntersectionObserver + classList.add('visible'/'active'/'show')
+    const ioClassRevealRe = /new\s+IntersectionObserver\s*\([\s\S]*?classList\.add\s*\(\s*['"](visible|active|show|revealed|in-view)['"]\s*\)/;
+    const classRevealMatch = code.match(ioClassRevealRe);
+    if (classRevealMatch && patterns.scrollReveals.length === 0) {
+        const selectorMatch = code.match(/querySelectorAll\s*\(\s*['"]([^'"]+)['"]\s*\)[\s\S]{0,200}?\.observe\b/);
+        patterns.scrollReveals.push({
+            selector: selectorMatch ? selectorMatch[1] : '.reveal',
+            property: 'classList',
+            activeValue: classRevealMatch[1],
+            threshold: 0.1,
+        });
+    }
+    // ── Tab pattern: querySelectorAll('.tab').forEach + classList.add/remove('active') + data-tab ──
+    const tabRe = /querySelectorAll\s*\(\s*['"]([^'"]*tab[^'"]*)['"]\s*\)[\s\S]*?\.addEventListener\s*\(\s*['"]click['"]/i;
+    const tabMatch = code.match(tabRe);
+    if (tabMatch) {
+        const tabSelector = tabMatch[1];
+        // Try to find the panel selector and data attribute
+        const dataAttrMatch = code.match(/(?:tab|btn)\s*\.dataset\.(\w+)/i) || code.match(/\.dataset\.(\w+)/);
+        const panelMatch = code.match(/querySelectorAll\s*\(\s*['"]([^'"]*panel[^'"]*)['"]\s*\)/i);
+        const activeMatch = code.match(/classList\.\w+\s*\(\s*['"](active|selected|current)['"]\s*\)/);
+        patterns.tabs.push({
+            tabSelector,
+            panelSelector: panelMatch ? panelMatch[1] : tabSelector.replace('tab', 'panel'),
+            dataAttr: dataAttrMatch ? `data-${dataAttrMatch[1]}` : 'data-tab',
+            activeClass: activeMatch ? activeMatch[1] : 'active',
+        });
+    }
+    // ── Accordion/FAQ pattern: querySelectorAll('.faq-q'/.accordion-trigger) + classList.toggle/add('open'/'active') ──
+    const accordionRe = /querySelectorAll\s*\(\s*['"]([^'"]*(?:faq|accordion|collapse|toggle)[^'"]*)['"]\s*\)[\s\S]*?\.addEventListener\s*\(\s*['"]click['"]/i;
+    const accordionMatch = code.match(accordionRe);
+    if (accordionMatch) {
+        const triggerSelector = accordionMatch[1];
+        const openClassMatch = code.match(/classList\.(?:toggle|add|contains)\s*\(\s*['"](open|active|expanded|show)['"]\s*\)/);
+        const itemMatch = code.match(/closest\s*\(\s*['"]([^'"]+)['"]\s*\)/);
+        // Check if single-open: look for forEach(... .remove('open')) pattern
+        const singleOpen = /querySelectorAll[\s\S]*?forEach[\s\S]*?classList\.remove\s*\(\s*['"](open|active|expanded|show)['"]\s*\)/.test(code);
+        patterns.accordions.push({
+            triggerSelector,
+            itemSelector: itemMatch ? itemMatch[1] : triggerSelector.replace(/-q$|-trigger$|-btn$/, '-item'),
+            openClass: openClassMatch ? openClassMatch[1] : 'open',
+            singleOpen,
+        });
+    }
+    // ── Scroll class toggle: window scroll + classList.toggle('scrolled', scrollY > N) ──
+    const scrollClassRe = /(?:window|document)\.addEventListener\s*\(\s*['"]scroll['"][\s\S]*?(?:getElementById\s*\(\s*['"](\w+)['"]\s*\)|querySelector\s*\(\s*['"]([^'"]+)['"]\s*\))[\s\S]*?classList\.toggle\s*\(\s*['"](\w+)['"]/;
+    const scrollClassMatch = code.match(scrollClassRe);
+    if (scrollClassMatch) {
+        const thresholdMatch = code.match(/scrollY\s*>\s*(\d+)/);
+        patterns.scrollClasses.push({
+            elementSelector: scrollClassMatch[1] ? `#${scrollClassMatch[1]}` : scrollClassMatch[2],
+            className: scrollClassMatch[3],
+            threshold: thresholdMatch ? parseInt(thresholdMatch[1], 10) : 0,
+        });
+    }
+    // ── Counter animation: IntersectionObserver + data-target + textContent ──
+    const counterRe = /new\s+IntersectionObserver[\s\S]*?dataset\.target[\s\S]*?textContent/;
+    if (counterRe.test(code)) {
+        const counterSelectorMatch = code.match(/querySelectorAll\s*\(\s*['"]([^'"]*(?:data-target|stat-num|counter)[^'"]*)['"]\s*\)/);
+        patterns.counterAnimations.push({
+            selector: counterSelectorMatch ? counterSelectorMatch[1] : '[data-target]',
+            dataAttr: 'data-target',
+        });
+    }
+    // ── Carousel/slider: currentSlide/slideIndex + translateX/transform ──
+    const carouselStateRe = /(?:let|var)\s+(currentSlide|slideIndex|currentIndex|activeSlide)\s*=\s*(\d+)/;
+    const carouselStateMatch = code.match(carouselStateRe);
+    if (carouselStateMatch) {
+        const containerMatch = code.match(/querySelector\s*\(\s*['"]([^'"]*(?:slide|carousel|swiper|gallery)[^'"]*)['"]\s*\)/i);
+        const autoPlayMatch = /setInterval[\s\S]*?(?:slide|next|advance)/i.test(code);
+        patterns.carousels.push({
+            containerSelector: containerMatch ? containerMatch[1] : '.carousel',
+            stateVar: carouselStateMatch[1],
+            autoPlay: autoPlayMatch,
+        });
+    }
+    // ── Event delegation: parent.addEventListener('click', e => { if (e.target.matches/classList.contains) ... }) ──
+    const delegationRe = /(?:querySelector|getElementById)\s*\(\s*['"]([^'"]+)['"]\s*\)[\s\S]*?addEventListener\s*\(\s*['"](\w+)['"][\s\S]*?(?:e\.target|event\.target)[\s\S]*?(?:\.matches\s*\(\s*['"]([^'"]+)['"]|\.classList\.contains\s*\(\s*['"]([^'"]+)['"])/g;
+    let delegationMatch;
+    while ((delegationMatch = delegationRe.exec(code)) !== null) {
+        patterns.eventDelegations.push({
+            parentSelector: delegationMatch[1],
+            targetMatch: delegationMatch[3] || delegationMatch[4],
+            event: delegationMatch[2],
+            handler: '',
+        });
+    }
+    // ── Debounce/throttle: debounce(fn, delay) or setTimeout wrapper pattern ──
+    const debounceRe = /(?:debounce|throttle)\s*\(\s*(\w+)\s*,\s*(\d+)/g;
+    let debounceMatch;
+    while ((debounceMatch = debounceRe.exec(code)) !== null) {
+        patterns.debounces.push({
+            functionName: debounceMatch[1],
+            delay: debounceMatch[2],
+        });
+    }
+    // Also detect inline debounce pattern: clearTimeout + setTimeout
+    const inlineDebounceRe = /clearTimeout\s*\(\s*(\w+)\s*\)[\s\S]{0,50}?(\w+)\s*=\s*setTimeout/;
+    if (inlineDebounceRe.test(code) && patterns.debounces.length === 0) {
+        patterns.debounces.push({ functionName: 'inlineDebounce', delay: '300' });
+    }
+    // ── Form validation: checkValidity, setCustomValidity, reportValidity ──
+    const validationRe = /(?:checkValidity|setCustomValidity|reportValidity)\s*\(/;
+    if (validationRe.test(code)) {
+        const formMatch = code.match(/(?:querySelector|getElementById)\s*\(\s*['"]([^'"]*form[^'"]*)['"]\s*\)/i);
+        const methods = [];
+        if (/checkValidity/.test(code))
+            methods.push('checkValidity');
+        if (/setCustomValidity/.test(code))
+            methods.push('setCustomValidity');
+        if (/reportValidity/.test(code))
+            methods.push('reportValidity');
+        patterns.formValidations.push({
+            formSelector: formMatch ? formMatch[1] : 'form',
+            methods,
+        });
+    }
+    // ── History/hash routing: history.pushState or hashchange ──
+    const pushStateRe = /history\.pushState|history\.replaceState|\.pushState\s*\(/;
+    const hashChangeRe = /hashchange|window\.location\.hash/;
+    if (pushStateRe.test(code)) {
+        const routeMatches = code.match(/pushState\s*\([^,]*,\s*[^,]*,\s*['"]([^'"]+)['"]\s*\)/g) || [];
+        const routes = routeMatches.map(m => {
+            const match = m.match(/['"]([^'"]+)['"]\s*\)$/);
+            return match ? match[1] : '/';
+        });
+        patterns.historyRouting.push({ routes, type: 'pushState' });
+    }
+    else if (hashChangeRe.test(code)) {
+        const hashMatches = code.match(/(?:location\.hash\s*===?\s*['"]#?([^'"]+)['"]|case\s+['"]#?([^'"]+)['"])/g) || [];
+        const routes = hashMatches.map(m => {
+            const match = m.match(/['"]#?([^'"]+)['"]/);
+            return match ? `/${match[1]}` : '/';
+        });
+        patterns.historyRouting.push({ routes, type: 'hash' });
+    }
+    // ── Mobile menu: hamburger button toggle + mobile nav open/close ──
+    const mobileMenuRe = /(?:getElementById|querySelector)\s*\(\s*['"]([^'"]*(?:ham|hamburger|burger|menu-toggle|nav-toggle|mobile-btn)[^'"]*)['"]\s*\)[\s\S]*?addEventListener\s*\(\s*['"]click['"]/i;
+    const mobileMenuMatch = code.match(mobileMenuRe);
+    if (mobileMenuMatch) {
+        const mobMatch = code.match(/(?:getElementById|querySelector)\s*\(\s*['"]([^'"]*(?:mob|mobile-menu|mobile-nav|nav-mobile|side-menu|offcanvas)[^'"]*)['"]\s*\)/i);
+        const openClassMatch = code.match(/classList\.toggle\s*\(\s*['"](open|active|show|visible)['"]\s*\)/);
+        const bodyOverflow = /document\.body\.style\.overflow/.test(code);
+        patterns.mobileMenus.push({
+            hamburgerSelector: mobileMenuMatch[1].startsWith('.') || mobileMenuMatch[1].startsWith('#') ? mobileMenuMatch[1] : `#${mobileMenuMatch[1]}`,
+            menuSelector: mobMatch ? (mobMatch[1].startsWith('.') || mobMatch[1].startsWith('#') ? mobMatch[1] : `#${mobMatch[1]}`) : '.mobile-menu',
+            openClass: openClassMatch ? openClassMatch[1] : 'open',
+            togglesBodyOverflow: bodyOverflow,
+        });
+    }
+    // ── Form handlers: email validation + success feedback ──
+    const formHandlerRe = /function\s+(\w*(?:handle|submit|cta)\w*)\s*\([^)]*\)\s*\{[\s\S]*?(?:includes\s*\(\s*['"]@['"]\s*\)|\.value[\s\S]*?@)/i;
+    const formHandlerMatch = code.match(formHandlerRe);
+    if (formHandlerMatch) {
+        const inputMatch = code.match(/(?:getElementById|querySelector)\s*\(\s*['"]([^'"]*(?:email|input|cta)[^'"]*)['"]\s*\)/i);
+        const hasSuccessFeedback = /textContent\s*=\s*['"][^'"]*(?:list|success|thank|sent)/i.test(code) ||
+            /style\.background\s*=\s*['"]#3ecf6e['"]/i.test(code);
+        patterns.formHandlers.push({
+            inputSelector: inputMatch ? inputMatch[1] : '#ctaEmail',
+            buttonSelector: '.input-group button',
+            handlerName: formHandlerMatch[1],
+            isEmail: true,
+            hasSuccessFeedback,
+        });
+    }
+    // ── Ripple effect: createElement('span') + animation:ripple + getBoundingClientRect ──
+    const rippleRe = /createElement\s*\(\s*['"]span['"]\s*\)[\s\S]*?(?:ripple|getBoundingClientRect)/;
+    if (rippleRe.test(code)) {
+        const selectorMatch = code.match(/querySelectorAll\s*\(\s*['"]([^'"]+)['"]\s*\)[\s\S]{0,200}?(?:ripple|createElement)/);
+        if (selectorMatch) {
+            const selectors = selectorMatch[1].split(',').map(s => s.trim());
+            patterns.ripples.push({ selectors });
+        }
+        else {
+            patterns.ripples.push({ selectors: ['.btn-primary', '.plan-btn'] });
+        }
+    }
+    return patterns;
+}
+/**
+ * Analyze vanilla JavaScript using Babel AST and extract React-convertible patterns.
+ */
+export function analyzeJS(code) {
+    const result = emptyAnalysis();
+    let ast;
+    try {
+        ast = parse(code, {
+            sourceType: 'unambiguous',
+            allowReturnOutsideFunction: true,
+            plugins: ['optionalChaining', 'nullishCoalescingOperator'],
+        });
+    }
+    catch {
+        return fallbackAnalyze(code);
+    }
+    // Track which variables are mutated (for useState detection)
+    const declaredVars = new Map();
+    // Pass 1: collect variable declarations
+    traverse(ast, {
+        VariableDeclaration(path) {
+            if (path.node.kind === 'const')
+                return;
+            for (const decl of path.node.declarations) {
+                if (!t.isIdentifier(decl.id))
+                    continue;
+                const name = decl.id.name;
+                const init = decl.init ? generate(decl.init).code : 'undefined';
+                if (decl.init && isDOMCallExpression(decl.init))
+                    continue;
+                declaredVars.set(name, { init, mutated: false });
+            }
+        },
+    });
+    // Pass 2: detect mutations
+    traverse(ast, {
+        AssignmentExpression(path) {
+            if (t.isIdentifier(path.node.left)) {
+                const entry = declaredVars.get(path.node.left.name);
+                if (entry)
+                    entry.mutated = true;
+            }
+        },
+        UpdateExpression(path) {
+            if (t.isIdentifier(path.node.argument)) {
+                const entry = declaredVars.get(path.node.argument.name);
+                if (entry)
+                    entry.mutated = true;
+            }
+        },
+    });
+    for (const [name, info] of declaredVars) {
+        if (info.mutated) {
+            const safeName = toValidIdentifier(name);
+            result.stateVars.push({
+                name: safeName,
+                initialValue: convertInitialValue(info.init),
+                setter: `set${safeName.charAt(0).toUpperCase()}${safeName.slice(1)}`,
+            });
+        }
+    }
+    // Pass 3: event listeners, DOM manipulations, DOMContentLoaded, fetch, storage, timers, jQuery
+    traverse(ast, {
+        CallExpression(path) {
+            const { node } = path;
+            // --- addEventListener ---
+            if (t.isMemberExpression(node.callee) &&
+                t.isIdentifier(node.callee.property, { name: 'addEventListener' }) &&
+                node.arguments.length >= 2) {
+                const eventArg = node.arguments[0];
+                const handlerArg = node.arguments[1];
+                if (t.isStringLiteral(eventArg)) {
+                    const eventName = eventArg.value;
+                    if (eventName === 'DOMContentLoaded' || eventName === 'load') {
+                        const handlerBody = extractFunctionBody(handlerArg);
+                        if (handlerBody)
+                            result.effects.push(handlerBody);
+                        return;
+                    }
+                    const selector = extractDOMSelector(node.callee.object);
+                    if (selector) {
+                        result.eventHandlers.push({
+                            elementSelector: selector,
+                            event: eventName,
+                            handler: extractFunctionBody(handlerArg) || (t.isIdentifier(handlerArg) ? handlerArg.name : ''),
+                        });
+                    }
+                }
+            }
+            // --- DOM query calls → refs ---
+            if (t.isMemberExpression(node.callee)) {
+                const method = t.isIdentifier(node.callee.property) ? node.callee.property.name : '';
+                if (['getElementById', 'querySelector', 'getElementsByClassName', 'querySelectorAll'].includes(method)) {
+                    const selectorArg = node.arguments[0];
+                    if (t.isStringLiteral(selectorArg)) {
+                        result.domManipulations.push({
+                            type: method,
+                            selector: selectorArg.value,
+                            action: '', value: '',
+                        });
+                        if (method === 'getElementById') {
+                            const refName = toValidIdentifier(selectorArg.value) + 'Ref';
+                            if (!result.refs.find(r => r.name === refName)) {
+                                result.refs.push({ name: refName, selector: selectorArg.value, type: 'HTMLElement' });
+                            }
+                        }
+                    }
+                }
+            }
+            // --- fetch() calls ---
+            if (t.isIdentifier(node.callee, { name: 'fetch' }) && node.arguments.length >= 1) {
+                const urlArg = node.arguments[0];
+                const url = t.isStringLiteral(urlArg) ? urlArg.value : generate(urlArg).code;
+                let method = 'GET';
+                let hasBody = false;
+                if (node.arguments[1] && t.isObjectExpression(node.arguments[1])) {
+                    for (const prop of node.arguments[1].properties) {
+                        if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+                            if (prop.key.name === 'method' && t.isStringLiteral(prop.value)) {
+                                method = prop.value.value;
+                            }
+                            if (prop.key.name === 'body')
+                                hasBody = true;
+                        }
+                    }
+                }
+                result.fetchCalls.push({ url, method, hasBody, variableName: '' });
+            }
+            // --- localStorage / sessionStorage ---
+            if (t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object)) {
+                const objName = node.callee.object.name;
+                if ((objName === 'localStorage' || objName === 'sessionStorage') && t.isIdentifier(node.callee.property)) {
+                    const op = node.callee.property.name;
+                    if (['getItem', 'setItem', 'removeItem'].includes(op)) {
+                        const keyArg = node.arguments[0];
+                        const key = t.isStringLiteral(keyArg) ? keyArg.value : generate(keyArg).code;
+                        const value = node.arguments[1] ? generate(node.arguments[1]).code : undefined;
+                        result.storageCalls.push({
+                            storageType: objName,
+                            operation: op,
+                            key,
+                            value,
+                        });
+                    }
+                }
+            }
+            // --- setTimeout / setInterval ---
+            if (t.isIdentifier(node.callee) && ['setTimeout', 'setInterval'].includes(node.callee.name)) {
+                const handler = extractFunctionBody(node.arguments[0]) || '';
+                const delay = node.arguments[1] ? generate(node.arguments[1]).code : '0';
+                result.timerCalls.push({
+                    type: node.callee.name,
+                    handler,
+                    delay,
+                });
+            }
+            // --- jQuery patterns ---
+            if (t.isIdentifier(node.callee, { name: '$' }) || t.isIdentifier(node.callee, { name: 'jQuery' })) {
+                if (node.arguments.length >= 1 && t.isStringLiteral(node.arguments[0])) {
+                    const selector = node.arguments[0].value;
+                    // Walk up to find chained method calls
+                    const parent = path.parent;
+                    if (t.isMemberExpression(parent) && t.isIdentifier(parent.property)) {
+                        const grandParent = path.parentPath?.parent;
+                        if (t.isCallExpression(grandParent)) {
+                            const args = grandParent.arguments.map((a) => generate(a).code).join(', ');
+                            result.jqueryPatterns.push({
+                                selector,
+                                method: parent.property.name,
+                                args,
+                                original: generate(grandParent).code,
+                            });
+                        }
+                    }
+                }
+            }
+            // --- $.ajax / $.get / $.post ---
+            if (t.isMemberExpression(node.callee) &&
+                t.isIdentifier(node.callee.object, { name: '$' }) &&
+                t.isIdentifier(node.callee.property)) {
+                const ajaxMethod = node.callee.property.name;
+                if (['ajax', 'get', 'post', 'getJSON'].includes(ajaxMethod)) {
+                    const urlArg = node.arguments[0];
+                    const url = t.isStringLiteral(urlArg) ? urlArg.value : generate(urlArg).code;
+                    const method = ajaxMethod === 'post' ? 'POST' : 'GET';
+                    result.fetchCalls.push({ url, method, hasBody: ajaxMethod === 'post', variableName: '' });
+                }
+            }
+        },
+    });
+    // Pass 3b: detect property assignments on DOM elements (e.g., element.onclick = ...)
+    // and DOM mutations (innerHTML, textContent, classList, style)
+    traverse(ast, {
+        AssignmentExpression(path) {
+            const { node } = path;
+            if (!t.isMemberExpression(node.left))
+                return;
+            const prop = t.isIdentifier(node.left.property) ? node.left.property.name : '';
+            // onclick-style assignments
+            if (prop.startsWith('on')) {
+                const selector = extractDOMSelector(node.left.object);
+                if (selector) {
+                    const eventName = prop.replace(/^on/, '');
+                    result.eventHandlers.push({
+                        elementSelector: selector,
+                        event: eventName,
+                        handler: extractFunctionBody(node.right) || generate(node.right).code,
+                    });
+                }
+            }
+            // DOM mutations: innerHTML, textContent
+            if (prop === 'innerHTML' || prop === 'textContent') {
+                const selector = extractDOMSelectorDeep(node.left.object);
+                if (selector) {
+                    result.domMutations.push({
+                        type: prop,
+                        selector,
+                        value: generate(node.right).code,
+                    });
+                }
+            }
+            // Style mutations: element.style.X = Y
+            if (t.isMemberExpression(node.left.object) && t.isIdentifier(node.left.object.property, { name: 'style' })) {
+                const selector = extractDOMSelectorDeep(node.left.object.object);
+                if (selector) {
+                    result.domMutations.push({
+                        type: 'style',
+                        selector,
+                        value: `${prop}: ${generate(node.right).code}`,
+                    });
+                }
+            }
+        },
+    });
+    // Pass 3c: detect classList mutations
+    traverse(ast, {
+        CallExpression(path) {
+            const { node } = path;
+            if (t.isMemberExpression(node.callee) && t.isMemberExpression(node.callee.object)) {
+                const innerProp = t.isIdentifier(node.callee.object.property) ? node.callee.object.property.name : '';
+                const method = t.isIdentifier(node.callee.property) ? node.callee.property.name : '';
+                if (innerProp === 'classList' && ['add', 'remove', 'toggle', 'replace'].includes(method)) {
+                    const selector = extractDOMSelectorDeep(node.callee.object.object);
+                    if (selector) {
+                        const className = node.arguments[0] ? generate(node.arguments[0]).code : '';
+                        result.domMutations.push({
+                            type: `classList.${method}`,
+                            selector,
+                            value: className,
+                        });
+                    }
+                }
+            }
+        },
+    });
+    // Pass 3d: extract page templates (functions that set innerHTML with large template literals)
+    traverse(ast, {
+        FunctionDeclaration(path) {
+            const funcName = path.node.id?.name || '';
+            if (!funcName.match(/^render/i))
+                return;
+            // Look for innerHTML assignments with template literals inside this function
+            path.traverse({
+                AssignmentExpression(innerPath) {
+                    const { node } = innerPath;
+                    if (!t.isMemberExpression(node.left))
+                        return;
+                    const prop = t.isIdentifier(node.left.property) ? node.left.property.name : '';
+                    if (prop !== 'innerHTML')
+                        return;
+                    // Check if the right side is a template literal with significant HTML content
+                    if (t.isTemplateLiteral(node.right)) {
+                        const rawHtml = node.right.quasis.map((q) => q.value.raw).join('');
+                        // Only extract templates with substantial HTML content (> 100 chars with HTML tags)
+                        if (rawHtml.length > 100 && /<[a-z]/.test(rawHtml)) {
+                            const targetEl = extractDOMSelectorDeep(node.left.object);
+                            // Infer route from function name (e.g., renderHomePage -> /, renderAboutPage -> /about)
+                            const routeMatch = funcName.match(/^render(\w+?)Page$/i);
+                            const route = routeMatch
+                                ? (routeMatch[1].toLowerCase() === 'home' ? '/' : `/${routeMatch[1].toLowerCase()}`)
+                                : undefined;
+                            result.pageTemplates.push({
+                                functionName: funcName,
+                                targetElement: targetEl || 'app',
+                                htmlContent: rawHtml,
+                                route,
+                            });
+                        }
+                    }
+                },
+            });
+        },
+    });
+    // Pass 4: extract utility functions
+    traverse(ast, {
+        FunctionDeclaration(path) {
+            const body = generate(path.node).code;
+            if (!isDOMRelatedCode(body)) {
+                result.utilityCode.push(body);
+            }
+        },
+    });
+    // Pass 5: detect interactive patterns (scroll-reveal, tabs, accordion, scroll class, counters)
+    result.interactivePatterns = detectInteractivePatterns(code);
+    return result;
+}
+// --- Helpers ---
+function extractDOMSelector(node) {
+    if (t.isCallExpression(node) && t.isMemberExpression(node.callee)) {
+        const method = t.isIdentifier(node.callee.property) ? node.callee.property.name : '';
+        if (['getElementById', 'querySelector', 'getElementsByClassName'].includes(method)) {
+            const arg = node.arguments[0];
+            if (t.isStringLiteral(arg))
+                return arg.value;
+        }
+    }
+    return null;
+}
+/** Walk deeper through variable references to find DOM selector. */
+function extractDOMSelectorDeep(node) {
+    const direct = extractDOMSelector(node);
+    if (direct)
+        return direct;
+    // If it's an identifier, it might be a variable holding a DOM ref
+    if (t.isIdentifier(node))
+        return node.name;
+    return null;
+}
+function extractFunctionBody(node) {
+    if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+        if (t.isBlockStatement(node.body)) {
+            const stmts = node.body.body.map((s) => generate(s).code);
+            return stmts.join('\n');
+        }
+        return generate(node.body).code;
+    }
+    if (t.isIdentifier(node))
+        return node.name;
+    return null;
+}
+function isDOMCallExpression(node) {
+    if (t.isCallExpression(node) && t.isMemberExpression(node.callee)) {
+        const obj = node.callee.object;
+        const prop = node.callee.property;
+        if (t.isIdentifier(obj, { name: 'document' }) && t.isIdentifier(prop)) {
+            return ['getElementById', 'querySelector', 'querySelectorAll',
+                'getElementsByClassName', 'getElementsByTagName', 'createElement'].includes(prop.name);
+        }
+    }
+    return false;
+}
+function isDOMRelatedCode(code) {
+    return /document\.|\.innerHTML|\.textContent|\.style\.|\.classList|\.addEventListener|\.appendChild|\.removeChild|\$\(/.test(code);
+}
+function convertInitialValue(value) {
+    if (value === 'true' || value === 'false')
+        return value;
+    if (value === 'null' || value === 'undefined')
+        return value;
+    if (/^\d+(\.\d+)?$/.test(value))
+        return value;
+    if (/^['"`]/.test(value))
+        return value;
+    if (value.startsWith('['))
+        return value;
+    if (value.startsWith('{'))
+        return value;
+    return `'${value}'`;
+}
+function fallbackAnalyze(code) {
+    const result = emptyAnalysis();
+    const varPattern = /(?:let|var)\s+(\w+)\s*=\s*([^;]+);/g;
+    let match;
+    while ((match = varPattern.exec(code)) !== null) {
+        const name = toValidIdentifier(match[1]);
+        const value = match[2].trim();
+        if (/document\./.test(value))
+            continue;
+        const mutationPattern = new RegExp(`\\b${match[1]}\\s*=(?!=)`, 'g');
+        const mutations = code.match(mutationPattern);
+        if (mutations && mutations.length > 1) {
+            result.stateVars.push({
+                name,
+                initialValue: convertInitialValue(value),
+                setter: `set${name.charAt(0).toUpperCase()}${name.slice(1)}`,
+            });
+        }
+    }
+    // Event listeners
+    const listenerPattern = /(?:document\.)?(?:getElementById|querySelector(?:All)?)\s*\(\s*['"`]([^'"`]+)['"`]\s*\)\.addEventListener\s*\(\s*['"`](\w+)['"`]\s*,\s*(?:function\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\w+))\s*\)/g;
+    let listenerMatch;
+    while ((listenerMatch = listenerPattern.exec(code)) !== null) {
+        result.eventHandlers.push({
+            elementSelector: listenerMatch[1],
+            event: listenerMatch[2],
+            handler: listenerMatch[3] || listenerMatch[4] || '',
+        });
+    }
+    // DOMContentLoaded
+    const readyPattern = /document\.addEventListener\s*\(\s*['"`]DOMContentLoaded['"`]\s*,\s*(?:function\s*\([^)]*\)\s*\{([\s\S]*?)\}|\(\)\s*=>\s*\{([\s\S]*?)\})/g;
+    let readyMatch;
+    while ((readyMatch = readyPattern.exec(code)) !== null) {
+        const body = readyMatch[1] || readyMatch[2] || '';
+        if (body.trim())
+            result.effects.push(body.trim());
+    }
+    // fetch calls via regex
+    const fetchPattern = /fetch\s*\(\s*['"`]([^'"`]+)['"`]/g;
+    let fetchMatch;
+    while ((fetchMatch = fetchPattern.exec(code)) !== null) {
+        result.fetchCalls.push({ url: fetchMatch[1], method: 'GET', hasBody: false, variableName: '' });
+    }
+    // localStorage/sessionStorage
+    const storagePattern = /(localStorage|sessionStorage)\.(getItem|setItem|removeItem)\s*\(\s*['"`]([^'"`]+)['"`]/g;
+    let storageMatch;
+    while ((storageMatch = storagePattern.exec(code)) !== null) {
+        result.storageCalls.push({
+            storageType: storageMatch[1],
+            operation: storageMatch[2],
+            key: storageMatch[3],
+        });
+    }
+    // Detect interactive patterns in fallback mode too
+    result.interactivePatterns = detectInteractivePatterns(code);
+    return result;
+}
+/**
+ * Convert an event handler body from DOM-manipulating code to React-style code.
+ * Handles common patterns: state mutations, DOM reads, form resets, preventDefault.
+ */
+export function convertEventHandlerToReact(handler, stateVars) {
+    let converted = handler;
+    // Convert state variable mutations to setter calls
+    for (const sv of stateVars) {
+        converted = converted.replace(new RegExp(`${sv.name}\\s*=\\s*([^;]+)`, 'g'), `${sv.setter}($1)`);
+        converted = converted.replace(new RegExp(`${sv.name}\\s*\\+=\\s*([^;]+)`, 'g'), `${sv.setter}(prev => prev + $1)`);
+        converted = converted.replace(new RegExp(`${sv.name}\\s*-=\\s*([^;]+)`, 'g'), `${sv.setter}(prev => prev - $1)`);
+        converted = converted.replace(new RegExp(`${sv.name}\\+\\+`, 'g'), `${sv.setter}(prev => prev + 1)`);
+        converted = converted.replace(new RegExp(`${sv.name}--`, 'g'), `${sv.setter}(prev => prev - 1)`);
+    }
+    // Convert document.getElementById('x').value in variable declarations
+    // const name = document.getElementById('name').value → const name = new FormData(e.currentTarget).get('name') as string
+    converted = converted.replace(/(?:const|let|var)\s+(\w+)\s*=\s*document\.getElementById\(['"](\w+)['"]\)\.value\s*;?/g, 'const $1 = new FormData(e.currentTarget).get(\'$2\') as string;');
+    // Convert bare document.getElementById('x').value references (not in declarations)
+    converted = converted.replace(/document\.getElementById\(['"](\w+)['"]\)\.value/g, '(new FormData(e.currentTarget).get(\'$1\') as string || \'\')');
+    // Convert this.reset() (form context) to e.currentTarget.reset()
+    converted = converted.replace(/this\.reset\(\)/g, '(e.target as HTMLFormElement).reset()');
+    // Remove standalone document.getElementById references used for DOM manipulation (non-value reads)
+    converted = converted.replace(/(?:const|let|var)\s+\w+\s*=\s*document\.getElementById\(['"][^'"]+['"]\)\s*;?\n?/g, '');
+    return converted;
+}
+//# sourceMappingURL=js-analyzer.js.map