tessl/npm-inferno

An extremely fast, React-like JavaScript library for building modern user interfaces

—

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

Component System

Name: tessl/npm-inferno
Author: tessl

Class and functional component system with comprehensive lifecycle methods, state management, and performance optimizations.

Capabilities

Component Class

Base class for creating stateful components with lifecycle methods and state management.

/**
 * Base class for creating stateful components
 */
abstract class Component<P = Record<string, unknown>, S = Record<string, unknown>> {
  /** Current component state */
  state: Readonly<S | null>;
  /** Component props passed from parent */
  props: Readonly<{ children?: InfernoNode } & P>;
  /** Context object from parent components */
  context: any;
  /** Optional display name for debugging */
  displayName?: string;

  constructor(props?: P, context?: any);

  /**
   * Updates component state and triggers re-render
   * @param newState - New state object or updater function
   * @param callback - Optional callback called after state update
   */
  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;

  /**
   * Forces component to re-render regardless of shouldComponentUpdate
   * @param callback - Optional callback called after re-render
   */
  forceUpdate(callback?: (() => void) | undefined): void;

  /**
   * Renders the component's virtual DOM
   * @param props - Current props
   * @param state - Current state
   * @param context - Current context
   * @returns Virtual DOM representation
   */
  abstract render(props: Readonly<{ children?: InfernoNode } & P>, state: Readonly<S>, context: any): InfernoNode;

  // Lifecycle methods (optional)
  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;
  componentDidAppear?(domNode: Element): void;
  componentWillDisappear?(domNode: Element, callback: () => void): void;
  componentWillMove?(parentVNode: VNode, parentDOM: Element, dom: Element): void;
  getChildContext?(): void;
  getSnapshotBeforeUpdate?(prevProps: Readonly<{ children?: InfernoNode } & P>, prevState: Readonly<S>): any;

  // Static properties
  static defaultProps?: Record<string, unknown> | null;
  static getDerivedStateFromProps?(nextProps: any, state: any): any;
}

Usage Examples:

import { Component, createVNode, VNodeFlags } from "inferno";

class Counter extends Component<{}, { count: number }> {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Counter mounted');
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return createVNode(VNodeFlags.HtmlElement, 'div', null, [
      createVNode(VNodeFlags.HtmlElement, 'h2', null, `Count: ${this.state.count}`),
      createVNode(VNodeFlags.HtmlElement, 'button', null, 'Increment', ChildFlags.HasInvalidChildren, {
        onClick: this.increment
      })
    ]);
  }
}

// With default props
class Greeting extends Component<{ name?: string }> {
  static defaultProps = { name: 'World' };

  render() {
    return createVNode(VNodeFlags.HtmlElement, 'h1', null, `Hello, ${this.props.name}!`);
  }
}

Stateless Functional Components

Function-based components for simple, stateless UI elements.

/**
 * Function-based components for simple, stateless UI elements
 */
interface StatelessComponent<P = {}> {
  (props: { children?: InfernoNode } & P & Refs<P>, context?: any): InfernoElement | null;
  defaultProps?: Partial<P> | undefined | null;
  defaultHooks?: Refs<P> | undefined | null;
}

type SFC<P = {}> = StatelessComponent<P>;

Usage Examples:

import { createVNode, VNodeFlags } from "inferno";

// Simple functional component
function Welcome(props) {
  return createVNode(VNodeFlags.HtmlElement, 'h1', null, `Welcome, ${props.name}!`);
}

// With default props
function Button(props) {
  return createVNode(VNodeFlags.HtmlElement, 'button', props.className, props.children, ChildFlags.HasInvalidChildren, {
    onClick: props.onClick,
    disabled: props.disabled
  });
}

Button.defaultProps = {
  className: 'btn',
  disabled: false
};

// With lifecycle hooks
function FadeIn(props) {
  return createVNode(VNodeFlags.HtmlElement, 'div', 'fade-in', props.children);
}

FadeIn.defaultHooks = {
  onComponentDidAppear(domNode) {
    domNode.style.opacity = '0';
    domNode.style.transition = 'opacity 0.3s';
    setTimeout(() => domNode.style.opacity = '1', 10);
  }
};

Component Types

Union type for all component types.

/**
 * Union type for all component types
 */
type ComponentType<P = Record<string, unknown>> = typeof Component<P> | StatelessComponent<P>;

Re-render Function

Force re-rendering of all queued components.

/**
 * Force re-rendering of all queued components
 * Used internally by the state management system
 */
function rerender(): void;

Lifecycle Methods

Mounting Lifecycle

Called when component is being created and inserted into the DOM:

constructor() - Initialize state and bind methods
componentWillMount() - Called before mounting (deprecated)
render() - Returns virtual DOM representation
componentDidMount() - Called after mounting, ideal for DOM operations

Updating Lifecycle

Called when component props or state changes:

componentWillReceiveProps(nextProps, nextContext) - Called when receiving new props
shouldComponentUpdate(nextProps, nextState, context) - Controls whether to re-render
componentWillUpdate(nextProps, nextState, context) - Called before update
render() - Returns updated virtual DOM
getSnapshotBeforeUpdate(prevProps, prevState) - Capture info before DOM changes
componentDidUpdate(prevProps, prevState, snapshot) - Called after update

Unmounting Lifecycle

Called when component is being removed from the DOM:

componentWillUnmount() - Cleanup before removal

Animation Lifecycle

Special lifecycle methods for animations:

componentDidAppear(domNode) - Called when component appears
componentWillDisappear(domNode, callback) - Called before disappearing
componentWillMove(parentVNode, parentDOM, dom) - Called when moving

State Management

setState Method

Updates component state and triggers re-render:

// Object update
this.setState({ count: 10 });

// Functional update
this.setState(prevState => ({ count: prevState.count + 1 }));

// With callback
this.setState({ loading: false }, () => {
  console.log('State updated');
});

State Update Rules

Immutability: Always return new state objects, don't mutate existing state
Async Updates: setState is asynchronous, use callbacks or functional updates for dependent operations
Batching: Multiple setState calls in the same event are batched for performance
Constructor Restriction: Cannot call setState in constructor, assign directly to this.state

Context System

Providing Context

class Provider extends Component {
  getChildContext() {
    return { theme: 'dark', locale: 'en' };
  }

  render() {
    return this.props.children;
  }
}

Consuming Context

class Consumer extends Component {
  constructor(props, context) {
    super(props, context);
    console.log(context.theme); // 'dark'
  }

  render() {
    return createVNode(VNodeFlags.HtmlElement, 'div', this.context.theme);
  }
}

Performance Optimizations

shouldComponentUpdate

Prevents unnecessary re-renders:

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.id !== this.props.id || nextState.count !== this.state.count;
}

Default Props Merging

Default props are automatically merged with provided props:

class MyComponent extends Component {
  static defaultProps = { color: 'blue', size: 'medium' };
  
  render() {
    // this.props will include default values for missing props
    return createVNode(VNodeFlags.HtmlElement, 'div', `${this.props.color} ${this.props.size}`);
  }
}

Component Refs

Access component instances through refs:

class Parent extends Component {
  componentDidMount() {
    this.childComponent.focus(); // Access child methods
  }

  render() {
    return createComponentVNode(
      VNodeFlags.ComponentClass,
      ChildComponent,
      {},
      null,
      (instance) => { this.childComponent = instance; }
    );
  }
}