Element Creation and Management

/**
 * Creates a virtual DOM element
 * @param type - Element type (string for DOM elements, function/class for components)
 * @param config - Props object containing element properties
 * @param children - Child elements (variadic arguments)
 * @returns RaxElement virtual DOM element
 */
function createElement(type, config, ...children);

import { createElement } from 'rax';

// DOM elements
const divElement = createElement('div', { className: 'container' }, 'Hello World');
const buttonElement = createElement('button', { 
  onClick: () => alert('clicked'),
  disabled: false
}, 'Click Me');

// Component elements
function MyComponent(props) {
  return createElement('span', null, props.text);
}

const componentElement = createElement(MyComponent, { text: 'Hello' });

// Multiple children
const listElement = createElement('ul', null,
  createElement('li', { key: '1' }, 'Item 1'),
  createElement('li', { key: '2' }, 'Item 2'),
  createElement('li', { key: '3' }, 'Item 3')
);

// With JSX (requires transpilation)
// const jsxElement = <div className="container">Hello World</div>;

/**
 * Fragment component for grouping children without wrapper elements
 * @param props - Props object with children property
 * @returns props.children directly (no wrapper element created)
 */
function Fragment(props);

import { createElement, Fragment } from 'rax';

// Using Fragment to group elements
function MyComponent() {
  return createElement(Fragment, null,
    createElement('h1', null, 'Title'),
    createElement('p', null, 'Description'),
    createElement('button', null, 'Action')
  );
}

// With JSX (requires transpilation)
// function MyComponent() {
//   return (
//     <>
//       <h1>Title</h1>
//       <p>Description</p>
//       <button>Action</button>
//     </>
//   );
// }

/**
 * Creates a ref object for element access
 * @returns RefObject with current property initially set to null
 */
function createRef();

import { createElement, createRef, Component } from 'rax';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }

  focusInput = () => {
    if (this.inputRef.current) {
      this.inputRef.current.focus();
    }
  }

  render() {
    return createElement('div', null,
      createElement('input', { ref: this.inputRef, type: 'text' }),
      createElement('button', { onClick: this.focusInput }, 'Focus Input')
    );
  }
}

/**
 * Creates a component that forwards refs to child elements
 * @param render - Render function that receives (props, ref) arguments
 * @returns Component function with ref forwarding capability
 */
function forwardRef(render);

import { createElement, forwardRef, createRef } from 'rax';

// Create a component that forwards refs
const FancyButton = forwardRef((props, ref) => {
  return createElement('button', {
    ref: ref,
    className: 'fancy-button',
    ...props
  }, props.children);
});

// Use the ref-forwarding component
function App() {
  const buttonRef = createRef();
  
  const handleClick = () => {
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  };

  return createElement('div', null,
    createElement(FancyButton, { 
      ref: buttonRef,
      onClick: handleClick 
    }, 'Click me'),
    createElement('button', { onClick: handleClick }, 'Focus other button')
  );
}

/**
 * Memoizes a component to optimize rendering performance
 * @param type - Component function to memoize
 * @param compare - Optional custom comparison function for props
 * @returns Memoized component that only re-renders when props change
 */
function memo(type, compare);

import { createElement, memo, useState } from 'rax';

// Basic memoization
const ExpensiveComponent = memo(function ExpensiveComponent(props) {
  console.log('ExpensiveComponent rendered');
  return createElement('div', null, `Value: ${props.value}`);
});

// Custom comparison function
const CustomMemoComponent = memo(
  function CustomMemoComponent(props) {
    return createElement('div', null, `Name: ${props.user.name}`);
  },
  (prevProps, nextProps) => {
    // Only re-render if user.name changes
    return prevProps.user.name === nextProps.user.name;
  }
);

// Using memoized components
function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return createElement('div', null,
    createElement(ExpensiveComponent, { value: 42 }), // Won't re-render when count changes
    createElement('button', { 
      onClick: () => setCount(count + 1) 
    }, `Count: ${count}`),
    createElement(CustomMemoComponent, { 
      user: { name, age: 30 } 
    })
  );
}

// Element type definition
interface RaxElement {
  type: string | Function;
  key: string | null;
  ref: Function | RefObject | null;
  props: Object;
  _owner: Component | null;
}

// Ref object type
interface RefObject<T> {
  current: T | null;
}

// Component type for memo and forwardRef
type ComponentType<P = {}> = Function;

// Comparison function type for memo
type MemoCompareFunction<P> = (prevProps: P, nextProps: P) => boolean;

// Forward ref render function type
type ForwardRefRenderFunction<P, T> = (props: P, ref: RefObject<T>) => RaxElement;