0
# JSX Runtime
1

2
Modern JSX transformation runtime for automatic JSX compilation and template-based JSX. This module provides the runtime functions used by modern build tools like Babel and TypeScript for transforming JSX elements.
3

4
## Capabilities
5

6
### JSX Transform Functions
7

8
Core functions for automatic JSX transformation (React 17+ "new JSX transform").
9

10
```typescript { .api }
11
/**
12
 * Creates a VNode for JSX elements with single child or no children
13
 * @param type - Element type (string or component)
14
 * @param props - Element properties including children
15
 * @param key - Optional element key
16
 * @returns Virtual DOM node
17
 */
18
function jsx<P>(
19
  type: ComponentType<P> | string,
20
  props: P & { children?: ComponentChild },
21
  key?: Key
22
): VNode<P>;
23

24
/**
25
 * Creates a VNode for JSX elements with multiple static children
26
 * @param type - Element type (string or component)
27
 * @param props - Element properties including children array
28
 * @param key - Optional element key
29
 * @returns Virtual DOM node
30
 */
31
function jsxs<P>(
32
  type: ComponentType<P> | string,
33
  props: P & { children?: ComponentChildren },
34
  key?: Key
35
): VNode<P>;
36

37
/**
38
 * Development version of jsx with additional debug information
39
 * @param type - Element type (string or component)
40
 * @param props - Element properties including children
41
 * @param key - Optional element key
42
 * @returns Virtual DOM node with debug info
43
 */
44
function jsxDEV<P>(
45
  type: ComponentType<P> | string,
46
  props: P & { children?: ComponentChild },
47
  key?: Key
48
): VNode<P>;
49
```
50

51
**Usage Examples:**
52

53
```typescript
54
// These functions are typically called by build tools, not directly:
55

56
// Babel/TypeScript transforms this JSX:
57
// const element = <div className="hello">World</div>;
58

59
// Into this runtime call:
60
// const element = jsx("div", { className: "hello", children: "World" });
61

62
// Multiple children:
63
// const list = <ul><li>A</li><li>B</li></ul>;
64

65
// Becomes:
66
// const list = jsxs("ul", { 
67
//   children: [jsx("li", { children: "A" }), jsx("li", { children: "B" })] 
68
// });
69
```
70

71
### Template-Based JSX
72

73
Advanced template-based JSX creation for pre-compiled templates.
74

75
```typescript { .api }
76
/**
77
 * Creates VNode from a template string with expressions
78
 * @param template - Array of template strings
79
 * @param expressions - Dynamic expressions to interpolate
80
 * @returns Virtual DOM node or fragment
81
 */
82
function jsxTemplate(
83
  template: TemplateStringsArray,
84
  ...expressions: any[]
85
): VNode | ComponentChildren;
86

87
/**
88
 * Serializes HTML attributes for template-based JSX
89
 * @param name - Attribute name
90
 * @param value - Attribute value
91
 * @returns Serialized attribute string or null
92
 */
93
function jsxAttr(name: string, value: any): string | null;
94

95
/**
96
 * Escapes dynamic content in JSX templates
97
 * @param value - Value to escape
98
 * @returns Escaped value safe for HTML
99
 */
100
function jsxEscape<T>(value: T): string | null | VNode | Array<string | VNode>;
101
```
102

103
**Usage Examples:**
104

105
```typescript
106
import { jsxTemplate, jsxAttr, jsxEscape } from "preact/jsx-runtime";
107

108
// Template-based JSX (advanced usage)
109
const templateElement = jsxTemplate`
110
  <div class=${jsxAttr("class", "container")}>
111
    ${jsxEscape("Hello World")}
112
  </div>
113
`;
114

115
// Custom attribute serialization
116
const className = jsxAttr("class", ["btn", "primary"]);
117
// Returns: "btn primary"
118

119
// Safe content escaping
120
const userContent = jsxEscape("<script>alert('xss')</script>");
121
// Returns escaped string safe for HTML
122
```
123

124
### Shared Components
125

126
Re-exported components available in jsx-runtime.
127

128
```typescript { .api }
129
/**
130
 * Fragment component for grouping elements without wrapper
131
 */
132
const Fragment: FunctionComponent<{ children?: ComponentChildren }>;
133
```
134

135
### TypeScript JSX Namespace
136

137
JSX type definitions for TypeScript compilation.
138

139
```typescript { .api }
140
namespace JSX {
141
  interface Element extends VNode<any> {}
142
  interface ElementClass extends Component<any, any> {}
143
  interface ElementAttributesProperty { props: {}; }
144
  interface ElementChildrenAttribute { children: {}; }
145
  interface IntrinsicElements extends JSXInternal.IntrinsicElements {}
146
  interface IntrinsicAttributes extends Attributes {}
147
  interface IntrinsicClassAttributes<T> extends ClassAttributes<T> {}
148
}
149
```
150

151
## Types
152

153
### JSX Transform Types
154

155
```typescript { .api }
156
interface TemplateStringsArray extends ReadonlyArray<string> {
157
  readonly raw: ReadonlyArray<string>;
158
}
159

160
type Key = string | number | any;
161

162
type ComponentChild =
163
  | VNode<any>
164
  | object
165
  | string
166
  | number
167
  | bigint
168
  | boolean
169
  | null
170
  | undefined;
171

172
type ComponentChildren = ComponentChild[] | ComponentChild;
173
```