DOM Rendering and Operations

/**
 * Renders a React component tree to a DOM container
 * @param rootInput - Component or element to render
 * @param container - DOM element to render into
 * @param cb - Optional callback after render completes
 * @param context - Optional context object for component tree
 * @returns Component instance if rendering a class component, undefined otherwise
 */
function render(
  rootInput: InfernoNode,
  container: Element | SVGAElement | DocumentFragment,
  cb?: () => void,
  context?: any
): Component | undefined;

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

// Render a simple element
render(
  createElement('h1', null, 'Hello World!'),
  document.getElementById('app')
);

// Render a component with callback
class App extends Component {
  render() {
    return createElement('div', { className: 'app' }, 
      createElement('h1', null, 'My App'),
      createElement('p', null, 'Welcome to the application')
    );
  }
}

const appInstance = render(
  createElement(App),
  document.getElementById('root'),
  () => console.log('App rendered successfully')
);

// Render with JSX (requires transpilation)
render(<App />, document.getElementById('root'));

// Re-render with new props (updates existing DOM)
render(
  createElement(App, { theme: 'dark' }),
  document.getElementById('root')
);

/**
 * Hydrates server-rendered markup with React components
 * @param rootInput - Component or element to hydrate
 * @param container - DOM element containing server-rendered content
 * @param cb - Optional callback after hydration completes
 * @returns Component instance if hydrating a class component, undefined otherwise
 */
function hydrate(
  rootInput: InfernoNode,
  container: Element | SVGAElement | DocumentFragment,
  cb?: () => void
): Component | undefined;

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

// Hydrate server-rendered content
function App({ initialData }) {
  return createElement('div', { className: 'app' },
    createElement('h1', null, 'My App'),
    createElement('div', null, initialData.message)
  );
}

// Hydrate existing server-rendered HTML
hydrate(
  createElement(App, { initialData: window.__INITIAL_DATA__ }),
  document.getElementById('app'),
  () => console.log('Hydration complete')
);

// Hydration preserves server-rendered DOM structure
// and attaches event listeners without re-creating elements

/**
 * Unmounts a React component tree from a DOM container
 * @param container - DOM element containing the component to unmount
 * @returns true if a component was unmounted, false if no component found
 */
function unmountComponentAtNode(
  container: Element | SVGAElement | DocumentFragment
): boolean;

import { render, unmountComponentAtNode, createElement } from "inferno-compat";

const container = document.getElementById('app');

// Render a component
render(createElement('div', null, 'Hello'), container);

// Later, unmount the component
const wasUnmounted = unmountComponentAtNode(container);
console.log(wasUnmounted); // true

// Container is now empty and component cleanup has occurred
console.log(container.innerHTML); // ''

// Attempting to unmount again returns false
const wasUnmountedAgain = unmountComponentAtNode(container);
console.log(wasUnmountedAgain); // false

/**
 * Finds the DOM node associated with a component instance
 * @param component - Component instance or DOM element
 * @returns DOM element associated with the component, or null if not found
 */
function findDOMNode(component: Component | Element | null): Element | null;

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

class MyComponent extends Component {
  componentDidMount() {
    // Find DOM node for this component
    const domNode = findDOMNode(this);
    if (domNode) {
      domNode.style.backgroundColor = 'lightblue';
      domNode.focus();
    }
  }
  
  render() {
    return createElement('input', { 
      type: 'text',
      placeholder: 'Enter text here'
    });
  }
}

// Render and get component reference
const componentInstance = render(
  createElement(MyComponent),
  document.getElementById('app')
);

// Find DOM node from component instance
const domElement = findDOMNode(componentInstance);
console.log(domElement.tagName); // 'INPUT'

// Can also pass DOM elements directly
const sameElement = findDOMNode(domElement);
console.log(sameElement === domElement); // true

// Returns null for invalid inputs
console.log(findDOMNode(null)); // null

/**
 * Renders a component subtree with parent component context
 * @param parentComponent - Parent component providing context
 * @param vNode - Component or element to render
 * @param container - DOM element to render into
 * @param callback - Optional callback after render completes
 * @returns Component instance of the rendered subtree
 */
function unstable_renderSubtreeIntoContainer(
  parentComponent: Component,
  vNode: InfernoNode,
  container: Element,
  callback?: () => void
): Component;

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

class Modal extends Component {
  render() {
    return createElement('div', { className: 'modal' },
      createElement('h2', null, 'Modal Title'),
      createElement('p', null, this.context.message)
    );
  }
}

class App extends Component {
  getChildContext() {
    return { message: 'Hello from parent context' };
  }
  
  openModal = () => {
    const modalContainer = document.getElementById('modal-root');
    
    // Render modal with this component's context
    unstable_renderSubtreeIntoContainer(
      this,
      createElement(Modal),
      modalContainer,
      () => console.log('Modal rendered with parent context')
    );
  }
  
  render() {
    return createElement('div', null,
      createElement('button', { onClick: this.openModal }, 'Open Modal')
    );
  }
}