0
# Inferno
1

2
Inferno is an extremely fast, React-like JavaScript library for building modern user interfaces. It provides a component-driven architecture with one-way data flow and lifecycle events, achieving superior performance through optimizations like monomorphic createVNode calls, bitwise flags for object shape memoization, and selective child node normalization.
3

4
## Package Information
5

6
- **Package Name**: inferno
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install inferno`
10

11
## Core Imports
12

13
ESM (recommended):
14

15
```typescript
16
import { render, Component, createVNode, Fragment } from "inferno";
17
```
18

19
CommonJS:
20

21
```javascript
22
const { render, Component, createVNode, Fragment } = require("inferno");
23
```
24

25
## Basic Usage
26

27
```typescript
28
import { render, Component, createVNode } from "inferno";
29

30
// Functional component
31
function Welcome(props) {
32
  return createVNode(1, 'h1', null, `Hello, ${props.name}!`);
33
}
34

35
// Class component
36
class Counter extends Component {
37
  constructor(props) {
38
    super(props);
39
    this.state = { count: 0 };
40
  }
41

42
  increment = () => {
43
    this.setState({ count: this.state.count + 1 });
44
  };
45

46
  render() {
47
    return createVNode(1, 'div', null, [
48
      createVNode(1, 'p', null, `Count: ${this.state.count}`),
49
      createVNode(1, 'button', { onClick: this.increment }, 'Increment')
50
    ]);
51
  }
52
}
53

54
// Render to DOM
55
render(createVNode(4, Counter, null), document.getElementById('app'));
56
```
57

58
## Architecture
59

60
Inferno is built around several key components:
61

62
- **Virtual DOM**: Lightweight virtual representation of UI elements for efficient diffing and updates
63
- **Component System**: Class and functional components with comprehensive lifecycle hooks
64
- **Rendering Engine**: High-performance DOM reconciliation with optimized patching algorithms
65
- **Event System**: Partial synthetic event system for cross-browser compatibility
66
- **Animation System**: Built-in animation lifecycle hooks for appear/disappear/move transitions
67
- **TypeScript Integration**: Complete type definitions with full generic type support
68

69
## Capabilities
70

71
### Core Rendering
72

73
Main rendering functionality for mounting and updating virtual DOM trees to real DOM elements.
74

75
```typescript { .api }
76
function render(
77
  input: VNode | InfernoNode,
78
  parentDOM: ParentDOM,
79
  callback?: (() => void) | null,
80
  context?: ContextObject
81
): void;
82

83
function createRenderer(parentDOM?: ParentDOM): 
84
  (lastInput: any, nextInput: any, callback?: any, context?: any) => void;
85
```
86

87
[Core Rendering](./core-rendering.md)
88

89
### VNode Creation
90

91
Virtual node creation functions for building virtual DOM trees with performance optimizations.
92

93
```typescript { .api }
94
function createVNode<P>(
95
  flags: VNodeFlags,
96
  type: string,
97
  className?: string | null,
98
  children?: InfernoNode,
99
  childFlags?: ChildFlags,
100
  props?: Readonly<P> | null,
101
  key?: string | number | null,
102
  ref?: Ref | Refs<P> | null
103
): VNode;
104

105
function createComponentVNode<P>(
106
  flags: VNodeFlags,
107
  type: Function | ComponentType<P>,
108
  props?: Readonly<P> | null,
109
  key?: null | string | number,
110
  ref?: Ref | Refs<P> | null
111
): VNode;
112

113
function createTextVNode(
114
  text?: string | boolean | null | number,
115
  key?: string | number | null
116
): VNode;
117

118
function createFragment(
119
  children: any,
120
  childFlags: ChildFlags,
121
  key?: string | number | null
122
): VNode;
123

124
function createPortal(children: any, container: Element | DocumentFragment | ShadowRoot | null): VNode;
125
```
126

127
[VNode Creation](./vnode-creation.md)
128

129
### Component System
130

131
Class and functional component system with lifecycle methods and state management.
132

133
```typescript { .api }
134
abstract class Component<P = Record<string, unknown>, S = Record<string, unknown>> {
135
  state: Readonly<S | null>;
136
  props: Readonly<{ children?: InfernoNode } & P>;
137
  context: any;
138
  
139
  setState<K extends keyof S>(
140
    newState: ((prevState: Readonly<S>, props: Readonly<{ children?: InfernoNode } & P>) => Pick<S, K> | S | null) | (Pick<S, K> | S | null),
141
    callback?: () => void
142
  ): void;
143
  
144
  forceUpdate(callback?: (() => void) | undefined): void;
145
  
146
  render(props: Readonly<{ children?: InfernoNode } & P>, state: Readonly<S>, context: any): InfernoNode;
147
}
148

149
type ComponentType<P = Record<string, unknown>> = typeof Component<P> | StatelessComponent<P>;
150

