CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-inferno-compat

Provides a compatibility with React codebases

—

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