@dcoder-x/plugin-shared 0.1.2 → 0.1.4

package/dist/buildId.d.ts

@@ -0,0 +1,5 @@
+export interface ModuleGraphEntry {
+    id: string;
+    importedIds: readonly string[];
+}
+export declare function deriveBuildId(moduleGraph: Map<string, ModuleGraphEntry>): string;

package/dist/buildId.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deriveBuildId = deriveBuildId;
+function deriveBuildId(moduleGraph) {
+    if (!moduleGraph.size) {
+        return `vite_${Date.now()}`;
+    }
+    const rows = Array.from(moduleGraph.values())
+        .map((mod) => `${mod.id}|${[...mod.importedIds].sort().join(',')}`)
+        .sort()
+        .join('\n');
+    let hash = 0;
+    for (let i = 0; i < rows.length; i++) {
+        hash = (hash * 31 + rows.charCodeAt(i)) >>> 0;
+    }
+    return `vite_${hash.toString(36)}`;
+}

package/dist/extractors/ComponentContextResolver.d.ts

@@ -0,0 +1,37 @@
+import type { NodePath } from '@babel/traverse';
+export interface StateVariable {
+    name: string;
+    setter?: string;
+    initialValue?: string;
+    line: number;
+}
+export interface EventHandler {
+    name: string;
+    events: string[];
+    line: number;
+    callsStateSetters: string[];
+}
+export interface ComponentContext {
+    componentName: string;
+    stateVariables: StateVariable[];
+    eventHandlers: EventHandler[];
+}
+/**
+ * Resolves state declarations, setters, and event handlers within a component scope.
+ * This provides the symbol table needed for interaction graph extraction.
+ */
+export declare class ComponentContextResolver {
+    /**
+     * Extract state, handlers, and their relationships from a component AST node.
+     */
+    extractContext(componentPath: NodePath<any>, componentName: string): ComponentContext;
+    /**
+     * Extract handler name, event references, and called setters from a function.
+     */
+    private extractHandlerInfo;
+    /**
+     * Map event handlers referenced in JSX attributes to their handler definitions.
+     * Returns which state setters a given event attribute calls.
+     */
+    getStateSettersCalledByEvent(event: string, handlers: EventHandler[]): string[];
+}

