or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdcontext.mdelement-creation.mdhooks.mdindex.mdreact-compatibility.mdrendering.md
tile.json

tessl/npm-rax

A universal React-compatible render engine for building applications across multiple platforms

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rax@1.2.x

To install, run

npx @tessl/cli install tessl/npm-rax@1.2.0

index.mddocs/

Rax

Rax is a universal React-compatible render engine that enables developers to build applications that run across multiple platforms including Web, Weex, Node.js, Alibaba MiniApp, and WeChat MiniProgram. It provides a React-like API with better performance and smaller bundle size (~6KB) while maintaining full API compatibility with React components and hooks.

Package Information

  • Package Name: rax
  • Package Type: npm
  • Language: JavaScript (with TypeScript support via @types/rax)
  • Installation: npm install rax
  • Repository: https://github.com/alibaba/rax
  • Documentation: https://rax.js.org/

Core Imports

import { createElement, render, Component, useState, useEffect } from 'rax';

For CommonJS:

const { createElement, render, Component, useState, useEffect } = require('rax');

React compatibility imports:

import { createElement, render, Component } from 'rax/dist/rax.js';
// or with compatibility layer
import Rax, { Children, isValidElement, createFactory, cloneElement } from 'rax/src/compat';

Additional utilities (from compatibility layer):

import { Children, isValidElement, createFactory, cloneElement } from 'rax/src/compat';
// or as default export
const Rax = require('rax/src/compat');
// Rax.Children, Rax.isValidElement, etc.

Basic Usage

import { createElement, render, Component, useState } from 'rax';
import * as DriverDOM from 'driver-dom';

// Functional component with hooks
function Counter() {
  const [count, setCount] = useState(0);
  
  return createElement('div', null,
    createElement('p', null, `Count: ${count}`),
    createElement('button', {
      onClick: () => setCount(count + 1)
    }, 'Increment')
  );
}

// Class component
class Greeting extends Component {
  render() {
    return createElement('h1', null, `Hello, ${this.props.name}!`);
  }
}

// Render to DOM
render(
  createElement('div', null,
    createElement(Greeting, { name: 'World' }),
    createElement(Counter)
  ),
  document.body,
  { driver: DriverDOM }
);

Architecture

Rax is built around several key components:

  • Element System: Virtual DOM creation through createElement and element management
  • Component System: Support for both functional and class-based components with lifecycle methods
  • Hooks System: Complete React hooks compatibility (useState, useEffect, useContext, etc.)
  • Rendering Engine: Universal renderer that works across platforms through driver specification
  • Context API: Provider/Consumer pattern for state management across component trees
  • Platform Drivers: Pluggable rendering backends for different platforms (DOM, Weex, etc.)

Capabilities

Element Creation and Management

Core virtual DOM element creation and manipulation functionality. Essential for all Rax applications.

function createElement(type, config, ...children);
function Fragment(props);
function createRef();
function forwardRef(render);
function memo(type, compare);

Element Creation

Component System

Class-based and functional component support with full lifecycle management and React compatibility.

class Component {
  constructor(props, context);
  setState(partialState, callback);
  forceUpdate(callback);
}

class PureComponent extends Component {
  constructor(props, context);
}

Components

React Hooks

Complete React hooks implementation for state management and side effects in functional components.

function useState(initialState);
function useEffect(effect, inputs);
function useContext(context);
function useRef(initialValue);
function useCallback(callback, inputs);
function useMemo(create, inputs);
function useReducer(reducer, initialArg, init);
function useLayoutEffect(effect, inputs);
function useImperativeHandle(ref, create, inputs);

Hooks

Context API

React-compatible context system for managing state across component trees without prop drilling.

function createContext(defaultValue);

interface ContextObject {
  Provider: ComponentClass;
  Consumer: ComponentClass;
  _contextID: string;
  _defaultValue: any;
  __getNearestParentProvider: Function;
}

Context

Rendering System

Universal rendering engine that works across multiple platforms through pluggable driver system.

function render(element, container, options, callback);
function render(element, container, callback);

Rendering

React Compatibility Utilities

Additional utilities for React compatibility, including children manipulation and element validation functions.

// From rax-children package
const Children: {
  map(children, fn): Array;
  forEach(children, fn): void;
  count(children): number;
  only(children): RaxElement;
  toArray(children): Array;
};

// From rax-is-valid-element package  
function isValidElement(object): boolean;

// From rax-create-factory package
function createFactory(type): Function;

// From rax-clone-element package
function cloneElement(element, props, ...children): RaxElement;

React Compatibility

Version Information

Package version information for runtime version checking and debugging.

// Package version string (from process.env.RAX_VERSION at build time)
const version: string;

Internal Utilities (Advanced)

Low-level utilities exposed for advanced use cases and platform driver development. These are internal APIs that may change between versions.

const shared: {
  Host: Object;           // Runtime state management
  Instance: Object;       // Instance management utilities  
  Element: Function;      // Element constructor
  flattenChildren: Function; // Children flattening utility
};

Platform Support

Rax supports multiple platforms through its driver specification:

  • Web: driver-dom for browser environments
  • Weex: Native mobile app rendering
  • Node.js: Server-side rendering
  • Alibaba MiniApp: Alibaba's mini-program platform
  • WeChat MiniProgram: WeChat's mini-program platform

Types

// Core element type
interface RaxElement {
  type: string | Function;
  key: string | null;
  ref: Function | Object | null;
  props: Object;
  _owner: Component | null;
}

// Component props and context
interface ComponentProps {
  [key: string]: any;
  children?: RaxElement | RaxElement[];
}

interface ComponentContext {
  [key: string]: any;
}

// Render options
interface RenderOptions {
  driver: Object;
  hydrate?: boolean;
  parent?: RaxElement;
}

// Ref object
interface RefObject<T> {
  current: T | null;
}