Fragments and Utilities

/**
 * Symbol used to create fragment VNodes for grouping elements without wrapper
 */
const Fragment: unique symbol;

import { Fragment, createVNode, createFragment, VNodeFlags, ChildFlags } from "inferno";

// Using Fragment directly with createVNode
const fragmentVNode = createVNode(VNodeFlags.Fragment, Fragment, null, [
  createVNode(VNodeFlags.HtmlElement, 'h1', null, 'Title'),
  createVNode(VNodeFlags.HtmlElement, 'p', null, 'Content without wrapper div')
], ChildFlags.HasNonKeyedChildren);

// Using createFragment helper (recommended)
const fragment = createFragment([
  createVNode(VNodeFlags.HtmlElement, 'li', null, 'Item 1'),
  createVNode(VNodeFlags.HtmlElement, 'li', null, 'Item 2'),
  createVNode(VNodeFlags.HtmlElement, 'li', null, 'Item 3')
], ChildFlags.HasNonKeyedChildren);

// In a component
class ListComponent extends Component {
  render() {
    return createVNode(VNodeFlags.HtmlElement, 'ul', null, [
      fragment, // Multiple li elements without wrapper
      createVNode(VNodeFlags.HtmlElement, 'li', null, 'Additional item')
    ]);
  }
}

/**
 * Immutable empty object used for performance optimization
 */
const EMPTY_OBJ: {};

import { EMPTY_OBJ, Component } from "inferno";

class OptimizedComponent extends Component {
  constructor(props) {
    super(props);
    // Use EMPTY_OBJ instead of {} for consistency
    this.context = this.context || EMPTY_OBJ;
  }

  render() {
    // Use for default props to avoid object creation
    const props = this.props || EMPTY_OBJ;
    return createVNode(VNodeFlags.HtmlElement, 'div', null, props.children);
  }
}

/**
 * Finds the actual DOM element associated with a VNode
 * @param vNode - VNode to find DOM element for
 * @param start - Whether to search from the start of the VNode tree
 * @returns DOM element or null if not found
 */
function findDOMFromVNode(vNode: VNode, start: boolean): Element | null;

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

class DOMAccessComponent extends Component {
  componentDidMount() {
    // Find DOM element from the component's VNode
    const domElement = findDOMFromVNode(this.$LI, true);
    if (domElement) {
      console.log('Component DOM element:', domElement);
      domElement.style.border = '2px solid blue';
    }
  }

  render() {
    return createVNode(VNodeFlags.HtmlElement, 'div', 'component-container', 'Component content');
  }
}

/**
 * Creates a direct clone of a VNode for safe reuse
 * @param vNodeToClone - VNode to clone
 * @returns New VNode instance with same properties
 */
function directClone(vNodeToClone: VNode): VNode;

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

class ReusableNodeComponent extends Component {
  render() {
    // Create a VNode once
    const iconVNode = createVNode(VNodeFlags.HtmlElement, 'i', 'icon icon-star', null);
    
    // Clone for reuse in multiple places
    return createVNode(VNodeFlags.HtmlElement, 'div', null, [
      createVNode(VNodeFlags.HtmlElement, 'h1', null, ['Favorites ', iconVNode]),
      createVNode(VNodeFlags.HtmlElement, 'p', null, ['Rate this ', directClone(iconVNode)]),
      createVNode(VNodeFlags.HtmlElement, 'button', null, [directClone(iconVNode), ' Add to favorites'])
    ]);
  }
}

/**
 * Global options for configuring Inferno behavior
 */
const options: {
  /** Hook called after VNode creation for custom processing */
  createVNode: ((vNode: VNode) => void) | null;
  /** Enable React-style CSS property naming (camelCase) */
  reactStyles?: boolean;
};

import { options } from "inferno";

// Hook into VNode creation for debugging
options.createVNode = (vNode) => {
  console.log('VNode created:', vNode.type);
};

