or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-system.mdcore-rendering.mdevent-handling.mdfragments-utilities.mdindex.mdrefs.mdvnode-creation.md
tile.json

tessl/npm-inferno

An extremely fast, React-like JavaScript library for building modern user interfaces

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/inferno@9.0.x

To install, run

npx @tessl/cli install tessl/npm-inferno@9.0.0

index.mddocs/

Inferno

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.

Package Information

  • Package Name: inferno
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install inferno

Core Imports

ESM (recommended):

import { render, Component, createVNode, Fragment } from "inferno";

CommonJS:

const { render, Component, createVNode, Fragment } = require("inferno");

Basic Usage

import { render, Component, createVNode } from "inferno";

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

// Class component
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  render() {
    return createVNode(1, 'div', null, [
      createVNode(1, 'p', null, `Count: ${this.state.count}`),
      createVNode(1, 'button', { onClick: this.increment }, 'Increment')
    ]);
  }
}

// Render to DOM
render(createVNode(4, Counter, null), document.getElementById('app'));

Architecture

Inferno is built around several key components:

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

Capabilities

Core Rendering

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

function render(
  input: VNode | InfernoNode,
  parentDOM: ParentDOM,
  callback?: (() => void) | null,
  context?: ContextObject
): void;

function createRenderer(parentDOM?: ParentDOM): 
  (lastInput: any, nextInput: any, callback?: any, context?: any) => void;

Core Rendering

VNode Creation

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

function createVNode<P>(
  flags: VNodeFlags,
  type: string,
  className?: string | null,
  children?: InfernoNode,
  childFlags?: ChildFlags,
  props?: Readonly<P> | null,
  key?: string | number | null,
  ref?: Ref | Refs<P> | null
): VNode;

function createComponentVNode<P>(
  flags: VNodeFlags,
  type: Function | ComponentType<P>,
  props?: Readonly<P> | null,
  key?: null | string | number,
  ref?: Ref | Refs<P> | null
): VNode;

function createTextVNode(
  text?: string | boolean | null | number,
  key?: string | number | null
): VNode;

function createFragment(
  children: any,
  childFlags: ChildFlags,
  key?: string | number | null
): VNode;

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

VNode Creation

Component System

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

abstract class Component<P = Record<string, unknown>, S = Record<string, unknown>> {
  state: Readonly<S | null>;
  props: Readonly<{ children?: InfernoNode } & P>;
  context: any;
  
  setState<K extends keyof S>(
    newState: ((prevState: Readonly<S>, props: Readonly<{ children?: InfernoNode } & P>) => Pick<S, K> | S | null) | (Pick<S, K> | S | null),
    callback?: () => void
  ): void;
  
  forceUpdate(callback?: (() => void) | undefined): void;
  
  render(props: Readonly<{ children?: InfernoNode } & P>, state: Readonly<S>, context: any): InfernoNode;
}

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

interface StatelessComponent<P = {}> {
  (props: { children?: InfernoNode } & P & Refs<P>, context?: any): InfernoElement | null;
  defaultProps?: Partial<P> | undefined | null;
  defaultHooks?: Refs<P> | undefined | null;
}

Component System

Event Handling

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

function linkEvent<T, E extends Event>(
  data: T,
  event: (data: T, event: E) => void
): LinkedEvent<T, E> | null;

interface LinkedEvent<T, E extends Event> {
  data: T;
  event: (data: T, event: E) => void;
}

Event Handling

Refs and Forward Refs

Reference system for accessing DOM elements and component instances.

function createRef<T = Element>(): RefObject<T>;

function forwardRef<T = any, P = Props<any>>(
  render: (
    props: Readonly<{ children?: InfernoNode }> & Readonly<P>,
    ref: RefObject<T>
  ) => InfernoNode
): any;

interface RefObject<T> {
  readonly current: T | null;
}

type Ref<T = Element> = {
  bivarianceHack(instance: T | null): any;
}['bivarianceHack'];

Refs and Forward Refs

Fragments and Utilities

Fragment support and utility functions for advanced use cases.

const Fragment: unique symbol;

const EMPTY_OBJ: {};

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

function directClone(vNodeToClone: VNode): VNode;

function normalizeProps(vNode: VNode): VNode;

function getFlagsForElementVnode(type: string): VNodeFlags;

const options: {
  createVNode: ((vNode: VNode) => void) | null;
  reactStyles?: boolean;
};

const version: string;

function rerender(): void;

Fragments and Utilities

Core Types

type InfernoNode = InfernoSingleNode | InfernoFragment;
type InfernoSingleNode = InfernoChild | boolean | null | undefined;
type InfernoChild = InfernoElement | InfernoText;
type InfernoText = string | number;
type InfernoFragment = {} | InfernoNodeArray;
interface InfernoNodeArray extends Array<InfernoNode> {}

interface VNode {
  children: InfernoNode;
  childFlags: ChildFlags;
  dom: Element | null;
  className: string | null | undefined;
  flags: VNodeFlags;
  isValidated?: boolean;
  key: Key;
  props: any;
  ref: any;
  type: any;
}

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

interface InfernoElement<P = any> {
  type: string | ComponentClass<P> | SFC<P>;
  props: P;
  key?: Key;
}

Animation Lifecycle

interface Refs<P> {
  onComponentDidMount?(domNode: Element | null, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
  onComponentWillMount?(props: Readonly<{ children?: InfernoNode } & P>): void;
  onComponentShouldUpdate?(lastProps: Readonly<{ children?: InfernoNode } & P>, nextProps: Readonly<{ children?: InfernoNode } & P>): boolean;
  onComponentWillUpdate?(lastProps: Readonly<{ children?: InfernoNode } & P>, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
  onComponentDidUpdate?(lastProps: Readonly<{ children?: InfernoNode } & P>, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
  onComponentWillUnmount?(domNode: Element, nextProps: Readonly<{ children?: InfernoNode } & P>): void;
  onComponentDidAppear?(domNode: Element, props: Readonly<{ children?: InfernoNode } & P>): void;
  onComponentWillDisappear?(domNode: Element, props: Readonly<{ children?: InfernoNode } & P>, callback: Function): void;
  onComponentWillMove?(parentVNode: VNode, parentDOM: Element, dom: Element, props: Readonly<{ children?: InfernoNode } & P>): void;
}

class AnimationQueues {
  componentDidAppear: Array<() => void>;
  componentWillDisappear: Array<() => void>;
}