Add dedicated TSX syntax highlighting

Author: vipmax

anycode-base/src/code.ts

@@ -25,6 +25,7 @@ import type { Lang } from './lang';
 
 import javascript from './langs/javascript';
 import typescript from './langs/typescript';
+import tsx from './langs/tsx';
 import python from './langs/python';
 import rust from './langs/rust';
 import yaml from './langs/yaml';
@@ -642,6 +643,7 @@ export class Code {
     getLang(lang: string): Lang | null {
         if (lang === 'javascript') return javascript
         if (lang === 'typescript') return typescript
+        if (lang === 'tsx') return tsx
         if (lang === 'rust') return rust
         if (lang === 'python') return python
         if (lang === 'yaml') return yaml

anycode-base/src/langs/tsx.ts

@@ -0,0 +1,65 @@
+import type { Lang } from "../lang";
+import {
+  cmd,
+  cmdTest,
+  executable,
+  foldsQuery as typescriptFoldsQuery,
+  query as typescriptQuery,
+} from "./typescript";
+
+const jsxQuery = `
+; JSX elements
+
+(jsx_opening_element
+  (identifier) @tag)
+
+(jsx_closing_element
+  (identifier) @tag)
+
+(jsx_self_closing_element
+  (identifier) @tag)
+
+[
+  (jsx_opening_element (member_expression) @constructor)
+  (jsx_closing_element (member_expression) @constructor)
+  (jsx_self_closing_element (member_expression) @constructor)
+]
+
+(jsx_attribute
+  (property_identifier) @attribute)
+
+[
+  "<"
+  ">"
+  "</"
+  "/>"
+] @punctuation.bracket
+
+(jsx_attribute
+  "=" @operator)
+
+(jsx_text) @string
+(html_character_reference) @string.special
+`;
+
+const query = `${jsxQuery}\n${typescriptQuery}`;
+
+const foldsQuery = `${typescriptFoldsQuery}
+[
+  (jsx_element)
+  (jsx_expression)
+] @fold
+`;
+
+const indent = { width: 2, unit: " " };
+const comment = "//";
+
+export default {
+  query,
+  foldsQuery,
+  executable,
+  cmd,
+  cmdTest,
+  indent,
+  comment,
+} satisfies Lang;

anycode-base/src/langs/typescript.ts

@@ -1,6 +1,6 @@
 import type { Lang } from "../lang";
 
-const query = `
+export const query = `
 ; Special identifiers
 ;--------------------
 
@@ -464,7 +464,7 @@ let runnablesQuery = `
 )
 `
 
-let foldsQuery = `
+export const foldsQuery = `
 [
   (statement_block)
   (class_body)
@@ -497,9 +497,9 @@ let foldsQuery = `
 ] @fold
 `
 
-let executable = true;
-let cmd = "node {file}"
-let cmdTest = "npx jest {file} -t \"{test-name}\""
+export const executable = true;
+export const cmd = "node {file}"
+export const cmdTest = "npx jest {file} -t \"{test-name}\""
 
 export default {
   query, foldsQuery, runnablesQuery, executable, cmd, cmdTest, indent, comment

anycode-base/tests/code.test.ts

@@ -37,6 +37,24 @@ function greet(name: string): void {
             expect(nodesLine2.some(n => n.name === 'type' && n.text === 'string')).toBe(true);
             expect(nodesLine2.some(n => n.name === 'type' && n.text === 'void')).toBe(true);
         });
+
+        it('should parse and highlight TSX elements separately from TypeScript', async () => {
+            const tsxCode = `type Props = { title: string };
+export function Card({ title }: Props) {
+    return <section className="card"><Header title={title} /></section>;
+}
+`;
+            const code = new Code(tsxCode, 'Card.tsx', 'tsx');
+            await code.init();
+
+            const jsxLine = code.getLineNodes(2);
+            expect(code.language).toBe('tsx');
+            expect(jsxLine.some(n => n.name === 'tag' && n.text === 'section')).toBe(true);
+            expect(jsxLine.some(n => n.name === 'tag' && n.text === 'Header')).toBe(true);
+            expect(jsxLine.some(n => n.name === 'attribute' && n.text === 'className')).toBe(true);
+            expect(jsxLine.some(n => n.name === 'attribute' && n.text === 'title')).toBe(true);
+            expect(jsxLine.some(n => n.name === 'string' && n.text === '"card"')).toBe(true);
+        });
     });
 
     describe('Python Parsing', () => {

anycode-base/wasm/tree-sitter-tsx.wasm

@@ -27,7 +27,7 @@ export const LANGUAGE_EXTENSIONS: { [key: string]: string } = {
     'js': 'javascript',
     'ts': 'typescript',
     'jsx': 'javascript',
-    'tsx': 'typescript',
+    'tsx': 'tsx',
     'py': 'python',
     'cpp': 'cpp',
     'c': 'c',