@grafema/core 0.2.5-beta → 0.2.7

package/dist/plugins/analysis/ReactAnalyzer.js

@@ -13,82 +13,14 @@ import { readFileSync } from 'fs';
 import { parse } from '@babel/parser';
 import traverseModule from '@babel/traverse';
 import { Plugin, createSuccessResult, createErrorResult } from '../Plugin.js';
+import { NodeFactory } from '../../core/NodeFactory.js';
 import { getLine, getColumn } from './ast/utils/location.js';
+import { resolveNodeFile } from '../../utils/resolveNodeFile.js';
+import { REACT_HOOKS } from './react-internal/types.js';
+import { analyzeBrowserAPI } from './react-internal/browser-api.js';
+import { isReactComponent, analyzeJSXElement, analyzeJSXAttribute, analyzeForwardRef, analyzeCreateContext, } from './react-internal/jsx.js';
+import { analyzeHook, checkEffectIssues } from './react-internal/hooks.js';
 const traverse = traverseModule.default || traverseModule;
-// React event handlers mapping
-const REACT_EVENTS = {
-    // Mouse events
-    onClick: 'click', onDoubleClick: 'dblclick', onContextMenu: 'contextmenu',
-    onMouseDown: 'mousedown', onMouseUp: 'mouseup', onMouseEnter: 'mouseenter',
-    onMouseLeave: 'mouseleave', onMouseMove: 'mousemove', onMouseOver: 'mouseover',
-    onMouseOut: 'mouseout',
-    // Keyboard events
-    onKeyDown: 'keydown', onKeyUp: 'keyup', onKeyPress: 'keypress',
-    // Focus events
-    onFocus: 'focus', onBlur: 'blur', onFocusCapture: 'focus:capture',
-    // Form events
-    onSubmit: 'submit', onReset: 'reset', onChange: 'change', onInput: 'input',
-    onInvalid: 'invalid',
-    // Touch events
-    onTouchStart: 'touchstart', onTouchMove: 'touchmove', onTouchEnd: 'touchend',
-    onTouchCancel: 'touchcancel',
-    // Drag events
-    onDragStart: 'dragstart', onDrag: 'drag', onDragEnd: 'dragend',
-    onDragEnter: 'dragenter', onDragOver: 'dragover', onDragLeave: 'dragleave',
-    onDrop: 'drop',
-    // Scroll/Wheel events
-    onScroll: 'scroll', onWheel: 'wheel',
-    // Clipboard events
-    onCopy: 'copy', onCut: 'cut', onPaste: 'paste',
-    // Composition events
-    onCompositionStart: 'compositionstart', onCompositionUpdate: 'compositionupdate',
-    onCompositionEnd: 'compositionend',
-    // Media events
-    onPlay: 'play', onPause: 'pause', onEnded: 'ended', onTimeUpdate: 'timeupdate',
-    onLoadedData: 'loadeddata', onLoadedMetadata: 'loadedmetadata',
-    onCanPlay: 'canplay', onWaiting: 'waiting', onSeeking: 'seeking',
-    onSeeked: 'seeked', onError: 'error', onVolumeChange: 'volumechange',
-    // Image events
-    onLoad: 'load',
-    // Animation events
-    onAnimationStart: 'animationstart', onAnimationEnd: 'animationend',
-    onAnimationIteration: 'animationiteration',
-    // Transition events
-    onTransitionEnd: 'transitionend',
-    // Pointer events
-    onPointerDown: 'pointerdown', onPointerUp: 'pointerup', onPointerMove: 'pointermove',
-    onPointerEnter: 'pointerenter', onPointerLeave: 'pointerleave',
-    onPointerCancel: 'pointercancel', onGotPointerCapture: 'gotpointercapture',
-    onLostPointerCapture: 'lostpointercapture'
-};
-// React hooks that need tracking
-const REACT_HOOKS = [
-    'useState', 'useEffect', 'useLayoutEffect', 'useInsertionEffect',
-    'useCallback', 'useMemo', 'useRef', 'useReducer', 'useContext',
-    'useImperativeHandle', 'useDebugValue', 'useDeferredValue',
-    'useTransition', 'useId', 'useSyncExternalStore'
-];
-// Browser APIs that create side effects
-const BROWSER_APIS = {
-    timers: ['setTimeout', 'setInterval', 'requestAnimationFrame', 'requestIdleCallback'],
-    cleanup: {
-        setTimeout: 'clearTimeout',
-        setInterval: 'clearInterval',
-        requestAnimationFrame: 'cancelAnimationFrame',
-        requestIdleCallback: 'cancelIdleCallback'
-    },
-    observers: ['IntersectionObserver', 'ResizeObserver', 'MutationObserver', 'PerformanceObserver'],
-    storage: ['localStorage', 'sessionStorage'],
-    async: ['fetch', 'XMLHttpRequest', 'WebSocket', 'EventSource'],
-    dom: ['document', 'getElementById', 'querySelector', 'querySelectorAll'],
-    workers: ['Worker', 'SharedWorker', 'ServiceWorker'],
-    geolocation: ['grafemagator.geolocation'],
-    notifications: ['Notification'],
-    fullscreen: ['requestFullscreen', 'exitFullscreen'],
-    clipboard: ['grafemagator.clipboard'],
-    history: ['history.pushState', 'history.replaceState'],
-    blocking: ['alert', 'confirm', 'prompt']
-};
 export class ReactAnalyzer extends Plugin {
     get metadata() {
         return {
@@ -117,6 +49,7 @@ export class ReactAnalyzer extends Plugin {
         const logger = this.log(context);
         try {
             const { graph } = context;
+            const projectPath = context.manifest?.projectPath ?? '';
             const modules = await this.getModules(graph);
             const stats = {
                 components: 0,
@@ -132,7 +65,7 @@ export class ReactAnalyzer extends Plugin {
                     continue;
                 }
                 try {
-                    const result = await this.analyzeModule(module, graph);
+                    const result = await this.analyzeModule(module, graph, projectPath);
                     stats.components += result.components;
                     stats.hooks += result.hooks;
                     stats.events += result.events;
@@ -168,8 +101,8 @@ export class ReactAnalyzer extends Plugin {
         // Could also check for React import in .js/.ts files
         return false;
     }
-    async analyzeModule(module, graph) {
-        const code = readFileSync(module.file, 'utf-8');
+    async analyzeModule(module, graph, projectPath) {
+        const code = readFileSync(resolveNodeFile(module.file, projectPath), 'utf-8');
         const ast = parse(code, {
             sourceType: 'module',
             plugins: ['jsx', 'typescript']
@@ -204,7 +137,7 @@ export class ReactAnalyzer extends Plugin {
         traverse(ast, {
             // Arrow function components: const App = () => ...
             VariableDeclarator: (path) => {
-                if (this.isReactComponent(path)) {
+                if (isReactComponent(path)) {
                     const node = path.node;
                     const name = node.id.name;
                     const component = {
@@ -221,7 +154,7 @@ export class ReactAnalyzer extends Plugin {
             },
             // Function declaration components: function App() {...}
             FunctionDeclaration: (path) => {
-                if (this.isReactComponent(path)) {
+                if (isReactComponent(path)) {
                     const name = path.node.id?.name;
                     if (!name)
                         return;
@@ -244,33 +177,33 @@ export class ReactAnalyzer extends Plugin {
                 const callee = path.node.callee;
                 // Detect React hooks
                 if (callee.type === 'Identifier' && REACT_HOOKS.includes(callee.name)) {
-                    const hookData = this.analyzeHook(path, filePath);
+                    const hookData = analyzeHook(path, filePath);
                     if (hookData) {
                         analysis.hooks.push(hookData);
                         // Check for issues in hooks
                         if (callee.name === 'useEffect' || callee.name === 'useLayoutEffect') {
-                            this.checkEffectIssues(path, filePath, analysis, hookData, importedIdentifiers);
+                            checkEffectIssues(path, filePath, analysis, hookData, importedIdentifiers);
                         }
                     }
                 }
                 // Detect forwardRef
                 if (callee.type === 'Identifier' && callee.name === 'forwardRef') {
-                    this.analyzeForwardRef(path, filePath, analysis);
+                    analyzeForwardRef(path, filePath, analysis);
                 }
                 // Detect createContext
                 if (callee.type === 'Identifier' && callee.name === 'createContext') {
-                    this.analyzeCreateContext(path, filePath, analysis);
+                    analyzeCreateContext(path, filePath, analysis);
                 }
                 // Detect browser APIs
-                this.analyzeBrowserAPI(path, filePath, analysis);
+                analyzeBrowserAPI(path, filePath, analysis);
             },
             // JSX elements
             JSXElement: (path) => {
-                this.analyzeJSXElement(path, filePath, analysis);
+                analyzeJSXElement(path, filePath, analysis);
             },
             // JSX attributes (for event handlers and props)
             JSXAttribute: (path) => {
-                this.analyzeJSXAttribute(path, filePath, analysis);
+                analyzeJSXAttribute(path, filePath, analysis);
             }
         });
         // Add all nodes and edges to graph
@@ -284,830 +217,6 @@ export class ReactAnalyzer extends Plugin {
             edges: analysis.edges.length
         };
     }
-    /**
-     * Check if a function is a React component (returns JSX)
-     */
-    isReactComponent(path) {
-        let hasJSXReturn = false;
-        // Check for arrow function or function
-        const node = path.node;
-        const func = node.init || path.node;
-        if (!func)
-            return false;
-        // Must be a function
-        if (func.type !== 'ArrowFunctionExpression' &&
-            func.type !== 'FunctionExpression' &&
-            func.type !== 'FunctionDeclaration') {
-            return false;
-        }
-        // Name must start with uppercase (React component convention)
-        const pathNode = path.node;
-        const name = pathNode.id?.name;
-        if (!name || !/^[A-Z]/.test(name)) {
-            return false;
-        }
-        // Check if body contains JSX
-        path.traverse({
-            JSXElement: () => { hasJSXReturn = true; },
-            JSXFragment: () => { hasJSXReturn = true; }
-        });
-        return hasJSXReturn;
-    }
-    /**
-     * Analyze React hooks
-     */
-    analyzeHook(path, filePath) {
-        const callee = path.node.callee;
-        const hookName = callee.name;
-        const args = path.node.arguments;
-        const hookBase = {
-            file: filePath,
-            line: getLine(path.node),
-            column: getColumn(path.node),
-            hookName
-        };
-        switch (hookName) {
-            case 'useState': {
-                // const [state, setState] = useState(initialValue)
-                const parent = path.parent;
-                if (parent.type === 'VariableDeclarator' &&
-                    parent.id?.type === 'ArrayPattern' &&
-                    parent.id.elements?.length === 2) {
-                    const stateName = parent.id.elements[0]?.name;
-                    const setterName = parent.id.elements[1]?.name;
-                    const initialValue = args[0];
-                    return {
-                        id: `react:state#${stateName}#${filePath}:${hookBase.line}`,
-                        type: 'react:state',
-                        ...hookBase,
-                        stateName,
-                        setterName,
-                        initialValue: this.getExpressionValue(initialValue)
-                    };
-                }
-                break;
-            }
-            case 'useEffect':
-            case 'useLayoutEffect':
-            case 'useInsertionEffect': {
-                // useEffect(() => {...}, [deps])
-                const callback = args[0];
-                const depsArg = args[1];
-                const deps = this.extractDeps(depsArg);
-                const hasCleanup = this.hasCleanupReturn(callback);
-                const effectType = hookName === 'useEffect' ? 'react:effect' :
-                    hookName === 'useLayoutEffect' ? 'react:layout-effect' :
-                        'react:insertion-effect';
-                return {
-                    id: `${effectType}#${filePath}:${hookBase.line}`,
-                    type: effectType,
-                    ...hookBase,
-                    deps,
-                    hasCleanup,
-                    depsType: !depsArg ? 'none' : (deps?.length === 0 ? 'empty' : 'array')
-                };
-            }
-            case 'useCallback': {
-                // const fn = useCallback(() => {...}, [deps])
-                const parent = path.parent;
-                const callbackName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
-                const depsArg = args[1];
-                const deps = this.extractDeps(depsArg);
-                return {
-                    id: `react:callback#${callbackName || 'anonymous'}#${filePath}:${hookBase.line}`,
-                    type: 'react:callback',
-                    ...hookBase,
-                    callbackName,
-                    deps
-                };
-            }
-            case 'useMemo': {
-                // const value = useMemo(() => computation, [deps])
-                const parent = path.parent;
-                const memoName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
-                const depsArg = args[1];
-                const deps = this.extractDeps(depsArg);
-                return {
-                    id: `react:memo#${memoName || 'anonymous'}#${filePath}:${hookBase.line}`,
-                    type: 'react:memo',
-                    ...hookBase,
-                    memoName,
-                    deps
-                };
-            }
-            case 'useRef': {
-                // const ref = useRef(initialValue)
-                const parent = path.parent;
-                const refName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
-                const initialValue = args[0];
-                return {
-                    id: `react:ref#${refName || 'anonymous'}#${filePath}:${hookBase.line}`,
-                    type: 'react:ref',
-                    ...hookBase,
-                    refName,
-                    initialValue: this.getExpressionValue(initialValue)
-                };
-            }
-            case 'useReducer': {
-                // const [state, dispatch] = useReducer(reducer, initialState)
-                const parent = path.parent;
-                if (parent.type === 'VariableDeclarator' &&
-                    parent.id?.type === 'ArrayPattern' &&
-                    parent.id.elements && parent.id.elements.length >= 2) {
-                    const stateName = parent.id.elements[0]?.name;
-                    const dispatchName = parent.id.elements[1]?.name;
-                    const reducerArg = args[0];
-                    const reducerName = reducerArg?.type === 'Identifier' ? reducerArg.name : null;
-                    return {
-                        id: `react:reducer#${stateName}#${filePath}:${hookBase.line}`,
-                        type: 'react:reducer',
-                        ...hookBase,
-                        stateName,
-                        dispatchName,
-                        reducerName
-                    };
-                }
-                break;
-            }
-            case 'useContext': {
-                // const value = useContext(Context)
-                const parent = path.parent;
-                const valueName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
-                const contextArg = args[0];
-                const contextName = contextArg?.type === 'Identifier' ? contextArg.name : null;
-                return {
-                    id: `react:context-use#${contextName || 'unknown'}#${filePath}:${hookBase.line}`,
-                    type: 'react:context-use',
-                    ...hookBase,
-                    valueName,
-                    contextName
-                };
-            }
-            case 'useImperativeHandle': {
-                // useImperativeHandle(ref, () => ({ method1, method2 }), [deps])
-                const refArg = args[0];
-                const refName = refArg?.type === 'Identifier' ? refArg.name : null;
-                const createHandle = args[1];
-                // Extract exposed methods
-                const exposedMethods = [];
-                if (createHandle?.type === 'ArrowFunctionExpression' ||
-                    createHandle?.type === 'FunctionExpression') {
-                    const body = createHandle.body;
-                    if (body.type === 'ObjectExpression') {
-                        const objExpr = body;
-                        for (const prop of objExpr.properties) {
-                            if (prop.key?.name) {
-                                exposedMethods.push(prop.key.name);
-                            }
-                        }
-                    }
-                }
-                return {
-                    id: `react:imperative-handle#${filePath}:${hookBase.line}`,
-                    type: 'react:imperative-handle',
-                    ...hookBase,
-                    refName,
-                    exposedMethods
-                };
-            }
-        }
-        return null;
-    }
-    /**
-     * Extract dependency array from hook
-     */
-    extractDeps(depsArg) {
-        if (!depsArg)
-            return null; // No deps argument
-        if (depsArg.type !== 'ArrayExpression')
-            return ['<dynamic>'];
-        const arrExpr = depsArg;
-        return arrExpr.elements.map(el => {
-            if (!el)
-                return '<empty>';
-            if (el.type === 'Identifier')
-                return el.name;
-            if (el.type === 'MemberExpression') {
-                return this.getMemberExpressionName(el);
-            }
-            return '<expression>';
-        });
-    }
-    getMemberExpressionName(node) {
-        if (node.type !== 'MemberExpression') {
-            return node.name || '<unknown>';
-        }
-        const memExpr = node;
-        const object = this.getMemberExpressionName(memExpr.object);
-        const property = memExpr.property.name || memExpr.property.value || '<computed>';
-        return `${object}.${property}`;
-    }
-    /**
-     * Check if effect callback has cleanup return
-     */
-    hasCleanupReturn(callback) {
-        if (!callback)
-            return false;
-        if (callback.type !== 'ArrowFunctionExpression' &&
-            callback.type !== 'FunctionExpression') {
-            return false;
-        }
-        // Simple AST traversal without using babel traverse
-        const checkForCleanupReturn = (node) => {
-            if (!node)
-                return false;
-            if (node.type === 'ReturnStatement') {
-                const retStmt = node;
-                const arg = retStmt.argument;
-                if (arg && (arg.type === 'ArrowFunctionExpression' ||
-                    arg.type === 'FunctionExpression')) {
-                    return true;
-                }
-            }
-            // Check body
-            const nodeWithBody = node;
-            if (nodeWithBody.body) {
-                if (Array.isArray(nodeWithBody.body)) {
-                    return nodeWithBody.body.some(n => checkForCleanupReturn(n));
-                }
-                else if (nodeWithBody.body.type === 'BlockStatement') {
-                    const blockStmt = nodeWithBody.body;
-                    if (blockStmt.body) {
-                        return blockStmt.body.some(n => checkForCleanupReturn(n));
-                    }
-                }
-                else {
-                    return checkForCleanupReturn(nodeWithBody.body);
-                }
-            }
-            return false;
-        };
-        return checkForCleanupReturn(callback);
-    }
-    /**
-     * Check for issues in useEffect/useLayoutEffect
-     */
-    checkEffectIssues(path, filePath, analysis, hookData, importedIdentifiers = new Set()) {
-        const callback = path.node.arguments[0];
-        if (!callback)
-            return;
-        const deps = hookData.deps;
-        const usedVars = new Set();
-        const setterCalls = new Set();
-        const callbackParams = new Set(); // Track parameters of nested callback functions
-        // Simple recursive AST walker to collect identifiers
-        const collectIdentifiers = (node, _parentType = null, isPropertyKey = false) => {
-            if (!node)
-                return;
-            if (node.type === 'Identifier') {
-                const id = node;
-                // Skip if it's a property access key
-                if (!isPropertyKey && !callbackParams.has(id.name)) {
-                    usedVars.add(id.name);
-                }
-                return;
-            }
-            if (node.type === 'MemberExpression') {
-                const memExpr = node;
-                // Check for ref.current pattern (valid for stable refs)
-                if (memExpr.property?.type === 'Identifier' && memExpr.property.name === 'current') {
-                    // This is likely a ref.current access - collect only the ref name, not 'current'
-                    collectIdentifiers(memExpr.object, 'MemberExpression', false);
-                    return;
-                }
-                collectIdentifiers(memExpr.object, 'MemberExpression', false);
-                // Skip property name
-                return;
-            }
-            if (node.type === 'CallExpression') {
-                const callExpr = node;
-                const callee = callExpr.callee;
-                if (callee.type === 'Identifier' && callee.name?.startsWith('set')) {
-                    const arg = callExpr.arguments[0];
-                    if (arg?.type === 'ArrowFunctionExpression' ||
-                        arg?.type === 'FunctionExpression') {
-                        setterCalls.add(callee.name);
-                    }
-                }
-                collectIdentifiers(callee, 'CallExpression', false);
-                callExpr.arguments?.forEach(arg => collectIdentifiers(arg, 'CallExpression', false));
-                return;
-            }
-            if (node.type === 'ObjectProperty') {
-                const prop = node;
-                // Skip key, process value
-                collectIdentifiers(prop.value, 'ObjectProperty', false);
-                return;
-            }
-            // Handle function parameters - skip them (AC-1: callback parameters are not external deps)
-            if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') {
-                const func = node;
-                // Collect parameter names from nested callbacks
-                func.params?.forEach(p => {
-                    if (p.type === 'Identifier' && p.name) {
-                        callbackParams.add(p.name); // Add to global tracking
-                    }
-                });
-                const collectInBody = (bodyNode) => {
-                    if (!bodyNode)
-                        return;
-                    if (bodyNode.type === 'Identifier') {
-                        const id = bodyNode;
-                        if (!callbackParams.has(id.name)) {
-                            usedVars.add(id.name);
-                        }
-                    }
-                    else if (typeof bodyNode === 'object') {
-                        Object.values(bodyNode).forEach(child => {
-                            if (child && typeof child === 'object') {
-                                if (Array.isArray(child)) {
-                                    child.forEach(c => collectInBody(c));
-                                }
-                                else {
-                                    collectInBody(child);
-                                }
-                            }
-                        });
-                    }
-                };
-                collectInBody(func.body);
-                return;
-            }
-            // Recurse into child nodes
-            if (typeof node === 'object') {
-                Object.entries(node).forEach(([key, child]) => {
-                    if (key === 'loc' || key === 'start' || key === 'end' || key === 'type')
-                        return;
-                    if (child && typeof child === 'object') {
-                        if (Array.isArray(child)) {
-                            child.forEach(c => collectIdentifiers(c, node.type, false));
-                        }
-                        else {
-                            collectIdentifiers(child, node.type, false);
-                        }
-                    }
-                });
-            }
-        };
-        collectIdentifiers(callback);
-        // Check for stale closures
-        if (deps !== null && deps.length >= 0) { // Has deps array
-            const depsSet = new Set(deps);
-            // Hooks that don't cause stale closure issues
-            const safeHooks = ['useState', 'useReducer', 'useRef', 'useCallback', 'useMemo',
-                'useEffect', 'useLayoutEffect', 'useContext'];
-            const setterPrefixes = ['set'];
-            for (const used of usedVars) {
-                // Skip safe identifiers
-                if (safeHooks.includes(used))
-                    continue;
-                if (setterPrefixes.some(p => used.startsWith(p)))
-                    continue;
-                if (depsSet.has(used))
-                    continue;
-                if (used === 'console' || used === 'window' || used === 'document')
-                    continue;
-                if (used === 'Math' || used === 'JSON' || used === 'Date')
-                    continue;
-                if (used === 'undefined' || used === 'null' || used === 'true' || used === 'false')
-                    continue;
-                // AC-2: Skip imported identifiers (stable references)
-                if (importedIdentifiers.has(used))
-                    continue;
-                // This variable is used but not in deps - potential stale closure
-                const issue = {
-                    id: `issue:stale-closure#${used}#${filePath}:${hookData.line}`,
-                    type: 'issue:stale-closure',
-                    file: filePath,
-                    line: hookData.line,
-                    variable: used,
-                    hookType: hookData.hookName,
-                    deps: deps,
-                    message: `Variable '${used}' is used in ${hookData.hookName} but not listed in dependencies`
-                };
-                analysis.issues.push(issue);
-            }
-        }
-        // Check for missing cleanup
-        this.checkMissingCleanup(callback, filePath, analysis, hookData);
-    }
-    /**
-     * Check for missing cleanup in effect callback
-     */
-    checkMissingCleanup(callback, filePath, analysis, hookData) {
-        const hasCleanup = hookData.hasCleanup;
-        // Simple recursive AST walker
-        const checkNode = (node, _parent = null) => {
-            if (!node || typeof node !== 'object')
-                return;
-            if (node.type === 'CallExpression') {
-                const callExpr = node;
-                const callee = callExpr.callee;
-                const loc = callExpr.loc;
-                // Check for timer APIs
-                if (callee?.type === 'Identifier') {
-                    const api = callee.name;
-                    if (api && BROWSER_APIS.timers.includes(api)) {
-                        // Timer called without storing reference
-                        if (!hasCleanup && api === 'requestAnimationFrame') {
-                            analysis.issues.push({
-                                id: `issue:raf-leak#${filePath}:${loc?.start?.line || 0}`,
-                                type: 'issue:raf-leak',
-                                file: filePath,
-                                line: loc?.start?.line || 0,
-                                message: `requestAnimationFrame called without cleanup - will leak on unmount`
-                            });
-                        }
-                    }
-                }
-            }
-            if (node.type === 'NewExpression') {
-                const newExpr = node;
-                const callee = newExpr.callee;
-                const loc = newExpr.loc;
-                // Check for WebSocket without cleanup
-                if (callee?.type === 'Identifier' && callee.name === 'WebSocket') {
-                    if (!hasCleanup) {
-                        analysis.issues.push({
-                            id: `issue:missing-cleanup#websocket#${filePath}:${loc?.start?.line || 0}`,
-                            type: 'issue:missing-cleanup',
-                            file: filePath,
-                            line: loc?.start?.line || 0,
-                            api: 'WebSocket',
-                            message: `WebSocket created without cleanup - connection will leak on unmount`
-                        });
-                    }
-                }
-                // Check for observers without cleanup
-                if (callee?.type === 'Identifier' && callee.name && BROWSER_APIS.observers.includes(callee.name)) {
-                    if (!hasCleanup) {
-                        analysis.issues.push({
-                            id: `issue:missing-cleanup#${callee.name}#${filePath}:${loc?.start?.line || 0}`,
-                            type: 'issue:missing-cleanup',
-                            file: filePath,
-                            line: loc?.start?.line || 0,
-                            api: callee.name,
-                            message: `${callee.name} created without disconnect in cleanup`
-                        });
-                    }
-                }
-            }
-            // Recurse into child nodes
-            Object.entries(node).forEach(([key, child]) => {
-                if (key === 'loc' || key === 'start' || key === 'end' || key === 'type')
-                    return;
-                if (child && typeof child === 'object') {
-                    if (Array.isArray(child)) {
-                        child.forEach(c => checkNode(c, node));
-                    }
-                    else {
-                        checkNode(child, node);
-                    }
-                }
-            });
-        };
-        checkNode(callback);
-    }
-    /**
-     * Analyze JSX element for component rendering
-     */
-    analyzeJSXElement(path, filePath, analysis) {
-        const openingElement = path.node.openingElement;
-        const elementName = this.getJSXElementName(openingElement.name);
-        // Skip native HTML elements (lowercase)
-        if (/^[a-z]/.test(elementName)) {
-            return;
-        }
-        // This is a React component being rendered
-        // Find parent component
-        let parentComponent = null;
-        let parentPath = path.parentPath;
-        while (parentPath) {
-            if (parentPath.node.type === 'FunctionDeclaration' ||
-                parentPath.node.type === 'ArrowFunctionExpression' ||
-                parentPath.node.type === 'FunctionExpression') {
-                // Check if this function is a component
-                const funcName = this.getFunctionName(parentPath);
-                if (funcName && /^[A-Z]/.test(funcName)) {
-                    parentComponent = funcName;
-                    break;
-                }
-            }
-            parentPath = parentPath.parentPath;
-        }
-        if (parentComponent) {
-            analysis.edges.push({
-                edgeType: 'RENDERS',
-                src: `react:component#${parentComponent}`,
-                dst: `react:component#${elementName}`,
-                file: filePath,
-                line: getLine(openingElement)
-            });
-        }
-    }
-    getJSXElementName(nameNode) {
-        if (nameNode.type === 'JSXIdentifier') {
-            return nameNode.name;
-        }
-        if (nameNode.type === 'JSXMemberExpression') {
-            const memExpr = nameNode;
-            return `${this.getJSXElementName(memExpr.object)}.${memExpr.property.name}`;
-        }
-        return '<unknown>';
-    }
-    getFunctionName(path) {
-        // Arrow function assigned to variable
-        const parent = path.parent;
-        if (parent?.type === 'VariableDeclarator') {
-            return parent.id?.name || null;
-        }
-        // Function declaration
-        const node = path.node;
-        if (node.id?.name) {
-            return node.id.name;
-        }
-        return null;
-    }
-    /**
-     * Analyze JSX attribute for props and event handlers
-     */
-    analyzeJSXAttribute(path, filePath, analysis) {
-        const attr = path.node;
-        if (!attr.name || attr.name.type !== 'JSXIdentifier')
-            return;
-        const attrName = attr.name.name;
-        // Get parent JSX element info first
-        const jsxOpeningElement = path.parent;
-        let componentName = null;
-        let isReactComponent = false;
-        if (jsxOpeningElement?.type === 'JSXOpeningElement' && jsxOpeningElement.name) {
-            componentName = this.getJSXElementName(jsxOpeningElement.name);
-            isReactComponent = /^[A-Z]/.test(componentName);
-        }
-        // Check if it's an event handler
-        if (REACT_EVENTS[attrName]) {
-            const eventType = REACT_EVENTS[attrName];
-            const handler = attr.value;
-            let handlerName = '<inline>';
-            if (handler?.type === 'JSXExpressionContainer') {
-                const expr = handler.expression;
-                if (expr?.type === 'Identifier') {
-                    handlerName = expr.name;
-                }
-                else if (expr?.type === 'MemberExpression') {
-                    handlerName = this.getMemberExpressionName(expr);
-                }
-            }
-            const event = {
-                id: `dom:event#${eventType}#${filePath}:${getLine(attr)}`,
-                type: 'dom:event',
-                eventType,
-                reactProp: attrName,
-                handler: handlerName,
-                file: filePath,
-                line: getLine(attr)
-            };
-            analysis.events.push(event);
-        }
-        // For React components (uppercase), create PASSES_PROP edges for all props
-        if (isReactComponent && componentName && attrName !== 'key' && attrName !== 'ref' && attrName !== 'children') {
-            let propValue = '<expression>';
-            const value = attr.value;
-            if (value?.type === 'StringLiteral') {
-                propValue = value.value || '';
-            }
-            else if (value?.type === 'JSXExpressionContainer') {
-                propValue = this.getExpressionValue(value.expression);
-            }
-            else if (value === null) {
-                propValue = 'true'; // Boolean shorthand
-            }
-            // Find parent component
-            let parentComponent = null;
-            let parentPath = path.parentPath;
-            while (parentPath) {
-                const node = parentPath.node;
-                if (node.type === 'FunctionDeclaration' && node.id?.name) {
-                    if (/^[A-Z]/.test(node.id.name)) {
-                        parentComponent = node.id.name;
-                        break;
-                    }
-                }
-                else if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') {
-                    const funcName = this.getFunctionName(parentPath);
-                    if (funcName && /^[A-Z]/.test(funcName)) {
-                        parentComponent = funcName;
-                        break;
-                    }
-                }
-                parentPath = parentPath.parentPath;
-            }
-            if (parentComponent) {
-                analysis.edges.push({
-                    edgeType: 'PASSES_PROP',
-                    src: `react:component#${parentComponent}`,
-                    dst: `react:component#${componentName}`,
-                    propName: attrName,
-                    propValue,
-                    file: filePath,
-                    line: getLine(attr)
-                });
-            }
-        }
-    }
-    /**
-     * Analyze forwardRef usage
-     */
-    analyzeForwardRef(path, filePath, analysis) {
-        const parent = path.parent;
-        const componentName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
-        if (componentName) {
-            analysis.components.push({
-                id: `react:component#${componentName}#${filePath}:${getLine(path.node)}`,
-                type: 'react:component',
-                name: componentName,
-                file: filePath,
-                line: getLine(path.node),
-                column: getColumn(path.node),
-                kind: 'forwardRef'
-            });
-        }
-    }
-    /**
-     * Analyze createContext usage
-     */
-    analyzeCreateContext(path, filePath, analysis) {
-        const parent = path.parent;
-        const contextName = parent.type === 'VariableDeclarator' ? parent.id?.name : null;
-        if (contextName) {
-            const defaultValue = path.node.arguments[0];
-            analysis.hooks.push({
-                id: `react:context#${contextName}#${filePath}:${getLine(path.node)}`,
-                type: 'react:context',
-                contextName,
-                file: filePath,
-                line: getLine(path.node),
-                column: getColumn(path.node),
-                hookName: 'createContext',
-                defaultValue: this.getExpressionValue(defaultValue)
-            });
-        }
-    }
-    /**
-     * Analyze browser API calls
-     */
-    analyzeBrowserAPI(path, filePath, analysis) {
-        const callee = path.node.callee;
-        // Direct function call: setTimeout, fetch, alert
-        if (callee.type === 'Identifier') {
-            const name = callee.name;
-            // Timers
-            if (BROWSER_APIS.timers.includes(name)) {
-                analysis.browserAPIs.push({
-                    id: `browser:timer#${name}#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:timer',
-                    api: name,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // Blocking APIs
-            if (BROWSER_APIS.blocking.includes(name)) {
-                analysis.browserAPIs.push({
-                    id: `browser:blocking#${name}#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:blocking',
-                    api: name,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // Fetch
-            if (name === 'fetch') {
-                analysis.browserAPIs.push({
-                    id: `browser:async#fetch#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:async',
-                    api: 'fetch',
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-        }
-        // Member expression: localStorage.setItem, document.querySelector
-        if (callee.type === 'MemberExpression') {
-            const fullName = this.getMemberExpressionName(callee);
-            // localStorage/sessionStorage
-            if (fullName.startsWith('localStorage.') || fullName.startsWith('sessionStorage.')) {
-                const [storage, method] = fullName.split('.');
-                const operation = method === 'getItem' ? 'read' :
-                    method === 'setItem' ? 'write' :
-                        method === 'removeItem' ? 'delete' : method;
-                analysis.browserAPIs.push({
-                    id: `browser:storage#${storage}:${operation}#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:storage',
-                    storage,
-                    operation,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // DOM queries
-            if (fullName.startsWith('document.') &&
-                (fullName.includes('querySelector') || fullName.includes('getElementById'))) {
-                analysis.browserAPIs.push({
-                    id: `browser:dom#query#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:dom',
-                    operation: 'query',
-                    api: fullName,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // History API
-            if (fullName.startsWith('history.') || fullName.startsWith('window.history.')) {
-                analysis.browserAPIs.push({
-                    id: `browser:history#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:history',
-                    api: fullName,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // Clipboard API
-            if (fullName.includes('clipboard')) {
-                analysis.browserAPIs.push({
-                    id: `browser:clipboard#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:clipboard',
-                    api: fullName,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // Geolocation
-            if (fullName.includes('geolocation')) {
-                analysis.browserAPIs.push({
-                    id: `browser:geolocation#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:geolocation',
-                    api: fullName,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // Canvas context
-            if (fullName.match(/\.(fillRect|strokeRect|fillText|strokeText|beginPath|closePath|moveTo|lineTo|arc|fill|stroke|clearRect|drawImage|save|restore|translate|rotate|scale)$/)) {
-                const method = fullName.split('.').pop();
-                analysis.browserAPIs.push({
-                    id: `canvas:draw#${method}#${filePath}:${getLine(path.node)}`,
-                    type: 'canvas:draw',
-                    method,
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-            // matchMedia
-            if (fullName === 'window.matchMedia' || fullName === 'matchMedia') {
-                analysis.browserAPIs.push({
-                    id: `browser:media-query#${filePath}:${getLine(path.node)}`,
-                    type: 'browser:media-query',
-                    api: 'matchMedia',
-                    file: filePath,
-                    line: getLine(path.node)
-                });
-                return;
-            }
-        }
-    }
-    getExpressionValue(expr) {
-        if (!expr)
-            return 'undefined';
-        if (expr.type === 'StringLiteral')
-            return `"${expr.value}"`;
-        if (expr.type === 'NumericLiteral')
-            return String(expr.value);
-        if (expr.type === 'BooleanLiteral')
-            return String(expr.value);
-        if (expr.type === 'NullLiteral')
-            return 'null';
-        if (expr.type === 'Identifier')
-            return expr.name;
-        if (expr.type === 'ObjectExpression')
-            return '{...}';
-        if (expr.type === 'ArrayExpression')
-            return '[...]';
-        if (expr.type === 'ArrowFunctionExpression')
-            return '() => {...}';
-        if (expr.type === 'FunctionExpression')
-            return 'function() {...}';
-        return '<expression>';
-    }
     /**
      * Add all analysis results to graph
      */
@@ -1116,7 +225,7 @@ export class ReactAnalyzer extends Plugin {
         const edges = [];
         // Collect component nodes and DEFINES edges
         for (const component of analysis.components) {
-            nodes.push(component);
+            nodes.push(NodeFactory.createReactNode(component));
             if (moduleId) {
                 edges.push({
                     type: 'DEFINES',
@@ -1127,19 +236,19 @@ export class ReactAnalyzer extends Plugin {
         }
         // Collect hook nodes
         for (const hook of analysis.hooks) {
-            nodes.push(hook);
+            nodes.push(NodeFactory.createReactNode(hook));
         }
         // Collect event nodes
         for (const event of analysis.events) {
-            nodes.push(event);
+            nodes.push(NodeFactory.createReactNode(event));
         }
         // Collect browser API nodes
         for (const api of analysis.browserAPIs) {
-            nodes.push(api);
+            nodes.push(NodeFactory.createReactNode(api));
         }
         // Collect issue nodes
         for (const issue of analysis.issues) {
-            nodes.push(issue);
+            nodes.push(NodeFactory.createReactNode(issue));
         }
         // Collect edges from analysis
         for (const edge of analysis.edges) {