0
# Legacy React APIs
1

2
Support for legacy React patterns including createClass, DOM factories, and deprecated lifecycle methods for backward compatibility.
3

4
## Capabilities
5

6
### Create Class
7

8
Legacy React component creation using the createClass pattern.
9

10
```javascript { .api }
11
/**
12
 * Create component class using legacy React pattern
13
 * @param {object} spec - Component specification object
14
 * @returns {ComponentClass} Component constructor
15
 */
16
function createClass(spec);
17

18
/**
19
 * Component specification for createClass
20
 */
21
interface ComponentSpec {
22
  // Required render method
23
  render(): VNode;
24
  
25
  // Optional lifecycle methods
26
  getInitialState?(): object;
27
  getDefaultProps?(): object;
28
  componentWillMount?(): void;
29
  componentDidMount?(): void;
30
  componentWillReceiveProps?(nextProps: object): void;
31
  shouldComponentUpdate?(nextProps: object, nextState: object): boolean;
32
  componentWillUpdate?(nextProps: object, nextState: object): void;
33
  componentDidUpdate?(prevProps: object, prevState: object): void;
34
  componentWillUnmount?(): void;
35
  
36
  // Mixins support
37
  mixins?: Array<object>;
38
  
39
  // Auto-binding
40
  [methodName: string]: any;
41
}
42
```
43

44
**Usage Examples:**
45

46
```javascript
47
import { createClass } from 'preact-compat';
48
// or
49
import createClass from 'preact-compat/lib/create-react-class';
50

51
const MyComponent = createClass({
52
  getInitialState() {
53
    return { count: 0 };
54
  },
55
  
56
  getDefaultProps() {
57
    return { title: 'Default Title' };
58
  },
59
  
60
  handleClick() {
61
    this.setState({ count: this.state.count + 1 });
62
  },
63
  
64
  render() {
65
    return (
66
      <div>
67
        <h1>{this.props.title}</h1>
68
        <p>Count: {this.state.count}</p>
69
        <button onClick={this.handleClick}>Increment</button>
70
      </div>
71
    );
72
  }
73
});
74
```
75

76
### DOM Factories
77

78
Factory functions for creating HTML elements without JSX.
79

80
```javascript { .api }
81
/**
82
 * DOM element factories for all HTML elements
83
 */
84
const DOM = {
85
  // Common elements
86
  a: ElementFactory<AnchorHTMLAttributes>;
87
  div: ElementFactory<HTMLAttributes>;
88
  span: ElementFactory<HTMLAttributes>;
89
  p: ElementFactory<HTMLAttributes>;
90
  h1: ElementFactory<HTMLAttributes>;
91
  h2: ElementFactory<HTMLAttributes>;
92
  h3: ElementFactory<HTMLAttributes>;
93
  h4: ElementFactory<HTMLAttributes>;
94
  h5: ElementFactory<HTMLAttributes>;
95
  h6: ElementFactory<HTMLAttributes>;
96
  
97
  // Form elements
98
  form: ElementFactory<FormHTMLAttributes>;
99
  input: ElementFactory<InputHTMLAttributes>;
100
  button: ElementFactory<ButtonHTMLAttributes>;
101
  select: ElementFactory<SelectHTMLAttributes>;
102
  option: ElementFactory<OptionHTMLAttributes>;
103
  textarea: ElementFactory<TextareaHTMLAttributes>;
104
  label: ElementFactory<LabelHTMLAttributes>;
105
  
106
  // Media elements
107
  img: ElementFactory<ImgHTMLAttributes>;
108
  video: ElementFactory<VideoHTMLAttributes>;
109
  audio: ElementFactory<AudioHTMLAttributes>;
110
  
111
  // Table elements
112
  table: ElementFactory<TableHTMLAttributes>;
113
  thead: ElementFactory<HTMLAttributes>;
114
  tbody: ElementFactory<HTMLAttributes>;
115
  tr: ElementFactory<HTMLAttributes>;
116
  td: ElementFactory<TdHTMLAttributes>;
117
  th: ElementFactory<ThHTMLAttributes>;
118
  
119
  // ... and all other HTML elements
120
};
121

122
/**
123
 * Element factory function type
124
 */
125
interface ElementFactory<P = {}> {
126
  (props?: P, ...children: ComponentChildren[]): VNode;
127
}
128
```
129

130
**Usage Examples:**
131

