feat: add Vue SFC, JSX, and TSX JSX highlighting support

queries/tsx/highlights.scm

@@ -0,0 +1,241 @@
+; TSX/JSX syntax highlighting queries
+; Inherits all TypeScript patterns plus JSX-specific patterns
+
+; Properties (must come early to be overridden by more specific patterns)
+(property_identifier) @property
+(shorthand_property_identifier) @property
+
+; Parameters - TypeScript specific
+(required_parameter
+  pattern: (identifier) @variable.parameter)
+
+(optional_parameter
+  pattern: (identifier) @variable.parameter)
+
+; Rest parameters
+(rest_pattern
+  (identifier) @variable.parameter)
+
+; Destructuring in parameters
+(object_pattern
+  (shorthand_property_identifier_pattern) @variable.parameter)
+
+; Variables
+(variable_declarator
+  name: (identifier) @variable)
+
+; Function definitions
+(function_declaration
+  name: (identifier) @function)
+
+(method_definition
+  name: (property_identifier) @function.method)
+
+(variable_declarator
+  name: (identifier) @function
+  value: [(function_expression) (arrow_function)])
+
+; Function calls
+(call_expression
+  function: (identifier) @function)
+
+(call_expression
+  function: (member_expression
+    property: (property_identifier) @function.method))
+
+; Constructor calls
+(new_expression
+  constructor: (identifier) @constructor)
+
+(new_expression
+  constructor: (member_expression
+    property: (property_identifier) @constructor))
+
+; Class definitions
+(class_declaration
+  name: (type_identifier) @type)
+
+(interface_declaration
+  name: (type_identifier) @type)
+
+(type_alias_declaration
+  name: (type_identifier) @type)
+
+(enum_declaration
+  name: (identifier) @type)
+
+; Type annotations
+(type_identifier) @type
+(predefined_type) @type.builtin
+
+; Strings
+(string) @string
+(template_string) @string
+(template_substitution
+  "${" @punctuation.special
+  "}" @punctuation.special)
+
+; Escape sequences
+(escape_sequence) @escape
+
+; Comments
+(comment) @comment
+
+; Numbers
+(number) @number
+
+; Booleans and constants
+(true) @boolean
+(false) @boolean
+(null) @constant.builtin
+(undefined) @constant.builtin
+
+; This/super
+(this) @variable.builtin
+(super) @variable.builtin
+
+; Operators
+[
+  "+"
+  "-"
+  "*"
+  "/"
+  "%"
+  "**"
+  "="
+  "+="
+  "-="
+  "*="
+  "/="
+  "%="
+  "**="
+  "=="
+  "==="
+  "!="
+  "!=="
+  "<"
+  "<="
+  ">"
+  ">="
+  "&&"
+  "||"
+  "!"
+  "&"
+  "|"
+  "^"
+  "~"
+  "<<"
+  ">>"
+  ">>>"
+  "??"
+  "?."
+  "?:"
+  "++"
+  "--"
+] @operator
+
+; Function-defining keywords
+[
+  "function"
+  "async"
+] @keyword.function
+
+"=>" @keyword.function
+
+; Return keywords
+[
+  "return"
+  "yield"
+] @keyword.return
+
+; Keyword operators
+[
+  "typeof"
+  "instanceof"
+  "in"
+  "delete"
+  "void"
+  "new"
+  "keyof"
+] @keyword.operator
+
+; General keywords (TypeScript-specific and remaining)
+[
+  "abstract"
+  "as"
+  "await"
+  "break"
+  "case"
+  "catch"
+  "class"
+  "const"
+  "continue"
+  "debugger"
+  "declare"
+  "default"
+  "do"
+  "else"
+  "enum"
+  "export"
+  "extends"
+  "finally"
+  "for"
+  "from"
+  "get"
+  "if"
+  "implements"
+  "import"
+  "interface"
+  "let"
+  "module"
+  "namespace"
+  "of"
+  "override"
+  "private"
+  "protected"
+  "public"
+  "readonly"
+  "satisfies"
+  "set"
+  "static"
+  "switch"
+  "throw"
+  "try"
+  "type"
+  "var"
+  "while"
+  "with"
+] @keyword
+
+; Punctuation
+["(" ")" "[" "]" "{" "}"] @punctuation.bracket
+["," "." ";" ":"] @punctuation.delimiter
+
+; JSX support
+(jsx_opening_element
+  name: (identifier) @tag)
+(jsx_closing_element
+  name: (identifier) @tag)
+(jsx_self_closing_element
+  name: (identifier) @tag)
+
+; JSX component names (member expressions like Foo.Bar)
+(jsx_opening_element
+  name: (member_expression) @tag)
+(jsx_closing_element
+  name: (member_expression) @tag)
+(jsx_self_closing_element
+  name: (member_expression) @tag)
+
+; JSX attributes
+(jsx_attribute
+  (property_identifier) @property)
+
+; JSX string attribute values
+(jsx_attribute
+  (string) @string)
+
+; JSX expression containers
+(jsx_expression
+  "{" @punctuation.special
+  "}" @punctuation.special)

src/outline/extract.rs

@@ -23,7 +23,7 @@ pub fn extract_outline(
             let flat = extract_rust_symbols(root, source);
             build_tree_by_containment(flat)
         }
-        LanguageId::TypeScript | LanguageId::Tsx | LanguageId::JavaScript => {
+        LanguageId::TypeScript | LanguageId::Tsx | LanguageId::JavaScript | LanguageId::Jsx => {
             let flat = extract_js_ts_symbols(root, source);
             build_tree_by_containment(flat)
         }
@@ -59,6 +59,10 @@ pub fn extract_outline(
             let flat = extract_blade_symbols(root, source);
             build_tree_by_containment(flat)
         }
+        LanguageId::Vue => {
+            let flat = extract_vue_symbols(root, source);
+            build_tree_by_containment(flat)
+        }
         _ => Vec::new(),
     };
 
@@ -1075,6 +1079,57 @@ fn blade_directive_label(node: &Node, source: &str) -> String {
     directive
 }
 
+// =============================================================================
+// Vue SFC symbol extraction
+// =============================================================================
+
+fn extract_vue_symbols(root: Node, source: &str) -> Vec<FlatSymbol> {
+    let mut symbols = Vec::new();
+    collect_vue_symbols(root, source, &mut symbols);
+    symbols
+}
+
+fn collect_vue_symbols(node: Node, source: &str, symbols: &mut Vec<FlatSymbol>) {
+    match node.kind() {
+        "element" | "script_element" | "style_element" => {
+            if let Some(tag_name) = vue_element_tag_name(node, source) {
+                match tag_name.as_str() {
+                    "template" | "script" | "style" => {
+                        symbols.push(flat_sym(
+                            OutlineKind::Section,
+                            &format!("<{}>", tag_name),
+                            &node,
+                        ));
+                    }
+                    _ => {}
+                }
+            }
+        }
+        _ => {}
+    }
+
+    let mut cursor = node.walk();
+    for child in node.children(&mut cursor) {
+        collect_vue_symbols(child, source, symbols);
+    }
+}
+
+/// Get the tag name from an HTML element node (element, script_element, style_element)
+fn vue_element_tag_name(node: Node, source: &str) -> Option<String> {
+    let mut cursor = node.walk();
+    for child in node.children(&mut cursor) {
+        if child.kind() == "start_tag" {
+            let mut tag_cursor = child.walk();
+            for tag_child in child.children(&mut tag_cursor) {
+                if tag_child.kind() == "tag_name" {
+                    return node_name(&tag_child, source).map(|s| s.to_string());
+                }
+            }
+        }
+    }
+    None
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;