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
```