151
interface StatelessComponent<P = {}> {
152
  (props: { children?: InfernoNode } & P & Refs<P>, context?: any): InfernoElement | null;
153
  defaultProps?: Partial<P> | undefined | null;
154
  defaultHooks?: Refs<P> | undefined | null;
155
}
156
```
157

158
[Component System](./component-system.md)
159

160
### Event Handling
161

162
Optimized event handling system with linkEvent for performance and synthetic events for cross-browser compatibility.
163

164
```typescript { .api }
165
function linkEvent<T, E extends Event>(
166
  data: T,
167
  event: (data: T, event: E) => void
168
): LinkedEvent<T, E> | null;
169

170
interface LinkedEvent<T, E extends Event> {
171
  data: T;
172
  event: (data: T, event: E) => void;
173
}
174
```
175

176
[Event Handling](./event-handling.md)
177

178
### Refs and Forward Refs
179

180
Reference system for accessing DOM elements and component instances.
181

182
```typescript { .api }
183
function createRef<T = Element>(): RefObject<T>;
184

185
function forwardRef<T = any, P = Props<any>>(
186
  render: (
187
    props: Readonly<{ children?: InfernoNode }> & Readonly<P>,
188
    ref: RefObject<T>
189
  ) => InfernoNode
190
): any;
191

192
interface RefObject<T> {
193
  readonly current: T | null;
194
}
195

196
type Ref<T = Element> = {
197
  bivarianceHack(instance: T | null): any;
198
}['bivarianceHack'];
199
```
200

201
[Refs and Forward Refs](./refs.md)
202

203
### Fragments and Utilities
204

205
Fragment support and utility functions for advanced use cases.
206

207
```typescript { .api }
208
const Fragment: unique symbol;
209

210
const EMPTY_OBJ: {};
211

212
function findDOMFromVNode(vNode: VNode, start: boolean): Element | null;
213

214
function directClone(vNodeToClone: VNode): VNode;
215

216
function normalizeProps(vNode: VNode): VNode;
217

218
function getFlagsForElementVnode(type: string): VNodeFlags;
219

220
const options: {
221
  createVNode: ((vNode: VNode) => void) | null;
222
  reactStyles?: boolean;
223
};
224

225
const version: string;
226

227
function rerender(): void;
228
```
229

230
[Fragments and Utilities](./fragments-utilities.md)
231

232
## Core Types
233

234
```typescript { .api }
235
type InfernoNode = InfernoSingleNode | InfernoFragment;
236
type InfernoSingleNode = InfernoChild | boolean | null | undefined;
237
type InfernoChild = InfernoElement | InfernoText;
238
type InfernoText = string | number;
239
type InfernoFragment = {} | InfernoNodeArray;
240
interface InfernoNodeArray extends Array<InfernoNode> {}
241

242
interface VNode {
243
  children: InfernoNode;
244
  childFlags: ChildFlags;
245
  dom: Element | null;
246
  className: string | null | undefined;
247
  flags: VNodeFlags;
248
  isValidated?: boolean;
249
  key: Key;
250
  props: any;
251
  ref: any;
252
  type: any;
253
}
254

255
type Key = string | number | undefined | null;
256
type ContextObject = Record<string, unknown>;
257
type ParentDOM = Element | SVGAElement | ShadowRoot | DocumentFragment | HTMLElement | Node | null;
258

259
interface InfernoElement<P = any> {
260
  type: string | ComponentClass<P> | SFC<P>;
261
  props: P;
262
  key?: Key;
263
}
264
```
265

266
## Animation Lifecycle
267

268
```typescript { .api }
269
interface Refs<P> {
270
  onComponentDidMount?(domNode: Element | null, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
271
  onComponentWillMount?(props: Readonly<{ children?: InfernoNode } & P>): void;
272
  onComponentShouldUpdate?(lastProps: Readonly<{ children?: InfernoNode } & P>, nextProps: Readonly<{ children?: InfernoNode } & P>): boolean;
273
  onComponentWillUpdate?(lastProps: Readonly<{ children?: InfernoNode } & P>, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
274
  onComponentDidUpdate?(lastProps: Readonly<{ children?: InfernoNode } & P>, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
275
  onComponentWillUnmount?(domNode: Element, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
276
  onComponentDidAppear?(domNode: Element, props: Readonly<{ children?: InfernoNode } & P>): void;
277
  onComponentWillDisappear?(domNode: Element, props: Readonly<{ children?: InfernoNode } & P>, callback: Function): void;
278
  onComponentWillMove?(parentVNode: VNode, parentDOM: Element, dom: Element, props: Readonly<{ children?: InfernoNode } & P>): void;
279
}
280

281
class AnimationQueues {
282
  componentDidAppear: Array<() => void>;
283
  componentWillDisappear: Array<() => void>;
284
}
285
```