VNode Creation

/**
 * Creates virtual DOM nodes for HTML elements and other DOM nodes
 * @param flags - VNodeFlags indicating the type and behavior of the VNode
 * @param type - HTML tag name or element type
 * @param className - CSS class name for the element
 * @param children - Child nodes of the element
 * @param childFlags - ChildFlags indicating the type of children
 * @param props - Properties and attributes for the element
 * @param key - Unique key for reconciliation
 * @param ref - Reference callback or object
 * @returns VNode representing the virtual element
 */
function createVNode<P>(
  flags: VNodeFlags,
  type: string,
  className?: string | null,
  children?: InfernoNode,
  childFlags?: ChildFlags,
  props?: Readonly<P> | null,
  key?: string | number | null,
  ref?: Ref | Refs<P> | null
): VNode;

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

// Simple div element
const div = createVNode(VNodeFlags.HtmlElement, 'div', null, 'Hello World');

// Element with props and className
const input = createVNode(
  VNodeFlags.InputElement,
  'input',
  'form-control',
  null,
  ChildFlags.HasInvalidChildren,
  { type: 'text', placeholder: 'Enter text' }
);

// Element with children
const list = createVNode(
  VNodeFlags.HtmlElement,
  'ul',
  'list',
  [
    createVNode(VNodeFlags.HtmlElement, 'li', null, 'Item 1'),
    createVNode(VNodeFlags.HtmlElement, 'li', null, 'Item 2')
  ],
  ChildFlags.HasKeyedChildren
);

/**
 * Creates VNodes for React-like components (class or functional)
 * @param flags - VNodeFlags indicating the component type
 * @param type - Component constructor, function, or ForwardRef
 * @param props - Properties passed to the component
 * @param key - Unique key for reconciliation
 * @param ref - Reference callback or object
 * @returns VNode representing the component
 */
function createComponentVNode<P>(
  flags: VNodeFlags,
  type: Function | ComponentType<P> | Component<P, unknown> | ForwardRef<P, unknown>,
  props?: Readonly<P> | null,
  key?: null | string | number,
  ref?: Ref | Refs<P> | null
): VNode;

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

// Class component
class MyComponent extends Component {
  render() {
    return createVNode(VNodeFlags.HtmlElement, 'div', null, this.props.message);
  }
}

const classVNode = createComponentVNode(
  VNodeFlags.ComponentClass,
  MyComponent,
  { message: 'Hello from class component' }
);

// Functional component
function FunctionalComponent(props) {
  return createVNode(VNodeFlags.HtmlElement, 'span', null, props.text);
}

const funcVNode = createComponentVNode(
  VNodeFlags.ComponentFunction,
  FunctionalComponent,
  { text: 'Hello from function' }
);

/**
 * Creates VNodes for text content
 * @param text - Text content (string, number, boolean, null, or undefined)
 * @param key - Unique key for reconciliation
 * @returns VNode representing the text node
 */
function createTextVNode(
  text?: string | boolean | null | number,
  key?: string | number | null
): VNode;

import { createTextVNode } from "inferno";

// Simple text
const textNode = createTextVNode('Hello World');

// Number as text
const numberNode = createTextVNode(42);

// Text with key
const keyedText = createTextVNode('Item', 'text-1');

// Empty text (null/undefined becomes empty string)
const emptyText = createTextVNode(null);

/**
 * Creates fragment VNodes for grouping multiple elements without a wrapper
 * @param children - Array of child nodes or single child
 * @param childFlags - ChildFlags indicating the type of children
 * @param key - Unique key for reconciliation
 * @returns VNode representing the fragment
 */
function createFragment(
  children: any,
  childFlags: ChildFlags,
  key?: string | number | null
): VNode;

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

// Fragment with multiple children
const fragment = createFragment([
  createVNode(VNodeFlags.HtmlElement, 'h1', null, 'Title'),
  createVNode(VNodeFlags.HtmlElement, 'p', null, 'Content')
], ChildFlags.HasNonKeyedChildren);

// Fragment with keyed children
const keyedFragment = createFragment([
  createVNode(VNodeFlags.HtmlElement, 'div', null, 'First', ChildFlags.HasInvalidChildren, null, 'div-1'),
  createVNode(VNodeFlags.HtmlElement, 'div', null, 'Second', ChildFlags.HasInvalidChildren, null, 'div-2')
], ChildFlags.HasKeyedChildren);

/**
 * Creates portal VNodes for rendering content outside the normal component tree
 * @param children - Content to render in the portal
 * @param container - DOM element where the portal content should be rendered
 * @returns VNode representing the portal
 */
function createPortal(children: any, container: ParentDOM): VNode;

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

// Portal to render modal outside component tree
const modal = createVNode(VNodeFlags.HtmlElement, 'div', 'modal', 'Modal content');
const portalVNode = createPortal(modal, document.body);

// Portal to render tooltip in specific container
const tooltip = createVNode(VNodeFlags.HtmlElement, 'div', 'tooltip', 'Tooltip text');
const tooltipPortal = createPortal(tooltip, document.getElementById('tooltip-container'));

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

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

// Original VNode
const original = createVNode(VNodeFlags.HtmlElement, 'div', 'container', 'Content');

// Clone for reuse
const cloned = directClone(original);

// Safe to use both in different parts of the tree
render(original, container1);
render(cloned, container2);

/**
 * Determines the appropriate VNode flags for a given element type string
 * @param type - Element type string (e.g., 'div', 'input', 'svg')
 * @returns VNodeFlags value corresponding to the element type
 */
function getFlagsForElementVnode(type: string): VNodeFlags;

import { getFlagsForElementVnode, VNodeFlags } from "inferno";

// Get flags for different element types
const divFlags = getFlagsForElementVnode('div');        // VNodeFlags.HtmlElement
const inputFlags = getFlagsForElementVnode('input');    // VNodeFlags.InputElement
const svgFlags = getFlagsForElementVnode('svg');        // VNodeFlags.SvgElement
const selectFlags = getFlagsForElementVnode('select');  // VNodeFlags.SelectElement
const textareaFlags = getFlagsForElementVnode('textarea'); // VNodeFlags.TextareaElement

// Use with createVNode for optimized element creation
const vnode = createVNode(
  getFlagsForElementVnode('input'),
  'input',
  null,
  null,
  ChildFlags.HasNonKeyedChildren,
  { type: 'text', value: 'Hello' }
);

/**
 * Normalizes a VNode's properties by moving certain props to the appropriate VNode fields
 * @param vNode - VNode to normalize
 * @returns The same VNode with normalized properties
 */
function normalizeProps(vNode: VNode): VNode;

import { normalizeProps, createVNode, VNodeFlags, ChildFlags } from "inferno";

// Create VNode with props that need normalization
const vnode = createVNode(
  VNodeFlags.HtmlElement,
  'div',
  null,
  null,
  ChildFlags.HasNonKeyedChildren,
  {
    className: 'my-class',
    children: 'Hello World'
  }
);

// Normalize props to move className and children to correct VNode fields
normalizeProps(vnode);
// vnode.className is now 'my-class'
// vnode.children is now 'Hello World'
// props.className and props.children are removed

interface VNode {
  children: InfernoNode;
  childFlags: ChildFlags;
  dom: Element | null;
  className: string | null | undefined;
  flags: VNodeFlags;
  isValidated?: boolean;
  key: Key;
  props: any;
  ref: any;
  type: any;
}

type Key = string | number | undefined | null;