tessl/npm-preact

Fast 3kb React-compatible Virtual DOM library.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Preact

Name: tessl/npm-preact
Author: tessl

Preact is a fast, lightweight 3kB alternative to React that provides the same modern API and development experience. It offers a complete Virtual DOM implementation with familiar React patterns including ES6 classes, hooks, and functional components, while maintaining extensive React compatibility and superior performance.

Package Information

Package Name: preact
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install preact

Core Imports

import { render, createElement, Component, Fragment } from "preact";

For React compatibility:

import { render, Component, useState, useEffect } from "preact/compat";

For hooks:

import { useState, useEffect, useMemo, useCallback } from "preact/hooks";

Basic Usage

import { render, createElement, Component } from "preact";

// Functional component
function Hello({ name }: { name: string }) {
  return createElement("h1", null, `Hello ${name}!`);
}

// Class component
class Counter extends Component<{}, { count: number }> {
  state = { count: 0 };
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return createElement("div", null,
      createElement("p", null, `Count: ${this.state.count}`),
      createElement("button", { onClick: this.increment }, "Increment")
    );
  }
}

// Render to DOM
render(createElement(Counter), document.getElementById("app"));

Architecture

Preact is built around several key components:

Virtual DOM: Lightweight virtual representation of the DOM with minimal overhead
Component System: Both class-based and functional components with full lifecycle support
Hooks Integration: Complete React hooks API through preact/hooks module
React Compatibility: Drop-in React replacement through preact/compat module
Modular Design: Core features split across specialized modules for optimal bundle size
TypeScript Support: Full type definitions with excellent IntelliSense integration

Capabilities

Core Virtual DOM

Essential functions for creating and rendering virtual DOM elements. Provides the foundation for all Preact applications.

function render(vnode: ComponentChild, parent: ContainerNode): void;
function createElement<P>(
  type: ComponentType<P> | string,
  props: P | null,
  ...children: ComponentChildren[]
): VNode<P>;
function Fragment(props: { children?: ComponentChildren }): ComponentChildren;

Core Virtual DOM

Component System

Class-based and functional component patterns with complete lifecycle methods and state management capabilities.

abstract class Component<P = {}, S = {}> {
  setState<K extends keyof S>(
    state: Partial<S> | ((prevState: S, props: P) => Partial<S>),
    callback?: () => void
  ): void;
  forceUpdate(callback?: () => void): void;
  abstract render(props?: P, state?: S, context?: any): ComponentChildren;
}

interface FunctionComponent<P = {}> {
  (props: RenderableProps<P>, context?: any): ComponentChildren;
  displayName?: string;
  defaultProps?: Partial<P>;
}

Component System

Hooks API

Modern React hooks for state management, side effects, and component logic in functional components.

function useState<S>(initialState?: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
function useMemo<T>(factory: () => T, deps: DependencyList): T;
function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

Hooks API

React Compatibility

Complete React compatibility layer enabling seamless migration from React applications with advanced features like Suspense and portals.

function memo<P>(
  component: ComponentType<P>,
  propsAreEqual?: (prevProps: P, nextProps: P) => boolean
): ComponentType<P>;
function forwardRef<T, P = {}>(
  render: (props: P, ref: Ref<T>) => ComponentChildren
): ComponentType<P & RefAttributes<T>>;
function createPortal(children: ComponentChildren, container: Element): VNode;

React Compatibility

Context API

Provider/consumer pattern for sharing data across component hierarchies without prop drilling.

function createContext<T>(defaultValue: T): Context<T>;

interface Context<T> {
  Provider: ComponentType<{ value: T; children?: ComponentChildren }>;
  Consumer: ComponentType<{ children: (value: T) => ComponentChildren }>;
  displayName?: string;
}

Context API

Development Tools

Development utilities, debugging helpers, and React DevTools integration for enhanced developer experience.

function addHookName<T>(value: T, name: string): T;
function getCurrentVNode(): VNode | null;
function getDisplayName(vnode: VNode): string;

Development Tools

Testing Utilities

Testing helpers for managing component rendering, effects flushing, and test environment setup.

function setupRerender(): () => void;
function act(callback: () => void | Promise<void>): Promise<void>;
function teardown(): void;

Testing Utilities

JSX Runtime

Modern JSX transformation runtime for automatic JSX compilation and template-based JSX. Used by build tools for transforming JSX syntax.

function jsx<P>(type: ComponentType<P> | string, props: P, key?: Key): VNode<P>;
function jsxs<P>(type: ComponentType<P> | string, props: P, key?: Key): VNode<P>;
function jsxDEV<P>(type: ComponentType<P> | string, props: P, key?: Key): VNode<P>;
function jsxTemplate(template: TemplateStringsArray, ...expressions: any[]): VNode | ComponentChildren;

JSX Runtime

Types

Core Types

type ComponentChild =
  | VNode<any>
  | object
  | string
  | number
  | bigint
  | boolean
  | null
  | undefined;

type ComponentChildren = ComponentChild[] | ComponentChild;

type Key = string | number | any;

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

type Ref<T> = RefObject<T> | RefCallback<T> | null;
type RefObject<T> = { current: T | null };
type RefCallback<T> = (instance: T | null) => void | (() => void);

type RenderableProps<P, RefType = any> = P & 
  Readonly<Attributes & { children?: ComponentChildren; ref?: Ref<RefType> }>;

interface Attributes {
  key?: Key | undefined;
  jsx?: boolean | undefined;
}

interface ClassAttributes<T> extends Attributes {
  ref?: Ref<T>;
}

Component Types

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

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

type ComponentProps<C extends ComponentType<any> | keyof JSXInternal.IntrinsicElements> =
  C extends ComponentType<infer P>
    ? P
    : C extends keyof JSXInternal.IntrinsicElements
      ? JSXInternal.IntrinsicElements[C]
      : {};