Fix TypeScript validator to support JSX/TSX syntax (#2503)
## Summary
The TypeScript validator was rejecting valid JSX/TSX syntax, causing
optimization runs to fail on React components with JSX.
## Problem
The validator was using `tree_sitter_typescript.language_typescript()`
which doesn't parse JSX syntax. This caused validation failures for
`.tsx` files containing JSX elements like:
- `<div className={...} />`
- `{...rest}` (spread props)
- Any JSX tags
## Solution
Changed to use `tree_sitter_typescript.language_tsx()` instead. Since
TSX is a superset of TypeScript, this supports both:
- Plain TypeScript code
- TypeScript with JSX (TSX)
## Testing
Added three new test cases:
- `test_tsx_simple_jsx` - Tests basic JSX elements
- `test_tsx_nested_jsx` - Tests nested JSX
- `test_tsx_with_props_spread` - Tests spread props in JSX
All existing tests continue to pass.
## Impact
This fixes validation errors for all React/JSX components. Affected
trace IDs from logs:
- 5bedfbb7-ccc0-4fdd-b208-60b8b860750c
- 39892d42-774f-4921-80fc-2ee42ff8ae1c
- 80b818b6-e784-4ff8-abda-c3ce6b25422f
- 9b76943e-1a93-45fa-84b9-aae7d6305f79
- d1bac014-d622-4772-90ea-0f9ff88e32dd
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Codeflash Bot <codeflash-bot@codeflash.ai>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
de4a22d549
commit
8d987de65c
2 changed files with 42 additions and 1 deletions
|
|
@ -20,7 +20,8 @@ if TYPE_CHECKING:
|
|||
|
||||
js_parser = Parser(Language(tree_sitter_javascript.language()))
|
||||
|
||||
ts_parser = Parser(Language(tree_sitter_typescript.language_typescript()))
|
||||
# Use tsx parser for TypeScript to support JSX syntax (TSX is a superset of TS)
|
||||
ts_parser = Parser(Language(tree_sitter_typescript.language_tsx()))
|
||||
|
||||
|
||||
@lru_cache(maxsize=200)
|
||||
|
|
|
|||
|
|
@ -221,3 +221,43 @@ function greet(user: User): string {
|
|||
"""
|
||||
is_valid, error = validate_typescript_syntax(code)
|
||||
assert isinstance(is_valid, bool)
|
||||
|
||||
def test_tsx_simple_jsx(self) -> None:
|
||||
"""Test that simple JSX syntax passes validation in TypeScript."""
|
||||
code = """
|
||||
export const EmailPreviewContentMobile = (props: EmailPreviewContentMobileProps) => {
|
||||
const { className, ...rest } = props;
|
||||
|
||||
return <div className={cn('max-w-sm', className)} {...rest} />;
|
||||
};
|
||||
"""
|
||||
is_valid, error = validate_typescript_syntax(code)
|
||||
assert is_valid is True, f"JSX should be valid in TypeScript. Error: {error}"
|
||||
assert error is None
|
||||
|
||||
def test_tsx_nested_jsx(self) -> None:
|
||||
"""Test that nested JSX elements pass validation."""
|
||||
code = """
|
||||
export const Component = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Title</h1>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
"""
|
||||
is_valid, error = validate_typescript_syntax(code)
|
||||
assert is_valid is True, f"Nested JSX should be valid. Error: {error}"
|
||||
assert error is None
|
||||
|
||||
def test_tsx_with_props_spread(self) -> None:
|
||||
"""Test that JSX with spread props passes validation."""
|
||||
code = """
|
||||
export const Button = (props: ButtonProps) => {
|
||||
return <button {...props}>Click me</button>;
|
||||
};
|
||||
"""
|
||||
is_valid, error = validate_typescript_syntax(code)
|
||||
assert is_valid is True, f"JSX with spread props should be valid. Error: {error}"
|
||||
assert error is None
|
||||
|
|
|
|||
Loading…
Reference in a new issue