0
# JSX Support
1

2
Complete JSX (JavaScript XML) AST node definitions for React and other JSX-based frameworks. These types represent the parsed structure of JSX syntax and enable comprehensive JSX transformation and analysis.
3

4
## Capabilities
5

6
### Core JSX Elements
7

8
Primary JSX element types for representing JSX syntax trees.
9

10
```typescript { .api }
11
/**
12
 * JSX element with opening tag, children, and optional closing tag
13
 */
14
interface JSXElement extends Node, HasSpan {
15
  type: "JSXElement";
16
  opening: JSXOpeningElement;
17
  children: JSXElementChild[];
18
  closing?: JSXClosingElement;
19
}
20

21
/**
22
 * JSX fragment (<>...</>) for grouping elements without wrapper
23
 */
24
interface JSXFragment extends Node, HasSpan {
25
  type: "JSXFragment";
26
  opening: JSXOpeningFragment;
27
  children: JSXElementChild[];
28
  closing: JSXClosingFragment;
29
}
30

31
/**
32
 * Opening JSX element tag with name, attributes, and self-closing flag
33
 */
34
interface JSXOpeningElement extends Node, HasSpan {
35
  type: "JSXOpeningElement";
36
  name: JSXElementName;
37
  attributes: JSXAttributeOrSpread[];
38
  selfClosing: boolean;
39
  typeArguments?: TsTypeParameterInstantiation;
40
}
41

42
/**
43
 * Closing JSX element tag
44
 */
45
interface JSXClosingElement extends Node, HasSpan {
46
  type: "JSXClosingElement";
47
  name: JSXElementName;
48
}
49
```
50

51
**Usage Examples:**
52

53
```typescript
54
import type { JSXElement, JSXFragment } from "@swc/types";
55

56
// Representing: <div className="container">Hello</div>
57
const elementNode: JSXElement = {
58
  type: "JSXElement",
59
  span: { start: 0, end: 42, ctxt: 0 },
60
  opening: {
61
    type: "JSXOpeningElement",
62
    span: { start: 0, end: 26, ctxt: 0 },
63
    name: { type: "Identifier", span: { start: 1, end: 4, ctxt: 0 }, value: "div" },
64
    attributes: [/* JSXAttribute for className */],
65
    selfClosing: false
66
  },
67
  children: [/* JSXText for "Hello" */],
68
  closing: {
69
    type: "JSXClosingElement", 
70
    span: { start: 31, end: 37, ctxt: 0 },
71
    name: { type: "Identifier", span: { start: 33, end: 36, ctxt: 0 }, value: "div" }
72
  }
73
};
74

75
// Representing: <>Content</>
76
const fragmentNode: JSXFragment = {
77
  type: "JSXFragment",
78
  span: { start: 0, end: 12, ctxt: 0 },
79
  opening: { type: "JSXOpeningFragment", span: { start: 0, end: 2, ctxt: 0 } },
80
  children: [/* JSXText for "Content" */],
81
  closing: { type: "JSXClosingFragment", span: { start: 9, end: 12, ctxt: 0 } }
82
};
83
```
84

85
### JSX Attributes and Values
86

87
Types for JSX attributes, values, and spread operations.
88

89
```typescript { .api }
90
/**
91
 * JSX attribute with name and optional value
92
 */
93
interface JSXAttribute extends Node, HasSpan {
94
  type: "JSXAttribute";
95
  name: JSXAttributeName;
96
  value?: JSXAttrValue;
97
}
98

99
/**
100
 * JSX expression container for embedded JavaScript expressions
101
 */
102
interface JSXExpressionContainer extends Node, HasSpan {
103
  type: "JSXExpressionContainer";
104
  expression: JSXExpression;
105
}
106

107
/**
108
 * Empty JSX expression placeholder
109
 */
110
interface JSXEmptyExpression extends Node, HasSpan {
111
  type: "JSXEmptyExpression";
112
}
113

114
/**
115
 * Text content within JSX elements
116
 */
117
interface JSXText extends Node, HasSpan {
118
  type: "JSXText";
119
  value: string;
120
  raw: string;
121
}
122
```
123

124
### JSX Naming and Namespaces
125

126
Element and attribute naming types, including namespace support.
127

128
```typescript { .api }
129
/**
130
 * JSX member expression for nested component access (e.g., Component.Child)
131
 */
132
interface JSXMemberExpression extends Node {
133
  type: "JSXMemberExpression";
134
  object: JSXObject;
135
  property: Identifier;
136
}
137

138
/**
139
 * XML-style namespaced name (e.g., svg:circle)
140
 */
141
interface JSXNamespacedName extends Node {
142
  type: "JSXNamespacedName";
143
  namespace: Identifier;
144
  name: Identifier;
145
}
146

147
/**
148
 * JSX spread child for array spreading in JSX
149
 */
150
interface JSXSpreadChild extends Node, HasSpan {
151
  type: "JSXSpreadChild";
152
  expression: Expression;
153
}
154
```
155

156
### JSX Fragment Types
157

158
Fragment-specific opening and closing tag types.
159

160
```typescript { .api }
161
/**
162
 * Opening fragment tag (<>)
163
 */
164
interface JSXOpeningFragment extends Node, HasSpan {
165
  type: "JSXOpeningFragment";
166
}
167

168
/**
169
 * Closing fragment tag (</>)
170
 */
171
interface JSXClosingFragment extends Node, HasSpan {
172
  type: "JSXClosingFragment";
173
}
174
```
175