132
```javascript
133
import { DOM } from 'preact-compat';
134
// or
135
import { DOM } from 'preact-compat/lib/react-dom-factories';
136

137
// Create elements without JSX
138
const element = DOM.div(
139
  { className: 'container', id: 'main' },
140
  DOM.h1(null, 'Hello World'),
141
  DOM.p(null, 'This is a paragraph'),
142
  DOM.button(
143
    { onClick: handleClick },
144
    'Click me'
145
  )
146
);
147

148
// Equivalent JSX:
149
// <div className="container" id="main">
150
//   <h1>Hello World</h1>
151
//   <p>This is a paragraph</p>
152
//   <button onClick={handleClick}>Click me</button>
153
// </div>
154
```
155

156
### Legacy Component with Mixins
157

158
```javascript
159
import { createClass } from 'preact-compat';
160

161
// Example mixin
162
const TimerMixin = {
163
  componentWillMount() {
164
    this.timers = [];
165
  },
166
  
167
  componentWillUnmount() {
168
    this.timers.forEach(clearInterval);
169
  },
170
  
171
  setInterval(fn, delay) {
172
    const id = setInterval(fn, delay);
173
    this.timers.push(id);
174
    return id;
175
  }
176
};
177

178
const MyComponent = createClass({
179
  mixins: [TimerMixin],
180
  
181
  getInitialState() {
182
    return { seconds: 0 };
183
  },
184
  
185
  componentDidMount() {
186
    this.setInterval(() => {
187
      this.setState({ seconds: this.state.seconds + 1 });
188
    }, 1000);
189
  },
190
  
191
  render() {
192
    return <div>Seconds: {this.state.seconds}</div>;
193
  }
194
});
195
```
196

197
### Prop Types Integration
198

199
Legacy PropTypes support (re-exported from prop-types).
200

201
```javascript { .api }
202
/**
203
 * PropTypes for runtime type checking (re-exported from prop-types package)
204
 */
205
const PropTypes = {
206
  array: Validator<any[]>;
207
  bool: Validator<boolean>;
208
  func: Validator<Function>;
209
  number: Validator<number>;
210
  object: Validator<object>;
211
  string: Validator<string>;
212
  symbol: Validator<symbol>;
213
  
214
  node: Validator<ComponentChildren>;
215
  element: Validator<VNode>;
216
  instanceOf(expectedClass: any): Validator<any>;
217
  oneOf(expectedValues: any[]): Validator<any>;
218
  oneOfType(expectedTypes: Validator<any>[]): Validator<any>;
219
  arrayOf(expectedType: Validator<any>): Validator<any[]>;
220
  objectOf(expectedType: Validator<any>): Validator<object>;
221
  shape(expectedShape: ValidationMap<any>): Validator<object>;
222
  exact(expectedShape: ValidationMap<any>): Validator<object>;
223
  
224
  // Modifiers
225
  isRequired: symbol;
226
};
227

228
interface ValidationMap<T> {
229
  [K in keyof T]?: Validator<T[K]>;
230
}
231

232
interface Validator<T> {
233
  (props: object, propName: string, componentName: string): Error | null;
234
  isRequired: Validator<T>;
235
}
236
```
237

238
**Usage Examples:**
239

240
```javascript
241
import { PropTypes } from 'preact-compat';
242

243
const MyComponent = createClass({
244
  propTypes: {
245
    name: PropTypes.string.isRequired,
246
    age: PropTypes.number,
247
    items: PropTypes.arrayOf(PropTypes.string),
248
    user: PropTypes.shape({
249
      id: PropTypes.number.isRequired,
250
      email: PropTypes.string
251
    }),
252
    onClick: PropTypes.func
253
  },
254
  
255
  getDefaultProps() {
256
    return {
257
      age: 0,
258
      items: []
259
    };
260
  },
261
  
262
  render() {
263
    return (
264
      <div onClick={this.props.onClick}>
265
        <h1>{this.props.name}</h1>
266
        <p>Age: {this.props.age}</p>
267
      </div>
268
    );
269
  }
270
});
271
```
272

273
## Import Patterns
274

275
```javascript
276
// Main imports
277
import { createClass, DOM, PropTypes } from 'preact-compat';
278

279
// Specific library imports
280
import createClass from 'preact-compat/lib/create-react-class';
281
import { DOM } from 'preact-compat/lib/react-dom-factories';
282

283
// CommonJS
284
const { createClass, DOM, PropTypes } = require('preact-compat');
285
```
286

287
## Types
288

289
```javascript { .api }
290
interface CreateClassSpec {
291
  render(): VNode;
292
  getInitialState?(): object;
293
  getDefaultProps?(): object;
294
  mixins?: Array<object>;
295
  [key: string]: any;
296
}
297

298
type CreateClassComponent = ComponentClass<any>;
299

300
interface DOMFactory<P = {}> {
301
  (props?: P, ...children: ComponentChildren[]): VNode;
302
}
303

304
interface DOMFactories {
305
  [elementName: string]: DOMFactory;
306
}
307
```