tessl/npm-inferno-compat

Provides a compatibility with React codebases

—

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

PropTypes Validation

Name: tessl/npm-inferno-compat
Author: tessl

React PropTypes compatibility layer providing component prop validation interface. Important: This is a stub implementation - no actual validation is performed. All validator functions are no-op functions that return null.

Capabilities

PropTypes Object

Complete PropTypes API with all standard validators for React compatibility.

/**
 * PropTypes validation object providing React-compatible prop validation interface
 * Note: This is a stub implementation - no actual validation is performed
 */
interface PropTypes {
  /** No-op stub function - provides any type validation interface */
  any: PropTypeStub;
  
  /** No-op stub function - provides array validation interface */
  array: PropTypeStub;
  
  /** No-op stub function factory - provides array type validation interface */
  arrayOf(type: any): PropTypeStub;
  
  /** No-op stub function - provides boolean validation interface */
  bool: PropTypeStub;
  
  /** No-op stub function - provides element validation interface */
  element: PropTypeStub;
  
  /** No-op stub function - provides function validation interface */
  func: PropTypeStub;
  
  /** No-op stub function factory - provides instance validation interface */
  instanceOf(expectedClass: any): PropTypeStub;
  
  /** No-op stub function - provides node validation interface */
  node: PropTypeStub;
  
  /** No-op stub function - provides number validation interface */
  number: PropTypeStub;
  
  /** No-op stub function - provides object validation interface */
  object: PropTypeStub;
  
  /** No-op stub function factory - provides object type validation interface */
  objectOf(type: any): PropTypeStub;
  
  /** No-op stub function factory - provides enum validation interface */
  oneOf(types: any[]): PropTypeStub;
  
  /** No-op stub function factory - provides union type validation interface */
  oneOfType(types: any[]): PropTypeStub;
  
  /** No-op stub function factory - provides shape validation interface */
  shape(shape: { [key: string]: any }): PropTypeStub;
  
  /** No-op stub function - provides string validation interface */
  string: PropTypeStub;
  
  /** No-op stub function - provides symbol validation interface */
  symbol: PropTypeStub;
  
  /** No-op function for compatibility */
  checkPropTypes(): null;
}

/**
 * PropType stub function interface (no validation performed)
 */
interface PropTypeStub {
  (): void;
  isRequired: PropTypeStub;
}

Usage Examples:

import { PropTypes, Component } from "inferno-compat";

// Class component with PropTypes
class UserProfile extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    email: PropTypes.string.isRequired,
    isActive: PropTypes.bool,
    roles: PropTypes.arrayOf(PropTypes.string),
    address: PropTypes.shape({
      street: PropTypes.string,
      city: PropTypes.string,
      zipCode: PropTypes.string
    }),
    onUpdate: PropTypes.func,
    avatar: PropTypes.element,
    metadata: PropTypes.object,
    id: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ]),
    status: PropTypes.oneOf(['active', 'inactive', 'pending'])
  };
  
  static defaultProps = {
    age: 0,
    isActive: true,
    roles: []
  };
  
  render() {
    const { name, age, email, isActive } = this.props;
    return (
      <div className="user-profile">
        <h2>{name}</h2>
        <p>Age: {age}</p>
        <p>Email: {email}</p>
        <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
      </div>
    );
  }
}

// Function component with PropTypes
function ProductCard({ title, price, category, onAddToCart, image }) {
  return (
    <div className="product-card">
      {image}
      <h3>{title}</h3>
      <p>Category: {category}</p>
      <p>Price: ${price}</p>
      <button onClick={onAddToCart}>Add to Cart</button>
    </div>
  );
}

ProductCard.propTypes = {
  title: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  category: PropTypes.string,
  onAddToCart: PropTypes.func.isRequired,
  image: PropTypes.element
};

ProductCard.defaultProps = {
  category: 'General'
};

Validator Types

Basic Types

// String validation
PropTypes.string        // Validates string values
PropTypes.string.isRequired  // Required string

// Number validation  
PropTypes.number        // Validates numeric values
PropTypes.number.isRequired  // Required number

// Boolean validation
PropTypes.bool          // Validates boolean values
PropTypes.bool.isRequired    // Required boolean

// Function validation
PropTypes.func          // Validates function values
PropTypes.func.isRequired    // Required function

// Object validation
PropTypes.object        // Validates object values
PropTypes.object.isRequired  // Required object

// Array validation
PropTypes.array         // Validates array values
PropTypes.array.isRequired   // Required array

// Any type validation
PropTypes.any           // Accepts any type
PropTypes.any.isRequired     // Required (any type)

// Symbol validation
PropTypes.symbol        // Validates symbol values
PropTypes.symbol.isRequired  // Required symbol

Complex Types

// Array of specific type
PropTypes.arrayOf(PropTypes.string)     // Array of strings
PropTypes.arrayOf(PropTypes.number)     // Array of numbers
PropTypes.arrayOf(PropTypes.object)     // Array of objects

// Object with values of specific type
PropTypes.objectOf(PropTypes.string)    // Object with string values
PropTypes.objectOf(PropTypes.number)    // Object with number values

// One of specific values (enum)
PropTypes.oneOf(['red', 'green', 'blue'])           // Color enum
PropTypes.oneOf([1, 2, 3])                         // Number enum
PropTypes.oneOf(['small', 'medium', 'large'])      // Size enum