package/dist/extractors/ComponentContextResolver.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentContextResolver = void 0;
+/**
+ * Resolves state declarations, setters, and event handlers within a component scope.
+ * This provides the symbol table needed for interaction graph extraction.
+ */
+class ComponentContextResolver {
+    /**
+     * Extract state, handlers, and their relationships from a component AST node.
+     */
+    extractContext(componentPath, componentName) {
+        const stateVariables = [];
+        const eventHandlers = [];
+        const stateSetterMap = new Map(); // setter -> state var
+        // First pass: collect useState declarations and build setter map
+        componentPath.traverse({
+            VariableDeclarator: (varPath) => {
+                const id = varPath.node.id;
+                const init = varPath.node.init;
+                // Detect useState pattern: const [state, setState] = useState(...)
+                if (id.type === 'ArrayPattern' &&
+                    id.elements &&
+                    id.elements.length === 2 &&
+                    init?.type === 'CallExpression') {
+                    const callee = init.callee;
+                    if ((callee.type === 'Identifier' && callee.name === 'useState') ||
+                        (callee.type === 'MemberExpression' && callee.property?.name === 'useState')) {
+                        const stateId = id.elements[0];
+                        const setterIdNode = id.elements[1];
+                        if (stateId?.type === 'Identifier' && setterIdNode?.type === 'Identifier') {
+                            const stateName = stateId.name;
+                            const setterName = setterIdNode.name;
+                            stateSetterMap.set(setterName, stateName);
+                            stateVariables.push({
+                                name: stateName,
+                                setter: setterName,
+                                initialValue: init.arguments?.[0]?.type === 'StringLiteral'
+                                    ? init.arguments[0].value
+                                    : undefined,
+                                line: varPath.node.loc?.start.line ?? 0,
+                            });
+                        }
+                    }
+                }
+                // Detect useReducer pattern: const [state, dispatch] = useReducer(...)
+                if (id.type === 'ArrayPattern' &&
+                    id.elements &&
+                    id.elements.length === 2 &&
+                    init?.type === 'CallExpression') {
+                    const callee = init.callee;
+                    if ((callee.type === 'Identifier' && callee.name === 'useReducer') ||
+                        (callee.type === 'MemberExpression' && callee.property?.name === 'useReducer')) {
+                        const stateId = id.elements[0];
+                        const dispatchIdNode = id.elements[1];
+                        if (stateId?.type === 'Identifier' && dispatchIdNode?.type === 'Identifier') {
+                            const stateName = stateId.name;
+                            const dispatchName = dispatchIdNode.name;
+                            stateSetterMap.set(dispatchName, stateName);
+                            stateVariables.push({
+                                name: stateName,
+                                setter: dispatchName,
+                                initialValue: undefined,
+                                line: varPath.node.loc?.start.line ?? 0,
+                            });
+                        }
+                    }
+                }
+            },
+        });
+        // Second pass: find event handler functions and track which setters they call
+        componentPath.traverse({
+            FunctionDeclaration: (funcPath) => {
+                const handlerInfo = this.extractHandlerInfo(funcPath, stateSetterMap);
+                if (handlerInfo) {
+                    handlerInfo.name = funcPath.node.id?.name || handlerInfo.name;
+                    eventHandlers.push(handlerInfo);
+                }
+            },
+            VariableDeclarator: (varPath) => {
+                if ((varPath.node.init?.type === 'ArrowFunctionExpression' ||
+                    varPath.node.init?.type === 'FunctionExpression') &&
+                    varPath.node.id?.type === 'Identifier') {
+                    const handlerName = varPath.node.id.name;
+                    const funcPath = varPath.get('init');
+                    const handlerInfo = this.extractHandlerInfo(funcPath, stateSetterMap);
+                    if (handlerInfo) {
+                        handlerInfo.name = handlerName;
+                        eventHandlers.push(handlerInfo);
+                    }
+                }
+            },
+        });
+        // Third pass: annotate which events correspond to each handler reference
+        componentPath.traverse({
+            JSXAttribute: (attrPath) => {
+                const name = attrPath.node.name?.name;
+                if (!name || !name.startsWith('on'))
+                    return;
+                const value = attrPath.node.value;
+                if (!value || value.type !== 'JSXExpressionContainer')
+                    return;
+                const expression = value.expression;
+                if (!expression)
+                    return;
+                const handlerName = expression.type === 'Identifier' ? expression.name : null;
+                if (!handlerName)
+                    return;
+                const handler = eventHandlers.find((h) => h.name === handlerName);
+                if (!handler)
+                    return;
+                if (!handler.events.includes(name)) {
+                    handler.events.push(name);
+                }
+            },
+        });
+        return {
+            componentName,
+            stateVariables,
+            eventHandlers,
+        };
+    }
+    /**
+     * Extract handler name, event references, and called setters from a function.
+     */
+    extractHandlerInfo(funcPath, stateSetterMap) {
+        const calledSetters = new Set();
+        funcPath.traverse({
+            CallExpression(callPath) {
+                const callee = callPath.node.callee;
+                let setterName = null;
+                if (callee.type === 'Identifier') {
+                    setterName = callee.name;
+                }
+                else if (callee.type === 'MemberExpression' && callee.property?.type === 'Identifier') {
+                    setterName = callee.property.name;
+                }
+                if (setterName && stateSetterMap.has(setterName)) {
+                    calledSetters.add(stateSetterMap.get(setterName));
+                }
+            },
+        });
+        return {
+            name: funcPath.node.id?.name || 'anonymous',
+            events: [],
+            line: funcPath.node.loc?.start.line ?? 0,
+            callsStateSetters: Array.from(calledSetters),
+        };
+    }
+    /**
+     * Map event handlers referenced in JSX attributes to their handler definitions.
+     * Returns which state setters a given event attribute calls.
+     */
+    getStateSettersCalledByEvent(event, handlers) {
+        // Simple heuristic: look for handlers named after the event
+        const candidates = handlers.filter((h) => h.name.toLowerCase().includes(event.toLowerCase().replace('on', '')) ||
+            h.events.includes(event));
+        const allSetters = new Set();
+        for (const handler of candidates) {
+            for (const setter of handler.callsStateSetters) {
+                allSetters.add(setter);
+            }
+        }
+        return Array.from(allSetters);
+    }
+}
+exports.ComponentContextResolver = ComponentContextResolver;

