From 738261290a3d87c5e65e2e1798f27a59f168d2ff Mon Sep 17 00:00:00 2001
From: Max Hsu <maxmilian@gmail.com>
Date: Fri, 16 Oct 2026 08:51:25 +0800
Subject: [PATCH 1/2] fix(extraction): parse Vue <script lang="tsx"> with the
 TSX grammar (#2570)

The Vue extractor only recognised lang="ts" / "typescript", so a
lang="tsx" script fell through to the JavaScript grammar. A macro-only
script like withDefaults(defineProps<T>(), ...) produced no symbols and
a parse_error warning; a script with other declarations hid the same
erroneous parse (the warning only fires when nothing survives) and lost
its interfaces.

Carry the script's language on the block instead of an isTypeScript
flag: tsx -> tsx, ts/typescript -> typescript, otherwise javascript.
The viewer's script-region detection follows for Vue, so highlighting
uses the grammar the graph was built from. Svelte is unchanged: it has
no TSX script language.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AYgh5cxt3ru1kLDYSJ3gta
---
 CHANGELOG.md                     |  1 +
 __tests__/vue-tsx-script.test.ts | 85 ++++++++++++++++++++++++++++++++
 src/extraction/syntax-tokens.ts  | 10 +++-
 src/extraction/vue-extractor.ts  | 15 +++---
 4 files changed, 103 insertions(+), 8 deletions(-)
 create mode 100644 __tests__/vue-tsx-script.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15f9099acd..dda421ec5a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `codegraph_explore` and `codegraph context` now find your project's busiest file, and favor the code around it, even when twenty or more test or generated files are busier still, such as a package of protobuf stubs. Before, the search looked only at the 20 busiest files and then set the tests and generated ones aside, so it could find no file at all, or judge one far ahead of the next when it was not. `getTopRouteFile()` in the library counts every file's routes the same way. Thanks @inth3shadows for the report. (#2578)
 - In JavaScript and TypeScript, a call written as the body of an `if`, `while`, `for` or `do` without braces, like `if (e.key === "Escape") setOpen(false);`, no longer links to a same-named property or method in another file when the name is the file's own, such as a `setOpen` from `useState` (#2585).
 - `codegraph sync` no longer fails with "FOREIGN KEY constraint failed" in a project whose code lazy-loads a workspace package, like Supabase Studio's `dynamic(() => import('icons').then((mod) => mod.EdgeFunctions))` or vben's `() => import('@vben/layouts').then((m) => m.IFrameView)`. Before, every sync after an edit in such a project rolled back, so the index stopped following your changes until a full re-index. Thanks @bompus for the report and @inth3shadows. (#2565)
+- In Vue, a `<script lang="tsx">` block is now read as TSX. Before, it was read as JavaScript, which cannot parse its TypeScript: a script holding only `defineProps` or `withDefaults` was reported as producing no symbols, and an `interface` declared in the script was missing from the graph. The source viewer now highlights these blocks as TSX too. Re-index Vue projects that use `lang="tsx"` after upgrading. Thanks @leadingGo for the report. (#2570)
 - In VB.NET, every member of a `Structure` is now indexed, including its fields, properties, methods, constructors and nested enums. Before, only the first member was, so the rest could not be found and their callers looked empty.
 - In Delphi, a routine with an attribute on one of its parameters, like `const [ref] AValue: Integer` or DelphiMVCFramework's `const [MVCFromBody] Person: TPerson`, is now indexed with its calls, and so is every class member declared after it. Before, the routine was lost or its calls were credited to the file, the parameter showed up as a field of the class, and the members after it were missing. Thanks @stalexteam for the report. (#2545)
 - In Delphi, a `for … in` loop that declares its variable inline, like `for var lItem in AList do` or `for var lHandle: THandle in lHandles do`, now has its calls indexed, and a call on a typed loop variable reaches that type's method. Before, the whole loop was skipped, so a routine calling a method only from such a loop was missing from that method's callers. Thanks @stalexteam for the report. (#2546)
diff --git a/__tests__/vue-tsx-script.test.ts b/__tests__/vue-tsx-script.test.ts
new file mode 100644
index 0000000000..f85a48e148
--- /dev/null
+++ b/__tests__/vue-tsx-script.test.ts
@@ -0,0 +1,85 @@
+/**
+ * A Vue SFC's `<script lang="tsx">` is TSX, and is parsed with the TSX
+ * grammar (#2570). It used to fall through to JavaScript: a macro-only script
+ * like `withDefaults(defineProps<T>(), …)` reported "parse produced no
+ * symbols", and a script with any other declaration hid the same broken parse
+ * because that warning only fires when nothing survives.
+ */
+import { describe, it, expect, beforeAll } from 'vitest';
+import { extractFromSource } from '../src/extraction';
+import { getParser, initGrammars, loadAllGrammars } from '../src/extraction/grammars';
+import { syntaxRegionsFor } from '../src/extraction/syntax-tokens';
+
+beforeAll(async () => {
+  await initGrammars();
+  await loadAllGrammars();
+});
+
+const MACRO_ONLY = `<template><h1>{{ title }}</h1></template>
+<script setup lang="tsx">
+withDefaults(defineProps<{ title?: string }>(), { title: 'Hello' });
+</script>
+`;
+
+// TypeScript types and JSX together: only the TSX grammar reads this cleanly,
+// and the extra declarations keep the "no symbols" warning from firing either way.
+const TYPES_AND_JSX = `<template><Row /></template>
+<script setup lang="tsx">
+interface RowProps { label: string }
+const props = defineProps<RowProps>();
+const Row = (p: RowProps) => <span class="row">{shout(p.label)}</span>;
+function shout(s: string): string { return s.toUpperCase(); }
+</script>
+`;
+
+/** The script body of a single-script SFC, as the viewer locates it. */
+function scriptRegion(source: string) {
+  const regions = syntaxRegionsFor(source, 'vue');
+  expect(regions).toHaveLength(1);
+  const region = regions![0]!;
+  return { language: region.language, body: source.slice(region.start, region.end) };
+}
+
+describe('Vue <script lang="tsx">', () => {
+  it('parses a macro-only script without a parse warning', () => {
+    const result = extractFromSource('Title.vue', MACRO_ONLY);
+    expect(result.errors.filter((e) => e.code === 'parse_error')).toEqual([]);
+  });
+
+  it('reads the script with the TSX grammar, which parses it without errors', () => {
+    for (const source of [MACRO_ONLY, TYPES_AND_JSX]) {
+      const { language, body } = scriptRegion(source);
+      expect(language).toBe('tsx');
+      const tree = getParser('tsx')!.parse(body)!;
+      try {
+        expect(tree.rootNode.hasError).toBe(false);
+      } finally {
+        tree.delete();
+      }
+    }
+  });
+
+  it('extracts TypeScript declarations and calls made inside JSX', () => {
+    const result = extractFromSource('Row.vue', TYPES_AND_JSX);
+    const find = (kind: string, name: string) => result.nodes.find((n) => n.kind === kind && n.name === name);
+    expect(find('interface', 'RowProps')).toBeDefined();
+    expect(find('function', 'shout')).toBeDefined();
+    const row = find('function', 'Row');
+    expect(row).toBeDefined();
+    expect(
+      result.unresolvedReferences.some(
+        (r) => r.fromNodeId === row!.id && r.referenceName === 'shout' && r.referenceKind === 'calls'
+      )
+    ).toBe(true);
+    expect(result.errors.filter((e) => e.code === 'parse_error')).toEqual([]);
+  });
+
+  it('still reads lang="ts" as TypeScript and no lang as JavaScript', () => {
+    const ts = `<script setup lang="ts">\nconst n: number = 1;\n</script>\n`;
+    const js = `<script setup>\nconst n = 1;\n</script>\n`;
+    expect(scriptRegion(ts).language).toBe('typescript');
+    expect(scriptRegion(js).language).toBe('javascript');
+    expect(extractFromSource('A.vue', ts).nodes.some((n) => n.name === 'n')).toBe(true);
+    expect(extractFromSource('B.vue', js).nodes.some((n) => n.name === 'n')).toBe(true);
+  });
+});
diff --git a/src/extraction/syntax-tokens.ts b/src/extraction/syntax-tokens.ts
index 67c0d1b710..bfee678f74 100644
--- a/src/extraction/syntax-tokens.ts
+++ b/src/extraction/syntax-tokens.ts
@@ -362,6 +362,8 @@ export interface SyntaxRegion {
 
 const SCRIPT_BLOCK = /<script(\s[^>]*)?>([\s\S]*?)<\/script>/gi;
 const TS_LANG_ATTR = /lang\s*=\s*["'](ts|typescript)["']/i;
+/** Vue's extractor reads `lang="tsx"` with the TSX grammar; Svelte's has no TSX. */
+const TSX_LANG_ATTR = /lang\s*=\s*["']tsx["']/i;
 /** Astro's frontmatter: a `---` fence at the very top of the file. */
 const ASTRO_FRONTMATTER = /^(---\r?\n)([\s\S]*?)\r?\n---/;
 
@@ -392,12 +394,18 @@ export function syntaxRegionsFor(source: string, language: Language): SyntaxRegi
     regions.push({
       start,
       end: start + body.length,
-      language: TS_LANG_ATTR.test(match[1] ?? '') ? 'typescript' : 'javascript',
+      language: scriptLanguage(match[1] ?? '', language),
     });
   }
   return regions;
 }
 
+/** The grammar a `<script>` block with these attributes is read with. */
+function scriptLanguage(attrs: string, host: Language): Language {
+  if (host === 'vue' && TSX_LANG_ATTR.test(attrs)) return 'tsx';
+  return TS_LANG_ATTR.test(attrs) ? 'typescript' : 'javascript';
+}
+
 /* --------------------------------------------------------------- the API -- */
 
 export interface TokenizeResult {
diff --git a/src/extraction/vue-extractor.ts b/src/extraction/vue-extractor.ts
index 37b8305c84..347eb9a281 100644
--- a/src/extraction/vue-extractor.ts
+++ b/src/extraction/vue-extractor.ts
@@ -192,13 +192,13 @@ export class VueExtractor {
     content: string;
     startLine: number;
     isSetup: boolean;
-    isTypeScript: boolean;
+    language: Language;
   }> {
     const blocks: Array<{
       content: string;
       startLine: number;
       isSetup: boolean;
-      isTypeScript: boolean;
+      language: Language;
     }> = [];
 
     const scriptRegex = /<script(\s[^>]*)?>(?<content>[\s\S]*?)<\/script>/g;
@@ -208,8 +208,9 @@ export class VueExtractor {
       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);
+      // The script's language from its lang attribute: tsx, TypeScript or JavaScript
+      const lang = /lang\s*=\s*["'](tsx|ts|typescript)["']/.exec(attrs)?.[1];
+      const language: Language = lang === 'tsx' ? 'tsx' : lang ? 'typescript' : 'javascript';
 
       // Detect <script setup>
       const isSetup = /\bsetup\b/.test(attrs);
@@ -229,7 +230,7 @@ export class VueExtractor {
         content,
         startLine: contentStartLine,
         isSetup,
-        isTypeScript,
+        language,
       });
     }
 
@@ -240,10 +241,10 @@ export class VueExtractor {
    * Process a script block by delegating to TreeSitterExtractor
    */
   private processScriptBlock(
-    block: { content: string; startLine: number; isSetup: boolean; isTypeScript: boolean },
+    block: { content: string; startLine: number; isSetup: boolean; language: Language },
     componentNodeId: string
   ): void {
-    const scriptLanguage: Language = block.isTypeScript ? 'typescript' : 'javascript';
+    const scriptLanguage = block.language;
 
     // Check if the script language parser is available
     if (!isLanguageSupported(scriptLanguage)) {

From 7eb759803ef5fa909aa02416be595c7c9ee4de0f Mon Sep 17 00:00:00 2001
From: Max Hsu <maxmilian@gmail.com>
Date: Fri, 16 Oct 2026 09:04:39 +0800
Subject: [PATCH 2/2] fix(extraction): match a Vue script's lang
 case-insensitively (#2570)

The viewer's script regions matched lang="TSX" / "TS" case-insensitively
while the extractor did not, so an uppercase lang was highlighted as TSX
but indexed as JavaScript. Match it case-insensitively in the extractor
too and normalise it, so both read the same grammar. Also mention TSX in
the highlight languages comment.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AYgh5cxt3ru1kLDYSJ3gta
---
 __tests__/vue-tsx-script.test.ts     | 13 +++++++++++++
 src/extraction/vue-extractor.ts      |  5 +++--
 src/ui-server/highlight/languages.ts |  6 +++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/__tests__/vue-tsx-script.test.ts b/__tests__/vue-tsx-script.test.ts
index f85a48e148..fe66a9fa54 100644
--- a/__tests__/vue-tsx-script.test.ts
+++ b/__tests__/vue-tsx-script.test.ts
@@ -74,6 +74,19 @@ describe('Vue <script lang="tsx">', () => {
     expect(result.errors.filter((e) => e.code === 'parse_error')).toEqual([]);
   });
 
+  it('reads lang the same way in the extractor and the viewer, whatever its case or quotes', () => {
+    for (const attr of [`lang="TSX"`, `lang='tsx'`]) {
+      const source = TYPES_AND_JSX.replace('lang="tsx"', attr);
+      expect(scriptRegion(source).language).toBe('tsx');
+      const result = extractFromSource('Row.vue', source);
+      expect(result.nodes.some((n) => n.kind === 'interface' && n.name === 'RowProps')).toBe(true);
+      expect(result.errors.filter((e) => e.code === 'parse_error')).toEqual([]);
+    }
+    const ts = `<script setup lang="TS">\ninterface P { a: string }\n</script>\n`;
+    expect(scriptRegion(ts).language).toBe('typescript');
+    expect(extractFromSource('C.vue', ts).nodes.some((n) => n.kind === 'interface' && n.name === 'P')).toBe(true);
+  });
+
   it('still reads lang="ts" as TypeScript and no lang as JavaScript', () => {
     const ts = `<script setup lang="ts">\nconst n: number = 1;\n</script>\n`;
     const js = `<script setup>\nconst n = 1;\n</script>\n`;
diff --git a/src/extraction/vue-extractor.ts b/src/extraction/vue-extractor.ts
index 347eb9a281..9f2ed04217 100644
--- a/src/extraction/vue-extractor.ts
+++ b/src/extraction/vue-extractor.ts
@@ -208,8 +208,9 @@ export class VueExtractor {
       const attrs = match[1] || '';
       const content = match.groups?.content || match[2] || '';
 
-      // The script's language from its lang attribute: tsx, TypeScript or JavaScript
-      const lang = /lang\s*=\s*["'](tsx|ts|typescript)["']/.exec(attrs)?.[1];
+      // The script's language from its lang attribute: tsx, TypeScript or JavaScript.
+      // Matched case-insensitively, as the viewer's syntax regions do.
+      const lang = /lang\s*=\s*["'](tsx|ts|typescript)["']/i.exec(attrs)?.[1]?.toLowerCase();
       const language: Language = lang === 'tsx' ? 'tsx' : lang ? 'typescript' : 'javascript';
 
       // Detect <script setup>
diff --git a/src/ui-server/highlight/languages.ts b/src/ui-server/highlight/languages.ts
index 3b2123084b..fd8bcb4ed3 100644
--- a/src/ui-server/highlight/languages.ts
+++ b/src/ui-server/highlight/languages.ts
@@ -11,9 +11,9 @@
  * The three single-file-component formats are the exception worth naming. A
  * `.svelte`, `.vue` or `.astro` file has no grammar of its own here — the
  * extractors pull the `<script>` block out and hand it to TypeScript or
- * JavaScript — and the classifier does exactly the same thing, so a component's
- * code is read by the grammar its symbols came from while the surrounding
- * markup stays plain.
+ * JavaScript, or TSX for a Vue `lang="tsx"` block — and the classifier does
+ * exactly the same thing, so a component's code is read by the grammar its
+ * symbols came from while the surrounding markup stays plain.
  */
 
 import type { Language } from '../../types';