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

Element Creation and Manipulation

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

Functions for creating and manipulating virtual elements with full React compatibility, enabling seamless migration from React codebases.

Capabilities

createElement Function

Creates virtual DOM elements compatible with React.createElement signature.

/**
 * Creates a virtual DOM element with React-compatible signature
 * @param type - Element type (string for DOM elements, function/class for components)
 * @param props - Element properties and attributes
 * @param children - Child elements (variadic arguments)
 * @returns VNode representing the virtual DOM element
 */
function createElement(
  type: string | ComponentClass<any> | Function,
  props?: any,
  ...children: any[]
): VNode;

Usage Examples:

import { createElement } from "inferno-compat";

// Create DOM elements
const div = createElement('div', { className: 'container' }, 'Hello World');
const input = createElement('input', { 
  type: 'text', 
  placeholder: 'Enter text',
  onChange: (e) => console.log(e.target.value)
});

// Create component elements
function Welcome(props) {
  return createElement('h1', null, `Hello, ${props.name}!`);
}

const welcome = createElement(Welcome, { name: 'Alice' });

// With JSX (requires transpilation)
const jsx = <div className="container">Hello World</div>;
// Transpiles to: createElement('div', { className: 'container' }, 'Hello World')

cloneElement Function

Clones virtual DOM elements with optional property and children modifications.

/**
 * Clones a virtual DOM element with optional modifications
 * @param element - VNode to clone
 * @param props - Additional or override properties
 * @param children - Replacement children (variadic arguments)
 * @returns New VNode with modifications applied
 */
function cloneElement(element: VNode, props?: any, ...children: any[]): VNode;

Usage Examples:

import { createElement, cloneElement } from "inferno-compat";

const original = createElement('button', { 
  className: 'btn', 
  onClick: () => console.log('clicked') 
}, 'Click me');

// Clone with additional class
const modified = cloneElement(original, { 
  className: 'btn btn-primary' 
});

// Clone with new children
const withNewText = cloneElement(original, {}, 'New Text');

// Clone in component for prop injection
function ButtonWrapper({ children, ...props }) {
  return children.map(child => 
    cloneElement(child, { 
      ...props, 
      className: `${child.props.className || ''} wrapper-style`.trim()
    })
  );
}

isValidElement Function

Checks if an object is a valid Inferno/React element.

/**
 * Determines if an object is a valid virtual DOM element
 * @param obj - Object to test
 * @returns true if object is a valid VNode/element
 */
function isValidElement(obj: any): boolean;

Usage Examples:

import { createElement, isValidElement } from "inferno-compat";

const element = createElement('div', null, 'Hello');
const notElement = { type: 'div', props: {} };

console.log(isValidElement(element));    // true
console.log(isValidElement(notElement)); // false
console.log(isValidElement('string'));   // false
console.log(isValidElement(null));       // false

// Use in component validation
function renderChildren(children) {
  return children.filter(child => 
    isValidElement(child) || typeof child === 'string' || typeof child === 'number'
  );
}

createFactory Function

Creates a factory function for creating elements of a specific type.

/**
 * Creates a factory function for a specific element type
 * @param type - Element type to create factory for
 * @returns Factory function that creates elements of the specified type
 */
function createFactory(
  type: string | ComponentClass<any> | Function
): (...children: any[]) => VNode;

Usage Examples:

import { createFactory } from "inferno-compat";

// Create factories for common elements
const div = createFactory('div');
const button = createFactory('button');
const span = createFactory('span');

// Use factories to create elements
const container = div({ className: 'container' },
  button({ onClick: () => alert('Hello') }, 'Click me'),
  span(null, 'Some text')
);

// Component factory
function CustomButton(props) {
  return button({ 
    className: 'custom-btn',
    ...props 
  }, props.children);
}

const customButtonFactory = createFactory(CustomButton);
const myButton = customButtonFactory({ onClick: handleClick }, 'Custom Button');

// Legacy React patterns
const DOM = {
  div: createFactory('div'),
  span: createFactory('span'),
  button: createFactory('button'),
  input: createFactory('input'),
  form: createFactory('form')
};

const form = DOM.form({ onSubmit: handleSubmit },
  DOM.input({ type: 'text', name: 'username' }),
  DOM.button({ type: 'submit' }, 'Submit')
);

React Compatibility Features

Element creation functions include several React-specific compatibility features:

Property Mapping

htmlFor → for: React's htmlFor attribute is mapped to HTML for attribute
className → class: React's className is converted to HTML class attribute
onDoubleClick → onDblClick: Event handler normalization
SVG attributes: Automatic camelCase to hyphen-case conversion for SVG properties

Style Processing

camelCase conversion: React-style camelCase CSS properties converted to hyphen-case
Number units: Automatic 'px' suffix addition for numeric CSS values (except unitless properties)
Vendor prefixes: Proper handling of vendor-prefixed CSS properties

Event Handling

SyntheticEvent compatibility: Event objects include persist() method for React compatibility
onChange transformation: React's onChange events are converted to appropriate native events (onInput for text inputs)
Event pooling: Compatible with React's event pooling patterns

Children Processing

Iterable children: Support for iterable data structures as children (Map, Set, etc.)
Fragment flattening: Automatic flattening of nested arrays and fragments
Key preservation: Proper key handling for list reconciliation