// One of specific types (union)
PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
])  // String or number

PropTypes.oneOfType([
  PropTypes.arrayOf(PropTypes.string),
  PropTypes.string
])  // String or array of strings

// Instance of specific class
class CustomClass {}
PropTypes.instanceOf(CustomClass)      // Instance of CustomClass
PropTypes.instanceOf(Date)             // Date instance
PropTypes.instanceOf(Error)            // Error instance

// React elements and nodes
PropTypes.element       // React element
PropTypes.node         // Any renderable content (element, string, number, array)

// Object shape validation
PropTypes.shape({
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  email: PropTypes.string,
  preferences: PropTypes.shape({
    theme: PropTypes.oneOf(['light', 'dark']),
    language: PropTypes.string
  })
})

Usage Patterns

Component Props Validation

import { PropTypes, Component, createElement } from "inferno-compat";

// Modal component
class Modal extends Component {
  static propTypes = {
    isOpen: PropTypes.bool.isRequired,
    title: PropTypes.string,
    children: PropTypes.node,
    onClose: PropTypes.func.isRequired,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    showCloseButton: PropTypes.bool,
    closeOnOverlayClick: PropTypes.bool,
    customStyles: PropTypes.object
  };
  
  static defaultProps = {
    size: 'medium',
    showCloseButton: true,
    closeOnOverlayClick: true
  };
  
  render() {
    if (!this.props.isOpen) return null;
    
    return createElement('div', { className: 'modal-overlay' },
      createElement('div', { className: `modal modal-${this.props.size}` },
        this.props.title && createElement('h2', null, this.props.title),
        createElement('div', { className: 'modal-content' }, this.props.children),
        this.props.showCloseButton && 
          createElement('button', { onClick: this.props.onClose }, 'Close')
      )
    );
  }
}

// Form input component
function FormInput({ 
  type, 
  name, 
  value, 
  placeholder, 
  onChange, 
  onBlur, 
  error, 
  disabled, 
  required 
}) {
  return createElement('div', { className: 'form-input' },
    createElement('input', {
      type,
      name,
      value,
      placeholder,
      onChange,
      onBlur,
      disabled,
      required,
      className: error ? 'error' : ''
    }),
    error && createElement('span', { className: 'error-message' }, error)
  );
}

FormInput.propTypes = {
  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'tel']),
  name: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  placeholder: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func,
  error: PropTypes.string,
  disabled: PropTypes.bool,
  required: PropTypes.bool
};

FormInput.defaultProps = {
  type: 'text',
  disabled: false,
  required: false
};

Higher-Order Component PropTypes

import { PropTypes } from "inferno-compat";

// HOC with PropTypes validation
function withLoading(WrappedComponent) {
  function WithLoadingComponent(props) {
    if (props.isLoading) {
      return createElement('div', { className: 'loading' }, 'Loading...');
    }
    
    return createElement(WrappedComponent, props);
  }
  
  WithLoadingComponent.propTypes = {
    ...WrappedComponent.propTypes,
    isLoading: PropTypes.bool.isRequired
  };
  
  WithLoadingComponent.displayName = 
    `WithLoading(${WrappedComponent.displayName || WrappedComponent.name})`;
  
  return WithLoadingComponent;
}

// Context provider component
function ThemeProvider({ theme, children }) {
  // Theme provider logic here
  return createElement('div', { className: `theme-${theme}` }, children);
}

ThemeProvider.propTypes = {
  theme: PropTypes.oneOf(['light', 'dark', 'auto']).isRequired,
  children: PropTypes.node.isRequired
};

React Compatibility Notes

No Actual Validation

This PropTypes implementation is a compatibility layer that provides the same API as React's PropTypes but performs no actual validation. In a production environment, you might want to:

Use a separate prop validation library for runtime checking
Rely on TypeScript for compile-time type checking
Implement custom validation logic if needed

Development vs Production

In React, PropTypes are typically stripped out in production builds. With inferno-compat:

PropTypes declarations remain in the code
No performance impact since validators are no-ops
Maintains compatibility with existing React codebases

Migration from React

When migrating from React:

Existing PropTypes declarations work without changes
No runtime prop validation warnings
Consider using TypeScript for type safety
PropTypes serve as documentation for component APIs

TypeScript Integration

For TypeScript projects, PropTypes can supplement interface definitions:

interface UserProps {
  name: string;
  age?: number;
  email: string;
  isActive?: boolean;
}

class User extends Component<UserProps> {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    email: PropTypes.string.isRequired,
    isActive: PropTypes.bool
  };
  
  render() {
    // TypeScript provides compile-time type checking
    // PropTypes provide runtime API documentation
    return <div>{this.props.name}</div>;
  }
}

checkPropTypes Function

/**
 * No-op function for React compatibility
 * In React, this manually runs prop type checking
 * @returns null (no-op)
 */
checkPropTypes(): null;

This function exists for compatibility but performs no action in inferno-compat.

docs

advanced-vnodes.md

children-utilities.md

tessl/npm-inferno-compat

proptypes.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

PropTypes Validation

Capabilities

PropTypes Object

Validator Types

Basic Types

Complex Types

Usage Patterns

Component Props Validation

Higher-Order Component PropTypes

React Compatibility Notes

No Actual Validation

Development vs Production

Migration from React

TypeScript Integration

checkPropTypes Function

proptypes.mddocs/