or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-vnodes.mdchildren-utilities.mdcore-components.mddom-operations.mdelement-creation.mdindex.mdproptypes.md
tile.json

tessl/npm-inferno-compat

Provides a compatibility with React codebases

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

To install, run

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

index.mddocs/

Inferno Compat

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.

Package Information

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

Core Imports

import React from "inferno-compat";
import ReactDOM from "inferno-compat";

Or with named imports:

import { 
  Component, 
  PureComponent, 
  createElement, 
  render, 
  Children, 
  PropTypes 
} from "inferno-compat";

For CommonJS:

const React = require("inferno-compat");
const ReactDOM = require("inferno-compat");

Basic Usage

import React from "inferno-compat";
import ReactDOM from "inferno-compat";

class HelloWorld extends React.Component {
  render() {
    return React.createElement('div', null, 'Hello World!');
  }
}

ReactDOM.render(
  React.createElement(HelloWorld),
  document.getElementById('app')
);

Architecture

Inferno Compat is built around several key components:

  • React API Compatibility: Drop-in replacements for React components, functions, and utilities
  • DOM Rendering: Full ReactDOM compatibility for rendering and hydration
  • Event System: React-style event handling with automatic transformations
  • Property Mapping: Automatic conversion of React properties to Inferno equivalents
  • Style Processing: Runtime conversion of camelCase styles to hyphen-case CSS
  • Children Utilities: Complete React.Children API implementation
  • Build Tool Integration: Seamless aliasing support for Webpack, Babel, and Browserify

Capabilities

Core React Components

Base component classes and lifecycle methods with full React compatibility.

abstract class Component<P = {}, S = {}> {
  props: Readonly<{ children?: InfernoNode } & P>;
  state: S | null;
  context?: any;
  refs?: any;
  
  constructor(props: P, context?: any);
  render(nextProps?: Readonly<{ children?: InfernoNode } & P>, nextState?: Readonly<S>, nextContext?: any): InfernoNode;
  
  // Lifecycle methods
  componentDidMount?(): void;
  componentWillMount?(): void;
  componentWillReceiveProps?(nextProps: Readonly<{ children?: InfernoNode } & P>, nextContext: any): void;
  shouldComponentUpdate?(nextProps: Readonly<{ children?: InfernoNode } & P>, nextState: Readonly<S>, context: any): boolean;
  componentWillUpdate?(nextProps: Readonly<{ children?: InfernoNode } & P>, nextState: Readonly<S>, context: any): void;
  componentDidUpdate?(prevProps: Readonly<{ children?: InfernoNode } & P>, prevState: Readonly<S>, snapshot: any): void;
  componentWillUnmount?(): void;
  getSnapshotBeforeUpdate?(prevProps: Readonly<{ children?: InfernoNode } & P>, prevState: Readonly<S>): any;
  componentDidCatch?(error: Error, errorInfo: any): void;
  
  // Inferno-specific lifecycle methods
  componentDidAppear?(domNode: Element): void;
  componentWillDisappear?(domNode: Element, callback: Function): void;
  componentWillMove?(parentVNode: VNode, parentDOM: Element, dom: Element): void;
  getChildContext?(): void;
  
  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?: Function): void;
}

abstract class PureComponent<P = {}, S = {}> extends Component<P, S> {
  shouldComponentUpdate(props: P, state: S): boolean;
}

Core Components

Element Creation and Manipulation

Functions for creating and manipulating virtual elements with React compatibility.

function createElement(
  type: string | ComponentClass<any> | Function,
  props?: any,
  ...children: any[]
): VNode;

function cloneElement(element: VNode, props?: any, ...children: any[]): VNode;

function isValidElement(obj: any): boolean;

function createFactory(type: string | ComponentClass<any> | Function): (...children: any[]) => VNode;

Element Creation

DOM Rendering and Hydration

ReactDOM-compatible rendering functions for mounting and updating components.

function render(
  rootInput: InfernoNode,
  container: Element | SVGAElement | DocumentFragment,
  cb?: () => void | null,
  context?: any
): Component | undefined;

function hydrate(
  rootInput: InfernoNode,
  container: Element | SVGAElement | DocumentFragment,
  callback?: () => void
): Component | undefined;

function unmountComponentAtNode(
  container: Element | SVGAElement | DocumentFragment
): boolean;

function findDOMNode(component: Component | Element | null): Element | null;

