@veraxhq/verax 0.2.1 → 0.3.0

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

@@ -0,0 +1,147 @@
+/**
+ * PHASE 20 — Svelte SFC (Single File Component) Extractor
+ * 
+ * Extracts <script>, <script context="module">, and markup content from .svelte files.
+ * Deterministic and robust (no external runtime execution).
+ */
+
+/**
+ * PHASE 20: Extract Svelte SFC blocks
+ * 
+ * @param {string} content - Full .svelte file content
+ * @param {string} filePath - Path to the .svelte file (for context)
+ * @returns {Object} { scriptBlocks: [{content, lang, startLine, isModule}], markup: {content, startLine} }
+ */
+export function extractSvelteSFC(content) {
+  const scriptBlocks = [];
+  let markup = null;
+  
+  // Extract <script> blocks (including <script context="module">)
+  const scriptRegex = /<script(?:\s+context=["']module["'])?(?:\s+lang=["']([^"']+)["'])?[^>]*>([\s\S]*?)<\/script>/gi;
+  let scriptMatch;
+  
+  while ((scriptMatch = scriptRegex.exec(content)) !== null) {
+    const isModule = scriptMatch[0].includes('context="module"') || scriptMatch[0].includes("context='module'");
+    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,
+      isModule,
+    });
+  }
+  
+  // Extract markup (everything outside script/style tags)
+  // Svelte markup is the template content
+  const styleRegex = /<style[^>]*>[\s\S]*?<\/style>/gi;
+  const allScriptRegex = /<script[^>]*>[\s\S]*?<\/script>/gi;
+  
+  let markupContent = content;
+  // Remove style blocks
+  markupContent = markupContent.replace(styleRegex, '');
+  // Remove script blocks
+  markupContent = markupContent.replace(allScriptRegex, '');
+  
+  // Find first non-whitespace line for markup
+  const lines = content.split('\n');
+  let markupStartLine = 1;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.trim() && !line.trim().startsWith('<script') && !line.trim().startsWith('<style')) {
+      markupStartLine = i + 1;
+      break;
+    }
+  }
+  
+  if (markupContent.trim()) {
+    markup = {
+      content: markupContent.trim(),
+      startLine: markupStartLine,
+    };
+  }
+  
+  return {
+    scriptBlocks,
+    markup,
+  };
+}
+
+/**
+ * Extract template bindings from Svelte markup
+ * Detects reactive statements, event handlers, and bindings
+ * 
+ * @param {string} markupContent - Svelte markup content
+ * @returns {Object} { reactiveStatements: [], eventHandlers: [], bindings: [] }
+ */
+export function extractTemplateBindings(markupContent) {
+  const reactiveStatements = [];
+  const eventHandlers = [];
+  const bindings = [];
+  
+  // Extract reactive statements: $: statements
+  const reactiveRegex = /\$:\s*([^;]+);/g;
+  let reactiveMatch;
+  while ((reactiveMatch = reactiveRegex.exec(markupContent)) !== null) {
+    reactiveStatements.push({
+      statement: reactiveMatch[1].trim(),
+      line: (markupContent.substring(0, reactiveMatch.index).match(/\n/g) || []).length + 1,
+    });
+  }
+  
+  // Extract event handlers: on:click, on:submit, etc.
+  const eventHandlerRegex = /on:(\w+)=["']([^"']+)["']/g;
+  let handlerMatch;
+  while ((handlerMatch = eventHandlerRegex.exec(markupContent)) !== null) {
+    eventHandlers.push({
+      event: handlerMatch[1],
+      handler: handlerMatch[2],
+      line: (markupContent.substring(0, handlerMatch.index).match(/\n/g) || []).length + 1,
+    });
+  }
+  
+  // Extract bindings: bind:value, bind:checked, etc.
+  const bindingRegex = /bind:(\w+)=["']([^"']+)["']/g;
+  let bindingMatch;
+  while ((bindingMatch = bindingRegex.exec(markupContent)) !== null) {
+    bindings.push({
+      property: bindingMatch[1],
+      variable: bindingMatch[2],
+      line: (markupContent.substring(0, bindingMatch.index).match(/\n/g) || []).length + 1,
+    });
+  }
+  
+  return {
+    reactiveStatements,
+    eventHandlers,
+    bindings,
+  };
+}
+
+/**
+ * Map template handlers to script functions
+ * Helps identify which handlers are UI-bound
+ * 
+ * @param {Array} eventHandlers - Event handlers from template
+ * @param {string} scriptContent - Script block content
+ * @returns {Array} Mapped handlers with function references
+ */
+export function mapTemplateHandlersToScript(eventHandlers, scriptContent) {
+  return eventHandlers.map(handler => {
+    // Try to find function definition in script
+    const functionRegex = new RegExp(`(?:function\\s+${handler.handler}|const\\s+${handler.handler}\\s*=\\s*[^(]*\\(|${handler.handler}\\s*=\\s*[^(]*\\(|export\\s+function\\s+${handler.handler})`, 'g');
+    const functionMatch = functionRegex.exec(scriptContent);
+    
+    return {
+      ...handler,
+      functionFound: !!functionMatch,
+      functionLine: functionMatch ? (scriptContent.substring(0, functionMatch.index).match(/\n/g) || []).length + 1 : null,
+    };
+  });
+}
+

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(' > ');
+}
+