CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-inferno

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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>;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/inferno@9.0.x
Publish Source
CLI
Badge
tessl/npm-inferno badge