feat: add Vue support (#66)

Co-authored-by: Colby McHenry <me@colbymchenry.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/extraction/grammars.ts

@@ -10,7 +10,7 @@ import * as path from 'path';
 import { Parser, Language as WasmLanguage } from 'web-tree-sitter';
 import { Language } from '../types';
 
-export type GrammarLanguage = Exclude<Language, 'svelte' | 'liquid' | 'unknown'>;
+export type GrammarLanguage = Exclude<Language, 'svelte' | 'vue' | 'liquid' | 'unknown'>;
 
 /**
  * WASM filename map — maps each language to its .wasm grammar file
@@ -68,6 +68,7 @@ export const EXTENSION_MAP: Record<string, Language> = {
   '.dart': 'dart',
   '.liquid': 'liquid',
   '.svelte': 'svelte',
+  '.vue': 'vue',
   '.pas': 'pascal',
   '.dpr': 'pascal',
   '.dpk': 'pascal',
@@ -201,6 +202,7 @@ function looksLikeCpp(source: string): boolean {
  */
 export function isLanguageSupported(language: Language): boolean {
   if (language === 'svelte') return true; // custom extractor (script block delegation)
+  if (language === 'vue') return true; // custom extractor (script block delegation)
   if (language === 'liquid') return true; // custom regex extractor
   if (language === 'unknown') return false;
   return language in WASM_GRAMMAR_FILES;
@@ -210,7 +212,7 @@ export function isLanguageSupported(language: Language): boolean {
  * Check if a grammar has been loaded and is ready for parsing.
  */
 export function isGrammarLoaded(language: Language): boolean {
-  if (language === 'svelte' || language === 'liquid') return true;
+  if (language === 'svelte' || language === 'vue' || language === 'liquid') return true;
   return languageCache.has(language);
 }
 
@@ -218,7 +220,7 @@ export function isGrammarLoaded(language: Language): boolean {
  * Get all supported languages (those with grammar definitions).
  */
 export function getSupportedLanguages(): Language[] {
-  return [...(Object.keys(WASM_GRAMMAR_FILES) as GrammarLanguage[]), 'svelte', 'liquid'];
+  return [...(Object.keys(WASM_GRAMMAR_FILES) as GrammarLanguage[]), 'svelte', 'vue', 'liquid'];
 }
 
 /**
@@ -282,6 +284,7 @@ export function getLanguageDisplayName(language: Language): string {
     kotlin: 'Kotlin',
     dart: 'Dart',
     svelte: 'Svelte',
+    vue: 'Vue',
     liquid: 'Liquid',
     pascal: 'Pascal / Delphi',
     unknown: 'Unknown',

src/extraction/tree-sitter.ts

@@ -22,6 +22,7 @@ import { EXTRACTORS } from './languages';
 import { LiquidExtractor } from './liquid-extractor';
 import { SvelteExtractor } from './svelte-extractor';
 import { DfmExtractor } from './dfm-extractor';
+import { VueExtractor } from './vue-extractor';
 
 // Re-export for backward compatibility
 export { generateNodeId } from './tree-sitter-helpers';
@@ -2489,6 +2490,12 @@ export function extractFromSource(
     return extractor.extract();
   }
 
+  // Use custom extractor for Vue
+  if (detectedLanguage === 'vue') {
+    const extractor = new VueExtractor(filePath, source);
+    return extractor.extract();
+  }
+
   // Use custom extractor for Liquid
   if (detectedLanguage === 'liquid') {
     const extractor = new LiquidExtractor(filePath, source);

src/extraction/vue-extractor.ts

@@ -0,0 +1,198 @@
+import { Node, Edge, ExtractionResult, ExtractionError, UnresolvedReference, Language } from '../types';
+import { generateNodeId } from './tree-sitter-helpers';
+import { TreeSitterExtractor } from './tree-sitter';
+import { isLanguageSupported } from './grammars';
+
+/**
+ * VueExtractor - Extracts code relationships from Vue Single-File Component files
+ *
+ * Vue SFCs are multi-language (script + template + style). Rather than
+ * parsing the full Vue grammar, we extract the <script> block content
+ * and delegate it to the TypeScript/JavaScript TreeSitterExtractor.
+ *
+ * Every .vue file produces a component node (Vue components are always importable).
+ */
+export class VueExtractor {
+  private filePath: string;
+  private source: string;
+  private nodes: Node[] = [];
+  private edges: Edge[] = [];
+  private unresolvedReferences: UnresolvedReference[] = [];
+  private errors: ExtractionError[] = [];
+
+  constructor(filePath: string, source: string) {
+    this.filePath = filePath;
+    this.source = source;
+  }
+
+  /**
+   * Extract from Vue source
+   */
+  extract(): ExtractionResult {
+    const startTime = Date.now();
+
+    try {
+      // Create component node for the .vue file itself
+      const componentNode = this.createComponentNode();
+
+      // Extract and process script blocks
+      const scriptBlocks = this.extractScriptBlocks();
+
+      for (const block of scriptBlocks) {
+        this.processScriptBlock(block, componentNode.id);
+      }
+    } catch (error) {
+      this.errors.push({
+        message: `Vue extraction error: ${error instanceof Error ? error.message : String(error)}`,
+        severity: 'error',
+      });
+    }
+
+    return {
+      nodes: this.nodes,
+      edges: this.edges,
+      unresolvedReferences: this.unresolvedReferences,
+      errors: this.errors,
+      durationMs: Date.now() - startTime,
+    };
+  }
+
+  /**
+   * Create a component node for the .vue file
+   */
+  private createComponentNode(): Node {
+    const lines = this.source.split('\n');
+    const fileName = this.filePath.split(/[/\\]/).pop() || this.filePath;
+    const componentName = fileName.replace(/\.vue$/, '');
+    const id = generateNodeId(this.filePath, 'component', componentName, 1);
+
+    const node: Node = {
+      id,
+      kind: 'component',
+      name: componentName,
+      qualifiedName: `${this.filePath}::${componentName}`,
+      filePath: this.filePath,
+      language: 'vue',
+      startLine: 1,
+      endLine: lines.length,
+      startColumn: 0,
+      endColumn: lines[lines.length - 1]?.length || 0,
+      isExported: true, // Vue components are always importable
+      updatedAt: Date.now(),
+    };
+
+    this.nodes.push(node);
+    return node;
+  }
+
+  /**
+   * Extract <script> and <script setup> blocks from the Vue source
+   */
+  private extractScriptBlocks(): Array<{
+    content: string;
+    startLine: number;
+    isSetup: boolean;
+    isTypeScript: boolean;
+  }> {
+    const blocks: Array<{
+      content: string;
+      startLine: number;
+      isSetup: boolean;
+      isTypeScript: boolean;
+    }> = [];
+
+    const scriptRegex = /<script(\s[^>]*)?>(?<content>[\s\S]*?)<\/script>/g;
+    let match;
+
+    while ((match = scriptRegex.exec(this.source)) !== null) {
+      const attrs = match[1] || '';
+      const content = match.groups?.content || match[2] || '';
+
+      // Detect TypeScript from lang attribute
+      const isTypeScript = /lang\s*=\s*["'](ts|typescript)["']/.test(attrs);
+
+      // Detect <script setup>
+      const isSetup = /\bsetup\b/.test(attrs);
+
+      // Calculate start line of the script content (line after <script>)
+      const beforeScript = this.source.substring(0, match.index);
+      const scriptTagLine = (beforeScript.match(/\n/g) || []).length;
+      // The content starts on the line after the opening <script> tag
+      const openingTag = match[0].substring(0, match[0].indexOf('>') + 1);
+      const openingTagLines = (openingTag.match(/\n/g) || []).length;
+      const contentStartLine = scriptTagLine + openingTagLines + 1; // 0-indexed line
+
+      blocks.push({
+        content,
+        startLine: contentStartLine,
+        isSetup,
+        isTypeScript,
+      });
+    }
+
+    return blocks;
+  }
+
+  /**
+   * Process a script block by delegating to TreeSitterExtractor
+   */
+  private processScriptBlock(
+    block: { content: string; startLine: number; isSetup: boolean; isTypeScript: boolean },
+    componentNodeId: string
+  ): void {
+    const scriptLanguage: Language = block.isTypeScript ? 'typescript' : 'javascript';
+
+    // Check if the script language parser is available
+    if (!isLanguageSupported(scriptLanguage)) {
+      this.errors.push({
+        message: `Parser for ${scriptLanguage} not available, cannot parse Vue script block`,
+        severity: 'warning',
+      });
+      return;
+    }
+
+    // Delegate to TreeSitterExtractor
+    const extractor = new TreeSitterExtractor(this.filePath, block.content, scriptLanguage);
+    const result = extractor.extract();
+
+    // Offset line numbers from script block back to .vue file positions
+    for (const node of result.nodes) {
+      node.startLine += block.startLine;
+      node.endLine += block.startLine;
+      node.language = 'vue'; // Mark as vue, not TS/JS
+
+      this.nodes.push(node);
+
+      // Add containment edge from component to this node
+      this.edges.push({
+        source: componentNodeId,
+        target: node.id,
+        kind: 'contains',
+      });
+    }
+
+    // Offset edges (they reference line numbers)
+    for (const edge of result.edges) {
+      if (edge.line) {
+        edge.line += block.startLine;
+      }
+      this.edges.push(edge);
+    }
+
+    // Offset unresolved references
+    for (const ref of result.unresolvedReferences) {
+      ref.line += block.startLine;
+      ref.filePath = this.filePath;
+      ref.language = 'vue';
+      this.unresolvedReferences.push(ref);
+    }
+
+    // Carry over errors
+    for (const error of result.errors) {
+      if (error.line) {
+        error.line += block.startLine;
+      }
+      this.errors.push(error);
+    }
+  }
+}