176
## Type Unions
177

178
### JSX Element Names
179

180
Union types for different JSX element naming patterns.
181

182
```typescript { .api }
183
/**
184
 * All possible JSX element name types
185
 */
186
type JSXElementName = 
187
  | Identifier              // Simple component: <Button>
188
  | JSXMemberExpression     // Nested component: <UI.Button>
189
  | JSXNamespacedName;      // Namespaced: <svg:circle>
190

191
/**
192
 * JSX attribute name types
193
 */
194
type JSXAttributeName = 
195
  | Identifier              // Simple attribute: disabled
196
  | JSXNamespacedName;      // Namespaced: xml:lang
197

198
/**
199
 * JSX object reference types for member expressions
200
 */
201
type JSXObject = 
202
  | JSXMemberExpression     // Nested: UI.Components.Button
203
  | Identifier;             // Simple: UI
204
```
205

206
### JSX Values and Children
207

208
Union types for JSX attribute values and element children.
209

210
```typescript { .api }
211
/**
212
 * Possible JSX attribute values
213
 */
214
type JSXAttrValue = 
215
  | Literal                 // String literal: "value"
216
  | JSXExpressionContainer  // Expression: {variable}
217
  | JSXElement             // Nested element: <span>nested</span>
218
  | JSXFragment;           // Fragment: <>content</>
219

220
/**
221
 * Possible JSX element children
222
 */
223
type JSXElementChild = 
224
  | JSXText                // Text content
225
  | JSXExpressionContainer // Embedded expression
226
  | JSXSpreadChild         // Spread operation
227
  | JSXElement            // Nested element
228
  | JSXFragment;          // Nested fragment
229

230
/**
231
 * JSX expression types
232
 */
233
type JSXExpression = 
234
  | JSXEmptyExpression     // Empty: {}
235
  | Expression;            // Any JavaScript expression
236

237
/**
238
 * JSX attribute or spread element
239
 */
240
type JSXAttributeOrSpread = 
241
  | JSXAttribute          // Regular attribute
242
  | SpreadElement;        // Spread: {...props}
243
```
244

245
## Integration with AST
246

247
### Expression Integration
248

249
JSX elements integrate seamlessly with the main Expression union type:
250

251
```typescript { .api }
252
// JSXElement and JSXFragment are part of the main Expression union
253
type Expression = 
254
  | ThisExpression | ArrayExpression | ObjectExpression
255
  // ... other expression types
256
  | JSXElement | JSXFragment
257
  // ... remaining expression types
258
  ;
259
```
260

261
### Literal Integration
262

263
JSXText is included in the Literal union type:
264

265
```typescript { .api }
266
type Literal = 
267
  | StringLiteral | BooleanLiteral | NullLiteral
268
  | NumericLiteral | BigIntLiteral | RegExpLiteral
269
  | JSXText;
270
```
271

272
## TypeScript Integration
273

274
JSX elements support TypeScript generics through type arguments:
275

276
```typescript { .api }
277
interface JSXOpeningElement extends Node, HasSpan {
278
  type: "JSXOpeningElement";
279
  name: JSXElementName;
280
  attributes: JSXAttributeOrSpread[];
281
  selfClosing: boolean;
282
  /** TypeScript generic type arguments: <Component<T>> */
283
  typeArguments?: TsTypeParameterInstantiation;
284
}
285
```
286

287
## React-Specific Patterns
288

289
### Component Patterns
290

291
Common JSX patterns for React components:
292

293
```typescript
294
// Functional Component: <Button onClick={handler}>
295
// - name: Identifier("Button")
296
// - attributes: [JSXAttribute with name="onClick", value=JSXExpressionContainer]
297

298
// Component with children: <Card><Title>Header</Title></Card>
299
// - opening: JSXOpeningElement with name="Card"
300
// - children: [JSXElement for Title]
301
// - closing: JSXClosingElement with name="Card"
302

303
// Self-closing: <Input placeholder="text" />
304
// - opening: JSXOpeningElement with selfClosing=true
305
// - children: []
306
// - closing: undefined
307
```
308

309
### Prop Patterns
310

311
JSX attribute patterns for React props:
312

313
```typescript
314
// String prop: disabled="true"
315
// JSXAttribute { name: "disabled", value: StringLiteral }
316

317
// Expression prop: onClick={handleClick}
318
// JSXAttribute { name: "onClick", value: JSXExpressionContainer }
319

320
// Boolean prop: disabled
321
// JSXAttribute { name: "disabled", value: undefined }
322

323
// Spread props: {...restProps}
324
// SpreadElement in attributes array
325
```
326

327
## Parser Configuration
328

329
Enable JSX parsing in SWC configuration:
330

331
```typescript
332
import type { EsParserConfig, TsParserConfig } from "@swc/types";
333

334
// JavaScript JSX
335
const jsxParser: EsParserConfig = {
336
  syntax: "ecmascript",
337
  jsx: true
338
};
339

340
// TypeScript JSX (TSX)
341
const tsxParser: TsParserConfig = {
342
  syntax: "typescript", 
343
  tsx: true
344
};
345
```