Core React API

/**
 * Base component class with state management and lifecycle methods
 */
class Component {
  /**
   * Component constructor
   * @param {object} props - Component properties
   * @param {object} context - Component context
   */
  constructor(props, context);
  
  /**
   * Update component state and trigger re-render
   * @param {object|function} partialState - State updates or updater function
   * @param {function} callback - Optional callback after state update
   */
  setState(partialState, callback);
  
  /**
   * Force component to re-render immediately
   * @param {function} callback - Optional callback after render
   */
  forceUpdate(callback);
  
  /**
   * Render method - must be implemented by subclasses
   * @returns {VNode} Virtual DOM node
   */
  render();
  
  // Lifecycle methods
  componentWillMount();
  componentDidMount();
  componentWillReceiveProps(nextProps);
  shouldComponentUpdate(nextProps, nextState);
  componentWillUpdate(nextProps, nextState);
  componentDidUpdate(prevProps, prevState);
  componentWillUnmount();
  
  // Instance properties
  props;
  state;
  context;
}

/**
 * Component with built-in shallow comparison for shouldComponentUpdate
 */
class PureComponent extends Component {
  /**
   * Automatically implements shallow comparison for props and state
   * @param {object} nextProps - Next props
   * @param {object} nextState - Next state
   * @returns {boolean} Whether component should update
   */
  shouldComponentUpdate(nextProps, nextState);
}

import { Component, PureComponent } from 'preact-compat';

// Class component with state
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Pure component for performance
class DisplayItem extends PureComponent {
  render() {
    return <div>{this.props.text}</div>;
  }
}

/**
 * Create a virtual DOM element
 * @param {string|function} type - Element type or component
 * @param {object} props - Element properties
 * @param {...any} children - Child elements
 * @returns {VNode} Virtual DOM node
 */
function createElement(type, props, ...children);

/**
 * Clone an existing element with new props and children
 * @param {VNode} element - Element to clone
 * @param {object} props - Additional props to merge
 * @param {...any} children - New children (replaces existing)
 * @returns {VNode} Cloned virtual DOM node
 */
function cloneElement(element, props, ...children);

/**
 * Create a factory function for a specific element type
 * @param {string|function} type - Element type or component
 * @returns {function} Factory function that creates elements of the specified type
 */
function createFactory(type);

/**
 * Check if an object is a valid React element
 * @param {any} object - Object to validate
 * @returns {boolean} True if valid React element
 */
function isValidElement(object);

/**
 * Create a portal for rendering outside the component tree
 * @param {VNode} vnode - Virtual DOM node to render
 * @param {Element} container - DOM container to render into
 * @returns {VNode} Portal component
 */
function createPortal(vnode, container);

import { createElement, cloneElement, createFactory, isValidElement, createPortal } from 'preact-compat';

// Create elements
const element = createElement('div', { className: 'container' }, 'Hello World');
const component = createElement(MyComponent, { prop: 'value' });

// Clone with modifications
const cloned = cloneElement(element, { id: 'main' }, 'New Content');

// Create factory
const div = createFactory('div');
const divElement = div({ className: 'box' }, 'Content');

// Create portal (render outside component tree)
const modal = createPortal(
  createElement('div', { className: 'modal' }, 'Modal content'),
  document.body
);

// Validate elements
console.log(isValidElement(element)); // true
console.log(isValidElement('string')); // false

/**
 * Render a component into a DOM container
 * @param {VNode} vnode - Virtual DOM node to render
 * @param {Element} parent - DOM container element
 * @param {Element} merge - Optional element to merge with
 * @returns {Component} Rendered component instance
 */
function render(vnode, parent, merge);

/**
 * Hydrate server-rendered markup with a component (alias for render)
 * @param {VNode} vnode - Virtual DOM node to hydrate
 * @param {Element} parent - DOM container element
 * @returns {Component} Hydrated component instance
 */
function hydrate(vnode, parent);

/**
 * Find the DOM node for a component instance
 * @param {Component} component - Component instance
 * @returns {Element} DOM node
 */
function findDOMNode(component);

/**
 * Unmount and remove a component from a DOM container
 * @param {Element} container - DOM container element
 * @returns {boolean} True if component was unmounted
 */
function unmountComponentAtNode(container);

/**
 * Render component into a container with context (unstable API)
 * @param {VNode} vnode - Virtual DOM node to render
 * @param {Element} container - DOM container element
 * @param {function} callback - Render callback
 * @returns {Component} Rendered component instance  
 */
function unstable_renderSubtreeIntoContainer(parentComponent, vnode, container, callback);

/**
 * Batch multiple state updates (no-op in Preact)
 * @param {function} callback - Function containing state updates
 */
function unstable_batchedUpdates(callback);

import { render, hydrate, findDOMNode, unmountComponentAtNode } from 'preact-compat';

// Render to DOM
const container = document.getElementById('root');
const component = render(<App />, container);

// Hydrate server-rendered content
hydrate(<App />, container);

// Find DOM node
const domNode = findDOMNode(component);

// Unmount component
unmountComponentAtNode(container);

/**
 * React version string for library compatibility
 * @type {string}
 */
const version = '15.1.0';

import { version } from 'preact-compat';
console.log(version); // '15.1.0'

/**
 * Object extension utility (alias for extend function)
 * @param {object} base - Base object to extend
 * @param {...object} props - Objects to merge into base
 * @returns {object} Extended object
 */
const __spread;

import { __spread } from 'preact-compat';

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };
const extended = __spread(obj1, obj2); // { a: 1, b: 2, c: 3 }

interface ComponentLifecycle<P, S> {
  componentWillMount?(): void;
  componentDidMount?(): void;
  componentWillReceiveProps?(nextProps: P, nextContext: any): void;
  shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean;
  componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void;
  componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void;
  componentWillUnmount?(): void;
}

interface ComponentConstructor<P = {}, S = {}> {
  new (props: P, context?: any): Component<P, S>;
}

type StatelessComponent<P = {}> = (props: P, context?: any) => VNode<any>;

type ComponentType<P = {}> = ComponentConstructor<P> | StatelessComponent<P>;