0
# Inferno Compat
1
2
Inferno Compat is a React compatibility layer that enables seamless migration from React to Inferno without requiring code changes. It provides drop-in replacements for React and react-dom exports, supporting core React features while maintaining compatibility with popular build tools through aliasing configurations.
3
4
## Package Information
5
6
- **Package Name**: inferno-compat
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install inferno-compat`
10
11
## Core Imports
12
13
```typescript
14
import React from "inferno-compat";
15
import ReactDOM from "inferno-compat";
16
```
17
18
Or with named imports:
19
20
```typescript
21
import {
22
Component,
23
PureComponent,
24
createElement,
25
render,
26
Children,
27
PropTypes
28
} from "inferno-compat";
29
```
30
31
For CommonJS:
32
33
```javascript
34
const React = require("inferno-compat");
35
const ReactDOM = require("inferno-compat");
36
```
37
38
## Basic Usage
39
40
```typescript
41
import React from "inferno-compat";
42
import ReactDOM from "inferno-compat";
43
44
class HelloWorld extends React.Component {
45
render() {
46
return React.createElement('div', null, 'Hello World!');
47
}
48
}
49
50
ReactDOM.render(
51
React.createElement(HelloWorld),
52
document.getElementById('app')
53
);
54
```
55
56
## Architecture
57
58
Inferno Compat is built around several key components:
59
60
- **React API Compatibility**: Drop-in replacements for React components, functions, and utilities
61
- **DOM Rendering**: Full ReactDOM compatibility for rendering and hydration
62
- **Event System**: React-style event handling with automatic transformations
63
- **Property Mapping**: Automatic conversion of React properties to Inferno equivalents
64
- **Style Processing**: Runtime conversion of camelCase styles to hyphen-case CSS
65
- **Children Utilities**: Complete React.Children API implementation
66
- **Build Tool Integration**: Seamless aliasing support for Webpack, Babel, and Browserify
67
68
## Capabilities
69
70
### Core React Components
71
72
Base component classes and lifecycle methods with full React compatibility.
73
74
```typescript { .api }
75
abstract class Component<P = {}, S = {}> {
76
props: Readonly<{ children?: InfernoNode } & P>;
77
state: S | null;
78
context?: any;
79
refs?: any;
80
81
constructor(props: P, context?: any);
82
render(nextProps?: Readonly<{ children?: InfernoNode } & P>, nextState?: Readonly<S>, nextContext?: any): InfernoNode;
83
84
// Lifecycle methods
85
componentDidMount?(): void;
86
componentWillMount?(): void;
87
componentWillReceiveProps?(nextProps: Readonly<{ children?: InfernoNode } & P>, nextContext: any): void;
88
shouldComponentUpdate?(nextProps: Readonly<{ children?: InfernoNode } & P>, nextState: Readonly<S>, context: any): boolean;
89
componentWillUpdate?(nextProps: Readonly<{ children?: InfernoNode } & P>, nextState: Readonly<S>, context: any): void;
90
componentDidUpdate?(prevProps: Readonly<{ children?: InfernoNode } & P>, prevState: Readonly<S>, snapshot: any): void;
91
componentWillUnmount?(): void;
92
getSnapshotBeforeUpdate?(prevProps: Readonly<{ children?: InfernoNode } & P>, prevState: Readonly<S>): any;
93
componentDidCatch?(error: Error, errorInfo: any): void;
94
95
// Inferno-specific lifecycle methods
96
componentDidAppear?(domNode: Element): void;
97
componentWillDisappear?(domNode: Element, callback: Function): void;
98
componentWillMove?(parentVNode: VNode, parentDOM: Element, dom: Element): void;
99
getChildContext?(): void;
100
101
setState<K extends keyof S>(
102
newState: ((prevState: Readonly<S>, props: Readonly<{ children?: InfernoNode } & P>) => Pick<S, K> | S | null) | (Pick<S, K> | S | null),
103
callback?: () => void
104
): void;
105
forceUpdate(callback?: Function): void;
106
}
107
108
abstract class PureComponent<P = {}, S = {}> extends Component<P, S> {
109
shouldComponentUpdate(props: P, state: S): boolean;
110
}
111
```
112
113
[Core Components](./core-components.md)
114
115
### Element Creation and Manipulation
116
117
Functions for creating and manipulating virtual elements with React compatibility.
118
119
```typescript { .api }
120
function createElement(
121
type: string | ComponentClass<any> | Function,
122
props?: any,
123
...children: any[]
124
): VNode;
125
126
function cloneElement(element: VNode, props?: any, ...children: any[]): VNode;
127
128
function isValidElement(obj: any): boolean;
129
130
function createFactory(type: string | ComponentClass<any> | Function): (...children: any[]) => VNode;
131
```
132
133
[Element Creation](./element-creation.md)
134
135
### DOM Rendering and Hydration
136
137
ReactDOM-compatible rendering functions for mounting and updating components.
138
139
```typescript { .api }
140
function render(
141
rootInput: InfernoNode,
142
container: Element | SVGAElement | DocumentFragment,
143
cb?: () => void | null,
144
context?: any
145
): Component | undefined;
146
147
function hydrate(
148
rootInput: InfernoNode,
149
container: Element | SVGAElement | DocumentFragment,
150
callback?: () => void
151
): Component | undefined;
152
153
function unmountComponentAtNode(
154
container: Element | SVGAElement | DocumentFragment
155
): boolean;
156
157
function findDOMNode(component: Component | Element | null): Element | null;
158
```
159
160
[DOM Operations](./dom-operations.md)
161
162
### Children Utilities
163
164
Complete React.Children API for working with component children.
165
166
```typescript { .api }
167
interface Children {
168
map<T, U>(
169
children: T[],
170
fn: (child: T, index: number) => U,
171
ctx?: any
172
): U[];
173
174
forEach<T>(
175
children: T[],
176
fn: (child: T, index: number) => void,
177
ctx?: any
178
): void;
179
180
count(children: any[]): number;
181
only(children: any[]): any;
182
toArray(children: any[]): any[];
183
}
184
```
185
186
[Children Utilities](./children-utilities.md)
187
188
### Advanced VNode Functions
189
190
Lower-level VNode creation and manipulation functions for advanced use cases.
191
192
```typescript { .api }
193
function createVNode(
194
flags: number,
195
type: string | ComponentClass<any> | Function | null,
196
className?: string,
197
children?: InfernoNode,
198
childFlags?: number,
199
props?: any,
200
key?: string | number,
201
ref?: any
202
): VNode;
203
204
function createComponentVNode(
205
flags: number,
206
type: ComponentClass<any> | Function,
207
props?: any,
208
key?: string | number,
209
ref?: any
210
): VNode;
211
212
function createTextVNode(text: string | number, key?: string | number): VNode;
213
214
function createFragment(
215
children: InfernoNode[],
216
childFlags?: number,
217
key?: string | number
218
): VNode;
219
220
function createPortal(
221
children: InfernoNode,
222
container: Element
223
): VNode;
224
```
225
226
[Advanced VNodes](./advanced-vnodes.md)
227
228
### PropTypes and Validation
229
230
React PropTypes compatibility layer. Note that this implementation provides stub functions for API compatibility but does not perform actual validation in production.
231
232
```typescript { .api }
233
interface PropTypes {
234
any: PropTypeStub;
235
array: PropTypeStub;
236
arrayOf(type: any): PropTypeStub;
237
bool: PropTypeStub;
238
element: PropTypeStub;
239
func: PropTypeStub;
240
instanceOf(expectedClass: any): PropTypeStub;
241
node: PropTypeStub;
242
number: PropTypeStub;
243
object: PropTypeStub;
244
objectOf(type: any): PropTypeStub;
245
oneOf(types: any[]): PropTypeStub;
246
oneOfType(types: any[]): PropTypeStub;
247
shape(shape: { [key: string]: any }): PropTypeStub;
248
string: PropTypeStub;
249
symbol: PropTypeStub;
250
checkPropTypes(): null;
251
}
252
253
interface PropTypeStub {
254
(): void;
255
isRequired: PropTypeStub;
256
}
257
```
258
259
[PropTypes](./proptypes.md)
260
261
### Utility Functions and Constants
262
263
Additional utility functions and constants for advanced integration and compatibility.
264
265
```typescript { .api }
266
// Utility constants
267
const EMPTY_OBJ: {};
268
const Fragment: symbol;
269
const version: string; // Currently "15.4.2" for React compatibility
270
271
// Ref and forwarding functions
272
function createRef<T = any>(): { current: T | null };
273
function forwardRef<T, P = {}>(
274
render: (props: P, ref: { current: T | null }) => InfernoNode
275
): ComponentType<P & { ref?: { current: T | null } }>;
276
277
// Advanced rendering and lifecycle
278
function rerender(): void;
279
function createRenderer(): any;
280
function renderInternal(
281
rootInput: InfernoNode,
282
container: Element | SVGAElement | DocumentFragment,
283
cb?: () => void,
284
context?: any
285
): void;
286
287
function unstable_renderSubtreeIntoContainer(
288
parentComponent: Component,
289
vNode: InfernoNode,
290
container: Element,
291
callback?: () => void
292
): Component;
293
294
// DOM utilities
295
function findDOMFromVNode(vNode: VNode): Element | null;
296
297
// VNode utilities
298
function directClone(vNode: VNode): VNode;
299
function getFlagsForElementVnode(type: string): number;
300
function normalizeProps(vNode: VNode): void;
301
302
// Event utilities
303
function linkEvent(data: any, event: Function): any;
304
305
// Configuration
306
const options: {
307
reactStyles?: boolean;
308
createVNode?: (vNode: VNode) => void;
309
[key: string]: any;
310
};
311
```
312
313
### Additional Types
314
315
```typescript { .api }
316
type IterateChildrenFn = (
317
value: InfernoNode | any,
318
index: number,
319
array: any[]
320
) => any;
321
```
322
323
## Global Objects
324
325
In browser environments where React is not already defined, inferno-compat automatically registers itself as global `React` and `ReactDOM` objects. This behavior only occurs when `typeof window !== 'undefined'` and `typeof window.React === 'undefined'`, providing seamless compatibility for existing React applications without overriding an existing React installation.
326
327
## Types
328
329
```typescript { .api }
330
type InfernoNode =
331
| VNode
332
| string
333
| number
334
| boolean
335
| null
336
| undefined
337
| InfernoNode[];
338
339
interface VNode {
340
flags: number;
341
type: string | ComponentClass<any> | Function | null;
342
props: any;
343
key: string | number | null;
344
ref: any;
345
children: InfernoNode;
346
childFlags: number;
347
dom: Element | null;
348
parentVNode: VNode | null;
349
}
350
351
type ComponentType<P = {}> = ComponentClass<P> | Function;
352
353
interface ComponentClass<P = {}> {
354
new (props: P, context?: any): Component<P, any>;
355
displayName?: string;
356
defaultProps?: Partial<P>;
357
contextTypes?: any;
358
childContextTypes?: any;
359
}
360
361
interface Refs {
362
[key: string]: Element | Component | null;
363
}
364
```