DOM Operations

Children Utilities

Complete React.Children API for working with component children.

interface Children {
  map<T, U>(
    children: T[],
    fn: (child: T, index: number) => U,
    ctx?: any
  ): U[];
  
  forEach<T>(
    children: T[],
    fn: (child: T, index: number) => void,
    ctx?: any
  ): void;
  
  count(children: any[]): number;
  only(children: any[]): any;
  toArray(children: any[]): any[];
}

Children Utilities

Advanced VNode Functions

Lower-level VNode creation and manipulation functions for advanced use cases.

function createVNode(
  flags: number,
  type: string | ComponentClass<any> | Function | null,
  className?: string,
  children?: InfernoNode,
  childFlags?: number,
  props?: any,
  key?: string | number,
  ref?: any
): VNode;

function createComponentVNode(
  flags: number,
  type: ComponentClass<any> | Function,
  props?: any,
  key?: string | number,
  ref?: any
): VNode;

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

function createFragment(
  children: InfernoNode[],
  childFlags?: number,
  key?: string | number
): VNode;

function createPortal(
  children: InfernoNode,
  container: Element
): VNode;

Advanced VNodes

PropTypes and Validation

React PropTypes compatibility layer. Note that this implementation provides stub functions for API compatibility but does not perform actual validation in production.

interface PropTypes {
  any: PropTypeStub;
  array: PropTypeStub;
  arrayOf(type: any): PropTypeStub;
  bool: PropTypeStub;
  element: PropTypeStub;
  func: PropTypeStub;
  instanceOf(expectedClass: any): PropTypeStub;
  node: PropTypeStub;
  number: PropTypeStub;
  object: PropTypeStub;
  objectOf(type: any): PropTypeStub;
  oneOf(types: any[]): PropTypeStub;
  oneOfType(types: any[]): PropTypeStub;
  shape(shape: { [key: string]: any }): PropTypeStub;
  string: PropTypeStub;
  symbol: PropTypeStub;
  checkPropTypes(): null;
}

interface PropTypeStub {
  (): void;
  isRequired: PropTypeStub;
}

PropTypes

Utility Functions and Constants

Additional utility functions and constants for advanced integration and compatibility.

// Utility constants
const EMPTY_OBJ: {};
const Fragment: symbol;
const version: string; // Currently "15.4.2" for React compatibility

// Ref and forwarding functions
function createRef<T = any>(): { current: T | null };
function forwardRef<T, P = {}>(
  render: (props: P, ref: { current: T | null }) => InfernoNode
): ComponentType<P & { ref?: { current: T | null } }>;

// Advanced rendering and lifecycle
function rerender(): void;
function createRenderer(): any;
function renderInternal(
  rootInput: InfernoNode,
  container: Element | SVGAElement | DocumentFragment,
  cb?: () => void,
  context?: any
): void;

function unstable_renderSubtreeIntoContainer(
  parentComponent: Component,
  vNode: InfernoNode,
  container: Element,
  callback?: () => void
): Component;

// DOM utilities
function findDOMFromVNode(vNode: VNode): Element | null;

// VNode utilities
function directClone(vNode: VNode): VNode;
function getFlagsForElementVnode(type: string): number;
function normalizeProps(vNode: VNode): void;

// Event utilities
function linkEvent(data: any, event: Function): any;

// Configuration
const options: {
  reactStyles?: boolean;
  createVNode?: (vNode: VNode) => void;
  [key: string]: any;
};

Additional Types

type IterateChildrenFn = (
  value: InfernoNode | any,
  index: number,
  array: any[]
) => any;

Global Objects

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.

Types

type InfernoNode = 
  | VNode 
  | string 
  | number 
  | boolean 
  | null 
  | undefined 
  | InfernoNode[];

interface VNode {
  flags: number;
  type: string | ComponentClass<any> | Function | null;
  props: any;
  key: string | number | null;
  ref: any;
  children: InfernoNode;
  childFlags: number;
  dom: Element | null;
  parentVNode: VNode | null;
}

type ComponentType<P = {}> = ComponentClass<P> | Function;

interface ComponentClass<P = {}> {
  new (props: P, context?: any): Component<P, any>;
  displayName?: string;
  defaultProps?: Partial<P>;
  contextTypes?: any;
  childContextTypes?: any;
}

interface Refs {
  [key: string]: Element | Component | null;
}