or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

children-utilities.mdcontext-api.mdcore-api.mdimmutability-helpers.mdindex.mdlegacy-apis.mdperformance-tools.mdrefs-system.mdserver-rendering.mdtransition-groups.md
tile.json

tessl/npm-preact-compat

A React compatibility layer for Preact

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

To install, run

npx @tessl/cli install tessl/npm-preact-compat@3.19.0

index.mddocs/

Preact Compat

Preact Compat is a React compatibility layer for Preact that provides the same exports as react and react-dom. It enables React-based modules to work with Preact without code changes, offering a complete React 15.1.0 API implementation optimized for Preact 8.x and prior versions.

Package Information

  • Package Name: preact-compat
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install preact-compat
  • Peer Dependencies: preact <10

Core Imports

import React from 'preact-compat';  // Default export with all APIs
import { Component, render, createElement } from 'preact-compat';  // Named exports

For CommonJS:

const React = require('preact-compat');  // Default export
const { Component, render, createElement } = require('preact-compat');  // Named exports

Basic Usage

import React, { Component } from 'preact-compat';
import { render } from 'preact-compat';

// Standard React component patterns work unchanged
class MyComponent extends Component {
  state = { count: 0 };
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Render to DOM (same as ReactDOM.render)
render(<MyComponent />, document.getElementById('root'));

Architecture

Preact Compat provides complete React API compatibility through several key components:

  • Main Module: Core React APIs including createElement, Component, render, and lifecycle methods
  • Server Module: Server-side rendering capabilities with renderToString and renderToStaticMarkup
  • Library Modules: Specialized React features like createClass, DOM factories, immutability helpers, and transition groups
  • Context System: Full React context API support via preact-context
  • PropTypes Integration: Runtime type checking through prop-types library
  • Performance Optimizations: Pure render mixins and shallow comparison utilities

Capabilities

Core React API

Primary React compatibility layer providing all essential React APIs including component system, virtual DOM, lifecycle methods, and rendering functions.

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

class PureComponent extends Component {}

// Element Creation
function createElement(type, props, ...children);
function cloneElement(element, props, ...children);
function createFactory(type);
function isValidElement(object);
function createPortal(vnode, container);

// Rendering
function render(vnode, parent, merge);
function hydrate(vnode, parent);
function findDOMNode(component);
function unmountComponentAtNode(container);

Core React API

Server-Side Rendering

Server-side rendering capabilities for generating HTML strings from components, supporting both static markup and hydration patterns.

function renderToString(vnode);
function renderToStaticMarkup(vnode);

Server-Side Rendering

Children Utilities

Comprehensive utilities for working with component children, providing safe iteration and manipulation methods.

const Children = {
  map(children, fn, ctx);
  forEach(children, fn, ctx);
  count(children);
  only(children);
  toArray(children);
};

Children Utilities

Context API

Full React context system for sharing data between components without explicit prop passing.

function createContext(defaultValue);

interface Context<T> {
  Provider: ComponentClass<{value: T, children?: ComponentChildren}>;
  Consumer: ComponentClass<{children: (value: T) => ComponentChildren}>;
}

Context API

Refs System

Reference system for accessing DOM nodes and component instances directly.

function createRef();

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

Refs System

Legacy React APIs

Support for legacy React patterns including createClass, DOM factories, and deprecated lifecycle methods for backward compatibility.

function createClass(spec);
const DOM = {
  a: ElementFactory,
  div: ElementFactory,
  span: ElementFactory,
  // ... all HTML elements
};

Legacy React APIs

Immutability Helpers

Data update utilities for managing immutable state transformations safely and efficiently.

function update(object, spec);

interface UpdateSpec {
  $set?: any;
  $merge?: object;
  $push?: Array<any>;
  $unshift?: Array<any>;
  $splice?: Array<Array<any>>;
  $apply?: (value: any) => any;
}

Immutability Helpers

Transition Groups

Animation and transition components for managing component lifecycle animations and CSS transitions.

class TransitionGroup extends Component {}
class CSSTransitionGroup extends Component {}

Transition Groups

Performance Tools

Development and performance utilities including pure render mixins and performance measurement tools.

const PureRenderMixin = {
  shouldComponentUpdate(nextProps, nextState);
};

const ReactPerf = {
  start();
  stop();
  getLastMeasurements();
  printInclusive();
  printExclusive();
  printWasted();
};

Performance Tools

PropTypes Validation

Runtime type checking for React props, providing development-time validation and error reporting.

const PropTypes = {
  // Primitive types
  array: Validator;
  bool: Validator;
  func: Validator;
  number: Validator;
  object: Validator;
  string: Validator;
  symbol: Validator;
  
  // Renderable types
  node: Validator;
  element: Validator;
  
  // Collections
  arrayOf(validator: Validator): Validator;
  objectOf(validator: Validator): Validator;
  
  // Specific values
  oneOf(values: Array<any>): Validator;
  oneOfType(validators: Array<Validator>): Validator;
  
  // Complex objects
  shape(spec: {[key: string]: Validator}): Validator;
  exact(spec: {[key: string]: Validator}): Validator;
  
  // Instances
  instanceOf(constructor: Function): Validator;
  
  // Any type (no validation)
  any: Validator;
};

interface Validator {
  isRequired: Validator;
  (props: object, propName: string, componentName: string): Error | null;
}

Usage:

import { PropTypes } from 'preact-compat';

class MyComponent extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    items: PropTypes.arrayOf(PropTypes.string),
    config: PropTypes.shape({
      debug: PropTypes.bool,
      level: PropTypes.oneOf(['info', 'warn', 'error'])
    })
  };
  
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Note: PropTypes validation only runs in development mode when process.env.NODE_ENV !== 'production'.

Types

// Core types used throughout the API
type ComponentChildren = VNode<any> | object | string | number | boolean | null | undefined | Array<ComponentChildren>;

interface VNode<P = {}> {
  type: ComponentType<P> | string;
  props: P & { children?: ComponentChildren };
  key: string | number | null;
  ref: Ref<any> | null;
}

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

type ComponentType<P = {}> = ComponentClass<P> | ((props: P) => VNode<any>);

type Ref<T> = ((instance: T | null) => void) | RefObject<T>;