@veraxhq/verax 0.2.0 → 0.3.0

package/src/cli/util/svelte-state-detector.js

@@ -0,0 +1,243 @@
+/**
+ * PHASE 20 — Svelte State Detector
+ * 
+ * Detects state mutations (reactive stores, assignments) in Svelte components.
+ * Only emits state promises if state is user-visible (used in markup bindings).
+ */
+
+import { extractSvelteSFC, extractTemplateBindings } from './svelte-sfc-extractor.js';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+
+/**
+ * Detect state promises in Svelte SFC
+ * 
+ * @param {string} filePath - Path to .svelte file
+ * @param {string} content - Full file content
+ * @param {string} projectRoot - Project root directory
+ * @returns {Array} Array of state expectations
+ */
+export function detectSvelteState(filePath, content, projectRoot) {
+  const expectations = [];
+  
+  try {
+    const sfc = extractSvelteSFC(content);
+    const { scriptBlocks, markup } = sfc;
+    
+    // Extract template bindings to identify user-visible state
+    const templateBindings = markup ? extractTemplateBindings(markup.content) : { bindings: [], reactiveStatements: [] };
+    
+    // Collect all state variables used in template
+    const templateStateVars = new Set();
+    
+    // From bindings: bind:value="count"
+    templateBindings.bindings.forEach(binding => {
+      templateStateVars.add(binding.variable);
+    });
+    
+    // From reactive statements: $: doubled = count * 2
+    templateBindings.reactiveStatements.forEach(stmt => {
+      // Extract variable names from reactive statements
+      const varMatch = stmt.statement.match(/^\s*(\w+)\s*=/);
+      if (varMatch) {
+        templateStateVars.add(varMatch[1]);
+      }
+    });
+    
+    // From markup: {count}, {#if isOpen}, etc.
+    if (markup && markup.content) {
+      // Extract {variable} patterns
+      const varPattern = /\{([a-zA-Z_$][a-zA-Z0-9_$]*)\}/g;
+      let varMatch;
+      while ((varMatch = varPattern.exec(markup.content)) !== null) {
+        templateStateVars.add(varMatch[1]);
+      }
+      
+      // Extract {#if variable} patterns
+      const ifPattern = /\{#if\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\}/g;
+      let ifMatch;
+      while ((ifMatch = ifPattern.exec(markup.content)) !== null) {
+        templateStateVars.add(ifMatch[1]);
+      }
+    }
+    
+    // Process script blocks to find state mutations
+    for (const scriptBlock of scriptBlocks) {
+      if (!scriptBlock.content) continue;
+      
+      try {
+        const ast = parse(scriptBlock.content, {
+          sourceType: 'module',
+          plugins: ['typescript', 'jsx'],
+        });
+        
+        // Track reactive store declarations
+        const reactiveStores = new Map();
+        
+        traverse.default(ast, {
+          // Detect reactive store declarations: $store, writable(), readable()
+          VariableDeclarator(path) {
+            const { node } = path;
+            if (node.init) {
+              // Detect writable() stores
+              if (
+                node.init.type === 'CallExpression' &&
+                node.init.callee.name === 'writable'
+              ) {
+                const storeName = node.id.name;
+                reactiveStores.set(storeName, 'writable');
+              }
+              
+              // Detect readable() stores
+              if (
+                node.init.type === 'CallExpression' &&
+                node.init.callee.name === 'readable'
+              ) {
+                const storeName = node.id.name;
+                reactiveStores.set(storeName, 'readable');
+              }
+            }
+          },
+          
+          // Detect store mutations: $store = value, store.set(value), store.update(fn)
+          AssignmentExpression(path) {
+            const { node } = path;
+            
+            // Detect direct assignments: count = 5
+            if (node.left.type === 'Identifier') {
+              const varName = node.left.name;
+              
+              // Only emit if variable is used in template
+              if (templateStateVars.has(varName)) {
+                const location = node.loc;
+                const line = scriptBlock.startLine + (location ? location.start.line - 1 : 0);
+                
+                expectations.push({
+                  type: 'state',
+                  expectedTarget: varName,
+                  context: 'assignment',
+                  sourceRef: {
+                    file: filePath,
+                    line,
+                    snippet: scriptBlock.content.substring(
+                      node.start - (ast.program.body[0]?.start || 0),
+                      node.end - (ast.program.body[0]?.start || 0)
+                    ),
+                  },
+                  proof: 'PROVEN_EXPECTATION',
+                  metadata: {
+                    templateUsage: Array.from(templateStateVars).filter(v => v === varName).length,
+                    stateType: 'variable',
+                  },
+                });
+              }
+            }
+            
+            // Detect store assignments: $store = value
+            if (
+              node.left.type === 'Identifier' &&
+              node.left.name.startsWith('$') &&
+              reactiveStores.has(node.left.name.substring(1))
+            ) {
+              const storeName = node.left.name.substring(1);
+              const location = node.loc;
+              const line = scriptBlock.startLine + (location ? location.start.line - 1 : 0);
+              
+              expectations.push({
+                type: 'state',
+                expectedTarget: storeName,
+                context: 'store-assignment',
+                sourceRef: {
+                  file: filePath,
+                  line,
+                  snippet: scriptBlock.content.substring(
+                    node.start - (ast.program.body[0]?.start || 0),
+                    node.end - (ast.program.body[0]?.start || 0)
+                  ),
+                },
+                proof: 'PROVEN_EXPECTATION',
+                metadata: {
+                  stateType: 'store',
+                  storeType: reactiveStores.get(storeName),
+                },
+              });
+            }
+          },
+          
+          // Detect store.set() calls
+          CallExpression(path) {
+            const { node } = path;
+            
+            if (
+              node.callee.type === 'MemberExpression' &&
+              node.callee.property.name === 'set' &&
+              node.callee.object.type === 'Identifier' &&
+              reactiveStores.has(node.callee.object.name)
+            ) {
+              const storeName = node.callee.object.name;
+              const location = node.loc;
+              const line = scriptBlock.startLine + (location ? location.start.line - 1 : 0);
+              
+              expectations.push({
+                type: 'state',
+                expectedTarget: storeName,
+                context: 'store-set',
+                sourceRef: {
+                  file: filePath,
+                  line,
+                  snippet: scriptBlock.content.substring(
+                    node.start - (ast.program.body[0]?.start || 0),
+                    node.end - (ast.program.body[0]?.start || 0)
+                  ),
+                },
+                proof: 'PROVEN_EXPECTATION',
+                metadata: {
+                  stateType: 'store',
+                  storeType: reactiveStores.get(storeName),
+                },
+              });
+            }
+            
+            // Detect store.update() calls
+            if (
+              node.callee.type === 'MemberExpression' &&
+              node.callee.property.name === 'update' &&
+              node.callee.object.type === 'Identifier' &&
+              reactiveStores.has(node.callee.object.name)
+            ) {
+              const storeName = node.callee.object.name;
+              const location = node.loc;
+              const line = scriptBlock.startLine + (location ? location.start.line - 1 : 0);
+              
+              expectations.push({
+                type: 'state',
+                expectedTarget: storeName,
+                context: 'store-update',
+                sourceRef: {
+                  file: filePath,
+                  line,
+                  snippet: scriptBlock.content.substring(
+                    node.start - (ast.program.body[0]?.start || 0),
+                    node.end - (ast.program.body[0]?.start || 0)
+                  ),
+                },
+                proof: 'PROVEN_EXPECTATION',
+                metadata: {
+                  stateType: 'store',
+                  storeType: reactiveStores.get(storeName),
+                },
+              });
+            }
+          },
+        });
+      } catch (parseError) {
+        // Skip if parsing fails
+      }
+    }
+  } catch (error) {
+    // Skip if extraction fails
+  }
+  
+  return expectations;
+}
+

package/src/cli/util/vue-navigation-detector.js

@@ -0,0 +1,177 @@
+/**
+ * PHASE 20 — Vue Navigation Promise Detection
+ * 
+ * Detects Vue Router navigation promises:
+ * - router.push('/path'), router.replace('/path')
+ * - router.push({ name: 'X', params: { id: 1 }}) -> mark as dynamic/ambiguous
+ */
+
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+
+const traverse = _traverse.default || _traverse;
+
+/**
+ * PHASE 20: Detect Vue navigation promises
+ * 
+ * @param {string} scriptContent - Script block content
+ * @param {string} filePath - File path
+ * @param {string} relPath - Relative path
+ * @param {Object} scriptBlock - Script block metadata
+ * @param {Object} templateBindings - Template bindings (optional)
+ * @returns {Array} Navigation promises
+ */
+export function detectVueNavigationPromises(scriptContent, filePath, relPath, scriptBlock, templateBindings) {
+  const promises = [];
+  
+  try {
+    const ast = parse(scriptContent, {
+      sourceType: 'module',
+      plugins: [
+        'typescript',
+        'classProperties',
+        'optionalChaining',
+        'nullishCoalescingOperator',
+        'dynamicImport',
+        'topLevelAwait',
+        'objectRestSpread',
+      ],
+      errorRecovery: true,
+    });
+    
+    const lines = scriptContent.split('\n');
+    
+    traverse(ast, {
+      CallExpression(path) {
+        const node = path.node;
+        const callee = node.callee;
+        
+        // Detect router.push() and router.replace()
+        if (callee.type === 'MemberExpression') {
+          const object = callee.object;
+          const property = callee.property;
+          
+          if (property.name === 'push' || property.name === 'replace') {
+            // Check if object is 'router' or 'this.$router' or 'useRouter()'
+            const isRouter = 
+              (object.type === 'Identifier' && object.name === 'router') ||
+              (object.type === 'MemberExpression' && 
+               object.object.type === 'ThisExpression' && 
+               object.property.name === '$router') ||
+              (object.type === 'CallExpression' &&
+               callee.type === 'Identifier' &&
+               callee.name === 'useRouter');
+            
+            if (isRouter && node.arguments.length > 0) {
+              const arg = node.arguments[0];
+              let targetPath = null;
+              let isDynamic = false;
+              
+              // String literal: router.push('/path')
+              if (arg.type === 'StringLiteral') {
+                targetPath = arg.value;
+              }
+              // Object literal: router.push({ name: 'X', params: {} })
+              else if (arg.type === 'ObjectExpression') {
+                const nameProp = arg.properties.find(p => 
+                  p.key && p.key.name === 'name'
+                );
+                const pathProp = arg.properties.find(p => 
+                  p.key && p.key.name === 'path'
+                );
+                
+                if (pathProp && pathProp.value && pathProp.value.type === 'StringLiteral') {
+                  targetPath = pathProp.value.value;
+                } else if (nameProp) {
+                  // Named route - mark as dynamic/ambiguous
+                  isDynamic = true;
+                  targetPath = '<named-route>';
+                } else {
+                  isDynamic = true;
+                  targetPath = '<dynamic>';
+                }
+              }
+              // Template literal or other dynamic
+              else {
+                isDynamic = true;
+                targetPath = '<dynamic>';
+              }
+              
+              if (targetPath) {
+                const loc = node.loc;
+                const line = loc ? loc.start.line : 1;
+                const column = loc ? loc.start.column : 0;
+                
+                // Extract AST source
+                const astSource = lines.slice(line - 1, loc ? loc.end.line : line)
+                  .join('\n')
+                  .substring(0, 200);
+                
+                // Build context chain
+                const context = buildContext(path);
+                
+                promises.push({
+                  type: 'navigation',
+                  promise: {
+                    kind: 'navigate',
+                    value: targetPath,
+                    isDynamic,
+                  },
+                  source: {
+                    file: relPath,
+                    line,
+                    column,
+                    context,
+                    astSource,
+                  },
+                  confidence: isDynamic ? 0.7 : 1.0,
+                });
+              }
+            }
+          }
+        }
+      },
+    });
+  } catch (error) {
+    // Parse error - skip
+  }
+  
+  return promises;
+}
+
+/**
+ * Build context chain from AST path
+ */
+function buildContext(path) {
+  const context = [];
+  let current = path;
+  
+  while (current) {
+    if (current.isFunctionDeclaration()) {
+      context.push({
+        type: 'function',
+        name: current.node.id?.name || '<anonymous>',
+      });
+    } else if (current.isArrowFunctionExpression()) {
+      context.push({
+        type: 'arrow-function',
+        name: '<arrow>',
+      });
+    } else if (current.isMethodDefinition()) {
+      context.push({
+        type: 'method',
+        name: current.node.key?.name || '<method>',
+      });
+    } else if (current.isObjectProperty()) {
+      context.push({
+        type: 'property',
+        name: current.node.key?.name || '<property>',
+      });
+    }
+    
+    current = current.parentPath;
+  }
+  
+  return context.reverse().map(c => `${c.type}:${c.name}`).join(' > ');
+}
+

package/src/cli/util/vue-sfc-extractor.js

@@ -0,0 +1,162 @@
+/**
+ * PHASE 20 — Vue SFC (Single File Component) Extractor
+ * 
+ * Extracts <script>, <script setup>, and <template> content from .vue files.
+ * Deterministic and robust (no external runtime execution).
+ */
+
+/**
+ * PHASE 20: Extract Vue SFC blocks
+ * 
+ * @param {string} content - Full .vue file content
+ * @param {string} filePath - Path to the .vue file (for context)
+ * @returns {Object} { scriptBlocks: [{content, lang, startLine}], template: {content, startLine} }
+ */
+export function extractVueSFC(content) {
+  const scriptBlocks = [];
+  let template = null;
+  
+  // Extract <script> blocks (including <script setup>)
+  const scriptRegex = /<script(?:\s+setup)?(?:\s+lang=["']([^"']+)["'])?[^>]*>([\s\S]*?)<\/script>/gi;
+  let scriptMatch;
+  let lineOffset = 1;
+  
+  while ((scriptMatch = scriptRegex.exec(content)) !== null) {
+    const isSetup = scriptMatch[0].includes('setup');
+    const lang = scriptMatch[1] || 'js';
+    const scriptContent = scriptMatch[2];
+    
+    // Calculate start line
+    const beforeMatch = content.substring(0, scriptMatch.index);
+    const startLine = (beforeMatch.match(/\n/g) || []).length + 1;
+    
+    scriptBlocks.push({
+      content: scriptContent.trim(),
+      lang: lang.toLowerCase(),
+      startLine,
+      isSetup,
+    });
+  }
+  
+  // Extract <template> block
+  const templateRegex = /<template[^>]*>([\s\S]*?)<\/template>/i;
+  const templateMatch = content.match(templateRegex);
+  
+  if (templateMatch) {
+    const beforeTemplate = content.substring(0, templateMatch.index);
+    const templateStartLine = (beforeTemplate.match(/\n/g) || []).length + 1;
+    
+    template = {
+      content: templateMatch[1].trim(),
+      startLine: templateStartLine,
+    };
+  }
+  
+  return {
+    scriptBlocks,
+    template,
+  };
+}
+
+/**
+ * PHASE 20: Extract template bindings and references
+ * 
+ * @param {string} templateContent - Template content
+ * @returns {Object} { bindings: string[], routerLinks: Array, eventHandlers: Array }
+ */
+export function extractTemplateBindings(templateContent) {
+  const bindings = [];
+  const routerLinks = [];
+  const eventHandlers = [];
+  
+  // Extract variable bindings: {{ var }}, :prop="var", v-if="var", etc.
+  const bindingPatterns = [
+    /\{\{\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\}\}/g,  // {{ var }}
+    /:([a-zA-Z-]+)=["']([^"']+)["']/g,  // :prop="value"
+    /v-if=["']([^"']+)["']/g,  // v-if="condition"
+    /v-show=["']([^"']+)["']/g,  // v-show="condition"
+    /v-model=["']([^"']+)["']/g,  // v-model="value"
+  ];
+  
+  for (const pattern of bindingPatterns) {
+    let match;
+    while ((match = pattern.exec(templateContent)) !== null) {
+      const binding = match[1] || match[2];
+      if (binding && !bindings.includes(binding)) {
+        bindings.push(binding);
+      }
+    }
+  }
+  
+  // Extract <router-link> usage
+  const routerLinkRegex = /<router-link[^>]*\s+to=["']([^"']+)["'][^>]*>/gi;
+  let routerLinkMatch;
+  while ((routerLinkMatch = routerLinkRegex.exec(templateContent)) !== null) {
+    routerLinks.push({
+      to: routerLinkMatch[1],
+      fullMatch: routerLinkMatch[0],
+    });
+  }
+  
+  // Extract event handlers: @click="handler", @submit.prevent="handler"
+  const eventHandlerRegex = /@([a-z]+)(?:\.([a-z]+)*)?=["']([^"']+)["']/gi;
+  let eventMatch;
+  while ((eventMatch = eventHandlerRegex.exec(templateContent)) !== null) {
+    eventHandlers.push({
+      event: eventMatch[1],
+      modifiers: eventMatch[2] ? eventMatch[2].split('.') : [],
+      handler: eventMatch[3],
+    });
+  }
+  
+  return {
+    bindings,
+    routerLinks,
+    eventHandlers,
+  };
+}
+
+/**
+ * PHASE 20: Map template handlers to script functions
+ * 
+ * @param {Object} templateBindings - Result from extractTemplateBindings
+ * @param {Array} scriptBlocks - Script blocks from extractVueSFC
+ * @returns {Map} handlerName -> { scriptBlock, functionInfo }
+ */
+export function mapTemplateHandlersToScript(templateBindings, scriptBlocks) {
+  const handlerMap = new Map();
+  
+  for (const handler of templateBindings.eventHandlers) {
+    const handlerName = handler.handler;
+    
+    // Find handler in script blocks
+    for (const scriptBlock of scriptBlocks) {
+      const scriptContent = scriptBlock.content;
+      
+      // Look for function declarations: function handlerName() {}
+      const functionRegex = new RegExp(`(?:function|const|let|var)\\s+${handlerName}\\s*[=(]`, 'g');
+      if (functionRegex.test(scriptContent)) {
+        handlerMap.set(handlerName, {
+          scriptBlock,
+          handler,
+          type: 'function',
+        });
+        break;
+      }
+      
+      // Look for method definitions: methods: { handlerName() {} }
+      const methodRegex = new RegExp(`(?:methods|setup)\\s*:\\s*\\{[^}]*${handlerName}\\s*[:(]`, 's');
+      if (methodRegex.test(scriptContent)) {
+        handlerMap.set(handlerName, {
+          scriptBlock,
+          handler,
+          type: 'method',
+        });
+        break;
+      }
+    }
+  }
+  
+  return handlerMap;
+}
+