Skip to content

Commit 649768b

Browse files
committed
Revert "docs(readme): simplify and condense content"
This reverts commit 4071dfb.
1 parent 4071dfb commit 649768b

File tree

1 file changed

+209
-19
lines changed

1 file changed

+209
-19
lines changed

README.md

Lines changed: 209 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,240 @@
11
# has-jsx
22

3-
Detect JSX in files and strings using AST analysis via [ast-grep](https://github.com/ast-grep/ast-grep). No false positives from TypeScript generics or angle brackets.
3+
CLI and programmatic tool to detect JSX in files and strings using AST analysis.
4+
5+
## Why has-jsx?
6+
7+
Detecting JSX isn't as simple as checking file extensions. JavaScript and TypeScript files (`.js`, `.ts`) can contain JSX syntax. This tool uses [ast-grep](https://github.com/ast-grep/ast-grep)'s powerful AST parsing to reliably detect JSX node types from the [JSX specification](https://facebook.github.io/jsx/):
8+
9+
- `jsx_element` - Standard tags: `<div>...</div>`
10+
- `jsx_self_closing_element` - Self-closing: `<Component />`
11+
- `jsx_fragment` - Fragments: `<>...</>`
12+
13+
## Features
14+
15+
-**Dual mode:** Check files or strings directly
16+
-**Dual package:** Works with both ESM (`import`) and CommonJS (`require()`)
17+
-**AST-based:** No false positives from TypeScript generics or comparison operators
18+
-**CLI & API:** Use from command line or programmatically
19+
-**Fast & reliable:** Powered by ast-grep
420

521
## Installation
622

723
```bash
824
npm install has-jsx
25+
# or
26+
pnpm add has-jsx
27+
```
28+
29+
## CLI Usage
30+
31+
### Check Files
32+
33+
Use the `-f` or `--file` flag to check files:
34+
35+
```bash
36+
has-jsx -f src/Component.tsx
37+
# Output: JSX detected
38+
# Exit code: 0
39+
40+
has-jsx --file src/utils.ts
41+
# Output: No JSX detected
42+
# Exit code: 1
43+
```
44+
45+
### Check Strings
46+
47+
Pass source code directly without any flags:
48+
49+
```bash
50+
has-jsx "const App = () => <div>Hello</div>"
51+
# Output: JSX detected
52+
# Exit code: 0
53+
54+
has-jsx "const x = 5;"
55+
# Output: No JSX detected
56+
# Exit code: 1
957
```
1058

11-
## CLI
59+
### Options
60+
61+
#### Verbose Mode
62+
63+
Get detailed JSON output:
64+
65+
```bash
66+
has-jsx --verbose -f src/App.jsx
67+
# Output:
68+
# {
69+
# "hasJSX": true,
70+
# "inputType": "file",
71+
# "file": "src/App.jsx"
72+
# }
73+
74+
has-jsx --verbose "<Button />"
75+
# Output:
76+
# {
77+
# "hasJSX": true,
78+
# "inputType": "string",
79+
# "source": "<Button />"
80+
# }
81+
```
82+
83+
#### Quiet Mode
84+
85+
Silent mode with only exit codes (useful for scripts):
86+
87+
```bash
88+
has-jsx --quiet src/file.js
89+
echo $? # 0 if JSX detected, 1 if not, 2 on error
90+
```
91+
92+
#### Version
1293

1394
```bash
14-
has-jsx -f src/Component.tsx # Check a file
15-
has-jsx "<div>Hello</div>" # Check a string
16-
has-jsx --verbose -f src/App.jsx # JSON output
17-
has-jsx --quiet src/file.js # Silent, exit code only
95+
has-jsx --version
1896
```
1997

20-
**Exit codes:** 0 = JSX detected, 1 = no JSX, 2 = error
98+
### Exit Codes
99+
100+
- **0** - JSX detected
101+
- **1** - No JSX detected
102+
- **2** - Error (file not found, read error, etc.)
103+
104+
## Programmatic API
105+
106+
### File-based Detection
21107

22-
## API
108+
Check if a file contains JSX:
23109

110+
**ESM (recommended):**
24111
```javascript
25-
import hasJSX, { hasJSXInString } from 'has-jsx';
112+
import hasJSX from 'has-jsx';
26113

27-
// File (async)
28-
await hasJSX('src/Component.tsx'); // true | false
114+
const result = await hasJSX('src/Component.tsx');
115+
console.log(result); // true or false
116+
```
117+
118+
**CommonJS:**
119+
```javascript
120+
const { hasJSX } = require('has-jsx');
29121

30-
// String (sync)
31-
hasJSXInString('<Button />'); // true
122+
(async () => {
123+
const result = await hasJSX('src/Component.tsx');
124+
console.log(result);
125+
})();
32126
```
33127

34-
### `hasJSX(filepath: string): Promise<boolean>`
128+
### String-based Detection
35129

36-
Reads and parses a file. Throws if the file doesn't exist or can't be read.
130+
Check if a string contains JSX (synchronous, no file I/O):
37131

38-
### `hasJSXInString(source: string): boolean`
132+
**ESM:**
133+
```javascript
134+
import { hasJSXInString } from 'has-jsx';
39135

40-
Parses a source string synchronously. Throws `TypeError` if source is not a string.
136+
const code = `
137+
function App() {
138+
return <div>Hello World</div>;
139+
}
140+
`;
41141

42-
Both work with ESM (`import`) and CommonJS (`require`).
142+
const result = hasJSXInString(code);
143+
console.log(result); // true
144+
```
145+
146+
**CommonJS:**
147+
```javascript
148+
const { hasJSXInString } = require('has-jsx');
149+
150+
const code = 'const App = () => <div>Hello</div>';
151+
const result = hasJSXInString(code);
152+
console.log(result); // true
153+
```
154+
155+
### API Reference
156+
157+
#### `hasJSX(filepath: string): Promise<boolean>`
158+
159+
Analyzes a file to detect JSX syntax.
160+
161+
**Parameters:**
162+
- `filepath` - Path to the file to analyze (relative or absolute)
163+
164+
**Returns:**
165+
- `Promise<boolean>` - `true` if JSX is detected, `false` otherwise
166+
167+
**Throws:**
168+
- `Error` - If file doesn't exist, is not a file, or can't be read
169+
170+
**Example:**
171+
172+
```javascript
173+
import hasJSX from 'has-jsx';
174+
175+
try {
176+
const result = await hasJSX('src/Component.tsx');
177+
if (result) {
178+
console.log('This file contains JSX');
179+
}
180+
} catch (error) {
181+
console.error('Error:', error.message);
182+
}
183+
```
184+
185+
#### `hasJSXInString(source: string): boolean`
186+
187+
Analyzes a source code string to detect JSX syntax (synchronous).
188+
189+
**Parameters:**
190+
- `source` - Source code string to analyze
191+
192+
**Returns:**
193+
- `boolean` - `true` if JSX is detected, `false` otherwise
194+
195+
**Throws:**
196+
- `TypeError` - If source is not a string
197+
198+
**Example:**
199+
200+
```javascript
201+
import { hasJSXInString } from 'has-jsx';
202+
203+
const code = 'const Button = () => <button>Click</button>';
204+
const result = hasJSXInString(code);
205+
console.log(result); // true
206+
207+
// No false positives for TypeScript generics
208+
const genericCode = 'function identity<T>(arg: T): T { return arg; }';
209+
console.log(hasJSXInString(genericCode)); // false
210+
```
211+
212+
## How It Works
213+
214+
1. **AST Parsing**: Uses [ast-grep](https://github.com/ast-grep/ast-grep) to parse files as TypeScript/TSX
215+
2. **Node Detection**: Searches the AST for JSX-specific node types defined in the [JSX specification](https://facebook.github.io/jsx/)
216+
3. **Reliable Results**: Avoids false positives from regex-based detection or angle brackets in comparisons
217+
218+
## Use Cases
219+
220+
- **Build Tools**: Determine which files need JSX transformation
221+
- **Linters**: Validate JSX usage against project rules
222+
- **Code Analysis**: Audit codebase for JSX patterns
223+
- **CI/CD**: Verify file types in automated pipelines
224+
- **Migration Tools**: Identify files during framework migrations
43225

44226
## Requirements
45227

46-
Node.js >= 20.0.0
228+
- Node.js >= 20.0.0
47229

48230
## License
49231

50232
MIT
233+
234+
## Contributing
235+
236+
Issues and pull requests welcome! Please ensure all tests pass before submitting:
237+
238+
```bash
239+
npm test
240+
```

0 commit comments

Comments
 (0)