fix(extraction): index Vue <template> component usages (colbymchenry#629 follow-up) (colbymchenry#659)

colbymchenry · claude · web-flow · commit 629d8472b141 · 2026-06-02T21:44:27.000-05:00
Vue's extractor parsed only the <script> block, so a component used solely in another component's <template> (`<MyButton />`) produced no reference — and thus showed a false 0 callers, even after the barrel-resolution fix in PR colbymchenry#657. This is the Vue analogue of Svelte's extractTemplateComponents. extractTemplateComponents() now scans the template (everything outside the <script>/<style> blocks, which also handles nested <template> tags for v-if/slots) for component tags: - PascalCase tags (`<MyButton/>`) — captured as-is. - kebab-case tags (`<my-button/>`) — converted to PascalCase so they match the imported component's name. Safe: an unmatched name creates no edge during resolution, so native custom elements just don't resolve. - Native HTML elements (lowercase, no hyphen) and Vue built-ins (Transition, KeepAlive, …) are skipped. Adds no nodes — only `references` — so node counts stay stable. With this plus colbymchenry#657, a Vue component re-exported through a barrel and used only in a template now resolves end-to-end (callers/impact/callees). Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Asking what a symbol impacts no longer drags in every unrelated sibling method of its class — impact now follows real dependencies instead of the structural "contains" relationship, keeping the result focused on what actually depends on the symbol. (#536)
 - CodeGraph's MCP server now answers an agent's `resources/list` and `prompts/list` probes with an empty list instead of an error, clearing the `-32601` messages some clients (opencode, Codex) logged on connect. (#621)
 - Svelte and Vue components used through a barrel file — `export { default as Button } from './Button.svelte'` re-exported from an `index.ts` and imported elsewhere — are no longer falsely reported as having **0 callers**. CodeGraph now follows the default re-export all the way to the component and resolves the imports that `.svelte` / `.vue` files themselves use, so `codegraph_callers` and `codegraph_impact` see every place a component is used. This also covers components imported from another package in a workspace/monorepo (`@scope/ui/widgets`) and bare directory imports (`import { x } from './'`). Previously a live component consumed only through a barrel looked like dead code. Thanks @nakisen. (#629)
+- Components used in a Vue Single-File Component's `<template>` — `<MyButton />`, or the kebab-case `<my-button />` — are now indexed as usages, so `codegraph_callers` and `codegraph_impact` include components that appear only in another component's markup (including through a barrel re-export). Previously only a Vue component's `<script>` block was analyzed, so template-only usages were invisible. (#629)
 
 ## [0.9.9] - 2026-06-02
 
diff --git a/__tests__/extraction.test.ts b/__tests__/extraction.test.ts
@@ -3918,6 +3918,32 @@ export default {
     expect(calls).toHaveLength(2);
   });
 
+  it('should extract component usages from the Vue template (PascalCase + kebab, skipping built-ins) (#629)', () => {
+    const code = `<template>
+  <div class="wrap">
+    <UserCard :user="u" />
+    <my-button>Click</my-button>
+    <Transition><span>x</span></Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserCard from './UserCard.vue';
+import MyButton from './MyButton.vue';
+</script>
+`;
+    const result = extractFromSource('Host.vue', code);
+    const refs = result.unresolvedReferences
+      .filter((r) => r.referenceKind === 'references')
+      .map((r) => r.referenceName);
+
+    expect(refs).toContain('UserCard'); // PascalCase tag
+    expect(refs).toContain('MyButton'); // kebab <my-button> → MyButton
+    expect(refs).not.toContain('Transition'); // Vue built-in skipped
+    expect(refs).not.toContain('Div'); // native HTML element skipped
+    expect(refs).not.toContain('Span');
+  });
+
   it('should extract from both <script> and <script setup> blocks', () => {
     const code = `<template>
   <div>{{ msg }}</div>
diff --git a/__tests__/resolution.test.ts b/__tests__/resolution.test.ts
@@ -1389,6 +1389,37 @@ func main() {
       const callers = cg.getCallers(runNode!.id);
       expect(callers.some((c) => c.node.filePath === 'src/App.vue')).toBe(true);
     });
+
+    it('follows a Vue component used in a <template> through a default re-export barrel (#629)', async () => {
+      // End-to-end Vue analogue of the Svelte case: the leaf is a `.vue`
+      // component re-exported under an alias (`Thing`) that differs from its
+      // real name (`Widget`), and the consumer uses it ONLY in markup
+      // (`<Thing />`). Requires both the new template-tag extraction AND the
+      // barrel default-export chase to connect the edge.
+      fs.mkdirSync(path.join(tempDir, 'src/lib'), { recursive: true });
+      fs.writeFileSync(
+        path.join(tempDir, 'src/lib/Widget.vue'),
+        `<script setup lang="ts">\ndefineProps<{ label?: string }>();\n</script>\n<template><button>x</button></template>\n`
+      );
+      fs.writeFileSync(
+        path.join(tempDir, 'src/lib/index.ts'),
+        `export { default as Thing } from './Widget.vue';\n`
+      );
+      fs.writeFileSync(
+        path.join(tempDir, 'src/App.vue'),
+        `<script setup lang="ts">\nimport { Thing } from './lib';\n</script>\n<template>\n  <Thing />\n</template>\n`
+      );
+
+      cg = await CodeGraph.init(tempDir, { index: true });
+      cg.resolveReferences();
+
+      const widgetNode = cg
+        .getNodesByKind('component')
+        .find((n) => n.name === 'Widget' && n.filePath === 'src/lib/Widget.vue');
+      expect(widgetNode).toBeDefined();
+      const callers = cg.getCallers(widgetNode!.id);
+      expect(callers.some((c) => c.node.filePath === 'src/App.vue')).toBe(true);
+    });
   });
 
   describe('C/C++ Import Resolution', () => {
diff --git a/src/extraction/vue-extractor.ts b/src/extraction/vue-extractor.ts
@@ -3,6 +3,29 @@ import { generateNodeId } from './tree-sitter-helpers';
 import { TreeSitterExtractor } from './tree-sitter';
 import { isLanguageSupported } from './grammars';
 
+/**
+ * Vue built-in components — skipped so a `<Transition>` / `<KeepAlive>` in the
+ * template doesn't become a phantom reference to a user component. Checked
+ * AFTER kebab→Pascal conversion, so `<keep-alive>` is caught here too.
+ */
+const VUE_BUILTIN_COMPONENTS = new Set([
+  'Transition',
+  'TransitionGroup',
+  'KeepAlive',
+  'Suspense',
+  'Teleport',
+  'Component',
+  'Slot',
+]);
+
+/** `my-component` → `MyComponent` (Vue allows either form in templates). */
+function kebabToPascal(name: string): string {
+  return name
+    .split('-')
+    .map((part) => (part ? part[0]!.toUpperCase() + part.slice(1) : ''))
+    .join('');
+}
+
 /**
  * VueExtractor - Extracts code relationships from Vue Single-File Component files
  *
@@ -41,6 +64,12 @@ export class VueExtractor {
       for (const block of scriptBlocks) {
         this.processScriptBlock(block, componentNode.id);
       }
+
+      // Extract component usages from the <template> (<ComponentName>).
+      // Without this, a Vue component used only in another component's
+      // markup (incl. through a barrel import) is invisible to callers /
+      // impact (#629 follow-up).
+      this.extractTemplateComponents(componentNode.id);
     } catch (error) {
       this.errors.push({
         message: `Vue extraction error: ${error instanceof Error ? error.message : String(error)}`,
@@ -195,4 +224,67 @@ export class VueExtractor {
       this.errors.push(error);
     }
   }
+
+  /**
+   * Extract component usages from the Vue `<template>`.
+   *
+   * PascalCase tags (`<Modal>`, `<Button />`) and kebab-case tags
+   * (`<my-button>`) both represent component instantiations — analogous to
+   * function calls in imperative code. Capturing them creates parent→child
+   * component edges and lets `callers` / `impact` see a component that is
+   * only ever used in markup. Vue's extractor previously parsed only the
+   * `<script>` block, so these usages produced no edge at all (#629).
+   *
+   * HTML elements (lowercase, no hyphen) and Vue built-ins are skipped.
+   * Unmatched names create no edge during resolution, so converting
+   * kebab-case is safe even for native custom elements.
+   */
+  private extractTemplateComponents(componentNodeId: string): void {
+    // Ranges covered by <script> / <style> blocks — skip them so script
+    // identifiers and CSS selectors aren't mistaken for template tags. This
+    // also correctly handles nested <template> tags (v-if / slots), which a
+    // single non-greedy <template>…</template> match would mis-bound.
+    const coveredRanges: Array<[number, number]> = [];
+    const blockRegex = /<(script|style)(\s[^>]*)?>[\s\S]*?<\/\1>/g;
+    let blockMatch;
+    while ((blockMatch = blockRegex.exec(this.source)) !== null) {
+      const startLine = (this.source.substring(0, blockMatch.index).match(/\n/g) || []).length;
+      const endLine = startLine + (blockMatch[0].match(/\n/g) || []).length;
+      coveredRanges.push([startLine, endLine]);
+    }
+
+    const lines = this.source.split('\n');
+    // Opening / self-closing tags (closing `</Foo>` starts with `</`, so the
+    // leading `<` followed by a name letter won't match it).
+    const tagRegex = /<([A-Za-z][A-Za-z0-9_-]*)\b/g;
+
+    for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+      if (coveredRanges.some(([start, end]) => lineIdx >= start && lineIdx <= end)) continue;
+
+      const line = lines[lineIdx]!;
+      let match;
+      while ((match = tagRegex.exec(line)) !== null) {
+        const raw = match[1]!;
+        let componentName: string;
+        if (/^[A-Z]/.test(raw)) {
+          componentName = raw; // PascalCase component
+        } else if (raw.includes('-')) {
+          componentName = kebabToPascal(raw); // kebab-case component
+        } else {
+          continue; // lowercase, no hyphen → native HTML element
+        }
+        if (VUE_BUILTIN_COMPONENTS.has(componentName)) continue;
+
+        this.unresolvedReferences.push({
+          fromNodeId: componentNodeId,
+          referenceName: componentName,
+          referenceKind: 'references',
+          line: lineIdx + 1, // 1-indexed
+          column: match.index + 1,
+          filePath: this.filePath,
+          language: 'vue',
+        });
+      }
+    }
+  }
 }