// Enable React-compatible CSS styling
options.reactStyles = true;

/**
 * Current version string of the Inferno library
 */
const version: string;

import { version } from "inferno";

console.log('Inferno version:', version);
// Logs something like: "Inferno version: 9.0.3"

// Conditional feature detection
if (version.startsWith('9.')) {
  // Use v9-specific features
}

/**
 * Triggers a global re-render of all mounted components
 */
function rerender(): void;

import { rerender } from "inferno";

// Force global re-render (use sparingly)
rerender();

// Useful for debugging or after global state changes
window.debugRerender = rerender;

/**
 * Manages animation lifecycle hooks with proper timing
 */
class AnimationQueues {
  /** Functions to call when components appear */
  componentDidAppear: Array<() => void>;
  /** Functions to call when components will disappear */
  componentWillDisappear: Array<() => void>;
}

import { AnimationQueues } from "inferno";

// Used internally by the rendering system
const animations = new AnimationQueues();

// Add animation hooks
animations.componentDidAppear.push(() => {
  console.log('Component appeared');
});

animations.componentWillDisappear.push(() => {
  console.log('Component will disappear');
});

class ConditionalFragment extends Component {
  render() {
    const showHeader = this.props.showHeader;
    
    return createVNode(VNodeFlags.HtmlElement, 'div', 'container', [
      showHeader ? createFragment([
        createVNode(VNodeFlags.HtmlElement, 'h1', null, 'Title'),
        createVNode(VNodeFlags.HtmlElement, 'nav', null, 'Navigation')
      ], ChildFlags.HasNonKeyedChildren) : null,
      createVNode(VNodeFlags.HtmlElement, 'main', null, this.props.children)
    ]);
  }
}

class NestedFragments extends Component {
  render() {
    const headerFragment = createFragment([
      createVNode(VNodeFlags.HtmlElement, 'h1', null, 'Main Title'),
      createVNode(VNodeFlags.HtmlElement, 'h2', null, 'Subtitle')
    ], ChildFlags.HasNonKeyedChildren);

    const contentFragment = createFragment([
      createVNode(VNodeFlags.HtmlElement, 'p', null, 'First paragraph'),
      createVNode(VNodeFlags.HtmlElement, 'p', null, 'Second paragraph')
    ], ChildFlags.HasNonKeyedChildren);

    return createFragment([headerFragment, contentFragment], ChildFlags.HasNonKeyedChildren);
  }
}

class OptimizedComponent extends Component {
  // Use EMPTY_OBJ to avoid creating new objects
  static defaultProps = EMPTY_OBJ;

  constructor(props) {
    super(props);
    this.state = this.getInitialState();
  }

  getInitialState() {
    // Return EMPTY_OBJ when no state is needed
    return this.props.hasState ? { count: 0 } : EMPTY_OBJ;
  }

  render() {
    return createVNode(VNodeFlags.HtmlElement, 'div', null, 'Optimized component');
  }
}

class ReusableComponents extends Component {
  constructor(props) {
    super(props);
    
    // Create reusable VNodes
    this.iconVNodes = {
      star: createVNode(VNodeFlags.HtmlElement, 'i', 'icon icon-star'),
      heart: createVNode(VNodeFlags.HtmlElement, 'i', 'icon icon-heart'),
      check: createVNode(VNodeFlags.HtmlElement, 'i', 'icon icon-check')
    };
  }

  render() {
    return createVNode(VNodeFlags.HtmlElement, 'div', null, [
      createVNode(VNodeFlags.HtmlElement, 'button', null, [
        directClone(this.iconVNodes.star),
        ' Favorite'
      ]),
      createVNode(VNodeFlags.HtmlElement, 'button', null, [
        directClone(this.iconVNodes.heart),
        ' Like'
      ]),
      createVNode(VNodeFlags.HtmlElement, 'button', null, [
        directClone(this.iconVNodes.check),
        ' Complete'
      ])
    ]);
  }
}