package/dist/extractors/ComponentExtractor.d.ts

@@ -1,9 +1,14 @@
-import type { ModuleGraphSource, DiscoveredRoute, DiscoveredElement } from '../types';
+import type { ModuleGraphSource, DiscoveredRoute, DiscoveredElement, PolicyComponent } from '../types';
 export declare class ComponentExtractor {
     private source;
     private routes;
     constructor(source: ModuleGraphSource, routes: DiscoveredRoute[]);
     extract(): Promise<DiscoveredElement[]>;
+    /**
+     * Extract component-level analysis including state, handlers, and interaction graphs.
+     * Returns PolicyComponent data suitable for policy document generation.
+     */
+    extractComponents(): Promise<PolicyComponent[]>;
     private getModuleFilesForRoute;
     private walkWebpackGraph;
     private findWebpackModule;

package/dist/extractors/ComponentExtractor.js

@@ -8,6 +8,8 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const parser_1 = require("@babel/parser");
 const traverse_1 = __importDefault(require("@babel/traverse"));
+const InteractionGraphExtractor_1 = require("./InteractionGraphExtractor");
+const ComponentContextResolver_1 = require("./ComponentContextResolver");
 class ComponentExtractor {
     constructor(source, routes) {
         this.source = source;
@@ -26,6 +28,66 @@ class ComponentExtractor {
         }
         return elements;
     }
+    /**
+     * Extract component-level analysis including state, handlers, and interaction graphs.
+     * Returns PolicyComponent data suitable for policy document generation.
+     */
+    async extractComponents() {
+        const components = [];
+        const contextResolver = new ComponentContextResolver_1.ComponentContextResolver();
+        const graphExtractor = new InteractionGraphExtractor_1.InteractionGraphExtractor();
+        for (const route of this.routes) {
+            const moduleFiles = this.getModuleFilesForRoute(route.filePath);
+            for (const filePath of moduleFiles) {
+                const source = this.readSource(filePath);
+                if (!source)
+                    continue;
+                let ast;
+                try {
+                    ast = (0, parser_1.parse)(source, { sourceType: 'module', plugins: ['typescript', 'jsx'] });
+                }
+                catch {
+                    continue;
+                }
+                // Find all component declarations and extract their analysis
+                (0, traverse_1.default)(ast, {
+                    FunctionDeclaration: (path) => {
+                        const componentName = path.node.id?.name;
+                        if (componentName && /^[A-Z]/.test(componentName)) {
+                            const context = contextResolver.extractContext(path, componentName);
+                            const interactions = graphExtractor.extractInteractions(path, componentName);
+                            components.push({
+                                name: componentName,
+                                filePath,
+                                route: route.path,
+                                stateVariables: context.stateVariables,
+                                interactions,
+                            });
+                        }
+                    },
+                    VariableDeclarator: (path) => {
+                        const componentName = path.node.id?.name;
+                        if (componentName &&
+                            /^[A-Z]/.test(componentName) &&
+                            (path.node.init?.type === 'ArrowFunctionExpression' ||
+                                path.node.init?.type === 'FunctionExpression')) {
+                            const funcPath = path.get('init');
+                            const context = contextResolver.extractContext(funcPath, componentName);
+                            const interactions = graphExtractor.extractInteractions(funcPath, componentName);
+                            components.push({
+                                name: componentName,
+                                filePath,
+                                route: route.path,
+                                stateVariables: context.stateVariables,
+                                interactions,
+                            });
+                        }
+                    },
+                });
+            }
+        }
+        return components;
+    }
     getModuleFilesForRoute(entryFilePath) {
         if (this.source.type === 'webpack') {
             return this.walkWebpackGraph(entryFilePath, this.source.compilation);
@@ -98,7 +160,19 @@ class ComponentExtractor {
         const fallbackDeps = Array.isArray(mod?.dependencies) ? mod.dependencies : [];
         const out = [];
         for (const dep of fallbackDeps) {
-            const depModule = dep?.module || dep?._module;
+            let depModule = null;
+            if (graph?.getModule) {
+                depModule = graph.getModule(dep);
+            }
+            // Legacy fallback for older webpack versions.
+            if (!depModule) {
+                try {
+                    depModule = dep?.module || dep?._module;
+                }
+                catch {
+                    depModule = null;
+                }
+            }
             const depPath = normalizeModulePath(depModule?.resource || depModule?.userRequest);
             if (depPath)
                 out.push(depPath);
@@ -197,6 +271,7 @@ class ComponentExtractor {
                     nearbyText,
                     semanticRole: inferSemanticRole(tagName, staticProps, nearbyText),
                     interactions: inferInteractions(tagName, staticProps),
+                    loc: { line: nodePath.node.loc?.start?.line ?? 0 },
                 });
             },
         });

package/dist/extractors/FlowInferrer.d.ts

@@ -1,10 +1,12 @@
-import type { DiscoveredRoute, DiscoveredElement, InferredFlow } from '../types';
+import type { DiscoveredRoute, DiscoveredElement, InferredFlow, PolicyComponent } from '../types';
 export declare class FlowInferrer {
     private routes;
     private elements;
-    constructor(routes: DiscoveredRoute[], elements: DiscoveredElement[]);
+    private components?;
+    constructor(routes: DiscoveredRoute[], elements: DiscoveredElement[], components?: PolicyComponent[] | undefined);
     infer(): InferredFlow[];
     private buildEdgeGraph;
     private detectLinearFlows;
+    private detectInteractionFlows;
     private buildChain;
 }

package/dist/extractors/FlowInferrer.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlowInferrer = void 0;
 class FlowInferrer {
-    constructor(routes, elements) {
+    constructor(routes, elements, components) {
         this.routes = routes;
         this.elements = elements;
+        this.components = components;
     }
     infer() {
         const edges = this.buildEdgeGraph();
-        return this.detectLinearFlows(edges);
+        const routeFlows = this.detectLinearFlows(edges);
+        const interactionFlows = this.detectInteractionFlows();
+        return [...routeFlows, ...interactionFlows];
     }
     buildEdgeGraph() {
         const edges = [];
@@ -45,6 +48,7 @@ class FlowInferrer {
                     name: chain
                         .map((p) => p.split('/').filter(Boolean).pop() || 'home')
                         .join(' -> '),
+                    page: chain[0],
                     steps: chain,
                     edges: edges.filter((e) => {
                         const s = new Set(chain);
@@ -56,6 +60,34 @@ class FlowInferrer {
         }
         return flows;
     }
+    detectInteractionFlows() {
+        if (!this.components || this.components.length === 0) {
+            return [];
+        }
+        const flows = [];
+        for (const component of this.components) {
+            for (const interaction of component.interactions || []) {
+                const routePath = component.route || '/';
+                if (!interaction.trigger?.event)
+                    continue;
+                flows.push({
+                    id: `flow_${flows.length + 1}`,
+                    name: `${routePath} ${interaction.trigger.event}`,
+                    page: routePath,
+                    steps: [routePath],
+                    edges: [
+                        {
+                            from: routePath,
+                            to: routePath,
+                            trigger: interaction.trigger.event,
+                            confidence: 0.65,
+                        },
+                    ],
+                });
+            }
+        }
+        return flows;
+    }
     buildChain(start, adjacency, seen) {
         if (seen.has(start))
             return [];

package/dist/extractors/InteractionGraphExtractor.d.ts

@@ -0,0 +1,34 @@
+import type { NodePath } from '@babel/traverse';
+import type { ComponentInteraction } from '../types';
+/**
+ * Extracts interaction graphs from React component ASTs.
+ * Maps event handlers -> state mutations -> conditional renders and effects.
+ */
+export declare class InteractionGraphExtractor {
+    private contextResolver;
+    /**
+     * Extract all interactions (trigger -> effect mappings) from a component.
+     */
+    extractInteractions(componentPath: NodePath<any>, componentName: string): ComponentInteraction[];
+    /**
+     * Extract trigger/effect pair from a JSX element with an event handler.
+     */
+    private extractTriggerAndEffect;
+    private resolveStateSettersForAttribute;
+    private collectSettersFromNode;
+    /**
+     * Find conditional renders/effects that depend on a state variable.
+     * Looks for logical expressions and ternaries using the state var.
+     */
+    private findConditionalEffect;
+    private findConditionalEffectInAncestors;
+    private findConditionalEffectInComponent;
+    /**
+     * Check if a node references a specific state variable by name.
+     */
+    private nodeReferencesState;
+    /**
+     * Extract component name from a JSX element or identifier.
+     */
+    private extractComponentNameFromNode;
+}